/* Make task title bigger */
div[class*="TaskHeaderTitle"] { 
   Font-size: 1.6rem;
}

/* Make quiz questions  less wide */

div[class*="StyledStack-sc"] label { 
   width: 95% !important;
   Margin-left: auto !important;
   Margin-right: auto !important;
   Max-width: 775px;
}

div[class*="StyledStack-sc"] div[class*="StyledDivider"] { 
   width: 95% !important;
   Margin-left: auto !important;
   Margin-right: auto !important;
   Max-width: 775px;
}

/* Update Workramp’s accordion css */

div[class*="AccordionContainer"] { 

    width: 95% !important;
    Margin-left: auto !important;
    Margin-right: auto !important;
    Max-width: 775px;
}

div[class*="AccordionContainer"] div[class*="TriggerWrapper"] {
    Background-color: #B195E8;
    Padding: 12px;
}

div[class*="AccordionContainer"] div[id*="react"] {
    Background-color: #b195e826;
}

/* remove back button from Resource page and style html for new back button*/

.university-resources-viewer div[class*="BackButtonWrapper"] { 
   display:none;
}


.resource_back_button {
    Margin-bottom: 15px;
    Padding: 6px;
    Width: 100px;
    Border-radius: 8px;
    text-align: center;
    background: black;
   }

.resource_back_button a {
    Color: white !important;
    Text-decoration:none !important;
}

/* end of remove back button from Resource page and style html for new back button*/


/* end of change default workramp callout colors */

/* change embed file width */

.attachment-preview-container {
        Height: 800px !important;
}

/* end change embed file width */

/* start general style changes to content */

html {
  
}

p {
    font-size: 17px;
}

li {
    font-size: 17px;
}


 li::marker { 
  color: #14167C;
}

div[class*="flip-card-content"] li::marker { 
  color: #ffffff !important;
}

div[class*="FormattedRichTextContent"] a { 
   text-decoration: underline !important;
}

.resource_page_content {
   background-color: #fafafa;
    padding: 50px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 10px;
}

/* make white background fountain white */

body {
     Background-color: #FAFAFA !important;
}

/* update table width */

table {
     Width: 80% !important;
     Margin: auto !important;
}

.ul-color-background li::marker { 
  color: white;
}


/* Add drop shadow and background grey to menu navigation bar */

.AL_Custom_TabBar {
    box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px !important; 
    Background-color: #F0F5F5 !important;
}


/* Size of h2 sections in pages to be bigger */
.academy-content div[class*="StyledStack"] h2 {
     Font-size: 2em;
}

/* Bring top left logo closer to first nav item */

.academy-logo {
   margin-right: 0px !important;
}

/* Custom design for resources pages */

.university-resources-viewer {
   background-color: #F7F6F6;
}

