/*
Plugin Name: H5P
Plugin URI: https://h5p.org/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: All CSS modifications should apply to the embedded h5p contents of your site and your CSS overrides would be kept even after upgrading the h5p plugin. 
Updated: 3-10-20
Created: 3-10-20
*/

/*--------------------------------------------- Universal */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');


:root {
    --font-primary: "Inter", sans-serif;
    --font-secondary: "Inter", sans-serif;
    
    --color-primary: #d84738;
    --color-secondary: #9d2e23;
    
    --color-primary-opaque: rgb(216 71 56 / 80%);
    --color-secondary-opaque: rgb(157 46 35 / 80%);
    --color-dark-opaque: rgb(23 23 23 / 45%);
    
    --dark-primary: #171717;
    --dark-secondary: #252525;
    
    --color-body: #333333;
    --color-headings: #1c1c1c;
    
    --color-background: #f3f3f3;
    
    --color-wrong: #d84738;
    --color-correct: #4CAF50;
}


html.h5p-iframe, html.h5p-iframe > body {
    font-family: var(--font-secondary) !important;
    margin: 0;
    padding: 0;
}

div,a,button {
    transition: 0.3s cubic-bezier(0.18, 1, 0.21, 1);
}

button.h5p-core-button:visited, button.h5p-core-button:link, button.h5p-core-button {
    color: #FFF !important;
}

.h5p-confirmation-dialog-exit {
    padding: 10px 1.4em 0 0;
}

:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

.h5p-task-description {
    font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300))) !important;
    color: var(--color-body);
    line-height: 1.4;
    padding: 1em 0;
    font-family: var(--font-secondary) !important;
}

/*--------------------------------------------- Quiz Multiple Choice/TF */

.h5p-true-false-answer:focus {
    box-shadow: none !important;
}

.h5p-content {
    background: transparent; 
    border: 0;
}

.h5p-question {
	background: transparent;
}

.h5p-multichoice .h5p-alternative-container, 
.h5p-true-false-answer,
.h5p-sc-alternative,
.h5p-summary .summary-container li, .h5p-summary .summary-options li,
.h5p-branching-question-alternative {
	box-shadow: none !important; -webkit-box-shadow: none !important;
	border: 1px solid #e2e2e2 !important;
	background: transparent !important;
    font-size: 1rem !important;
    padding: 20px 20px 20px 60px !important;
}

.h5p-summary li.summary-failed > p, .h5p-summary li.summary-failed {
    background: transparent !important;
}

.h5p-summary .summary-score,
.summary-progress-numeric {
    background: transparent !important;
}

.h5p-summary .summary-content li > p {
    border: none !important;
}

.h5p-summary .summary-progress-numeric:before,
.h5p-summary .summary-container li:before {
    color: var(--color-primary) !important;
}

.h5p-true-false-answer[aria-checked=true] {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: #000;
}

.question-container {
    margin: 0 30px 0 0;
}

.h5p-multichoice .h5p-answer:not([aria-disabled="true"]):hover .h5p-alternative-container,
.h5p-multichoice .h5p-answer:not([aria-disabled="true"]):focus .h5p-alternative-container {
    background-color: rgba(160, 160, 160, 0.075) !important;
    box-shadow: none;
    outline: none;
}

.h5p-joubelui-score-bar-progress {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
}

.h5p-single-choice-set .h5p-joubelui-progressbar {
    background-color: #e6e6e6 !important;
}

.h5p-single-choice-set .h5p-joubelui-progressbar-background {
    background-color: var(--color-secondary) !important;
    box-shadow: none !important;
}

.progress-dot.answered {
    background: #eeeeee;
}

.h5p-joubelui-score-bar-star-fill-full-score {
    fill: var(--dark-primary);
    filter: none !important;
}

.h5p-joubelui-score-bar-full-score .h5p-joubelui-score-bar-star-fill {
    fill: var(--dark-primary);
}

.h5p-joubelui-score-bar-full-score .h5p-joubelui-score-bar-star-border {
    stroke: var(--dark-primary);
    stroke-width: 6;
}

.h5p-answer.h5p-selected {
    border: 2px;
    box-shadow: 0;
    color: initial;
}

.h5p-multichoice .h5p-answer .h5p-alternative-container:before {
	top: 50%;
	left: 3em;
    transform: translateY(-50%);
    width: auto;
    height: auto;
}

.h5p-multichoice .h5p-answer[aria-checked="true"] .h5p-alternative-container {
    border: 2px solid var(--color-primary);
    background: transparent;
    box-shadow: none;
}

.h5p-blanks .h5p-correct:after,
.h5p-blanks .h5p-wrong:after {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    text-decoration: none;
}

.h5p-blanks .h5p-correct:after {
    content: "\f058";
    font-family: 'H5PFontAwesome4';
    color: var(--color-primary);
}

.h5p-blanks .h5p-wrong:after {
    content: "\f057";
    font-family: 'H5PFontAwesome4';
    color: var(--color-wrong);
}

.h5p-question-buttons {
    border-top: 2px solid #ededed;
    padding-top: 15px;
    margin: 15px 0;
}

.h5p-question-next,
.h5p-question-prev {
    border-radius: 5px;
    background: #e9e9e9 !important;
    color: #838383 !important;
    font-weight: 600;
    position: relative;
}

.h5p-question-next:before {
    content: "Next" !important;
    padding-right: 0 !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: var(--font-secondary);
    display: block !important;
    color: #6d6d6d !important;
    font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300))) !important;
}
.h5p-question-prev:before {
    content: "Previous" !important;
    padding-right: 0 !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: var(--font-secondary);
    display: block !important;
    color: #6d6d6d !important;
    font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300))) !important;
}

.h5p-multichoice .h5p-answer .h5p-alternative-container:before {
    color: #dbe1e5;
}

.h5p-multichoice .h5p-solution-icon {
    color: transparent;
}

.h5p-multichoice .h5p-should[role="radio"] .h5p-solution-icon:before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    font-family: 'H5PFontAwesome4';
    content: "\f058";
    color: var(--color-primary);
}

.h5p-multichoice .h5p-should-not[role="radio"] .h5p-solution-icon:before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    font-family: 'H5PFontAwesome4';
    content: "\f057";
    color: var(--color-wrong);
}

.h5p-true-false-answer:before {
    color: #dbe1e5;
    top: 50%;
    left: 3em;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    content: '\e60b';
}

.h5p-question-check-answer:before {
    color: #FFF;
}

.h5p-multichoice .h5p-answer.h5p-wrong .h5p-alternative-container, .h5p-multichoice .h5p-answer.h5p-wrong:hover .h5p-alternative-container {
    border-color: var(--color-wrong);
    color: initial;
    box-shadow: none;
}

.h5p-joubelui-button.truncated,
.h5p-question .h5p-question-prev, 
.h5p-question .h5p-question-next {
    width: 100% !important;
    max-width: 237px !important;;
    height: auto !important;
    min-height: 37px;
    border-radius: 5px;
}

