/* General CSS Changes for All H5P Types */
.h5p-content {
  border: none; /* Border style */
  border-radius: 15px !important; /* Rounded corners */
  background-color: white; /* Background color */
  padding: 5 10 0 10; /* Example: padding: 10px 20px 15px 25px; */
}

.h5p-joubelui-score-bar-progress {
    background: linear-gradient(to right, #87bbb5, #389187);
}

/* Multiple Choice */
/* Question box */
.h5p-question {
    background: transparent;
    margin-left: 10px;
    margin-right: 10px;
}
/* arrows */
.h5p-question .h5p-question-next {
    margin-right: 10px;
    background-color: #9f7f76;
}

.h5p-question .h5p-question-prev {
    background-color: #9f7f76;
}
/* Progress dots */
.progress-dot.answered {
    background: #9f7f76;
}

.progress-dot {
    border: 1px solid #9f7f76;
}


/* single Choice */

.h5p-single-choice-set .h5p-joubelui-progressbar {
    background-color: #9f9e76;
    margin-bottom: 10px;
    border-radius: 50px;
}

.h5p-single-choice-set .h5p-joubelui-progressbar-background {
    box-shadow: 1px 0 0 0 #fff;
    background-color: #87bbb5;
}

ul.h5p-sc-alternatives li.h5p-sc-alternative {

    background: #e9e9e9;
    box-shadow: 2px 4px 2px 0px rgb(0 0 0 / 25%);
    margin-right: 5px;
    margin-left: 5px;
}

.h5p-sc-sound-control {
    color: #87bbb5;
    margin: 10px;
    margin-top: 15px;
}

.h5p-sc-question p {
    margin: 5px;
    margin-top: 15px;
}

.h5p-no-frame .h5p-standalone.h5p-single-choice-set .h5p-sc-question {
    margin-top: 15px;
}

/* Multiple Choice Container */
.h5p-multichoice .h5p-alternative-container {
    -webkit-box-shadow: 0 0.1em 4px rgba(0, 0, 0, 0.3) !important;
    /* box-shadow: 0 0.1em 0 rgba(0, 0, 0, 0.3) !important; */
}

/* Buttons */
button {
  background-color: #87bbb5 !important; /* Button color */
  color: white; /* Button text color */
  border: none;
  border-radius: 30px; /* Rounded button corners */
  text-transform: lowercase;
  padding: 10px 20px;
  cursor: pointer;
}

button:hover {
  background-color: #6daaa5; /* Darker button on hover */
}

button.h5p-core-cancel-button:visited, button.h5p-core-cancel-button:link, button.h5p-core-cancel-button {
    color: white !important;
}


/* Fill in the Blanks */
.h5p-blanks .h5p-text-input {

    border-radius: 20px;
    border: 1px solid #87bbb5;
}


/* Drag the Words */
.h5p-drag-text [aria-dropeffect] {
    background-color: #87bbb596;
    border-radius: 20px;
}

.h5p-drag-text .h5p-drag-dropzone-container {
    max-width: 100%; /* Prevents the container from exceeding the width of its parent */
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden; /* Hides any overflow text */
}

.ui-draggable-handle {
    border-radius: 20px !important;
}

.h5p-drag-text [aria-grabbed] {
    border: 0.5px solid #87bbb587;
    background: #ffffff;
    box-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.2);
}



/* Mark the Words */

.h5p-mark-the-words .h5p-word {
    color: black;
    border: none;
}

.h5p-mark-the-words [aria-selected="true"] {
    background: #87bbb55e;
    border: 2px solid #87bbb5;
}

/* Interactive Video */
.h5p-interactive-video {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.h5p-interactive-video {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}  

.h5p-interactive-video .h5p-controls {
    background: #002981e8;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

/* Course Presentation */
.h5p-course-presentation .h5p-slide {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.h5p-course-presentation .h5p-footer {
    background-color: black;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.h5p-course-presentation .h5p-footer .h5p-footer-button {
    color: #ffffff;
    margin-right: 5px;
    margin-top: 2px;
}

.h5p-course-presentation .h5p-footer .h5p-footer-slide-count, .h5p-course-presentation .h5p-footer .h5p-footer-slide-count-current, .h5p-course-presentation .h5p-footer .h5p-footer-slide-count-delimiter, .h5p-course-presentation .h5p-footer .h5p-footer-slide-count-max {
    color: white;
}

/* Image Hotspots */
.h5p-image-hotspots .h5p-hotspot {
  background-color: #87bbb5; /* Hotspot marker color */
  box-shadow: 3px 3px 9px 1px rgba(0, 0, 0, 0.3);
}

.h5p-image-hotspot {
  box-shadow: 3px 3px 9px 1px rgba(0, 0, 0, 0.3);
}

.h5p-image-hotspots-background {
    width: 100%;
    border-radius: 10px;
}

.h5p-enable-fullscreen, .h5p-disable-fullscreen {
    border-radius: 5px;
    margin: 5px;
}

/* Drag and Drop */
.h5p-dragquestion > .h5p-question-content > .h5p-inner {
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: -5px;
}

.h5p-dragquestion .h5p-draggable {
    border-radius: 10px !important;
    -webkit-box-shadow: 2px 4px 1em 5px rgba(0, 0, 0, 0.2) !important;
}

.h5p-dragquestion .h5p-dropzone > .h5p-inner {
    background: #c9d6ff !important;
    border-radius: 10px;
}


/* Crossword */
.h5p-crossword {
  text-align: left; /* Align crossword content to the left */
}

/* Find the Words - Align container to the left and word list to the right */



.h5p-no-frame .questionset .h5p-question > * {
    margin: 1; /* Remove all margins */
    padding: 1; /* Optionally remove any padding */
}