/* 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;
}
/* 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);
}

/* 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";
}

/* 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;
}

/* 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: -15px;
    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 */

/* Remove Video Controls for content flagged as 'no controls' */
.h5pmods-iv-no-controls .h5p-controls,
.h5pmods-iv-no-controls .h5p-control-bar {
  display: none !important;
}

.h5pmods-iv-no-controls .h5p-video-wrapper {
  margin-bottom: 0 !important;
}

/* 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 */
/* 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);
}


/* 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%;
}