@media screen and (max-width: 1200px) {
    .h5p-joubelui-button.truncated,
    .h5p-question .h5p-question-prev, 
    .h5p-question .h5p-question-next {
        min-height: 30px;
        max-width: 100% !important;
        margin: 5px 0px;
    }
    .h5p-question .h5p-question-prev:before, 
    .h5p-question .h5p-question-next:before {
        font-size: 0.8rem !important;
    }
}

.h5p-multichoice .h5p-wrong .h5p-answer-icon:before {
    content: "\f057";
    color: var(--color-wrong) !important;
    padding: 0 0.125em;
}

.h5p-multichoice .h5p-correct .h5p-answer-icon:before {
    content: "\f058";
    color: var(--color-primary) !important;
    padding: 0 0.125em;
}

.h5p-question-check-answer.h5p-joubelui-button  {
    background: var(--color-primary) !important;
    border-radius: 5px;
}

.h5p-question-check-answer:before {
    content: "";
    color: rgba(255,255,255,0.6) !important;
    text-transform: initial;
    font-weight: 600;
    font-family: var(--font-secondary);
    font-size: 1rem !important;
}

.h5p-question-try-again.h5p-joubelui-button#text,
.h5p-question-show-solution.h5p-joubelui-button#text {
    display: none;
}

.h5p-multichoice .h5p-answer.h5p-correct .h5p-alternative-container, .h5p-multichoice .h5p-answer.h5p-correct:hover .h5p-alternative-container {
    background: rgba(160, 160, 160, 0.075) !important;
    border: 2px solid var(--color-primary);
    color: initial;
    box-shadow: none;
}

.h5p-joubelui-button:before {
    right: initial;
    color: rgba(255,255,255,0.09);
    font-size: 1.4rem;
    width: 100%;
    display: none;
}

.h5p-question-try-again,
.h5p-question-show-solution {
    background: #222222 !important;
    border: 2px solid #222222 !important;
    display: block;
    text-transform: initial;
    font-weight: 400;
    font-family: var(--font-secondary);
    border-radius: 5px;
}

.h5p-question-try-again:before {
    content: "Try Again";
    font-family: var(--font-secondary);
    color: #838383;
    font-size: 1rem;
}

.h5p-true-false-answer.correct:after {
    background: transparent;
    content: '\f058';
    color: var(--color-primary);
}

.h5p-question-show-solution:before {
    content: "See Solution";
    font-family: var(--font-secondary);
    color: #838383;
    font-size: 1rem;
}

.h5p-true-false-answer.correct {
    background: #fff;
    border: 2px solid var(--color-primary);
}

.h5p-true-false-answer.wrong:after {
    background: transparent;
    content: '\f057';
    color: var(--color-wrong);
}

.h5p-true-false-answer:hover {
    border: 2px solid var(--color-primary);
}

.h5p-true-false-answer.wrong {
    background: #fff;
    border: 2px solid var(--color-wrong);
}

.h5p-true-false-answer:after {
    font-family: 'H5PFontAwesome4';
    font-weight: normal;
    content: ' ';
    width: auto;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    text-align: center;
    line-height: normal;
}

.progress-dot.current {
    background: var(--color-primary);
}

.h5p-multichoice .h5p-correct .h5p-answer-icon:before,
.h5p-multichoice .h5p-wrong .h5p-answer-icon:before {
    color: #FFFFFF;
}

.h5p-multichoice .h5p-answer-icon {
    top: 50%;
    transform: translateY(-50%);
}

.h5p-alternative-inner {
    margin: 0 0.75em 0 4em;
}

.h5peditor .ui-dialog .h5p-joubelui-button, 
.h5peditor .h5p-joubelui-button, 
.h5p-joubelui-button, 
.h5p-branching-scenario .h5p-start-button, 
.h5p-branching-scenario .h5p-branching-question button,
.h5p-end-button, 
.h5p-nav-button {
    font-size: 1rem;
    font-family: var(--font-secondary);
    line-height: 1.2;
    font-weight: 500;
    margin: 0;
    padding: 1em 1.25em;
    border-radius: 5px;
    background: #353535;
    color: #FFF !important;
    cursor: pointer;
    border: none;
    box-shadow: none;
    display: inline-block;
    text-align: center;
    text-shadow: none;
    text-decoration: none;
    vertical-align: baseline;
}

@media screen and (max-width: 1200px) {
    .h5peditor .ui-dialog .h5p-joubelui-button, 
    .h5peditor .h5p-joubelui-button, 
    .h5p-joubelui-button, 
    .h5p-branching-scenario .h5p-start-button, 
    .h5p-branching-scenario .h5p-branching-question button,
    .h5p-end-button, 
    .h5p-nav-button {
        font-size: 0.8rem !important;
        padding: 0.8rem 1rem;
    }
}

.h5p-joubelui-button:hover, .h5p-joubelui-button:focus, .h5p-branching-scenario .h5p-branching-question button:hover, .h5p-branching-scenario .h5p-branching-question button:focus {
    background: #525252;
}

.h5p-multichoice .h5p-answer[aria-checked="true"] .h5p-alternative-container {
    color: #444444 !important;
}

.h5p-multichoice .h5p-answer[aria-checked="true"]:not(.h5p-wrong):not(.h5p-correct):not([aria-disabled="true"]):hover .h5p-alternative-container {
    box-shadow: none !important;
}

/*--------------------------------------------- Input Fields */

.h5p-blanks .h5p-input-wrapper {
    display: inline-flex;
    margin: 3px;
}

.h5p-content input[type="submit"],
.h5p-content input[type="reset"],
.h5p-content input[type="button"],
button,
.button {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;

	border: 0;

	color: var(--color-primary) !important;
	cursor: pointer;
	display: inline-block;
	font-size: 0.8em;
	font-weight: 800;
	line-height: 1;
	padding: 1em 2.5em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
    border-radius: 5px;
    margin-left: 10px;
    
    background: rgba(255,255,255,0.12);
}

.h5p-content input[type="submit"]:hover,
.h5p-content input[type="reset"]:hover,
.h5p-content input[type="button"]:hover,
button:hover,
.button:hover {
	opacity: 0.8;
    color: #FFFFFF;
    border: 0;
}

.h5p-content input[type="submit"]:hover:active,
.h5p-content input[type="reset"]:hover:active,
.h5p-content input[type="button"]:hover:active,
button:hover:active,
.button:hover:active {
    color: #FFFFFF !important;
}

.h5p-content input[type="submit"]:before, .h5p-content input[type="submit"]:after,
.h5p-content input[type="reset"]:before,
.h5p-content input[type="reset"]:after,
.h5p-content input[type="button"]:before,
.h5p-content input[type="button"]:after
button:before,
button:after,
.button:before,
.button:after {
	color: #FFFFFF !important;
	position: relative;
}

