/* Set Font */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
h1, h2, h3, h4, h5, h6, p, .h5p-multichoice *, .h5p-true-false-answer, .h5p-question-feedback-content-text {
    font-weight: 400 !important;
}

/* Stansardise H2 */
h2 {
    font-size: calc(var(--h5p-theme-font-size-xl)*1.4) !important;
}

/* Change Colour of H3 Type */
h3 {
    color: var(--h5p-theme-main-cta-base);
}

/* Link Color */
a {
    color: var(--h5p-theme-main-cta-base);
}

html.h5p-iframe .h5p-content {
    font-size: var(--h5p-theme-font-size-l);
}

/* Use H6 as 'ToDo' Label */
h6 {
    font-size: var(--h5p-theme-font-size-xl);
    display: flex;
    margin-top: unset;
    margin-bottom: 1.2em;
    text-transform: uppercase;
}

h6:before {
    margin-right: 5px;
    content: "\f040";
    font-family: "H5PFontAwesome4";
    color: var(--h5p-theme-main-cta-base);
}

/* Remove Empty Feedback */
.h5pmods-empty-feedback {
  margin-top: -1px;
  padding-bottom: 0 !important;
}

.h5pmods-empty-feedback .h5p-feedback-inner {
  display: none !important;
}

/* Root Variables */

:root {
  --h5p-theme-main-cta-base: #0099ff;
  --h5p-theme-secondary-cta-base: #E3E9F1;
  --h5p-theme-alternative-base: #EBF4FE;
  --h5p-theme-background: #F9FBFF;
  --h5p-theme-focus: #006FBF; /*TODO: not yet in use */ 

  --h5p-theme-main-cta-light: #0099ff;
  --h5p-theme-main-cta-dark: #005FA3;
  --h5p-theme-contrast-cta: #FFF !important;
  --h5p-theme-contrast-cta-white: #0099ff !important;

  --h5p-theme-contrast-cta-light: color-mix(in srgb, var(--h5p-theme-main-cta-base), transparent 90%);

  --h5p-theme-secondary-cta-light: #F5F7FA;
  --h5p-theme-secondary-cta-dark: #D3DCE9;
  --h5p-theme-secondary-contrast-cta: #202122;
  --h5p-theme-secondary-contrast-cta-hover: #EBF7FF;

  --h5p-theme-alternative-light: #eff9ff;
  --h5p-theme-alternative-dark: #8fd2ff;
  --h5p-theme-alternative-darker: #bfe5ff;

  --h5p-theme-text-primary: #232C39;
  --h5p-theme-text-secondary: #354054;
  --h5p-theme-text-third: #737373;
  --h5p-theme-ui-base: #FFFFFF;
  --h5p-theme-stroke-1: #DCDFFA;
  --h5p-theme-stroke-2: #EDEEFB;
  --h5p-theme-stroke-3: #E5E5E5;
  --h5p-theme-border-radius-large: 0.5rem;
  --h5p-theme-border-radius-medium: 0.375rem;
  --h5p-theme-border-radius-small: 0.25rem;
  --h5p-theme-font-name: 'Lato', sans-serif;
  /* --h5p-theme-font-name: "Inter", sans-serif; */

  --h5p-theme-feedback-correct-main: #28BA6A;
  --h5p-theme-feedback-correct-secondary: #f2fbf6;
  --h5p-theme-feedback-correct-third: #d7f2e3;
	
  --h5p-theme-feedback-incorrect-main: #EF3E46;
  --h5p-theme-feedback-incorrect-secondary: #fef3f3;
  --h5p-theme-feedback-incorrect-third: #fcdbdc;

  --h5p-theme-feedback-neutral-main: #F7BA45;
  --h5p-theme-feedback-neutral-secondary: #5E4817;
  --h5p-theme-feedback-neutral-third: #F0EBCB;
}

/* Generic Setup */

html.h5p-iframe .h5p-content {
    color: var(--h5p-theme-text-primary);
}
/* Button Border Width */
.h5p-theme-button {
    border-width: 1px;
    font-weight: 400;
}