.university-resources-viewer--document {
   Background-image: URL(https://fountain-education-material.s3.us-east-1.amazonaws.com/Images/Media/hero_background.png);
   background-position: left;
   width: 100%;
   border-radius:8px;
   color:white;
}

/* Hide Resources label on resources cards */

.AL_Custom_SingleCard--resource .AL_Custom_ContentTypeLabel {
     Display: none;
}

/* Hide Resources from showing up in My Trainings and My Progress */

.AL_Custom_Template_MyTrainings .AL_Custom_SingleCard--resource {
    display:none;
}

.WRCustom__RedirectCard .AL_Custom_CardFooter {
  visibility: hidden;
}

/* Custom design for flip cards */

.flip-card-container {
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.flip-card-content {
   Background-color: #14167C !important;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background-image: url("https://fountain-education-material.s3.us-east-1.amazonaws.com/workramp_assets/touch_interactive.png"); /* Set transparent image for corner */
    background-position: bottom; /* Set positioning */
    background-repeat: no-repeat; /* Disable multiple background images  showing */
    Background-size: 50px;
}

.flip-card-content h3 {
    color: white;
}

.flip-card-content li {
    color: white !important;
}


.flip-card-content div[class*="StyledImageExpander"] {
   background: rgba(255, 255, 255, 0.07);
    color: white;
    border-radius: 12px;
    paddinG: 5%;
    box-shadow: 0px 30.029px 32px 0px rgba(0, 
    0, 0, 0.01), 0px 11.592px 8.694px 0px rgba(0, 
    0, 0, 0.01), 0px 4.729px 3.547px 0px rgba(0, 
    0, 0, 0), 0px 1.196px 0.897px 0px rgba(0, 0, 0, 
    0);
}

.flip-card-content div[class*="StyledImageExpander"] div[class*="FormattedRichTextContent"] {
    color:white;
}

.flip-card-content div[class*="StyledImageExpander"] div[class*="FormattedRichTextContent"] h3 {
    color:white !important;
}

.flip-card-content div[class*="StyledImageExpander"] div[class*="FormattedRichTextContent"] p {
     color:white !important;
}

.flip-card-content div[class*="StyledImageExpander"] div[class*="FormattedRichTextContent"]  h2 {
      color:white !important;
}

.flip-card-content div[class*="StyledImageExpander"] div[class*="FormattedRichTextContent"]  h4 {
      color:white !important;
}

.flip-card-content div[class*="StyledImageExpander"] div[class*="FormattedRichTextContent"]  h1 {
      color:white !important;
}

.flip-card-content a {
     Color:white;
     Text-decoration: underline;
}

.flip-card-content div[class*="StyledImageExpander"] div[class*="FormattedRichTextContent"] a {
     Color:white;
     Text-decoration: underline;
}

.flip-card-content div[class*="StyledImageExpander"] div[class*="FormattedRichTextContent"]  img {
     pointer-events: none;
}

.flip-card-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 720px !important;
}


/* End of design for flip cards */

/* change content width to be wider (or narrower for some objects) */


div[class*="DocumentObjectWrapperStyled"] {
     Max-width: 100% !important;
     Margin-left:auto !important;
     Margin-right:auto !important;
}

div[class*="FormattedRichTextContent"] {
     Max-width:100% !important;
     margin-left: auto;
     margin-right:auto;
}

div[class*="FormattedRichTextContent"] p {
     Max-width:820px !important;
     margin-left: auto;
     margin-right:auto;
}

div[class*="FormattedRichTextContent"]  h2 {
     Max-width:820px !important;
     margin-left: auto;
     margin-right:auto;
}

div[class*="FormattedRichTextContent"] h3 {
     Max-width:820px !important;
     margin-left: auto;
     margin-right:auto;
}

div[class*="FormattedRichTextContent"] h4 {
     Max-width:820px !important;
     margin-left: auto;
     margin-right:auto;
}

div[class*="FormattedRichTextContent"] h5 {
     Max-width:820px !important;
     margin-left: auto;
     margin-right:auto;
}

div[class*="FormattedRichTextContent"] ol {
     Max-width:820px !important;
     margin-left: auto;
     margin-right:auto;
}

div[class*="FormattedRichTextContent"] li {
     Max-width:820px !important;
     margin-left: auto;
     margin-right:auto;
}

div[class*="FormattedRichTextContent"] li img {
     Max-width:820px !important;
     margin-left: auto;
     Margin-right:auto;
     Margin-bottom:12px;
     width:100%;
}

div[class*="StyledCalloutContainer"] {
      max-width: 780px !important;
      margin-left: auto;
      margin-right: auto;
}

div[class*="StyledImageExpander"] figure {
      max-width: 85% !important;
      Margin-left: auto !important;
      Margin-right: auto !important;
}



img.task-previewer-file {
       max-width: 950px;
       margin-left: auto;
       margin-right: auto;
       width: 100%;
}

div[class*="EmbedWrapper"] {
      Max-width: 1000px !important;
     Margin-left: auto;
     Margin-right: auto;
}


.top_page_fullwidth_header_blue-background {
     background-image: URL('https://www.fountain.com/wp-content/uploads/2024/08/hire-bg.jpg') !important;
     Margin:0px !important; 
     Padding:25px !important;
}

.top_page_fullwidth_header_blue-background p {
     Color: white !important;
}

.top_page_fullwidth_header_purple-blue-background {
     background-image: URL('https://www.fountain.com/wp-content/uploads/2024/08/onboard-bg.jpg') !important;
     Margin:0px !important; 
     Padding:25px !important;
}

.top_page_fullwidth_header_purple-blue-background p {
     Color: white !important;
}

.top_page_fullwidth_header_blue-mix-background {
     background-image: URL('https://www.fountain.com/wp-content/uploads/2024/08/bg-hire-go.jpg') !important;
     Margin:0px !important; 
     Padding:25px !important;
}

.top_page_fullwidth_header_blue-mix-background p {
     Color: white !important;
}


/* end of change content width to be wider (or narrower for some objects) */


/* change width for survey questionnaire and other questions */


div[class*="HeaderWrapper"] {
    width: 95% !important;
    Margin-left: auto !important;
    Margin-right: auto !important;
    Max-width: 775px;
}


.flip-card-container div[class*="StyledStack-sc"] {
    Margin-left: auto !important;
    Margin-right: auto !important;
    Max-width: 775px;
}



div[class*="ButtonsContainer"] {
    width: 95% !important;
    Margin-left: auto !important;
    Margin-right: auto !important;
    Max-width: 775px;
}

div:has(> .simple-test-answerable) {
  Max-width: 800px;
  Margin-left: auto;
  margin-right:auto;
}

div:has(> h3 > div[class*="StyledCorrectHeader"]) {
  max-width: 800px;
  margin-left: auto;
  Margin-right: auto;
}


/* end of change width for survey questionnaire */

/* custom block assets */

 .list_section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 25px auto;
  }

  .list_line {
    flex: 1;
    height: 2px;
    background-color: #14167C; /* change color here */
  }

 .list_circle {
    width: 30px;
    height: 30px;
    margin: 0 10px;
    background-color: #14167C; /* same color as line */
    color: #fafafa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: sans-serif;
  }


