.h5p-content {
  --h5p-brand: #F89838;
  --h5p-brand-hover: #e67f1f;
  --h5p-brand-active: #cc6f18;
  --h5p-brand-soft: #F8983840;
  --h5p-brand-soft-light: #F8983820;
  --h5p-brand-dropzone: #fcd6af;
  --h5p-brand-dark: #000000;
  --h5p-brand-white: #ffffff;

  --h5p-theme-main-cta-base: #F89838;
  --h5p-theme-main-cta-hover: #e67f1f;
  --h5p-theme-main-cta-active: #cc6f18;
  --h5p-theme-alternative-light: #fef5eb;
  --h5p-theme-alternative-base: #F89838;
  --h5p-theme-alternative-dark: #F7891B;
  
}  
/* ===== Global no borders in column ======  <- added by Jakub P 05.05.2026 */

.h5p-content .h5p-column-box-container {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* ===== Global no border-top ======  <- added by Jakub P 05.05.2026 */

.h5p-theme .h5p-navigation {
  border-top: none !important;
  
}
/* ===== Global white background ======  <- added by Jakub P 08.05.2026 */

.h5p-content,
html.h5p-iframe body,
.h5p-container {
  --h5p-theme-background: #ffffff !important;
  --h5p-theme-ui-base: #ffffff !important;
  background-color: #ffffff !important;

}

/* ===== Global H5P font ===== */

html.h5p-iframe,
html.h5p-iframe > body,
html.h5p-iframe .h5p-theme,
html.h5p-iframe > body .h5p-theme,
.h5p-content,
.h5peditor {
  --h5p-theme-font-name: "Playfair Display", serif !important;
  font-family: var(--h5p-theme-font-name) !important;
}

html.h5p-iframe .h5p-theme p,
html.h5p-iframe .h5p-theme span,
html.h5p-iframe .h5p-theme label,
html.h5p-iframe .h5p-theme td,
html.h5p-iframe .h5p-theme th,
html.h5p-iframe .h5p-theme h1,
html.h5p-iframe .h5p-theme h2,
html.h5p-iframe .h5p-theme h3,
html.h5p-iframe .h5p-theme h4,
html.h5p-iframe .h5p-theme h5,
html.h5p-iframe .h5p-theme h6,
html.h5p-iframe .h5p-theme input,
html.h5p-iframe .h5p-theme textarea,
html.h5p-iframe .h5p-theme select,
html.h5p-iframe > body .h5p-theme p,
html.h5p-iframe > body .h5p-theme span,
html.h5p-iframe > body .h5p-theme label,
html.h5p-iframe > body .h5p-theme td,
html.h5p-iframe > body .h5p-theme th,
html.h5p-iframe > body .h5p-theme h1,
html.h5p-iframe > body .h5p-theme h2,
html.h5p-iframe > body .h5p-theme h3,
html.h5p-iframe > body .h5p-theme h4,
html.h5p-iframe > body .h5p-theme h5,
html.h5p-iframe > body .h5p-theme h6,
html.h5p-iframe > body .h5p-theme input,
html.h5p-iframe > body .h5p-theme textarea,
html.h5p-iframe > body .h5p-theme select,
.h5p-content p,
.h5p-content li,
.h5p-content label,
.h5p-content td,
.h5p-content th,
.h5p-content h1,
.h5p-content h2,
.h5p-content h3,
.h5p-content h4,
.h5p-content h5,
.h5p-content h6,
.h5p-content input,
.h5p-content textarea,
.h5p-content select,
.h5p-content .h5p-theme-primary-cta {
  font-family: var(--h5p-theme-font-name) !important;
  font-size: 20px !important;
}

.h5p-container {
  padding: 2rem 1rem !important;
}

/* Buttons */
.h5p-content .h5p-joubelui-button,
.h5p-content .h5p-theme-button {
  border-radius: 20px !important;
  background-color: var(--h5p-brand) !important;
  border-color: var(--h5p-brand) !important;
  color: var(--h5p-brand-white) !important;
}


.h5p-content .h5p-theme-button:hover,
.h5p-content .h5p-joubelui-button:hover {
  background-color: var(--h5p-brand-hover) !important;
  border-color: var(--h5p-brand-hover) !important;
  color: var(--h5p-brand-white) !important;
}

.h5p-content .h5p-theme-button:active,
.h5p-content .h5p-joubelui-button:active,
.h5p-content .h5p-flashcards .h5p-current .h5p-cardholder,
.h5p-content .h5p-baq * {
  box-shadow: none !important;
}

/* Progress / alternatives */
.h5p-content .progress-dot {
  border: 1px solid var(--h5p-brand) !important;
}

.h5p-content .progress-dot.current:before {
  border: 1px solid #2D3748 !important;
}

.h5p-content .h5p-alternative-container {
  background-color: rgba(248, 152, 56, 0.2) !important;
}

.h5p-content .h5p-multichoice .h5p-answer[aria-checked="true"] .h5p-alternative-container,
.h5p-multichoice .h5p-answer[aria-checked="true"] .h5p-alternative-container:focus,
.h5p-multichoice .h5p-answer[aria-checked="true"] .h5p-alternative-container:active,
.h5p-multichoice .h5p-answer:not([aria-disabled="true"]):focus .h5p-alternative-container,
.h5p-content .h5p-li > .list-item-title-bar.importance-high,
.h5p-content .h5p-mark-the-words [aria-selected="true"],
.h5p-content .h5p-image-pair .ui-draggable-dragging {
  border: 1px solid var(--h5p-brand) !important;
  outline: none !important;
}

/* Orange backgrounds */
.h5p-content .progress-dot.answered,
.h5p-content .h5p-audio-minimal-button,
.h5p-content .h5p-question-content .h5p-drag-dropzone-container .h5p-drag-dropped,
.h5p-content .h5p-progressbar-part-show,
.h5p-content .h5p-drag-text [aria-grabbed]:not(.ui-state-disabled):hover,
.h5p-content .h5p-li > .list-item-title-bar.importance-high,
.h5p-content .h5p-memory-reset,
.h5p-content .line,
.h5p-content .event-line,
.h5p-content .h5p-start-button:hover,
.h5p-content .h5p-end-button:hover,
.h5p-content .h5p-nav-button:hover,
.h5p-content .h5p-confirmation-dialog-confirm-button,
.h5p-content .h5p-check-button,
.h5p-content .h5p-flashcards .h5p-answer .h5p-button,
.h5p-content .h5p-joubelui-progressbar-background,
.h5p-content .joubel-simple-rounded-button,
.h5p-content .show-solution-button,
.h5p-content .h5p-interactive-book-status-button,
.h5p-content .h5p-interactive-book-navigation-maintitle,
.h5p-content .h5p-interactive-book-status-progressbar-front,
.h5p-content .h5p-advent-calendar .h5p-advent-calendar-table,
.h5p-content .h5p-crossword-cell-empty,
.h5p-content .h5p-crossword-input-fields-group-clue-id,
.h5p-content .media-screen-button-start button,
.h5p-content .h5p-flashcards .h5p-visual-progress div,
.h5p-content .h5p-baq-countdown-text,
.h5p-content .h5p-audio-recorder-view .button.record,
.h5p-content .h5p-audio-recorder-view .button.download,
.h5p-content::-webkit-scrollbar {
  background-color: var(--h5p-brand) !important;
}

/* Light orange backgrounds */
.h5p-content .h5p-question-content .h5p-drag-dropzone-container .ui-droppable,
.h5p-content .h5p-question-content .h5p-drag-dropzone-container .ui-draggable:hover,
.h5p-content .h5p-interaction-button,
.h5p-content .h5p-mark-the-words [aria-selected="true"],
.h5p-content .sequencing-dropzone,
.h5p-content .h5p-image-pair-overlay,
.h5p-content .h5p-interactive-book-status-button:hover,
.h5p-content .h5p-crossword-highlight-normal,
.h5p-content .h5p-flashcards.h5p-standalone,
.h5p-content .h5p-baq-countdown-bg,
.h5p-content .h5p-dropped,
.h5p-content .ui-draggable-handle:hover,
.h5p-content .h5p-dropzone .h5p-inner {
  background-color: var(--h5p-brand-soft) !important;
}

.h5p-content .h5p-baq,
.h5p-content .h5p-sc-selected,
.h5p-content .summary-progress-numeric,
.h5p-content .h5p-true-false-answer[aria-checked=true],
.h5p-content .h5p-interactive-book-navigation-current,
.h5p-content .h5p-crossword .h5p-crossword-cell-content,
.h5p-content .h5p-sort-paragraphs-selected,
.h5p-content .h5p-sort-paragraphs-paragraph-button-down:hover,
.h5p-content .h5p-sort-paragraphs-paragraph-button-up:hover,
.h5p-content .h5p-sort-paragraphs-paragraph-button-down:active,
.h5p-content .h5p-sort-paragraphs-paragraph-button-up:active,
.h5p-content .h5p-cornell-notes-titlebar,
.h5p-content .h5p-baq-intro-page,
.h5p-audio-recorder-view [role=status],
.h5p-content .h5p-audio-recorder-view .button.retry {
  background-color: var(--h5p-brand-soft-light) !important;
}

.h5p-content .h5p-audio-recorder-view .button.retry {
  border: 2px solid var(--h5p-brand-soft-light) !important;
  color: var(--h5p-brand-dark) !important;
}

/* Text colors */
.h5p-content .h5p-question-content .h5p-drag-dropzone-container .ui-droppable,
.h5p-content .h5p-question-content .h5p-drag-dropzone-container .ui-draggable:hover,
.h5p-content .h5p-drag-text [aria-grabbed]:not(.ui-state-disabled):hover,
.h5p-content .h5p-sort-paragraphs-selected,
.h5p-content .h5p-text-input-field-label,
.h5p-content .h5p-cornell-notes-button-visibility,
.h5p-content .h5p-flashcards .h5p-description,
.h5p-content .h5p-flashcards .h5p-progress,
.h5p-content .h5p-baq .question,
.h5p-content .odometer-value,
.h5p-content .h5p-question-feedback-content-text,
.h5p-content .solution-text,
.h5p-content .status-container-values .value,
.h5p-content .status-container-values .delimiter,
.h5p-content .status-container-values .max-value,
.h5p-content .h5p-audio-recorder-view [role=status].done {
  color: var(--h5p-brand-dark) !important;
}

.h5p-content .h5p-question-content .h5p-drag-dropzone-container .h5p-drag-dropped,
.h5p-content .h5p-start-button:hover,
.h5p-content .h5p-end-button:hover,
.h5p-content .h5p-nav-button:hover {
  color: var(--h5p-brand-white) !important;
}

.h5p-content .h5p-start-button,
.h5p-content .h5p-nav-button,
.h5p-content .h5p-end-button,
.h5p-content .h5p-interactive-book-status-button,
.h5p-content .h5p-interactive-book-navigation-chapter-title-text,
.h5p-interactive-book-status-progress-number,
.h5p-content .h5p-interactive-book-status-progress-divider,
.h5p-content .h5p-crossword-input-fields-group-extra-clue,
.h5p-content .h5p-sort-paragraphs-paragraph-button-down,
.h5p-content .h5p-sort-paragraphs-paragraph-button-up,
.h5p-content .h5p-cornell-date,
.h5p-content .status-container::before,
.h5p-content .h5p-flashcards .h5p-button.h5p-next:before,
.h5p-content .h5p-audio-recorder-view .button.done,
.h5p-content .h5p-question-feedback-content,
.h5p-content .word-solved,
.h5p-content .feedback-text,
.h5p-content .icon-previous,
.h5p-content .icon-next {
  color: var(--h5p-brand) !important;
}

.h5p-content .h5p-game-map-toolbar-tool-bar .toolbar-buttons .toolbar-button,
.h5p-content .h5p-interactive-book-status-arrow .navigation-button,
.h5p-content .h5p-interactive-book-status-fullscreen.h5p-interactive-book-enter-fullscreen::before,
.h5p-content .h5p-interactive-book-status-fullscreen.h5p-interactive-book-exit-fullscreen::before,
.h5p-content.h5p-interactive-book-enter-fullscreen {
  color: var(--h5p-brand-dark) !important;
  text-shadow: none !important;
}

/* Borders / focus */
.h5p-content .h5p-true-false-answer[aria-checked=true],
.h5p-content .h5p-start-button,
.h5p-content .h5p-nav-button,
.h5p-content .h5p-end-button,
.h5p-content .h5p-sort-paragraphs-selected,
.h5p-content .h5p-info-wall-searchbox:focus,
.h5p-content .h5p-flashcards .h5p-textinput:focus,
.h5p-content .h5p-audio-recorder-view .button.record,
.h5p-content .h5p-audio-recorder-view .button.done,
.h5p-content .h5p-audio-recorder-view .button.download,
.h5p-content .h5p-dictation .h5p-text-input:focus {
  border-color: var(--h5p-brand) !important;
}

.h5p-content .h5p-true-false-answer:focus,
.h5p-content .h5p-image-pair .ui-draggable-dragging,
.h5p-content .h5p-sort-paragraphs-paragraph:hover,
.h5p-content .h5p-flashcards .h5p-textinput:focus,
.h5p-content .h5p-dictation .h5p-text-input:focus,
.h5p-content .h5p-blanks .h5p-text-input:focus,
.h5p-content .h5p-flashcards .h5p-button:focus,
.h5p-content .h5p-image-pair-item-hover {
  box-shadow: 0 0 5px 2px var(--h5p-brand) !important;
}

.h5p-content .sequencing-dropzone,
.h5p-content .droppable.h5p-image-pair-item-hover {
  border: dashed 2px var(--h5p-brand) !important;
}

.h5p-content .h5p-audio-recorder-view .button.record,
.h5p-content .h5p-audio-recorder-view .button.done,
.h5p-content .h5p-audio-recorder-view .button.download,
.h5p-content .h5p-image-pair-item-hover,
.h5p-content .h5p-image-pair-item-selected,
.h5p-content .h5p-true-false-answer:hover {
  border: 2px solid var(--h5p-brand) !important;
}

.h5p-content .h5p-crossword .h5p-crossword-cell.h5p-crossword-highlight-focus {
  border-color: var(--h5p-brand-dark) !important;
}

/* Special cases */
.h5p-content .h5p-advent-calendar .h5p-advent-calendar-table {
  background-image: linear-gradient(60deg, var(--h5p-brand), var(--h5p-brand-soft)) !important;
}

.h5p-content .h5p-crossword-cell-clue-id-marker {
  background: var(--h5p-brand-white) !important;
  color: var(--h5p-brand-dark) !important;
}

.h5p-content .h5p-cardholder {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

/* Icon fonts */
.h5p-content .h5p-navigation .h5p-button,
.h5p-content .icon-previous,
.h5p-content .icon-next {
  font-family: "H5PFontIcons" !important;
  color: var(--h5p-brand) !important;
}

.h5p-content .h5p-flashcards .h5p-button.h5p-previous:before,
.h5p-content .h5p-flashcards .h5p-button.h5p-next:before,
.h5p-content .h5p-theme-button::before,
.h5p-content .h5p-theme-button::after,
.h5p-content .h5p-theme-flip::before,
.h5p-content .h5p-theme-results::before {
  font-family: "h5p-theme" !important;
}

.h5p-content .h5p-flashcards .h5p-button.h5p-previous:before,
.h5p-content .h5p-flashcards .h5p-button.h5p-next:before {
  padding-bottom: 5px;
}

/* Inline dropzones */
.h5p-content .h5p-dropzone.h5p-dropzone--inline [aria-dropeffect],
.h5p-theme .h5p-dropzone.h5p-dropzone--inline [aria-dropeffect] {
  background-color: var(--h5p-brand-dropzone) !important;
  border: 2px solid var(--h5p-brand-dropzone) !important;
  outline: none !important;
}
/* ===== H5P theme card fixes ===== */

.h5p-content .h5p-theme .h5p-cardholder,
.h5p-content .h5p-flashcards .h5p-cardholder {
  width: min(100%, 26rem) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  border: 1px solid var(--h5p-brand);
}

.h5p-content .h5p-dialogcards .h5p-dialogcards-cardwrap,
.h5p-content .h5p-dialogcards .h5p-cardholder,
.h5p-content .h5p-flashcards .h5p-cardholder-wrap {
  box-sizing: border-box !important;
}

/* ===== no border bottom on dialog cards ==== <- added by Jakub P on 05.05 */
.h5p-content .h5p-dialogcards .h5p-dialogcards-title-container {
  border-bottom: 0 !important;
}

/* ===== no borders on droppable words ==== <- added by Jakub P on 08.05 */
.h5p-content .h5p-drag-text .h5p-drag-droppable-words-container {
  padding: 0 !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  
}

/* ===== no borders on droppable words ==== <- added by Jakub P on 08.05 */
.h5p-content .h5p-mark-the-words .h5p-word-inner {
  background-color: transparent !important;
  border: none !important;
   
}

/* ===== no background & border in fill in the blanks ===== <- added by Jakub P on 08.05 */
.h5p-content .h5p-blanks .h5p-question-content {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  font-weight: 500;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== draggable font & buttons change, no handle ===== <- added by Jakub P on 08.05 */
.h5p-content .h5p-theme .h5p-draggable {
  font-weight: normal !important;
  padding: 0 !important;
  background: #EAEAEA !important;
  border: none !important;
  box-shadow: none !important;
}

/* ===== dialogcards background & shadow override ===== <- added by Jakub P on 08.05 */
.h5p-content .h5p-dialogcards .h5p-dialogcards-cardwrap,
.h5p-content .h5p-dialogcards .h5p-dialogcards-cardwrap > * {
  background: transparent !important;
  border: none !important;
  }

.h5p-content .h5p-theme .h5p-draggable::before {
  content: none !important;
  display: none !important;
}

.h5p-content .h5p-dialogcards img,
.h5p-content .h5p-flashcards img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

.h5p-content .h5p-dialogcards .h5p-theme-button,
.h5p-content .h5p-flashcards .h5p-joubelui-button,
.h5p-content .h5p-flashcards .h5p-button {
  min-height: 40px !important;
}

/* ===== Mobile fixes ===== */

@media (max-width: 768px) {
  .h5p-container {
    padding: 1rem 0.5rem !important;
  }

  .h5p-content .h5p-theme .h5p-cardholder,
  .h5p-content .h5p-flashcards .h5p-cardholder {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0.75rem !important;
    border-radius: 12px !important;
	
  }

  .h5p-content .h5p-dialogcards .h5p-dialogcards-cardwrap,
  .h5p-content .h5p-dialogcards .h5p-cardholder,
  .h5p-content .h5p-flashcards .h5p-cardholder-wrap {
    padding: 0.75rem !important;
  }

  .h5p-content .h5p-dialogcards .h5p-theme-button,
  .h5p-content .h5p-flashcards .h5p-joubelui-button,
  .h5p-content .h5p-flashcards .h5p-button,
  .h5p-content .h5p-start-button,
  .h5p-content .h5p-nav-button,
  .h5p-content .h5p-end-button {
    width: 100% !important;
    justify-content: center !important;
  }

/* ===== test change for audio "speakers" icons =====  <- Added by Jakub P on 08.05*/
  .h5p-content .h5p-element.h5p-element-button-big.h5p-transparent {
	padding: var(--h5p-theme-spacing-m) !important;
}	
	
   .h5p-content .h5p-audio-inner .h5p-audio-minimal-button {
	color: var(--h5p-brand-white);
}

  .h5p-content .h5p-flashcards .h5p-textinput,
  .h5p-content .h5p-dictation .h5p-text-input,
  .h5p-content input[type="text"] {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .h5p-content .h5p-dialogcards .h5p-progress-outer,
  .h5p-content .h5p-flashcards .h5p-progress,
  .h5p-content .h5p-joubelui-progressbar {
    width: 100% !important;
    max-width: 100% !important;
  }

@media (min-width: 769px) {
  .h5p-content .h5p-element.h5p-element-button-big.h5p-transparent {
    padding: calc(var(--h5p-theme-spacing-m) * 0.5) !important;
    min-width: 44px !important;
    min-height: 44px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }
   
}