/* Space wording for easier reading */
.h5p-question-introduction {
    line-height: 1.2;
}

/* Check Answer Hover Icon */
.h5p-theme-check:before {
    content:"\e903";
}

/* Unordered List Icon Change */
.h5p-advanced-text ul {
    list-style: none;
}


/* Core Container Setup
.h5p-content, .h5p-image-hotspots, .h5p-image-hotspots-container {
    background-color: transparent;
}

.h5p-content {
    border: none;
} */


.h5p-advanced-text ul > li::before {
    position: absolute;
    left: 1.5em;
    content: '\f105';
    font-family: 'H5PFontAwesome4';
    color: var(--h5p-theme-main-cta-base);
    margin-right: 5px;
}

.h5p-advanced-text ul > li {
    list-style-type: none;
}

/* Standarise Colour On Buttons & Toggles */
.h5p-interactive-video .h5p-text-interaction>.h5p-interaction-button, .h5p-interactive-video .h5p-table-interaction>.h5p-interaction-button, .h5p-interactive-video .h5p-link-interaction>.h5p-interaction-button, .h5p-interactive-video .h5p-image-interaction>.h5p-interaction-button, .h5p-interactive-video .h5p-text-interaction:hover>.h5p-interaction-button, .h5p-interactive-video .h5p-table-interaction:hover>.h5p-interaction-button, .h5p-interactive-video .h5p-link-interaction:hover>.h5p-interaction-button, .h5p-interactive-video .h5p-image-interaction:hover>.h5p-interaction-button {
    background-color: #0099ff;
}


/* Image Hotspots */
.h5p-image-hotspots-container {
    overflow: visible;
}

.h5p-image-hotspot-popup-header {
    font-weight: 400;
}

.h5p-image-hotspot.active, .h5p-image-hotspot:focus, .not-an-ios-device .h5p-image-hotspot:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.h5p-image-hotspot {
    font-size: 1.1em;
    height: 1.1em;
    width: 1.1em;
}

.h5p-image-hotspot-popup-body-fraction.h5p-audio-wrapper.h5p-theme {
    position: absolute;
    right: 10px;
    bottom: 10px;
}


/* Show Answer Icon */

.h5p-theme-show-solutions:before {
    content: "\f1cd";
    font-family: 'H5PFontAwesome4' !important;
}

/* Ensure Feedback Images are contained */

.h5p-question-feedback img, .h5p-essay-input-field-label img {
    max-width: 100%;
}

/* Remove Tooltip Icon - Randomly displays on some content */
.joubel-icon-tip-normal {
    display: none;
}

/* Question Feedback Table - Column Widths */
.h5p-question-explanation-list {
    grid-template-columns: 0.5fr 1fr;
}

/* Summary Statement Questions */
.h5p-summary .h5p-panel:not(.panel-disabled) .summary-claim-unclicked, .h5p-summary li.summary-failed > p, .h5p-summary li.summary-failed, .h5p-summary .summary-container li, .h5p-summary li.summary-failed:before, .h5p-summary .summary-score, .h5p-summary .summary-progress-numeric  {
    line-height: var(--h5p-theme-spacing-l);
    font-weight: 400;
}

