/*Place your CSS code here*/
/* ============================================================
   Mobile SCORM viewer – responsive portrait (target 550 × 750)
   Scoped to SCORM/Tin Can content units only
   ============================================================ */
/* ── Mobile portrait (phones) ── */
@media (max-width: 767px) {
  .ef-content-area-scorm #ef-scorm-content.ef-scorm-embed,
  .ef-content-area-scorm .ef-scorm-embed {
    height: auto !important;
    padding-bottom: 0 !important;

    /* Fill full width */
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    /* Fill as much vertical space as possible */
    height: calc(100dvh - 120px) !important;
    max-height: calc(100dvh - 120px) !important;

    /* No fixed aspect ratio — let it stretch */
    aspect-ratio: unset !important;

    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  /* iframe fills the container */
  .ef-content-area-scorm #ef-scorm-content.ef-scorm-embed > iframe.embed-responsive-item,
  .ef-content-area-scorm .ef-scorm-embed > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
  }
}

/* ── Small tablets / large phones landscape ── */
@media (min-width: 768px) and (max-width: 991px) {
  .ef-content-area-scorm #ef-scorm-content.ef-scorm-embed,
  .ef-content-area-scorm .ef-scorm-embed {
    height: auto !important;
    padding-bottom: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    height: calc(100dvh - 140px) !important;
    max-height: calc(100dvh - 140px) !important;

    aspect-ratio: unset !important;

    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  .ef-content-area-scorm #ef-scorm-content.ef-scorm-embed > iframe.embed-responsive-item,
  .ef-content-area-scorm .ef-scorm-embed > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
  }
}

/* ── Desktop ── */
@media (min-width: 992px) {
  .ef-content-area-scorm #ef-scorm-content.ef-scorm-embed,
  .ef-content-area-scorm .ef-scorm-embed {
    height: auto !important;
    padding-bottom: 0 !important;
    width: 100%;
    height: calc(100dvh - 180px) !important;
    aspect-ratio: unset !important;
    position: relative;
  }

  .ef-content-area-scorm #ef-scorm-content.ef-scorm-embed > iframe.embed-responsive-item,
  .ef-content-area-scorm .ef-scorm-embed > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

/* DO NOT ADD/EDIT AFTER THIS LINE */
#ef-navbar, #ef-navbar li a.dropdown-toggle[aria-expanded="true"]{background-color:#812DC5;border-color:#812DC5;}
html.new-ui-html:root{--c-brand-primary:#812dc5;--c-brand-primary-darken-5:#7c28c0;--c-brand-primary-darken-7:#7a26be;--c-brand-primary-darken-10:#7723bb;--c-brand-primary-darken-15:#721eb6;--c-brand-primary-darken-17:#701cb4;--c-brand-primary-darken-20:#6d19b1;--c-brand-primary-darken-25:#6814ac;--c-brand-primary-lighten-7:#8834cc;--c-brand-primary-lighten-40:#a955ed;}