.h5p-content input[type="submit"]:before,
.h5p-content input[type="reset"]:before,
.h5p-content input[type="button"]:before,
button:before,
.button:before {
	left: -1em;
    
}

.h5p-content input[type="submit"]:after,
.h5p-content input[type="reset"]:after,
.h5p-content input[type="button"]:after,
button:after,
.button:after {
	left: 1em;
	padding: 0 0.75em 0 0;
}

.h5p-content input[type="submit"].fit,
.h5p-content input[type="reset"].fit,
.h5p-content input[type="button"].fit,
button.fit,
.button.fit {
	display: block;
	margin: 0 0 1em 0;
	width: 100%;
}

.h5p-content input[type="submit"].big,
.h5p-content input[type="reset"].big,
.h5p-content input[type="button"].big,
button.big,
.button.big {
	font-size: 0.7em;
	padding: 1.5em 3em;
}

.h5p-content input[type="submit"].small,
.h5p-content input[type="reset"].small,
.h5p-content input[type="button"].small,
button.small,
.button.small {
	font-size: 0.5em;
}

.h5p-content input[type="submit"].disabled, .h5p-content input[type="submit"]:disabled,
.h5p-content input[type="reset"].disabled,
.h5p-content input[type="reset"]:disabled,
.h5p-content input[type="button"].disabled,
.h5p-content input[type="button"]:disabled,
button.disabled,
button:disabled,
.button.disabled,
.button:disabled {
	-moz-pointer-events: none;
	-webkit-pointer-events: none;
	-ms-pointer-events: none;
	pointer-events: none;
	color: #FFFFFF !important;
}

.h5p-content input[type="submit"].disabled:before, .h5p-content input[type="submit"]:disabled:before,
.h5p-content input[type="reset"].disabled:before,
.h5p-content input[type="reset"]:disabled:before,
.h5p-content input[type="button"].disabled:before,
.h5p-content input[type="button"]:disabled:before,
button.disabled:before,
button:disabled:before,
.button.disabled:before,
.button:disabled:before {
	color: #FFFFFF !important;
}

form {
	margin: 0 0 2em 0;
}

form.search {
	text-decoration: none;
	position: relative;
}

form.search:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-transform: none !important;
}

form.search:before {
	color: #aaaaaa;
	content: '\f002';
	display: block;
	height: 2.75em;
	left: 0;
	line-height: 2.75em;
	position: absolute;
	text-align: center;
	top: 0;
	width: 2.5em;
}

form.search > .h5p-content input:first-child {
	padding-left: 2.5em;
}

label {
	color: #3c3b3b;
	display: block;
	font-size: 0.9em;
	font-weight: 700;
	margin: 0 0 1em 0;
}

.h5p-content input[type="text"],
.h5p-content input[type="password"],
.h5p-content input[type="email"],
.h5p-content input[type="tel"],
select,
textarea {
	-moz-appearance: none !important;
	-webkit-appearance: none !important;
	-ms-appearance: none !important;
	appearance: none !important;
	background: rgba(160, 160, 160, 0.075) !important;
	border: solid 1px rgba(160, 160, 160, 0.3) !important;
	border-radius: 0 !important;
	color: inherit !important;
	display: block !important;
	outline: 0 !important;
	padding: 0 1em !important;
	text-decoration: none !important;
    font-size: 1rem;
    border-radius: 5px;
    margin-left: 0px;
}

.h5p-content input[type="text"]:invalid,
.h5p-content input[type="password"]:invalid,
.h5p-content input[type="email"]:invalid,
.h5p-content input[type="tel"]:invalid,
select:invalid,
textarea:invalid {
	box-shadow: none !important;
}

.h5p-content input[type="text"]:focus,
.h5p-content input[type="password"]:focus,
.h5p-content input[type="email"]:focus,
.h5p-content input[type="tel"]:focus,
select:focus,
textarea:focus {
	border-color: var(--color-primary) !important;
	box-shadow: inset 0 0 0 1px var(--color-primary) !important;
}

textarea {
    padding: 15px !important;
}

.select-wrapper {
	text-decoration: none;
	display: block;
	position: relative;
}

.select-wrapper:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-transform: none !important;
}

.select-wrapper:before {
	color: rgba(160, 160, 160, 0.3);
	content: '\f078';
	display: block;
	height: 2.75em;
	line-height: 2.75em;
	pointer-events: none;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	width: 2.75em;
}

.select-wrapper select::-ms-expand {
	display: none;
}

.h5p-content input[type="text"],
.h5p-content input[type="password"],
.h5p-content input[type="email"],
select {
	height: 2.75em;
}


.h5p-content input[type="checkbox"],
.h5p-content input[type="radio"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	display: block;
	float: left;
	margin-right: -2em;
	opacity: 0;
	width: 1em;
	z-index: -1;
}

.h5p-content input[type="checkbox"] + label,
.h5p-content input[type="radio"] + label {
	text-decoration: none;
	color: #343a40;
	cursor: pointer;
	display: inline-block;
	font-size: 1em;
	font-weight: 400;
	padding-left: 2.4em;
	padding-right: 0.75em;
	position: relative;
}

.h5p-content input[type="checkbox"] + label:before,
.h5p-content input[type="radio"] + label:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-transform: none !important;
}

.h5p-content input[type="checkbox"] + label:before,
.h5p-content input[type="radio"] + label:before {
	background: rgba(160, 160, 160, 0.075);
	border: solid 1px rgba(160, 160, 160, 0.3);
	content: '';
	display: inline-block;
	height: 1.65em;
	left: 0;
	line-height: 1.58125em;
	position: absolute;
	text-align: center;
	top: 0;
	width: 1.65em;
}

.h5p-content input[type="checkbox"]:checked + label:before,
.h5p-content input[type="radio"]:checked + label:before {
	background: #274e65;
	border-color: #274e65;
	color: #ffffff;
	content: '\f00c';
}

.h5p-content input[type="checkbox"]:focus + label:before,
.h5p-content input[type="radio"]:focus + label:before {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 1px var(--color-primary);
}

.h5p-content input[type="radio"] + label:before {
	border-radius: 100%;
}

::-webkit-input-placeholder {
	color: #aaaaaa !important;
	opacity: 1.0;
}

:-moz-placeholder {
	color: #aaaaaa !important;
	opacity: 1.0;
}

::-moz-placeholder {
	color: #aaaaaa !important;
	opacity: 1.0;
}

:-ms-input-placeholder {
	color: #aaaaaa !important;
	opacity: 1.0;
}
.h5p-question-buttons.h5p-question-visible {
    overflow: visible;
}

/*--------------------------------------------- Branching Scenerio */

.h5p-joubelui-button:hover, .h5p-joubelui-button:focus,
.h5p-branching-scenario .h5p-branching-question button:hover, .h5p-branching-scenario .h5p-branching-question button:focus {
    opacity: 0.6;
}