/* KEY POINTS START /*
/*: Apply styling to key points */
.h5p-content code {
    border-radius: 12px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.key-point, .h5p-content code:not(.h5p-question-feedback code, .h5p-popup-wrapper code, .h5p-course-presentation .h5p-element .h5p-element-outer.h5p-advancedtext-outer-element code, .h5p-feedback-text code) {
    background-color: #0099ff20;
    margin-top: -20px;
    margin-bottom: -20px;
    padding: 10px 10px 10px 15px;
    border: 1px solid #e7e9ec;
    border-radius: 10px;
    display: flex;
    line-height: 1.3;
    font-weight: 400;
}

.h5p-essay-solution-sample-text code {
    margin-top: 0;
    margin-bottom: 0;
    padding: 10px 10px 10px 15px;
    border: 0px solid #e7e9ec;
    border-radius: 10px;
    display: flex;
    line-height: 1.3;
    font-weight: 400;
}

.key-point:before, .h5p-advanced-text:not(.h5p-element-inner) code:before {
    /*position: fixed; */
    content: "\f08d";
    font-family: 'H5PFontAwesome4';
    font-size: 1.5em;
    color: #0099ff;
    transform: rotate(-20deg);
    margin-left: -10px;
    margin-top: -25px;
}

.h5p-question-feedback code:before, .h5p-feedback-text code:before {
    display: none;
}

/* .h5p-course-presentation .h5p-element .h5p-element-inner.h5p-advanced-text code:before {
    display: none;
} */

.h5p-popup-wrapper code:before {
    display: none;
}
/* KEY POINTS END */

/* ORDERED LIST START (Bullet changes) */

/* START: ORDERED LISTS (ol) numbers with latin and roman - this is the new WITH parenthesis */

/* Removes default ordered list for replacing with fontawsome */

.h5p-advanced-text ol > li li {
    list-style-type: none !important;
}

.h5p-advanced-text ol > li {
    list-style-type: none !important;
}

.h5p-advanced-text ol {
  counter-reset: list;
}

.h5p-advanced-text ol > li:before {
  content: "("counter(list, lower-alpha) ")  ";
  counter-increment: list;
  display: inline-block;
  margin-left: -1.7em;
  width: 1.7em;
}

.h5p-advanced-text ol > li li:before {
  content: "("counter(list, lower-roman) ") ";
  counter-increment: list;
  display: inline-block;
  margin-left: -1.7em;
  width: 1.7em;
}

/* START Additon of 'Debrief' in Feeback container */
.h5p-summary .h5p-question-evaluation-container.evaluation-mode:before, .h5p-blanks .h5p-question-evaluation-container.evaluation-mode:before, .h5p-image-hotspot-question .h5p-question-evaluation-container.evaluation-mode:before, .h5p-multichoice .h5p-question-feedback.h5p-question-visible:before, .h5p-true-false .h5p-question-evaluation-container.evaluation-mode:before {
    content: "Debrief";
}
/* Modification of Debrief Containers */
.h5p-essay.h5p-theme .h5p-question-evaluation-container {
    margin: 0 !important;
}

.h5p-essay.h5p-theme .h5p-question-explanation-container {
    margin: var(--h5p-theme-spacing-m) 0 0 0;
}

.h5p-question-explanation-correct, .h5p-question-explanation-wrong {
    margin-left: 0;
}

/* Specific Font Management for Feeback Text */
.h5p-question-explanation-text {
    /* font-size: clamp(18px, 1em, 18px); */
}

/* END Addition of 'Debrief' in feedback container */

/* START Change Select Icon in Multichoice & True/False Selections */
/* Change single select to font awsome tick */

.h5p-multichoice .h5p-answer[role="radio"][aria-checked="true"] .h5p-alternative-container:before, .h5p-true-false-answer[aria-checked=true]::before {
    color: var(--h5p-theme-main-cta-base);
    font-family: h5p-theme;
    content: "\e903";
}

.h5p-multichoice .h5p-answer .h5p-alternative-container:before, .h5p-true-false-answer:before {
    color: transparent;
}

/* Specific Multiple Choice Answers - removes line under selected answer */
.h5p-answer.h5p-selected .h5p-alternative-container::after {
    transform: scale(0);
}

/* Remove margin under multichoice feedback text */
.h5p-multichoice .h5p-feedback-text p {
    margin-bottom: 0;
}


/* Ensure Feedvack answer text is decent size */
.h5p-feedback-text, .h5p-multichoice .h5p-alternative-container {
    line-height: var(--h5p-theme-spacing-l);
    font-size: var(--h5p-theme-font-size-l);
}

.h5p-multichoice .h5p-answer .h5p-feedback-inner {
    font-size: unset;
}

/* Change Show Answer Icons for Multiple Choice Question */
.h5p-multichoice .h5p-should-not .h5p-solution-icon-radio:before, .h5p-multichoice .h5p-should-not .h5p-solution-icon-checkbox:before {
    color: transparent;
}
.h5p-multichoice .h5p-should .h5p-solution-icon-radio:before, .h5p-multichoice .h5p-should .h5p-solution-icon-checkbox:before {
    content:"\e903";
    color: var(--h5p-theme-main-cta-base);
}

/* Specific for Multichoice questions with multiple answer */
.h5p-multichoice .h5p-answer[role="checkbox"][aria-checked="true"] .h5p-alternative-container:before {
    content: "\e903";
    color: var(--h5p-theme-main-cta-base);
}

/* Specific True/False Answers - Removes tick from answer when marked */
.h5p-true-false-answer[aria-disabled=true]:before  {
    display: none;
}
/* END Change Select Icon in Multichoice & True/False Selections */

/* START: Interactive Video */
/* Generic Setup */

/* Spash Screen */
.h5p-interactive-video .h5p-splash {
    /* height: 100%;
    width: 100%; */
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(12px);
    color: var(--h5p-theme-text-third);
}

.h5p-interactive-video .h5p-splash:focus-visible, .h5p-interactive-video .h5p-splash:hover {
    backdrop-filter: none;
    background: rgba(255, 255, 255, .4);
}

.h5p-ivhotspot.rounded-rectangle {
    text-transform: uppercase;
    border-radius: 6px;
}


/* Remove Video Controls for content flagged as 'no controls' */
.h5pmods-iv-no-controls .h5p-control.h5p-more, 
.h5pmods-iv-no-controls .h5p-control.h5p-simple-time,
.h5pmods-iv-no-controls .h5p-control-bar,
.h5pmods-iv-no-controls .h5p-control.h5p-slider,
.h5pmods-iv-no-controls .h5p-control.h5p-star,
.h5pmods-iv-no-controls .h5p-control.h5p-time,
.h5pmods-iv-no-controls .h5p-control.h5p-playbackRate,
/* .h5pmods-iv-no-controls .h5p-control.h5p-mute, */
.h5pmods-iv-no-controls .h5p-control.h5p-quality,
.h5pmods-iv-no-controls .h5p-control.h5p-rewind10,
.h5pmods-iv-no-controls .h5p-interactive-video [aria-disabled=true].h5p-control {
    display: none !important;
}

.h5pmods-iv-no-controls .h5p-interactive-video .h5p-controls, .h5pmods-iv-no-controls.h5p-interactive-video .h5p-controls {
    justify-content: space-between;
    position: relative;
    background-color: transparent;
    margin-top: -36px;
    /* z-index: 2; */
    visibility: hidden;
}

.h5pmods-iv-no-controls .h5p-control.h5p-fullscreen, .h5pmods-iv-no-controls .h5p-control.h5p-play, .h5pmods-iv-no-controls .h5p-control.h5p-mute {
    position: relative;
    bottom: 15px;
    border-radius: 50%;
    backdrop-filter: blur(12px);
    padding: 5px;
}

.h5pmods-iv-no-controls .h5p-controls-left, .h5pmods-iv-no-controls .h5p-controls-right {
    visibility: visible;
}

.h5pmods-iv-no-controls .h5p-control.h5p-play {
    margin-left: 6px;
}

.h5pmods-iv-no-controls .h5p-interactive-video .h5p-control:before, .h5pmods-iv-no-controls .h5p-interactive-video .h5p-control:hover:before, .h5pmods-iv-no-controls.h5p-interactive-video .h5p-control:before, .h5pmods-iv-no-controls.h5p-interactive-video .h5p-control:hover:before  {
    color: var(--h5p-theme-text-third);
}

.h5pmods-iv-no-controls .h5p-interactive-video .h5p-controls-left .h5p-control:first-child, .h5pmods-iv-no-controls.h5p-interactive-video .h5p-controls-left .h5p-control:first-child {
    background-color: transparent;
}

/* Interactive Video Controls */
.h5p-interactive-video .h5p-controls {
    background: #fff;
}

.h5p-interactive-video .h5p-slider .ui-slider-handle {
    margin-top: -1px;
    margin-left: -1px;
    border: none;
    width: 4px;
    border-color: var(--h5p-theme-main-cta-base) ;
}

.h5p-seekbar-interaction.h5p-ivhotspot-interaction {
    visibility: hidden;
}

.h5p-interactive-video .h5p-buffered {
    background: #0099ff70;
}
.h5p-interactive-video .h5p-slider .ui-slider {
    background: var(--h5p-theme-alternative-base);
    z-index: unset;
}

.h5p-interactive-video .h5p-control.h5p-star.h5p-star-bar {
    display: none;
}

.h5p-interactive-video .h5p-seekbar-interaction:before {
    color: var(--h5p-theme-alternative-base);
    font-size: 12px;
    content: "";
}

.h5p-seekbar-interaction.h5p-multichoice-interaction.h5p-interaction-answered {
    z-index: 1;
}

.h5p-interactive-video .h5p-seekbar-interaction.h5p-interaction-answered:before {
    color: var(--h5p-theme-main-cta-base);
}

.h5p-interactive-video .h5p-seekbar-interaction:hover:before {
    color: var(--h5p-theme-alternative-darker);
}

.h5p-interactive-video .h5p-seekbar-interaction {
    z-index: 1;
    top: 5px;
}

.h5p-interactive-video .h5p-time .h5p-current, .h5p-interactive-video .h5p-simple-time .h5p-current, .h5p-interactive-video .h5p-control:before, .h5p-interactive-video .h5p-control:hover:before, .h5p-interactive-video .h5p-minimal-overlay .h5p-minimal-button:hover {
    color: var(--h5p-theme-main-cta-base);
}

.h5p-interactive-video .h5p-control:hover:before, .h5p-interactive-video .h5p-minimal-overlay .h5p-minimal-button:hover {
    scale: 1.3;
}

.h5p-interactive-video .h5p-controls-left .h5p-control:first-child {
    background-color: var(--h5p-theme-alternative-darker);
}

/* Interactive Video Summary Star */
.h5p-interactive-video .h5p-control.h5p-star.h5p-star-foreground.h5p-star-active {
    background: url("https://classroom.mysailingcourse.com/wp-content/uploads/star-blue.png") center/11px no-repeat;
}

.h5p-interactive-video .h5p-control.h5p-star.h5p-star-background {
    background: url("https://classroom.mysailingcourse.com/wp-content/uploads/star-blue.png") center/22px no-repeat;
}

.h5p-interactive-video .h5p-control.h5p-star.h5p-star-foreground {
    background: url("https://classroom.mysailingcourse.com/wp-content/uploads/star-lightblue.png") center/11px no-repeat;
    position: absolute;
}

.h5p-interactive-video .h5p-control.h5p-star.h5p-star-bar.h5p-star-bar-buffered {
    background: var(--h5p-theme-main-cta-base);
}

/* START Fill the blanks questions */
.h5p-blanks .h5p-text-input, .h5p-blanks .h5p-wrong .h5p-text-input {
    font-weight: 400;
}

.h5p-blanks .h5p-question-content p {
    font-size: var(--h5p-theme-font-size-l);
}

.h5p-blanks .h5p-correct-answer {
    border: 2px var(--h5p-theme-feedback-correct-main) dashed;
    font-weight: 400;
    /* font-size: var(--h5p-theme-font-size-m); */
}

.h5p-blanks .h5p-text-input {
    margin-bottom: 5px;
    /* font-size: unset; */
}

/* START: Course Presentation */

/* Define Font Sizes */
.h5p-course-presentation p {
    font-size: clamp(16px, 2vw, 17px);
}

.h5p-course-presentation h3 {
    font-size: clamp(18px, 2vw, 20px);
    margin: 0 0 0.25em;
}

.h5pmods-course-presentation .h5p-course-presentation-active-surface {
  transition: none !important;
}

.h5p-course-presentation .h5p-element {
    z-index: auto;
}


/* Stop Slider animation */
.h5p-course-presentation .h5p-slide.h5p-animate { 
/* display: block !important; */
-webkit-transition: -webkit-transform 0.0s ease-in-out !important;
-moz-transition: -moz-transform 0.0s ease-in-out !important;
-ms-transition: -ms-transform 0.0s ease-in-out !important;
transition: transform 0.0s ease-in-out !important;
}

.h5p-popup-overlay.h5p-advancedtext {
    background-color: transparent;
    backdrop-filter: blur(12px);
}

.h5p-course-presentation .h5p-close-popup {
    color: var(--h5p-theme-feedback-incorrect-main);
}

.h5p-course-presentation .h5p-close-popup:hover:before {
    background: var(--h5p-theme-ui-base);
}


.h5p-column-content.h5p-course-presentation {
    padding-left: var(--h5p-theme-spacing-s);
    padding-right: var(--h5p-theme-spacing-s);
}

/* START: Drag and drop */
.h5p-dragquestion .h5p-dropped.h5p-wrong::after, .h5p-dragquestion .h5p-dropped.h5p-correct::after {
    background: none;
    border: none;
    /* font-size: 0.85em; */
}

.h5p-question-content.h5p-dragquestion-has-no-background {
    border-bottom: none;
}

/* .h5p-dragquestion .h5p-draggable.h5p-correct::after, .h5p-dragquestion .h5p-draggable.h5p-wrong::after {
    background: none;
    font-size: 0.85em;
} */

.h5p-draggable {
    background: #fff;
    border: var(--border-width) solid var(--h5p-theme-main-cta-base);
    bottom-border-color: var(--h5p-theme-main-cta-base);
    box-shadow: none;
}

.h5p-draggable.h5p-draggable--dropped:not(.ui-draggable-disabled).hover, .h5p-draggable.h5p-draggable--dropped:not(.ui-draggable-disabled):hover, .h5p-draggable:not(.ui-draggable-disabled):hover, .h5p-draggable[aria-grabbed=true] {
    box-shadow: none;
}

.h5p-dragquestion .h5p-draggable:not(.h5p-draggable--has-handle):hover {
    border-color: var(--h5p-theme-main-cta-base);
}

.h5p-draggable.h5p-draggable--has-handle.ui-draggable.ui-draggable-handle.h5p-dropped {
    background: none;
    backdrop-filter: blur(6px);
}

.h5p-dragquestion .h5p-draggable p, .h5p-dragquestion .h5p-draggable span {
    /* margin-left: 6px; */
    font-weight: 600;
}

/* START: Dialog Cards */
.h5p-dialogcards-turned .h5p-dialogcards-card-text h3 {
    color: var(--h5p-theme-main-cta-base);
}

.h5p-dialogcards-turned .h5p-dialogcards-image-wrapper {
    height: 7em !important;
    /* margin-bottom: var(--h5p-theme-spacing-primary-small); */
}

.h5p-dialogcards .h5p-dialogcards-card-text-wrapper {
    height: 10em;
    padding: 0 0 50px 0;
    margin-bottom: 80px;
}

.h5p-dialogcards-turned .h5p-dialogcards-card-text-wrapper {
    height: 18em !important;
    overflow-y: scroll;
}

.h5p-dialogcards-card-footer {
    align-items: center;
}

button.h5p-theme-button.h5p-theme-primary-cta.h5p-theme-flip {
    position: fixed;
    bottom: 180px;
    max-width: 30%;
}



/* Sticky Narration Button */
.h5p-column-content.h5p-audio-wrapper {
    position: fixed;
    right: 40px;
    top: 125px;
}

.h5p-fullscreen .h5p-column-content.h5p-audio-wrapper {
    right: 30px;
    top: 100px;
}

.h5p-audio-inner, .h5p-audio-inner.h5p-audio-transparent .h5p-audio-minimal-button:hover, .h5p-audio-inner.h5p-audio-transparent .h5p-audio-minimal-button:active {
    background: transparent;
    /* opacity: 0; */
}

/* Lock the non-transparent audio element top-right */
.h5p-presentation-wrapper .h5p-element:has(.h5p-audio-inner:not(.h5p-audio-transparent)) {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  width: 64px !important;
  height: 64px !important;
  z-index: 50 !important;
}

/* Lock the outer wrappers */
.h5p-presentation-wrapper .h5p-element:has(.h5p-audio-inner:not(.h5p-audio-transparent)) .h5p-element-outer,
.h5p-presentation-wrapper .h5p-element:has(.h5p-audio-inner:not(.h5p-audio-transparent)) .h5p-element-inner,
.h5p-presentation-wrapper .h5p-element:has(.h5p-audio-inner:not(.h5p-audio-transparent)) .h5p-audio-wrapper,
.h5p-presentation-wrapper .h5p-element:has(.h5p-audio-inner:not(.h5p-audio-transparent)) .h5p-audio-inner {
  width: 64px !important;
  height: 64px !important;
}

.h5p-audio-inner:not(.h5p-audio-transparent) .h5p-audio-minimal-play-paused,
.h5p-audio-inner:not(.h5p-audio-transparent) .h5p-audio-minimal-pause,
.h5p-audio-inner:not(.h5p-audio-transparent) .h5p-audio-minimal-button {
    font-size: 20px !important;
    width: 62px !important;
    height: 62px !important;
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.1);
    color: #232C39;
    border: none;
    background: #ffffff50;
    backdrop-filter: blur(12px);
}

