/*
These custom elements should be placed in the Custom CSS tab OR within
the forked LX repo. These will create classes for various RTE elements within a course.
Note that you also need to clone the RTE Elements course from an existing academy (Anthology, G2)
so that the examples can be shown. They create the following elements:
 - info-box - general, resources, glossary, courses,
 - accordion
*/
<style>
  /* Transcript Toggle styles */

  .transcriptToggle {
    color:#0C3C92;
    margin-bottom:10px;
    position:relative;
  }

  .transcriptToggle {
    margin-bottom:20px;
  }

  .transcriptToggle::after {
    content:'';
    background-image: url("data:image/svg+xml,%0A%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L5 5L1 1' stroke='%230C3C92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    height:10px;
    width:10px;
    background-size:100% auto;
    background-repeat: no-repeat;
    background-position: center;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    transition:transform 0.2s;
    right:0;
  }

  .transcriptToggle.open::after {
    transform:translateY(-50%) rotate(180deg);
  }

  .transcriptContent {
    max-height: 0;
    transition: max-height 0.4s ease-out;
    overflow: hidden;
  }

  .transcriptContent.open {
    max-height:3000px;
    transition: max-height 0.6s ease-in;
    padding-bottom:24px;
  }


  /* Accordion styles */

  .fr-view .accordion,
  div[data-test='additional-information'] .accordion {
    background-color: transparent;
    border-top: 1px solid #000;
    cursor: pointer;
    padding: 25px 0;
    width: 100%;
    text-align: left;
    outline: none;
    transition: 0.4s;
    font-size: 26px;
    line-height: 125%;
    position:relative;
  }

  .fr-view .accordion:before,
  div[data-test='additional-information'] .accordion:before,
  .fr-view .accordion:after,
  div[data-test='additional-information'] .accordion:after {
    content: '';
    width:24px;
    height:24px;
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    background-color:#000;
    transition:opacity 0.2s;
  }

  .fr-view .accordion:before,
  div[data-test='additional-information'] .accordion:before {
    width:14px;
    height:2px;
  }

  .fr-view .accordion:after,
  div[data-test='additional-information'] .accordion:after {
    width:2px;
    height:14px;
    right:6px;
  }

  .fr-view .accordion.active:after,
  div[data-test='additional-information'] .accordion.active:after {
    opacity:0;
  }

  .fr-view .accordion-panel,
  div[data-test='additional-information'] .accordion-panel {
    padding: 0;
    background-color: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    font-size: 20px;
    line-height: 150%;
  }

  .fr-view .accordion-panel .accordion-panel-content,
  div[data-test='additional-information'] .accordion-panel .accordion-panel-content {
    padding-bottom:25px;
    max-width:600px;
  }


  .fr-view .accordion-panel p,
  div[data-test='additional-information'] .accordion-panel p {
    font-size: 20px;
    line-height: 150%;
  }



  .fr-view .accordion-panel:last-of-type,
  div[data-test='additional-information'] .accordion-panel:last-of-type {
    border-bottom:1px solid #000;
  }


  /* Labels styling */

  .fr-view .info-box, div[data-test='additional-information'] .info-box {
    padding: 64px 20px 20px;
    background: #f0f0ff;
    border-left: 4px solid #2d29fc;
    position: relative;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    margin-bottom: 25px;
  }
  .fr-view .info-box:after, div[data-test='additional-information'] .info-box:after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    top: 20px;
    left: 20px;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%232D29FC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 16V12' stroke='%232D29FC' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M12 8H12.01' stroke='%232D29FC' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .fr-view .info-box.general, div[data-test='additional-information'] .info-box.general {
    background: #f0f0ff;
  }
  .fr-view .info-box.general:after, div[data-test='additional-information'] .info-box.general:after {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%232D29FC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 16V12' stroke='%232D29FC' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M12 8H12.01' stroke='%232D29FC' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  }
  .fr-view .info-box.people, div[data-test='additional-information'] .info-box.people {
    background: #ead9e3;
    font-weight: 600;
  }
  .fr-view .info-box.people:after, div[data-test='additional-information'] .info-box.people:after {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 21V15L3 15V21' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z' stroke='%232D29FC' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M21 21V15H18.5' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M16 3.13C16.8604 3.35031 17.623 3.85071 18.1676 4.55232C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89318 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88' stroke='%232D29FC' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  }
  .fr-view .info-box.glossary, div[data-test='additional-information'] .info-box.glossary {
    background: #e8e8e8;
  }
  .fr-view .info-box.glossary:after, div[data-test='additional-information'] .info-box.glossary:after {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 3H6V21L12 17L18 21V3Z' stroke='%232D29FC' stroke-width='2'/%3E%3C/svg%3E%0A");
  }
  .fr-view .info-box.resources, div[data-test='additional-information'] .info-box.resources {
    background: #eff8fa;
  }
  .fr-view .info-box.resources .resource-blocks, div[data-test='additional-information'] .info-box.resources .resource-blocks {
    display: flex;
    flex-direction: column;
  }
  .fr-view .info-box.resources .resource-blocks a, div[data-test='additional-information'] .info-box.resources .resource-blocks a {
    color: #333132;
    background-color: #fff;
    padding: 20px 20px 54px;
    display: block;
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    margin-bottom: 25px;
    width: 100%;
    position: relative;
  }
  .fr-view .info-box.resources .resource-blocks a span, div[data-test='additional-information'] .info-box.resources .resource-blocks a span {
    display: block;
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
  }
  .fr-view .info-box.resources .resource-blocks a:hover, div[data-test='additional-information'] .info-box.resources .resource-blocks a:hover {
    color: #2d29fc;
  }
  .fr-view .info-box.resources .resource-blocks a:after, div[data-test='additional-information'] .info-box.resources .resource-blocks a:after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    bottom: 20px;
    right: 20px;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.32812 17L17.3281 7' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M7.32812 7H17.3281V17' stroke='%232D29FC' stroke-width='2'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .fr-view .info-box.resources:after, div[data-test='additional-information'] .info-box.resources:after {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%232D29FC' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M16.2417 7.76001L14.1217 14.12L7.76172 16.24L9.88172 9.88001L16.2417 7.76001Z' stroke='%232D29FC' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  }
  .fr-view .info-box.alert, div[data-test='additional-information'] .info-box.alert {
    background: #fff0f0;
    border-left: 4px solid #ff2a26;
  }
  .fr-view .info-box.alert:after, div[data-test='additional-information'] .info-box.alert:after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.76619 20L12 2.94365L22.2338 20H1.76619Z' stroke='%23990300' stroke-width='2'/%3E%3Cpath d='M12 9V13' stroke='%23990300' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M12 17H12.01' stroke='%23990300' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .fr-view .info-box.alert a, div[data-test='additional-information'] .info-box.alert a {
    color: #990300;
  }
  .fr-view .info-box.course, div[data-test='additional-information'] .info-box.course {
    background-color: #f5f6ff;
    border-left: 4px solid #2e29fc;
  }
  .fr-view .info-box.course:after, div[data-test='additional-information'] .info-box.course:after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='album 1'%3E%3Cpath id='Vector' d='M11 3V11L14 8L17 11V3' stroke='%232D29FC' stroke-width='2' stroke-linecap='square'/%3E%3Crect id='Rectangle 566' x='3' y='3' width='18' height='18' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath id='Vector 115' d='M7 3V21' stroke='%232D29FC' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
  }
  .fr-view .info-box.course .courses-wrapper, div[data-test='additional-information'] .info-box.course .courses-wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  .fr-view .info-box.course .courses-wrapper a, div[data-test='additional-information'] .info-box.course .courses-wrapper a {
    color: #333132;
    background-color: #fff;
    padding: 15px;
    display: flex;
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    margin-bottom: 10px;
    width: 100%;
    position: relative;
  }
  .fr-view .info-box.course .courses-wrapper a img, div[data-test='additional-information'] .info-box.course .courses-wrapper a img {
    margin-right: 20px;
    width: 140px;
    object-fit: cover;
  }
  .fr-view .info-box.course .courses-wrapper a > div, div[data-test='additional-information'] .info-box.course .courses-wrapper a > div {
    display: flex;
    flex-direction: column;
  }
  .fr-view .info-box.course .courses-wrapper a .title, div[data-test='additional-information'] .info-box.course .courses-wrapper a .title {
    color: #242424;
    font-size: 18px;
    line-height: normal;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .fr-view .info-box.course .courses-wrapper a .subtitle, div[data-test='additional-information'] .info-box.course .courses-wrapper a .subtitle {
    color: #6b686a;
    font-size: 11px;
    font-weight: 500;
    line-height: 14px;
  }
  .fr-view .info-box.course .courses-wrapper a .level, div[data-test='additional-information'] .info-box.course .courses-wrapper a .level {
    color: #2e29fc;
    font-size: 12px;
    font-weight: 600;
    margin-top: auto;
  }
  .fr-view .info-box.course .courses-wrapper a:after, div[data-test='additional-information'] .info-box.course .courses-wrapper a:after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M12 5L19 12L12 19' stroke='%232D29FC' stroke-width='2'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    right: 15px;
    bottom: 15px;
  }
  .fr-view .info-box.course .courses-wrapper a:hover, div[data-test='additional-information'] .info-box.course .courses-wrapper a:hover {
    text-decoration: none;
  }
  @media (min-width: 768px) {
    .fr-view .info-box, div[data-test='additional-information'] .info-box {
      padding: 20px 20px 20px 64px;
    }
    .fr-view .info-box.resources .resource-blocks, div[data-test='additional-information'] .info-box.resources .resource-blocks {
      flex-direction: row;
    }
    .fr-view .info-box.resources .resource-blocks a, div[data-test='additional-information'] .info-box.resources .resource-blocks a {
      margin: 0 10px;
    }
    .fr-view .info-box.resources .resource-blocks a:first-child, div[data-test='additional-information'] .info-box.resources .resource-blocks a:first-child {
      margin-left: 0;
    }
    .fr-view .info-box.resources .resource-blocks a:last-child, div[data-test='additional-information'] .info-box.resources .resource-blocks a:last-child {
      margin-right: 0;
    }
    .fr-view .info-box.course .courses-wrapper, div[data-test='additional-information'] .info-box.course .courses-wrapper {
      margin-left: -10px;
      margin-right: -10px;
    }
    .fr-view .info-box.course .courses-wrapper a, div[data-test='additional-information'] .info-box.course .courses-wrapper a {
      margin: 0 10px 20px;
      width: calc(50% - 20px);
    }
  }

</style>

<script>
  window.addEventListener("DOMContentLoaded", () => {
    handleAccordions()

    window.Northpass.subscribe("activityRender", (data) =>  {
      handleAccordions()
    })
  })

  function handleAccordions() {
    if (
      document.querySelectorAll(".accordion").length > 0 &&
      document.querySelectorAll(".accordion-panel").length > 0
    ) {
      var acc = document.getElementsByClassName("accordion");
      toggleAccordions(acc);
    }
  }

  function toggleAccordions(acc) {
    var i;
    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
      });
    }
  }
</script>