.h5p-branching-scenario .h5p-start-button:hover, .h5p-end-button:hover, .h5p-nav-button:hover {
    border-color: var(--color-primary);
    color: #ffffff;
    background: var(--color-primary);
}

.h5p-content ul.h5p-actions {
    background: transparent; 
    border-top: 0; 
    border-bottom: 0;
}

.h5p-branching-scenario .h5p-start-screen, .h5p-end-screen {
    background: transparent;
}

.h5p-branching-scenario .h5p-current-screen {
	background: transparent;
}

.h5p-branching-scenario .h5p-screen-banner {
	background: transparent;
}

.h5p-branching-scenario .h5p-background-image {
	box-shadow: none; -webkit-box-shadow: none;
}

.h5p-branching-scenario button.h5p-branching-full-screen {
	background: transparent;
    border: 0.083em solid #2c2c2c;
    color: #2c2c2c;
}

.h5p-branching-scenario .h5p-nav-button-wrapper {
	display: inline-flex;
	flex-direction: initial;
	justify-content: center;
}

.h5p-branching-question-alternative {
	background: transparent;
	border: 0.1em solid #e2e2e2;
}

.h5p-branching-question-alternative:hover {
    background: #ececec;
    border-color: #e2e2e2;
}

.h5p-branching-question-alternative:after {
	color: #838383;
}

.h5p-branching-question-icon {
	display: none;
}

.h5p-branching-question-icon {
	left: 2em;
}

.h5p-branching-scenario-overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(243, 243, 243, 0.89);
    width: auto;
    height: auto;
}

.h5p-branching-scenario .h5p-branching-scenario-content {
    box-shadow: none; -webkit-box-shadow: none;
}

/*--------------------------------------------- UI Elements */

button {
	border: 0 !important;
	margin: 1em 0;
}

button a {
	display: block;
	text-decoration: none;
	border: 0;
}

.h5p-joubelui-button:active {
	background: #dbdbdb;
	box-shadow: none;
	color: #FFF;
}

.h5p-joubelui-score-bar {
	border: 0;
}

.h5p-joubelui-score-bar-progress-wrapper {
	top: 50%;
    transform: translateY(-50%);
}

span.h5p-icon-shadow {
	display: none;
}

span.h5p-icon-speech-bubble {
	display: none;
}

.joubel-speech-bubble-inner {
	box-shadow: none;
	background: white;
}

.joubel-speech-bubble-tail {
	box-shadow: none;
	background: white;
}

.joubel-icon-tip-normal .h5p-icon-info:before {
    color: #838383;
    background: white;
    padding: 5px 7.5px 7.5px 7px;
    border-radius: 2rem;
}

.h5p-joubelui-score-bar .joubel-tip-container {
	background: #838383;
	top: 50%;
    transform: translateY(-50%);
    right: -2em;
}

.h5p-joubelui-score-numeric {
	font-size: 1em; 
}

.h5p-joubelui-score-bar .joubel-tip-container {
    background: transparent;
}

.h5p-joubelui-score-bar .joubel-tip-container {
    position: absolute;
    top: 0.1em;
    right: 0.3em;
    font-size: 1em;
    line-height: 1;
    color: var(--color-primary);
    margin-right: 0.2em;
}

/*--------------------------------------------- Drag & Drop */

.h5p-dragquestion {
    background: transparent;
}

.h5p-dragquestion .h5p-draggable.h5p-dropped {
    background: transparent;
}

.h5p-dragquestion .h5p-label {
    line-height: 1.25em;
    right: 0;
    left: 0;
    bottom: 100%;
    white-space: nowrap;
    border-radius: 0.25em 0.25em 0 0;
    position: absolute;
    background-color: var(--dark-secondary) !important;
    padding: 3px 5px;
    color: #FFF;
    border-radius: 3px;
}

.h5p-dragquestion .h5p-label:hover {
    white-space: normal !important;
}

.h5p-drag-text .h5p-drag-show-solution-container.incorrect,
.h5p-mark-the-words [aria-describedby="h5p-description-missed"],
.h5p-blanks .h5p-correct-answer {
    color: #ffffff;
    font-weight: bold;
    border: #3a3a3a;
    background-color: #3a3a3a;
    padding: 8px 15px;
    border-radius: 0.25em;
    margin-left: 0.5em;
}

.h5p-blanks .h5p-correct-answer {
    margin-left: 3.5em;
}
    
.h5p-dragquestion .h5p-draggable {
	box-shadow: 0 0 1.2em rgb(0 0 0 / 10%); -webkit-box-shadow: 0 0 1.2em rgb(0 0 0 / 10%) !important;
	background: #FFF;
    border: none;
    transition: none;
}

.h5p-dragquestion .h5p-draggable.h5p-dropped {
    color: initial;
    border: 0;
    background: #FFF;
    padding: 10px;
}

.h5p-image.h5p-dropped {
    background: transparent !important;
}

.h5p-dragquestion .h5p-draggable:not(.ui-state-disabled).h5p-draggable-hover { 
	background: #ececec;
    border: 0;
}

.h5p-dragquestion .h5p-draggable p {
    font-size: 100%;
    line-height: 1.3;
}

.h5p-dragquestion .h5p-dropped.h5p-correct, .h5p-dragquestion .h5p-dropzone.h5p-correct-answer {
    color: initial;
    border: 2px solid var(--color-primary);
    box-shadow: none;
    background: #FFF;
}

.h5p-dragquestion .h5p-dropped.h5p-correct:after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.5em;
    font-family: 'H5PFontAwesome4';
    content: "\f058";
    color: var(--color-primary);
}
.h5p-dragquestion .h5p-dropped.h5p-wrong:after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.5em;
    font-family: 'H5PFontAwesome4';
    content: "\f057";
    color: var(--color-wrong);
}

.h5p-drag-text [aria-dropeffect] {
    position: relative;
    top: -0.1em;
    width: 10em;
    height: 1.25em;
    background-color: #ffffff;
    border: 2px dashed #e9e9e9;
    border-radius: 0.25em;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    padding: 6px;
    margin: 6px;
}

.h5p-drag-text [aria-grabbed].h5p-drag-dropped {
    width: 100%;
    margin: -0.1em 0 0 0;
    white-space: nowrap;
    color: #565656;
    padding: 0;
    background: transparent !important;
    border: none !important;
}

.h5p-drag-text [aria-grabbed='true'], .h5p-drag-text [aria-grabbed].h5p-drag-dropped:not(.ui-state-disabled):hover, .h5p-drag-text [aria-grabbed]:not(.ui-state-disabled):hover {
    border: none;
    color: var(--color-primary);
    background: #daeaf6;
}

.h5p-dragquestion .h5p-dropzone > .h5p-inner {
    height: 100%;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background: rgb(171 171 171 / 27%);
    border: 3px dashed rgb(51 51 51 / 0);
    border-radius: 5px;
}