.highlight_content_callout {
    Background-color: #B195E8;
    padding: 25px;
}

.highlight_content_callout-gradient {
    background: #398FFF;
    background: linear-gradient(323deg,rgba(57, 143, 255, 1) 0%, rgba(20, 22, 124, 1) 100%);
    padding: 25px;
}

.inner_highlight_content {
    background-color: #fafafa;
    padding: 25px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    Max-width: 1000px;
}

.try_it_out_content_callout {
    Background-color: #54B5FE;
    padding: 25px;
    Width: 100%;
}

.try_it_out_content {
    padding: 25px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.example_content_callout {
    Background-color: #00AADC; 
    padding: 25px;

}

.inner_example_content {
    background-color: #fafafa;
    padding: 25px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    Max-width: 1000px;
}

.inner_example_content li::marker {
    Color: black;
}


div[class*="FormattedRichTextContent"]  .full_width_color_background_grey {
    Background-color: #fafafa; 
    padding: 25px;
    Width: 100%;
    Max-width: 100% !important;
}

div[class*="FormattedRichTextContent"]  .full_width_color_background_grey img {
    Max-width: 100% !important;
}

div[class*="FormattedRichTextContent"]  .full_width_color_background_grey iframe {
    Max-width: 100% !important;
}

div[class*="FormattedRichTextContent"]  .full_width_color_background_grey p {
    Max-width: 800px !important;
}

div[class*="FormattedRichTextContent"]  .full_width_color_background_grey h2,h3,h4 {
    Max-width: 800px !important;
}

.inner_full_width_color_background_grey {
    Width: 75%;
    Margin-left: auto;
    Margin-right: auto;
}


div[class*="FormattedRichTextContent"]  .full_width_color_background_darkblue {
     Background-color: #14167C; 
     padding: 25px;
     Width: 100%;
     Max-width: 100% !important;

}

div[class*="task-object-checklist-test"] {
    Width: 70%;
}

.task-object-hot-spot-test {
    Width: 80%;
}

.task-object-test {
    Width: 80%;
}

/* end of custom block assets */



/* accordion interactive */


.accordion {
  width: 100%;
  max-width: 875px;
  margin: 0 auto;
}

.accordion .item {
  position: relative;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 12px;
  overflow: hidden;
  Padding: 18px;
}

.accordion .item h3 {
  margin: 0;
  padding: 16px;
  background: #B195E8;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion .plus {
  font-weight: bold;
  font-size: 1.5rem;
  transition: opacity 0.3s ease;
}

.accordion .item:hover .plus {
  opacity: 0;
}

.accordion .item p {
  position: relative; /* For pseudo-element positioning */
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordion .item ul {
  position: relative; /* For pseudo-element positioning */
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.accordion .item strong {
  position: relative; /* For pseudo-element positioning */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordion .item div {
  position: relative; /* For pseudo-element positioning */
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordion .item ol {
  position: relative; /* For pseudo-element positioning */
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.3s ease, padding 0.3s ease;
}



/* Add animated left border */
.accordion .item p::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background-color: #6D3DD4;
  transition: height 0.3s ease;
}

.accordion .item:hover p,
.accordion .item:hover ul,
.accordion .item:hover div,
.accordion .item:hover ol,
.accordion .item:hover strong
 {
  max-height: 500px;
  padding: 16px;
}

.accordion .item:hover p::before {
  height: 100%;
}

.accordion .close-link {
  display: block;
  margin-top: 12px;
  Color: #14167C;
  text-decoration: underline;
  font-size: 0.95rem;
}



@media (max-width: 480px) {
  .accordion .item h3 {
    padding: 14px;
    font-size: 1rem;
  }

  .accordion .plus {
    font-size: 1.3rem;
  }

  .accordion .item p {
    font-size: 0.95rem;
    padding: 0 14px;
  }

  .accordion .item:hover p {
    padding: 14px;
  }
}
/* end of accordion interactive */

 

/*  Start interactive tooltip */

.fixed-tooltip-trigger {
  position: relative;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}

/* Tooltip box */
.fixed-tooltip-trigger::after {
  content: attr(title);
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #141482;
  color: white;
  padding: 12px 16px 12px 20px; /* padding-left to make room for line */
  border-radius: 8px;
  max-width: 30vw;
  font-size: 18px;
  line-height: 1.4;
  white-space: normal;
  word-wrap: break-word;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

  /* This is to position the vertical line pseudo-element */
  position: fixed;
}

/* Add the vertical line */
.fixed-tooltip-trigger::before {
  content: "";
  position: fixed;
  bottom: 20px;
  right: calc(20px + 100% - 4px); /* line appears 4px to the left of tooltip */
  width: 2px;
  height: 0;
  background-color: white;
  opacity: 0;
  transition: height 0.3s ease, opacity 0.3s ease;
  z-index: 10000;
}

/* Animate both tooltip and vertical line on hover */
.fixed-tooltip-trigger:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.fixed-tooltip-trigger:hover::before {
  height: calc(100% - 24px); /* shrink slightly to match padding */
  opacity: 1;
}

/*  End interactive tooltip */


/*  start of interactive tabs */

.tabs-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1000px;
  margin: auto;
  border: .5px #e3e3e3 solid;
}

/* horizontal tab headers */
.tab-headers {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  Background-color: #094be20a;
  font-weight: bold;
}

.tab-header {
  padding: 10px 15px;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  margin-right: 10px;
  overflow: hidden;
  white-space: nowrap;
  max-width: 280px;
  text-overflow: ellipsis;
}

.tab-header.active {
  border-bottom-color: #14167C;
  Background-color: white;
}

.tab-content {
  display: none;
  padding: 20px 0;
}
.tab-content.active {
  display: block;
}

.tab-content img {
     Max-height: 500px;
     Width: auto;
}

/* End of tab section */


/*  start of carousel */

.carousel-container {
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 900px;
  margin: auto;
  position: relative;
     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding-bottom: 10px;
    border-radius: 8px;
    Margin-top: 20px;
   Margin-bottom: 20px;
  min-height: 450px;
}

.carousel-header {
  display: inline-block;
  Height: 1px;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  margin-right: 10px;
  visibility: hidden;  /* This hides the headers but keeps them clickable */
}

.carousel-header.active {
  border-bottom-color: #14167C;
}

.carousel-content {
  display: none;
  padding: 20px 0;
  Margin-left:auto; 
  Margin-right:auto;
  margin-top: auto;
  margin-bottom: auto;
}

.carousel-content.active {
  display: block;
  text-align:center;
  Width: 85%;
}

.carousel-content.active h3 {
  Padding-top: 12px;
}

.carousel-content.active p {
  Width: 90%;
}

.carousel-content.active img {
  Max-height: 400px;
  width: auto;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}


.carousel-buttons {
  position: absolute;
  top: 50%;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
}

.carousel-buttons button {
  Background-color: #14167C;
  color: white;
  border: none;
  width: 50px;
  cursor: pointer;
  Font-size: 4rem;
  Color: white;
}

.carousel-label {
    right: 0;
    position: absolute;
    padding: 15px;
    background-color: #14167C;
    border-radius: 0px 8px 0px 8px;
    color: white;
}

.carousel-label h3 {
     Margin: 0 !important;
     Color: white !important;
     Padding-top: 10px;
}
.carousel-label p {
     Padding: 8px;
}

.carousel-step-number {
    position: absolute;
    left: -10px;
    bottom: -10px;
    padding: 6px 12px 6px 12px;
    background-color: #B195E8;
    color: white;
    border-radius: 4px;
}

/*  end of carousel */


/* start timeline widget */

.vertical-sequence {
  width: 75%;
  margin: 0 auto;
  padding: 2rem 0;
  position: relative;
}

.vertical-block {
  background: #fff;
  border-top: 5px solid #14167C;
  padding: 1.5rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin-bottom: 0;
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.vertical-block.visible {
  opacity: 1;
  transform: translateY(0);
}

.vertical-connector {
  position: relative;
  width: 4px;
  height: 0;
  background: #14167C;
  margin: 0 auto;
  transition: height 1s ease;
}

.vertical-connector.animate {
  height: 50px;
}

/*end timeline widget */

/* multi row flip cards */

.cardfx-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  Max-width: 900px;
  Margin: auto;
}

.cardfx-card {
  background: transparent;
  width: 275px; /* Adjusted size */
  height: 275px; /* Adjusted size */
  perspective: 1000px;
  cursor: pointer;
}

.cardfx-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.cardfx-card.cardfx-flipped .cardfx-inner {
  transform: rotateY(180deg);
}

.cardfx-front,
.cardfx-back {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #14167C;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.cardfx-front img,
.cardfx-back img {
  width: 95%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.cardfx-front h3,
.cardfx-back h3 {
  margin: 1rem 0 0.5rem;
}

.cardfx-front-h3 {
       bottom: 2px;
       position: absolute;
       background-color: #00000045;
       padding-top: 1px !important;
       padding-bottom: 1px !important;
      padding-left: 5px !important;
      padding-right: 5px !important;
}

.cardfx-front h3,
.cardfx-back h3 {
  Color: white !important;
}

.cardfx-front h4,
.cardfx-back h4 {
  Color: white !important;
}

.cardfx-front p,
.cardfx-back p {
  margin: 0 1rem 1rem;
  text-align: center;
}

.cardfx-back {
  transform: rotateY(180deg);
}

.cardfx-icon {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  font-size: 1.25rem;
  opacity: 0.5;
  color: #fff;
  text-shadow: 0 0 4px rgba(0,0,0,0.6);
  pointer-events: none;
}

@media (max-width: 600px) {
  .cardfx-container {
    flex-direction: column;
    align-items: center;
  }

  .cardfx-card {
    width: 80%; /* Adjust for mobile to fit well */
    height: 80%; /* Keep cards proportional on smaller screens */
  }
}


/* end of multi row flip cards */

/* floating table of contents */

.floating-h2-nav {
  position: fixed;
  bottom: 20px;
  left: 200px;
  background: #141482c9;
  color: #fff;
  font-family: sans-serif;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  z-index: 9999;
  transition: all 0.3s ease;
}

.floating-h2-nav .toggle-button {
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.floating-h2-nav .caret {
  margin-left: 10px;
  transition: transform 0.3s ease;
}

.floating-h2-nav .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  font-size: 14px;
}

.floating-h2-nav .h2-list {
  display: none;
  flex-direction: column;
  margin-top: 10px;
}

.floating-h2-nav a {
  color: #fff;
  text-decoration: none;
  margin-bottom: 6px;
  font-size: 14px;
}

.floating-h2-nav a:hover {
  text-decoration: underline;
}

/* On hover show list and rotate caret */
.floating-h2-nav:hover .h2-list {
  display: flex;
}

.floating-h2-nav:hover .caret {
  transform: rotate(180deg);
}

@media screen and (max-width: 480px) {
     .floating-h2-nav { 
           display:none !important;
    }
}

/* end of floating table of contents */


/* external link button */

 .academy-external-link-button {
    background-color: #141482;
    color: white;
    width: 35%;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    margin: auto;
}

@media screen and (max-width: 1100px) {
      .academy-external-link-button {
          width: 70%;
  }
}


 .academy-external-link-button p {
     Font-size: 1.2rem;
     Font-weight: bold;
}

 .academy-external-link-button:hover {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/* end external link button */



/* start pop up image on hover code */

.popup-image-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
  
  /* Always visible bigger dotted underline */
  border-bottom: 2px dotted #6D3DD4;
}

.popup-image-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url('https://fountain-education-material.s3.us-east-1.amazonaws.com/Images/image_placeholder.png');
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

.popup-image-url {
  display: none;
}

.popup-image-preview {
  position: absolute;
  display: none;
  pointer-events: none;
  z-index: 9999;
  background: white;
  border: 1px solid #ccc;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
}

.popup-image-preview img {
  display: block;
  width: auto;
  height: auto;
  Max-width: 800px;     /* ⬅️ Hard max size */
  max-height: 80vh;     /* ⬅️ Prevents vertical overflow */
  min-width: 300px;     /* ⬅️ Optional: don't let tiny images look too small */
  object-fit: contain;  /* ⬅️ Ensures image scales down without distortion */
}







/* end pop up image on hover code */



/* hide resource completed */
.AL_Custom_SingleCard--resource .AL_Custom_CardFooter { visibility: hidden; }

/* end of hide resource completed */

/* increase certificate link size */

.hrUTZk { 
    color: white !important;
    padding: 6px 8px !important;
    background-color: #14167b;
    font-size: 1.5rem !important;
    text-decoration: underline !important;
}

.hrUTZk:hover { 
    color: #14167b !important;
    padding: 6px 8px;
    background-color: #14167b;
    font-size: 1.5rem !important;
    text-decoration: none !important;
    Background-color: white;
}

.ixmLpo {
    Margin-bottom:4px !important;
}

/* end of increase certificate link size */

/* hide number of tasks and questions on course preview page */

.AL_Custom_BannerStatsWrapper > div:nth-of-type(1),
.AL_Custom_BannerStatsWrapper > div:nth-of-type(2) {
  display: none;
}

/* end hide number of tasks and questions on course preview page */


/* Top banner header 50 50 with image and gradient */

.academy-banner-header {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 400px;
  overflow: hidden;
  color: white;
}

@media screen and (max-width: 1400px) {
      .academy-banner-header {
         height: 300px;
  }
}

@media screen and (max-width: 1100px) {
      .academy-banner-header {
         height: 200px;
  }
}

@media screen and (max-width: 900px) {
      .academy-banner-image {
         display:none;
  }
}

@media screen and (max-width: 950px) {
      .academy-banner-text p {
         display:none;
  }
}


.academy-banner-text {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(to right, #14167C, #5121ba); /* your gradient */
}

.academy-banner-text h2 {
  font-size: 2rem;
  margin: 0 !important;
  Color:white !important;
}

.academy-banner-underline {
  width: 100%;
  height: 2px;
  background-color: white;
  margin: 12px 0;
}

.academy-banner-subtitle {
  font-size: 1.2rem;
  margin: 0 !important;
}

.academy-banner-image {
  width: 50%;
  height: 100%;
}

.academy-banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Full width image with margin top 0*/
.full-width-image-no-margin-top {
    max-width:
}