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


.h5p-iframe-wrapper .h5p-iframe {
	box-shadow: 0px 0px 1px rgba(71, 98, 133, 0.25), 0px 12px 16px -8px rgba(71, 98, 133, 0.2) !important; 
}

.h5p-content {
	background: #FFF !important;
}
.h5p-multichoice .h5p-alternative-container {
	background-color: #FFF !important;
	box-shadow: none !important;
	outline: none !important;
}
.h5p-multichoice .h5p-answer[role="checkbox"] .h5p-alternative-container:before {
	background: #FFF !important;
	border: 3px solid #0168EF;
	border-radius: 4px;
	left: 0.3em !important;
	top: 0.3em !important;
	content: '' !important;
}
.h5p-multichoice .h5p-answer[role="checkbox"][aria-checked="true"] .h5p-alternative-container:after {
	content: '';
	background: #0168EF;
	border-radius: 2px;
	position: absolute;
	width: 10px;
	height: 10px;
	left: 10.5px;
	top: 10.8px;
}
.h5p-dragquestion .h5p-label {
	font-size: 16px;
	padding: 10px;
}
.h5p-multichoice .h5p-answer-icon {
	width: 13px;
	height: 13px;
	line-height: 10px;
	top: 2px;
	left: 20px;
	border-radius: 100%;
	padding: 1px !important;
}
.h5p-multichoice .h5p-correct .h5p-answer-icon {
	background: #007A3B;
}
.h5p-multichoice .h5p-correct .h5p-answer-icon:before,.h5p-multichoice .h5p-wrong .h5p-answer-icon:before {
	font-size: 10px;
	color: #FFF;
	position: relative;
	top: -1px;
	left: 1.5px;
}
.h5p-multichoice .h5p-wrong .h5p-answer-icon {
	background: #b71c1c;
}
.h5p-question-feedback,.h5p-question-scorebar {
	margin-left: 1em !important;
	margin-right: 1em !important;
}
.h5p-multichoice .h5p-answer[role="radio"] .h5p-alternative-container:before {
	background: #FFF !important;
	border: 3px solid #0168EF;
	border-radius: 100%;
	left: 0.3em !important;
	top: 0.3em !important;
	content: '' !important;
}
.h5p-multichoice .h5p-answer[role="radio"][aria-checked="true"] .h5p-alternative-container:after {
	content: '';
	background: #0168EF;
	border-radius: 100%;
	position: absolute;
	width: 10px;
	height: 10px;
	left: 10.5px;
	top: 10.8px;
}
.h5p-joubelui-button,.h5p-core-button,.h5p-dialogcards .h5p-joubelui-button.h5p-dialogcards-answer-button {
	background: #0168EF !important;
	padding: 0.7em 1.40em !important;
	border: none !important;
}
.h5p-joubelui-button:active {
	box-shadow: none;
}
.h5p-dragquestion .h5p-draggable p {
	font-size: 18px;
}
.h5p-dragquestion .h5p-draggable.h5p-advanced-text {
  margin-bottom: 10px !important;
  padding: 3px 10px;
}
@media(max-width:767px){
	.h5p-dragquestion .h5p-draggable.h5p-advanced-text {
		 padding: 3px 5px;
	}
	
}
.h5p-dragquestion .h5p-dropzone > .h5p-inner {
	background: #F4F4F4;
	border: 1px dashed #BFC4CA;
	border-radius: 4px !important;
}
.h5p-task-description {
	padding-left: 0px !important;
	padding-right: 0px !important;
}
.h5p-image-sequencing > ul,.h5p-image-sequencing .footer-container {
	padding-left: 0px !important;
}
.sequencing-status span {
	display: flex;
	margin-bottom: 10px;
}
.draggabled .image-container {
	box-shadow: none !important;
}
.h5p-container {
	padding: 0.5em 1.5em;
}
.h5p-question-introduction {
	margin: 1em 0px !important;
}
.sequencing-item {
	box-shadow: 0px 0px 1px rgba(71, 98, 133, 0.25), 0px 12px 16px -8px rgba(71, 98, 133, 0.2) !important;
}
.h5p-blanks .h5p-text-input {
	border: 2px solid #0168EF;
	padding: 7px 10px;
	border-radius: 0px;
}
.h5p-question-introduction .MathJax_Display {
	text-align: left !important;
}
.h5p-alternative-inner .MathJax_Display {
	display: inline !important;
	margin: 0px !important;
}
.h5p-sort-paragraphs .h5p-sort-paragraphs-paragraph {
	background-color: #FFF !important;
	box-shadow: 0px 0px 1px rgba(71, 98, 133, 0.25), 0px 12px 16px -8px rgba(71, 98, 133, 0.2);
}
.h5p-sort-paragraphs .h5p-sort-paragraphs-button {
	box-shadow: 0px 0px 1px rgba(71, 98, 133, 0.25), 0px 12px 16px -8px rgba(71, 98, 133, 0.2);
}
.h5p-sort-paragraphs .h5p-sort-paragraphs-button.h5p-sort-paragraphs-disabled {
	background-color: #eee !important;
}
.h5p-true-false-answer {
  box-shadow: 0px 0px 1px rgba(71, 98, 133, 0.25), 0px 12px 16px -8px rgba(71, 98, 133, 0.2);
}
.h5p-true-false-answer:before {
	background: #FFF !important;
	border: 3px solid #0168EF;
	border-radius: 100%;
	left: 0.3em !important;
	top: 0.3em !important;
	content: '' !important;
  padding: 0px 6px;
}
.h5p-true-false-answer[aria-checked=true] .aria-label::after {
	content: '';
  background: #0168EF;
  border-radius: 100%;
  position: absolute;
  width: 5px;
  height: 5px;
  left: 13px;
  top: 17.5px;
}
.h5p-true-false-answer[aria-checked=true] .aria-label {
  top: 0;
  width: 10px;
  height: 10px;
  overflow: visible;
  font-size: 0px;
}
.h5p-true-false-answer.correct:after {
  background: #239059;
  content: '\f00c';
  color: #fff;
  position: absolute;
  right: 0;
  top: 0;
  left: auto;
  border-radius: 0;
  width: 2.5em;
  height: 100%;
}
.h5p-true-false-answer.wrong:after {
  background: #dd2e2e;
  content: '\f00d';
  color: #fff;
  position: absolute;
  right: 0;
  top: 0;
  left: auto;
  border-radius: 0;
  width: 2.5em;
  height: 100%;
}
.h5p-drag-text [aria-dropeffect] {
	padding: 0.5em 1.5em 0.5em 0.3em;
}
.h5p-drag-text [aria-grabbed] {
	box-shadow: 0px 0px 1px rgba(71, 98, 133, 0.25), 0px 12px 16px -8px rgba(71, 98, 133, 0.2);
	padding: 5px 10px;
	margin: 0.8em;
	background: #FFF;
    border: 1px solid #F2F2F2;
}
.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: 1px solid #0168EF;
    color: #FFF;
    background: #0168EF;
	transition: 0.3s;
}
.h5p-drag-text [aria-grabbed].h5p-drag-dropped {
	padding: 0.3em 0.5em;
	margin: -0.4em 0 0 0;
}
.joubel-speech-bubble-inner {
	box-shadow: 0px 0px 1px rgba(71, 98, 133, 0.25), 0px 12px 16px -8px rgba(71, 98, 133, 0.2);
	padding: 6px 10px;
}
.h5p-mark-the-words .h5p-word-selectable-words:not(.h5p-disable-hover) [role="option"]:hover {
	padding: 4px 7px;
    transition: 0.3s;
}
.h5p-mark-the-words [aria-selected="true"] {
    border: 2px solid #0168EF !important;
    padding: 3px 5px !important;
    background: transparent !important;
}
.h5p-my-fullscreen-button-enter {
	display: none !important;
}
.h5p-multi-media-choice .h5p-multi-media-choice-option-list {
	margin-top: 0px;
}
.h5p-multi-media-choice .h5p-multi-media-choice-option,.h5p-image-pair-item-hover {
	transition: 0.3s;
}
.h5p-image-pair-item-hover,.h5p-image-pair-item .image-container {
	box-shadow: 0px 0px 1px rgba(71, 98, 133, 0.25), 0px 12px 16px -8px rgba(71, 98, 133, 0.2);
}
.h5p-data-container {
	margin-bottom: 80px;
	position: relative;
	box-shadow: 0px 0px 1px rgba(71, 98, 133, 0.25), 0px 12px 16px -8px rgba(71, 98, 133, 0.2);
}
.h5p-data-container p {
	position: absolute;
	bottom: -50px;
	left: 0;
	width: 100%;
}
.h5p-data-container p code {
	background-color: transparent;
	font-size: 16px;
	line-height: 20px;
	color: #A6B1BF;
	font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
	background: #FFF;
    padding: 10px;
    width: 100%;
    display: block;
}
@media (max-width: 767px) {
	.h5p-dragquestion .h5p-label {
		font-size: 10px;
		padding: 3px 3px 1px 3px;
	}
	.h5p-dragquestion .h5p-draggable p {
		font-size: 12px;
	}
}
@media (max-width: 570px) {
	.h5p-dragquestion .h5p-draggable p {
		font-size: 8px;
	}
	.h5p-joubelui-button {
		padding: 10px 12px !important;
	}
	.h5p-question-buttons {
		display: flex !important;
		align-items: center !important;
	}
	.h5p-drag-text [aria-dropeffect] {
		margin: 5px 0px;
	}
}



