<code > html.h5p-iframe,
html.h5p-iframe > body {
    font: normal bold 34px/44px "Fira Sans", Helvetica, Arial, Verdana, sans-serif;
}

.h5p-confirmation-dialog-header {
    color: #27b99e;
}

button.h5p-core-button:visited,
button.h5p-core-button:link,
button.h5p-core-button {
    background: #2cd3b4;
}

button.h5p-core-button:hover {
    background: #27b99e;
}


/* H5P Flashcards */

.h5p-flashcards .h5p-visual-progress div {
    background-color: #2cd3b4 !important;
}

.h5p-visual-progress-inner {
    background-color: #2cd3b4 !important;
}

div.h5p-imageholder {
    background-color: #f8f8f8 !important;
}

.h5p-flashcards .h5p-button {
    background-color: #2cd3b4 !important;
    color: #fff !important;
}

.h5p-flashcards .h5p-button {
    background-color: #2cd3b4 !important;
    color: #fff !important;
}

.h5p-button .h5p-check-button {
    background: #2cd3b4 !important;
}

.h5p-answer .h5p-button:hover {
    background: #27b99e !important;
}

.h5p-flashcards .h5p-navigation .h5p-button {
    color: #fff !important;
}

.h5p-flashcards .h5p-navigation .h5p-button:hover {
    background-color: #27b99e !important;
    color: #fff !important;
}

.h5p-show-results-label {
    color: #2cd3b4 !important;
}

.h5p-results-retry-button .h5p-button {
    background-color: #2cd3b4 !important;
    color: #fff !important;
}

.h5p-flashcards .h5p-results-box {
    background-color: #7cf0c1 !important;
}

.h5p-flashcards .h5p-results-retry-button:hover {
    background-color: #27b99e !important;
    color: #fff !important;
}

.h5p-flashcards .h5p-results-list-item.h5p-incorrect .h5p-results-box {
    background-color: #d51f38 !important;
}

.h5p-flashcards .h5p-textinput:focus {
    box-shadow: 0 0 0.5em 0 #78bdb0 !important;
    border-color: #78bdb0 !important;
}

/* Others */

.h5p-dialogcards .h5p-audio-minimal-button {
    background: #2cd3b4;
}

.h5p-joubelui-button {
    background-color: #2cd3b4;
}

.h5p-joubelui-button:hover,
.h5p-joubelui-button:focus,
.h5p-dialogcards .h5p-audio-minimal-button:hover {
    background: #27b99e;
}

.h5p-joubelui-button:active,
.h5p-dialogcards .h5p-audio-minimal-button:active {
    background: #27b99e -webkit-box-shadow: inset 0 4px 0 #27b99e;
    -moz-box-shadow: inset 0 4px 0 #27b99e;
    box-shadow: inset 0 4px 0 #27b99e;
}

/* Drag and drop */

.h5p-dragquestion .h5p-draggable.h5p-dropped {
    border: 0.1em solid #2cd3b4;
}

.h5p-drag-text [aria-dropeffect] {
    background-color: #efefef !important;
}

.h5p-drag-text [aria-grabbed].h5p-drag-dropped {
    color: #0c443a !important;
    border: 0.1em solid #efefef !important;
    background: #7bd6c5 !important;
}

.h5p-drag-text [aria-grabbed]:not(.ui-state-disabled):hover {
    border: 0.1em solid #c5c5c5 !important;
    color: #000 !important;
    background: #ffffff !important;
}

.h5p-question-feedback {
    color: #27b99e !important;
}

.h5p-drag-text .h5p-drag-dropped.h5p-drag-draggable-wrong {
    color: #b71c1c !important;
}

.h5p-dragquestion .h5p-dropped.h5p-wrong {
    border: 0.1em solid #f7d0d0;
    color: #b71c1c!important;
    background: #f7d0d0!important;
}

.h5p-dragquestion .h5p-dropped.h5p-correct, .h5p-dragquestion .h5p-dropzone.h5p-correct-answer {
    color: #255c41!important;
    border: 0.1em solid #9dd8bb;
    box-shadow: none;
    background: #9dd8bb!important;
}

/* Personality quiz */
.h5p-personality-quiz .h5p-personality-quiz-answer,
.h5p-personality-quiz .h5p-personality-quiz-retake-button,
.h5p-personality-quiz .h5p-personality-quiz-button {
    border-left: 5px solid #2cd3b4 !important;
    background: linear-gradient(to right, #2cd3b4 50%, #f5f5f5 50%) 100% center / 200% 100% !important;
    color: #333 !important;
}

div.h5p-personality-quiz div.h5p-personality-quiz-personality {
    background-color: #f5f5f5 !important;
}

.h5p-personality-quiz.h5p-personality-quiz-progressbar {
    background-image: linear-gradient(to right, #2cd3b4 50%, #f5f5f5 50%) !important;
}

/* Multiple Choice */
.h5p-question.h5p-multichoice.h5p-standalone p:last-child {
    display: none;
}

.h5p-multichoice .h5p-alternative-container {
    background-color: #ececec;
}

.h5p-multichoice .h5p-answer:not([aria-disabled="true"]):hover .h5p-alternative-container {
    background-color: #2cd3b473;
}

.h5p-multichoice .h5p-answer[aria-checked="true"] .h5p-alternative-container {
    color: #333;
    background: #2cd3b4;
    box-shadow: 0 0.1em 0 #b1e0cb;
}

.h5p-multichoice .h5p-answer[aria-checked="true"]:not(.h5p-wrong):not(.h5p-correct):not([aria-disabled="true"]):hover .h5p-alternative-container {
    background-color: #2cd3b473;
    box-shadow: 0 0.1em 0 #b1e0cb;
}

.h5p-multichoice .h5p-answer.h5p-wrong .h5p-alternative-container,
.h5p-multichoice .h5p-answer.h5p-wrong:hover .h5p-alternative-container {
    background: #fbd7d8;
    border-color: #fbd7d8;
    color: #b71c1c;
    box-shadow: 0 0.1em 0 #deb8b8;
}

.h5p-multichoice .h5p-answer.h5p-correct .h5p-alternative-container,
.h5p-multichoice .h5p-answer.h5p-correct:hover .h5p-alternative-container {
    background: #b6e4ce;
    border-color: #b6e4ce;
    color: #255c41;
    box-shadow: 0 0.1em 0 #a2bdb0;
}

/* Question set */
.progress-dot.current {
    background: #27b99e;
}

.progress-dot.answered {
    background: #2cd3b4;
}

.h5p-drag-text [aria-grabbed] {
    background: #eee;
}

.h5p-blanks .h5p-text-input:focus {
    box-shadow: 0 0 0.5em 0 #78bdb0;
    border-color: #78bdb0;
}

.h5p-drag-text [aria-grabbed].h5p-drag-dropped {
    color: #333;
}

.h5p-mark-the-words .h5p-word-selectable-words:not(.h5p-disable-hover) [role="option"]:hover {
    box-shadow: inset 0px 0px 0px 2px #b1e0cb;
}

.h5p-mark-the-words [aria-selected="true"] {
    background: #b1e0cb;
}

.h5p-draggable-hover {
    background-color: #b1e0cb !important;
    border-color: #ccc !important;
}

.h5p-dropped {
    background-color: #2cd3b4 !important;
    border-color: #ccc !important;
}

.h5p-dragquestion .h5p-draggable.h5p-dropped {
    color: #333;
}

</code >