/*
 * Fullscreen Course Presentation layout.
 *
 * The runtime JavaScript keeps the presentation at the full viewport width
 * and centres the resulting 16:9 wrapper vertically. These CSS rules provide
 * the white fullscreen canvas and a no-script fallback.
 */

html.h5p-iframe,
html.h5p-iframe > body,
body.h5p-fullscreen,
body.h5p-semi-fullscreen,
.h5p-iframe-wrapper.h5p-fullscreen,
.h5p-iframe-wrapper.h5p-semi-fullscreen {
    background: #fff !important;
    margin: 0 !important;
}

.h5p-course-presentation.h5p-fullscreen,
.h5p-course-presentation.h5p-semi-fullscreen,
.h5p-fullscreen .h5p-course-presentation,
.h5p-semi-fullscreen .h5p-course-presentation,
:fullscreen .h5p-course-presentation,
:-webkit-full-screen .h5p-course-presentation {
    background: #fff !important;
    box-sizing: border-box !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100vw !important;
}

/* Fallback when JavaScript has not yet calculated the exact pixel offset. */
.h5p-course-presentation.h5p-fullscreen > .h5p-wrapper,
.h5p-course-presentation.h5p-semi-fullscreen > .h5p-wrapper,
.h5p-fullscreen .h5p-course-presentation > .h5p-wrapper,
.h5p-semi-fullscreen .h5p-course-presentation > .h5p-wrapper,
:fullscreen .h5p-course-presentation > .h5p-wrapper,
:-webkit-full-screen .h5p-course-presentation > .h5p-wrapper {
    left: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 100vw !important;
}

/* Once the JavaScript has applied the exact offset, do not apply the
   fallback transform as well. */
.h5p-course-presentation > .h5p-wrapper[data-local-h5pfullalign-centered="1"] {
    transform: none !important;
}

/*
 * EdApp-style scrollable slide body.
 *
 * The Course Presentation footer and progress/navigation controls remain
 * fixed. Only the active slide surface scrolls when its content is taller
 * than the visible slide area.
 */
.h5p-course-presentation.local-h5p-scrollable-presentation
    .h5p-slide.h5p-current.local-h5p-scrollable-slide {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    -webkit-overflow-scrolling: touch;
}

.h5p-course-presentation.local-h5p-scrollable-presentation
    .h5p-slide.h5p-current.local-h5p-scrollable-slide::-webkit-scrollbar {
    width: 0.75em;
}

.h5p-course-presentation.local-h5p-scrollable-presentation
    .h5p-slide.h5p-current.local-h5p-scrollable-slide::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.75);
}

.h5p-course-presentation.local-h5p-scrollable-presentation
    .h5p-slide.h5p-current.local-h5p-scrollable-slide::-webkit-scrollbar-thumb {
    background: rgba(70, 70, 70, 0.55);
    border: 0.15em solid rgba(255, 255, 255, 0.75);
    border-radius: 0.75em;
}

.h5p-course-presentation.local-h5p-scrollable-presentation
    .h5p-slide.h5p-current.local-h5p-scrollable-slide::-webkit-scrollbar-thumb:hover {
    background: rgba(45, 45, 45, 0.75);
}

/* The JavaScript expands overflowing text blocks and lets the slide, rather
   than each individual text box, own the vertical scrollbar. */
.h5p-course-presentation.local-h5p-scrollable-presentation
    .h5p-slide.h5p-current.local-h5p-scrollable-slide
    .h5p-element.local-h5p-flow-expanded,
.h5p-course-presentation.local-h5p-scrollable-presentation
    .h5p-slide.h5p-current.local-h5p-scrollable-slide
    .h5p-element.local-h5p-flow-expanded .h5p-element-outer,
.h5p-course-presentation.local-h5p-scrollable-presentation
    .h5p-slide.h5p-current.local-h5p-scrollable-slide
    .h5p-element.local-h5p-flow-expanded .h5p-element-inner {
    overflow: visible !important;
}

.h5p-course-presentation.local-h5p-scrollable-presentation
    .local-h5p-scroll-spacer {
    background: transparent !important;
    border: 0 !important;
    height: 1px !important;
    left: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 1px !important;
    z-index: -1 !important;
}