/* 10/Jul/2023 */
.h5p-dragquestion > .h5p-question-content > .h5p-inner {
	background-size: contain;
	background-position: center !important;
  }
.h5p-dragquestion-editor .hardware-accelerated{
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.h5p-dragquestion .ui-draggable-handle.h5p-advanced-text p{
	word-wrap: break-word;
}


/* 13/Jul/2023 */
.h5p-drag-text .h5p-drag-task {
    display: flex !important;
    flex-direction: column;
}

.h5p-drag-text .h5p-drag-wide-screen {
    order: 1;
}
.h5p-drag-text .h5p-drag-wide-screen div[role=button]{
	display:inline-block;
}

.h5p-drag-droppable-words {
    margin: unset !important;
}

/* 19/07/2023 */
.h5p-dialogcards .h5p-joubelui-button.h5p-dialogcards-answer-button{
	color:#fff;
}

/* 10/08/2023 */

.h5p-dialogcards .h5p-dialogcards-card-footer .h5p-dialogcards-answer-button {
	opacity:0;
	pointer-events:none;
	transition: opacity 1s linear;
}

.h5p-dialogcards .h5p-dialogcards-turned .h5p-dialogcards-card-footer .h5p-dialogcards-answer-button {
	opacity:1;
	pointer-events:unset;
}
.h5p-dialogcards .h5p-joubelui-button.h5p-dialogcards-answer-button.incorrect.h5p-dialogcards-quick-progression:hover{
	color:#d95354;
}
.h5p-dialogcards .h5p-joubelui-button.h5p-dialogcards-answer-button.incorrect.h5p-dialogcards-quick-progression{
	background-color:#ffe2e2!important;
}

.h5p-dialogcards .h5p-joubelui-button.h5p-dialogcards-answer-button.correct.h5p-dialogcards-quick-progression{
	background-color:#c4f1d2!important;
}
.h5p-dialogcards .h5p-joubelui-button.h5p-dialogcards-answer-button.correct.h5p-dialogcards-quick-progression:hover{
	color:#1f824c;
}
@media (max-width:475px){
	.h5p-dialogcards .h5p-dialogcards-card-text-wrapper{
		height:21em;
	}
	.h5p-dialogcards .h5p-dialogcards-card-footer{
		column-gap:5px;
		row-gap:5px;
		flex-direction:column;
		align-items:center;
		/* comment */
	}
	
}

.h5p-confirmation-dialog-popup{
	top:2em!important;
	min-width:260px;
}
.h5p-confirmation-dialog-popup .h5p-confirmation-dialog-buttons{
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 12px;
}
@media(max-width:475px){
	.h5p-confirmation-dialog-popup .h5p-confirmation-dialog-buttons button[class^=h5p-core-]{
		font-size:14px;
	}
}