.h5p-drag-text .h5p-drag-droppable-words {
    line-height: 1.75;
    margin: 30px 0 !important;
    width: 100%;
}

.h5p-drag-text .h5p-drag-task {
}

.h5p-draggable .ui-draggable .h5p-image {
    background: transparent !important;
}

/*
.h5p-drag-text .h5p-drag-task {
    display: inline-block !important;
}
*/

.h5p-drag-text .h5p-drag-draggables-container {
    position: relative;
    padding-top: 0.5em;
    display: block;
    padding: 30px !important;
    background: rgb(237 237 237 / 51%);
    border: 1px solid #ebebeb;
/*    display: flex;*/
    flex-wrap: wrap;
    margin: 0 0 40px 0;
}

.h5p-drag-text .h5p-drag-wide-screen {
    float: none;
}

.h5p-drag-text [aria-grabbed] {
    line-height: 1.25;
    cursor: grab;
    border-radius: 0.25em;
    padding: 15px;
    min-width: 150px;
    margin: 0.3em;
    vertical-align: top;
    text-align: center;
    display: inline-block;
    border: none;
    overflow: hidden;
    background: #fff;
    box-shadow: none;
    z-index: 3;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.h5p-drag-text [aria-dropeffect].h5p-drag-correct-feedback {
    background: transparent;
    border: 2px solid var(--color-primary);
}

.h5p-drag-text [aria-dropeffect].h5p-drag-wrong-feedback {
    background: transparent;
    border: 2px solid var(--color-wrong);
}

.h5p-drag-text .h5p-drag-correct-feedback:before {
    position: absolute;
    right: 0.5em;
    font-family: 'H5PFontAwesome4';
    content: "\f058";
    color: var(--color-primary);
}
.h5p-drag-text .h5p-drag-wrong-feedback:before {
    position: absolute;
    right: 0.5em;
    font-family: 'H5PFontAwesome4';
    content: "\f057";
    color: var(--color-wrong);
}

/*--------------------------------------------- Interactive Video */

.h5p-interactive-video .h5p-interaction {
    top: 50% !important;
    transform: translateY(-50%);
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin: 30px !important;
}

.h5p-dialog-inner {
    width: auto !important;
}

.h5p-interactive-video .h5p-interaction .h5p-touch-area {
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

.h5p-interactive-video .h5p-dialog {
    width: auto !important;
    right: 0;
}

.h5p-interactive-video .h5p-interaction-label {
	background: rgb(255 255 255);
    padding: 10px !important;
}

.h5p-interactive-video .h5p-interaction-label .h5p-interaction-label-text {
    color: var(--dark-secondary);
    padding-left: 50px;
}

.h5p-interactive-video div > .h5p-interaction-button {
    background-color: #2c2c2c;
}

.h5p-interactive-video div:hover > .h5p-interaction-button {
    background-color: var(--color-primary);
}

.h5p-interactive-video .h5p-dialog-titlebar {
	border-bottom: 0;
}

.h5p-interactive-video .h5p-dialog-inner {
	margin: 30px;
}

.h5p-interactive-video div:focus > .h5p-interaction-button {
    border: 0.167em solid #494949;
}

.h5p-interactive-video .h5p-dialog-interaction {
    font-size: 1rem;
}

.h5p-gotoquestion-text {
    background: transparent;
    color: #303030;
}

.h5p-gotoquestion-button {
    border-bottom: 0;
    border-radius: 5px;
    margin: 0 10px 10px 10px;
    background: #f3f3f3;
}

.h5p-gotoquestion-button[aria-disabled=false]:hover, .h5p-gotoquestion-button[aria-disabled=false]:focus {
    color: #FFF;
    background: var(--color-primary);
}

.h5p-gotoquestion-button[aria-disabled=false]:hover:after, .h5p-gotoquestion-button[aria-disabled=false]:focus:after {
    border-bottom: 0;
}

.h5p-interactive-video .h5p-poster.goto-clickable-visualize.h5p-goto-timecode, .h5p-interactive-video .h5p-dialog.goto-clickable-visualize.h5p-goto-timecode .h5p-dialog-inner {
    border-color: var(--color-primary);
}

/*--------------------------------------------- Interactive Video */

.h5p-gotoquestion-wrapper {
    height: 100%;
    background: transparent;
}

.h5p-interactive-video-bubble-endscreen-inner {
	background: #313131;
}

.h5p-interactive-video-endscreen-overview-table-row-time {
	color: var(--color-primary);
}

.h5p-interactive-video-endscreen-introduction-text-submitted {
    color: #85BC8D;
}

.h5p-interactive-video-endscreen-introduction-text-submitted {
    color: #848484;
}

.h5p-interactive-video-endscreen-star-symbol {
	display: none;
}

.h5p-gotoquestion-chosentext {
    background: transparent;
    color: #303030;
    font-style: italic;
    font-size: 1rem;
}

.h5p-gotoquestion .h5p-gotoquestion-continue {
	width: auto;
}

.h5p-branching-scenario .h5p-background-image {
    max-height: initial;
}

.h5p-branching-scenario .h5p-branching-scenario-content {
    background: transparent;
}

.h5p-branching-scenario .h5p-next-screen {
    background: transparent;
}

.h5p-branching-scenario .h5p-start-screen .h5p-branching-full-screen, .h5p-branching-scenario .h5p-end-screen .h5p-branching-full-screen {
	display: none;
}

.h5p-interactive-video .h5p-interaction-inner, .h5p-interactive-video .h5p-interaction-inner.h5p-image {
    font-size: 1rem;
    padding: 50px;
}

.h5p-branching-scenario-title-text,
.h5p-branching-scenario-subtitle-text {
    color: #2c2c2c;
}

.h5p-branching-scenario button.h5p-branching-full-screen {
    display: none;
}

.h5p-branching-question .h5p-feedback-default {
    text-align: left;
}

.h5p-gotoquestion-choices {
    background: transparent;
}

.h5p-feedback-content-content {
    max-height: 16em;
}

.h5p-interactive-video .h5p-splash-wrapper.no-description .h5p-splash-play-icon, .h5p-interactive-video .h5p-splash-wrapper.no-description.no-title .h5p-splash-play-icon {
    font-size: 1em;
}

.h5p-question-content {
    margin: 2em 0;
}

.h5p-question-introduction {
    font-weight: 400;
    color: var(--color-body);
    margin: 0;
}

.dashboard .h5p-iframe .h5p-question-introduction {
    color: rgba(255,255,255,0.8) !important;
}

.qs-footer {
    overflow: hidden;
    clear: both;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    bottom: 0;
    right: 0;
}

.progress-item {
    list-style: none;
    display: block;
}

.h5p-personality-quiz .h5p-personality-quiz-background {
    background-size: auto !important;
    background-position: right;
}

.h5p-personality-quiz .h5p-personality-quiz-center-personality {
    position: relative;
    right: 0;
    width: 50%;
    top: 0;
    margin: 0;
    transform: initial;
    background: transparent !important;
}

.h5p-audio-inner .h5p-audio-minimal-button {
    border-radius: 50px;
    padding: 0 !important;
    margin: 10px;
    font-size: 1rem;
    background: transparent;
}

.h5p-mark-the-words [aria-selected="true"] {
    background: #e4e4e4;
    padding: 8px 15px;
}

.h5p-mark-the-words [aria-describedby="h5p-description-correct"] {
    background: var(--color-primary) !important;
    color: #FFF;
    padding: 8px 15px;
}

.h5p-mark-the-words [aria-describedby="h5p-description-incorrect"] {
    background-color: var(--color-wrong) !important;
    color: #ffffff;
    text-decoration: line-through;
    display: inline-block;
    line-height: 1;
    padding: 8px 15px;
}

.h5p-mark-the-words [aria-describedby="h5p-description-correct"]:after {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.42);
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
}

.h5p-question-plus-one,
.h5p-question-minus-one {
    display: none !important;
}

.questionset-results {
    background: transparent;
}

.questionset-results .buttons {
    margin: 0; 
    display: flex;
}

/*--------------------------------------------- Sequencing */

.sequencing-status {
    border-radius: 3px;
    display: flex;
}

.h5p-image-sequencing > ul {
    padding: 0px;
}

/*
.h5p-image-sequencing .footer-container {
    display: flex;
}
*/

.sequencing-status span {
    text-align: left;
    margin: 0 30px 0 0;
}

.sequencing-correct {
    border: solid 2px var(--color-primary) !important;
    position: relative;
}

.sequencing-incorrect {
    border: solid 2px var(--color-wrong) !important;
    position: relative;
}

.sequencing-correct-mark {
    background-color: var(--color-primary);
}

.sequencing-incorrect-mark {
    background-color: var(--color-wrong);
}

/*--------------------------------------------- Hotpspots */

.h5p-image-hotspot {
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
    background: rgb(250 250 250 / 64%);
}

.h5p-image-hotspot:before {
    font-size: 1.3rem;
    color: #FFF;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    left: 0;
    text-align: center;
    padding: 0;
}

/*--------------------------------------------- Interactive Book */
.h5p-interactive-book {
    margin-top: 50px !important;
}

.h5p-interactive-book-chapter>div {
    margin-left: 15% !important;
    margin-right: 15% !important;
    max-width: auto !important;
}

.h5p-interactive-book-content {
    padding: 50px;
}

.h5p-interactive-book-content h2 {
    line-height: 1.2 !important;
    text-transform: capitalize !important;
    margin-bottom: 30px !important;
    font-size: 4em !important;
    font-weight: 300 !important;
    text-align: left !important;
}

.h5p-interactive-book-content p {
    line-height: 1.4 !important;
}

.h5p-interactive-book-content p a {
    color: var(--color-primary) !important;
}

.h5p-interactive-book-content p a:hover {
    color: var(--color-primary) !important;
    opacity: 0.6 !important;
}

.h5p-interactive-book-content .h5p-image {
    margin-bottom: 30px;
    filter: grayscale(0.8);
}

.h5p-interactive-book-navigation-maintitle .navigation-title {
    font-family: var(--font-secondary) !important;
}

.h5p-interactive-book-status-chapter .title,
.h5p-interactive-book-navigation-chapter-button .h5p-interactive-book-navigation-chapter-title-text,
.h5p-interactive-book-status-chapter,
.h5p-interactive-book-navigation-menu,
.h5p-interactive-book {
    font-family: var(--font-secondary) !important;
    color: var(--color-body) !important;
}

.h5p-interactive-book-status-menu.h5p-interactive-book-status-menu-active,
.h5p-interactive-book-status-progressbar-front,
.h5p-interactive-book-navigation-maintitle {
    background: var(--color-primary) !important;
    font-family: var(--font-secondary) !important;
    color: var(--color-body) !important;
}

.h5p-interactive-book-status-menu.h5p-interactive-book-status-menu-active {
    color: #FFF !important;    
}

.h5p-interactive-book-status-button:hover,
.h5p-interactive-book-status-fullscreen,
.h5p-interactive-book-status-progressbar-back,
.h5p-interactive-book-status-arrow,
.h5p-interactive-book-navigation-chapter-button:hover,
.h5p-interactive-book-navigation-chapter-button.h5p-interactive-book-navigation-current {
    background-color: rgb(47 206 150 / 17%) !important;
}

.h5p-interactive-book-navigation-sectionlist:hover,
.h5p-accordion .h5p-panel-title:hover, .h5p-accordion .h5p-panel-title:focus, .h5p-accordion .h5p-panel-title:active
.h5p-interactive-book-status-menu .icon-menu,
.h5p-interactive-book-status-fullscreen.h5p-interactive-book-enter-fullscreen::before,
.h5p-interactive-book-status-progress-number,
.h5p-interactive-book-status-arrow .navigation-button {
    color: var(--color-primary) !important;
}

.h5p-accordion .h5p-panel-title {
    font-size: 1.4rem !important;
    margin-bottom: 0 !important;
}
.h5p-accordion .h5p-panel-content {
    background: #FFF !important;
    padding: 30px !important;
    border-radius: 5px !important;
}

/*--------------------------------------------- Flash cards */

.h5p-flashcards.h5p-standalone {
    background-color: transparent !important;
}

.h5p-flashcards .h5p-visual-progress {
    background-color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

.h5p-flashcards .h5p-card > .h5p-flashcard-overlay {
    background-color: #f0f0f1 !important;
}

.h5p-flashcards .h5p-current .h5p-cardholder {
    box-shadow: 0px 0px 23px 4px rgb(0 0 0 / 4%) !important;
}

.h5p-flashcards .h5p-progress,
.h5p-flashcards.h5p-standalone .h5p-description {
    color: #3e3e3e !important;
    border: 0 !important;
}

.using-mouse .h5p-flashcards .h5p-button.h5p-check-button:active {
    background-color: #167ac6;
    color: white;
}

.h5p-flashcards .h5p-navigation .h5p-button:hover {
    background: transparent !important;
}

.h5p-flashcards .h5p-description {
    text-align: left;
    font-size: 16px;
    margin: 0;
}

.h5p-flashcards .h5p-answer .h5p-button {
    position: absolute;
    display: inline-block;
    border: none;
    border-radius: 0 !important;
    background: #cbcbcb;
    color: #5b5b5b !important;
    margin-bottom: 0 !important;
    font-weight: 600 !important;
    padding: 0.5em 1em;
    box-shadow: none;
    top: 0;
    bottom: 0;
    right: 0;
     height: auto !important; 
    z-index: 2;
}

.h5p-flashcards .h5p-card .h5p-clue {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.h5p-flashcards .h5p-imageholder {
    background-color: #FFF !important;
}

.h5p-flashcards .h5p-answer .h5p-button:hover {
    background: #c9c9c9;
    opacity: 1 !important;
}

.h5p-audio-recorder-view .button.record,
.h5p-audio-recorder-view .button.record:hover {
    color: #FFF !important;
}

.h5p-audio-recorder-view .button.download,
.h5p-audio-recorder-view .button.retry {
	color: #FFF !important;
}

.h5p-dialogcards .h5p-dialogcards-card-content {
    background: #fff;
    box-shadow: 0 2px 15px rgb(0 0 0 / 9%);
    padding: 1em;
}

.h5p-dialogcards .h5p-dialogcards-image-wrapper>.h5p-dialogcards-image {
     text-align: center; 
     max-height: none; 
    max-width: 100%;
     vertical-align: bottom; 
     position: relative; 
     top: initial; 
     left: initial; 
     -webkit-transform: none; 
    -ms-transform: translate(-50%,-50%);
     transform: none; 
}

.h5p-dialogcards .h5p-dialogcards-card-text-wrapper {
    background: white;
}
.h5p-dialogcards .h5p-joubelui-button.h5p-dialogcards-turn {
        position: relative;
    display: block !important;
    width: 100% !important;
    line-height: 0;
    background: var(--color-primary);
}

.h5p-dialogcards .h5p-dialogcards-card-footer {
     height: auto; 
    display: block; 
    flex-direction: none; 
    justify-content: none; 
    position: absolute;
    top: 0;
    left: 0;
    margin: 10px;
}

.h5p-dialogcards .h5p-joubelui-button.h5p-dialogcards-footer-button {
    background: var(--dark-secondary) !important;
    top: 0 !important;
}

.h5p-dialogcards .h5p-dialogcards-footer {
    overflow: visible;
    margin: 50px auto;
    position: absolute;
    transform: translate(10px, 10px);
    max-width: 100%;
}

.h5p-questionnaire-required-symbol,
.h5p-questionnaire-progress-bar-widget,
.h5p-open-ended-question-content,
.h5p-questionnaire-footer,
.h5p-simple-multiple-choice-question,
.h5p-open-ended-question-question:before,
.h5p-simple-multiple-choice-question:before,
.h5p-simple-multiple-choice-alternatives, 
.h5p-simple-multiple-choice-alternatives-error,
.h5p-open-ended-question-question,
.h5p-questionnaire-submit-screen,
.h5p-questionnaire-success {
    background: rgba(255,255,255,0) !important; 
    font-family: var(--font-secondary);
}

.h5p-open-ended-question-question,
.h5p-simple-multiple-choice-question,
.h5p-questionnaire-submit-screen,
.h5p-questionnaire-success {
    color: var(--color-body);
}

.h5p-questionnaire-progress-bar-widget-current,
.h5p-questionnaire-required-symbol {
    color: var(--color-primary);
}

.h5p-questionnaire-footer {
    border: 0;
}

.h5p-questionnaire-progress-bar {
    display: none;
}

.h5p-questionnaire-progress-bar-current {
    background: var(--color-primary);
}

.h5p-questionnaire-button, .h5peditor .h5p-questionnaire-button {
    background: transparent !important;
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--font-secondary);
    font-size: 1rem;
    padding: 0;
}

.h5p-questionnaire-choice-required {
    position: relative;
    background-color: rgb(255 99 71 / 38%);
    color: #3c434a;
    padding: 15px;
    display: block;
    border-radius: 5px;
    border: 1px solid var(--color-wrong);
}

.h5p-questionnaire-choice-required-exit {
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

.h5p-questionnaire-progress-bar-widget:before {
    display: none;
}

.h5p-simple-multiple-choice-alternative-li:hover {
    border: 2px solid var(--color-primary);
    border-radius: 5px;
}

.h5p-simple-multiple-choice-alternative-li {
    border: 1px solid #e2e2e2;
    background: transparent;
    font-size: 1rem;
    padding: 20px 20px 20px 60px;
    border-radius: 5px;
}

.h5p-simple-multiple-choice-alternatives label {
    margin-bottom: 0 !important;
}

.h5p-open-ended-question-input {
    min-width: 100% !important;
}

.h5p-image-sequencing > ul {
    padding: 0;
}

.h5p-image-pair-item-hover {
    border: 2px solid var(--color-primary);
    box-shadow: 0px 0px 10px 0px rgb(44 208 150 / 31%);
    -moz-box-shadow: 0px 0px 10px 0px rgb(44 208 150 / 31%);
    -webkit-box-shadow: 0px 0px 10px 0px rgb(44 208 150 / 31%);
}

.h5p-image-pair-images-paired .h5p-image-pair-item-hover {
    border: 2px solid var(--color-primary);
}

.h5p-image-pair-overlay {
    background: var(--color-primary);
}

/*--------------------------------------------- Virtual 360 Tour */

.hud-btn:before {
    padding: 0 !important;
}

.hud-btn {
    font-size: 0.7em !important;
    background: #FFF !important;
    margin: 30px !important;
}

.h5p-text-dialog .close-button-wrapper:before {
    padding: 0 !important;
    font-size: 0.7em;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 0;
    right: 0;
}

.h5p-three-sixty-scene .nav-button {
    background: #FFF !important; 
    color: var(--color-primary) !important;
} 

.h5p-three-sixty-scene .nav-button:before,
.hud-btn.reset:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 1;
    color: var(--color-primary);
    font-size: 0.6em;
    height: initial;
    transform: translateY(-50%);
    text-align: center;
    padding: 0;
}

.h5p-three-sixty-scene .nav-button:hover {
    background: rgb(255 255 255 / 76%);
}

.h5p-text-dialog {
    padding: 60px !important;
    border-radius: 3px !important;
}

.h5p-text-dialog .close-button-wrapper {
    line-height: 1 !important;
    position: absolute !important;
    font-size: 1em !important;
    box-sizing: content-box !important;
    height: auto !important;
    width: auto !important;
    padding: 0 !important;
    top: 15px !important;
    right: 15px !important;
     box-shadow: none !important; 
    border: 8px solid #fff !important;
    background-color: transparent !important; 
    border-radius: 50%  !important;
    transition: background 0.5s linear !important;
    z-index: 2 !important;
    cursor: pointer !important;
    text-align: center !important;
    color: black !important;
    margin: 0 !important;
}

.h5p-text-dialog .close-button-wrapper:hover {
    color: var(--color-primary) !important;
    background-color: transparent !important;
}

.h5p-text-content a {
    color: var(--color-primary);
}

.h5p-text-input-field {
	padding: 0 30px 0 0 !important;
}

.joubel-simple-rounded-button { 
	background: var(--color-primary) !important;
}

.h5p-image-hotspot-plus:before {
    padding: 0 !important;
}

.h5p-image-hotspot {
    position: absolute;
    font-size: 1rem !important;
	color: #FFFFFF !important;
    height: auto !important;
    width: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 50px !important;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    background: var(--color-primary) !important;
    padding: 20px !important;
    border: 1px solid transparent;
    margin: 0;
    cursor: pointer;
    box-shadow: 0px 0px 8px 0px rgb(0 0 0 / 30%);
}

.joubel-exportable-submit-button,
.joubel-exportable-export-button, 
.joubel-export-page-close,
.joubel-exportable-copy-button {
    margin: 0 !important;
}

.h5p-course-presentation .h5p-progressbar .h5p-progressbar-part-show {
    background-image: none !important;
    background: var(--color-primary) !important;
}

.h5p-course-presentation .h5p-progressbar {
    background: var(--dark-secondary) !important;
    background-image: none !important;
}

.h5p-element-inner {
    font-family: var(--font-secondary);
    color: var(--color-body);
}

ul.h5p-sc-alternatives.h5p-sc-selected li.h5p-sc-alternative.h5p-sc-reveal-wrong.h5p-sc-selected, ul.h5p-sc-alternatives.h5p-sc-selected li.h5p-sc-alternative.h5p-sc-reveal-wrong.h5p-sc-selected:hover, ul.h5p-sc-alternatives.h5p-sc-selected li.h5p-sc-alternative.h5p-sc-reveal-wrong.h5p-sc-selected:active, ul.h5p-sc-alternatives.h5p-sc-selected li.h5p-sc-alternative.h5p-sc-reveal-wrong.h5p-sc-selected:focus, ul.h5p-sc-alternatives.h5p-sc-selected li.h5p-sc-alternative.h5p-sc-is-wrong.h5p-sc-selected.h5p-sc-reveal-wrong .h5p-sc-progressbar {
    color: var(--color-wrong);
    background: rgba(255,255,255,0.4) !important;
}

.h5p-sc-alternative.h5p-sc-is-wrong.h5p-sc-drummed .h5p-sc-status:after {
    color: var(--color-wrong);
}

ul.h5p-sc-alternatives.h5p-sc-selected li.h5p-sc-alternative.h5p-sc-reveal-correct, ul.h5p-sc-alternatives.h5p-sc-selected li.h5p-sc-alternative.h5p-sc-reveal-correct:hover, ul.h5p-sc-alternatives.h5p-sc-selected li.h5p-sc-alternative.h5p-sc-reveal-correct:active, ul.h5p-sc-alternatives.h5p-sc-selected li.h5p-sc-alternative.h5p-sc-reveal-correct:focus {
    color: var(--color-correct);
    background: rgba(255,255,255,0.4) !important;
}

.h5p-sc-alternative.h5p-sc-is-correct.h5p-sc-drummed .h5p-sc-status:after {
    color: var(--color-correct);
}

li.h5p-sc-alternative .h5p-sc-progressbar {
    background: rgba(255,255,255,0.4) !important;
}

.h5p-guess-answer .show-solution-button {
    -moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;

	border: 0;

	background: var(--color-primary) !important;
	color: #FFF !important;
	cursor: pointer;
	display: inline-block;
	font-size: 0.8em;
	font-weight: 800;
	line-height: 1;
	padding: 1em 2.5em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.h5p-flashcards .h5p-card.h5p-correct .h5p-imageholder > .h5p-flashcard-overlay {
    background-color: var(--color-correct);
}

.h5p-flashcards .h5p-card.h5p-wrong .h5p-imageholder > .h5p-flashcard-overlay {
    background-color: var(--color-wrong);
}

.h5p-guess-answer .solution-text {
    color: var(--color-correct);
    background: white;
}

.h5p-flashcards .h5p-answer .h5p-correct .h5p-feedback-label {
    color: var(--color-correct);
}

.h5p-flashcards .h5p-answer .h5p-wrong .h5p-feedback-label {
    color: var(--color-wrong);
}

.h5p-flashcards .h5p-visual-progress div {
    background: var(--color-primary) !important;
}

.h5p-guess-answer .show-solution-button:hover,
.h5p-guess-answer .show-solution-button:focus {
    opacity: 0.8;
    color: #FFFFFF;
    border: 0;
}

.h5p-guess-answer .h5p-image > img {
    margin-bottom: 1em;
    line-height: 0;
    max-width: 50%;
    height: auto;
    width: auto;
    margin-left: auto;
    position: relative;
    margin-right: auto;
}

.h5p-guess-answer {
    background: transparent;
}

.h5p-guess-answer .h5p-image > img {
    box-shadow: 0 0 1.2em rgb(0 0 0 / 10%); -webkit-box-shadow: 0 0 1.2em rgb(0 0 0 / 10%) !important;
}

.h5p-flashcards .h5p-results-list-item {
    color: var(--color-body);
    background: rgba(255,255,255,0.4) !important;
    border-color: var(--color-background);
}

.h5p-flashcards .h5p-results-list-item.h5p-incorrect .h5p-results-box {
    background: var(--color-wrong) !important;
}

.h5p-flashcards .h5p-results-box {
    background: var(--color-primary) !important;
}

.h5p-flashcards .h5p-results-title {
    color: var(--color-headings);
}

.h5p-flashcards .h5p-results-score,
.h5p-flashcards .h5p-results-score span {
    color: var(--color-body);
}

.h5p-flashcards .h5p-results-box:after {
    font-family: 'H5PFontIcons';
    content: "\e601";
    font-size: 2em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    color: white;
}

.h5p-flashcards .h5p-results-answer,
.h5p-flashcards .h5p-results-answer span.h5p-correct {
    color: var(--color-correct);
}

.h5p-flashcards .h5p-results-list-item.h5p-incorrect .h5p-results-answer {
    color: var(--color-wrong);
}

.h5p-multi-media-choice .h5p-multi-media-choice-enabled:hover:not(.h5p-multi-media-choice-selected),
.h5p-multi-media-choice .h5p-multi-media-choice-selected {
    border-color: var(--color-correct);
}

.h5p-multi-media-choice .h5p-multi-media-choice-enabled:hover:not(.h5p-multi-media-choice-selected):after {
    background-color: var(--color-correct);
}

.h5p-multi-media-choice .h5p-multi-media-choice-correct {
    background-color: transparent;
    border-color: var(--color-correct);
}

.h5p-multi-media-choice .h5p-multi-media-choice-correct:before {
    color: var(--color-correct);
}

.h5p-multi-media-choice .h5p-multi-media-choice-wrong {
    background-color: transparent;
    border-color: var(--color-wrong);
}

.sequencing-dropzone {
    background: background: rgba(255,255,255,0.4) !important;
    border-color: var(--color-primary);
}

.sequencing-item {
    background: white;
}

.draggabled .image-desc {
    color: var(--color-primary);
}

.draggabled .image-desc .text {
    background: white;
    color: var(--color-body);
}

.h5p-multi-media-choice .h5p-multi-media-choice-wrong:before {
    color: var(--color-wrong);
}