/* .h5p-audio-inner .h5p-audio-minimal-play-paused:not(.h5p-presentation-wrapper .h5p-audio-inner .h5p-audio-minimal-play-paused), 
.h5p-audio-inner .h5p-audio-minimal-pause, 
.h5p-audio-inner .h5p-audio-minimal-button:not(.h5p-presentation-wrapper .h5p-audio-inner .h5p-audio-minimal-button) {
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.1);
    color: var(--h5p-theme-text-third);
    border: none;
    background: #ffffff50;
    backdrop-filter: blur(12px);
} */

.h5p-column-content.h5p-audio-wrapper .h5p-audio-inner {
    background: transparent;
}

/* Audio Button for Presentations */
.h5p-element.h5p-element-button-big.h5p-transparent, .h5p-element-outer.h5p-audio-outer-element, .h5p-element-inner.h5p-audio-wrapper, .h5p-audio-inner {
    overflow: visible !important;
}


/* Tooltip text */
.h5p-column-content.h5p-audio-wrapper::after, .h5p-course-presentation .h5p-audio-wrapper:after, .h5p-image-hotspot-popup-body-fraction .h5p-audio-inner::after {
  content: "Narrate Content";
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  text-transform: uppercase;
  background: #000;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1000;
}

.h5p-column-content.h5p-audio-wrapper:has(.h5p-audio-inner.h5p-audio-transparent)::after, .h5p-course-presentation .h5p-audio-wrapper:has(.h5p-audio-inner.h5p-audio-transparent)::after {
  content: "Play Audio";
}

/* Arrow */
.h5p-column-content.h5p-audio-wrapper::before, .h5p-course-presentation .h5p-audio-wrapper:before, .h5p-image-hotspot-popup-body-fraction .h5p-audio-inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% - 4px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--h5p-theme-text-primary);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1000;
}



/* Specifically allow tooltips to show outside of the Presentation
.h5p-course-presentation .hidden-but-read, .h5p-course-presentation .h5p-box-wrapper, .h5p-course-presentation .h5p-presentation-wrapper {
    overflow: visible !important;
}

/* Show on hover */
.h5p-column-content.h5p-audio-wrapper:hover::after,
.h5p-column-content.h5p-audio-wrapper:hover::before,
.h5p-course-presentation .h5p-audio-wrapper:hover::after,
.h5p-course-presentation .h5p-audio-wrapper:hover::before,
.h5p-image-hotspot-popup-body-fraction .h5p-audio-inner:hover::after,
.h5p-image-hotspot-popup-body-fraction .h5p-audio-inner:hover::before {
  opacity: 1;
}


/* .h5p-column-content.h5p-audio-wrapper:before {
    width: 200px;
    content: 'Narrate Page';
    text-transform: uppercase;
}