/* Regular */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts-h5p/static/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* Italic */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts-h5p/static/Montserrat-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

/* Thin */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts-h5p/static/Montserrat-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

/* Thin Italic */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts-h5p/static/Montserrat-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}

/* ExtraLight */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts-h5p/static/Montserrat-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

/* ExtraLight Italic */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts-h5p/static/Montserrat-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
}

/* Light */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts-h5p/static/Montserrat-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

/* Light Italic */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts-h5p/static/Montserrat-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

/* Medium */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts-h5p/static/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

/* Medium Italic */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts-h5p/static/Montserrat-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

/* SemiBold */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts-h5p/static/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

/* SemiBold Italic */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts-h5p/static/Montserrat-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}

/* Bold */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts-h5p/static/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* Bold Italic */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts-h5p/static/Montserrat-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* ExtraBold */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts-h5p/static/Montserrat-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

/* ExtraBold Italic */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts-h5p/static/Montserrat-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
}

/* Black */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts-h5p/static/Montserrat-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

/* Black Italic */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts-h5p/static/Montserrat-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

/* ✅ Aplica la font a tot l'H5P */
html.h5p-iframe,
.h5p-content, 
.h5p-container, 
.h5p-question {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 18px;
}
.h5p-iframe-wrapper iframe.h5p-iframe {
	padding: 1em;
}
strong {
  font-weight: 600;
}

.h5p-container {
  border: 0;
}




ul.h5p-sc-alternatives li.h5p-sc-alternative,
.h5p-multichoice .h5p-alternative-container {
	background: #d6ecf2;
	color: #034f69;
	padding: .8em 1.2em;
	font-weight: 600;
	box-shadow: none;
}
ul.h5p-sc-alternatives li.h5p-sc-alternative:hover,
.h5p-multichoice .h5p-alternative-container:hover,
.h5p-multichoice .h5p-answer:not([aria-disabled="true"]):hover .h5p-alternative-container {
  background: #8dd0e2;
}
.h5p-multichoice .h5p-answer .h5p-alternative-container::before {
  top: 0.75em;
}
.h5p-multichoice .h5p-answer .h5p-alternative-container::before {
  left: 1.5em;
  top: 0.4em;
  color: #034f69;
  font-size: 30px;
}
.h5p-alternative-inner {
  margin: 0 0.75em 0 3.5em;
}


.h5p-single-choice-set .h5p-joubelui-progressbar {
  background-color: #d6ecf2;
}
.h5p-single-choice-set .h5p-joubelui-progressbar-background {
  background-color: #034f69;
}



.progress-dot.current {
	background-color: #034f69;
}
.progress-dot.current::before {
  border-color: transparent;
  border: 0;
}



.h5peditor .ui-dialog .h5p-joubelui-button, .h5peditor .h5p-joubelui-button, .h5p-joubelui-button {
  background: #034f69;
}
.h5p-joubelui-button:hover, .h5p-joubelui-button:focus {
  background: #8dd0e2;
}



.h5p-true-false-answer {
  border: 0;
  box-shadow: none;
}
.h5p-true-false-answer::before {
  font-size: 1.1em;
  color: #b2b2b1;
}
.h5p-true-false-answers > .h5p-true-false-answer:first-child::after {
	background: url(./imatges/ico-cert.png) no-repeat 0 0;
	background: none;
}
.h5p-true-false-answers > .h5p-true-false-answer:nth-child(2)::after {
        background: url(./imatges/ico-fals.png) no-repeat 0 0;
	background: none;
}
.h5p-true-false-answer.wrong:after,
.h5p-true-false-answer.correct::after {
	content: '';
}




.h5p-question-feedback { 
  color: #006985; 
  font-weight: 500;
}
.h5peditor .ui-dialog .h5p-joubelui-button, .h5peditor .h5p-joubelui-button, .h5p-joubelui-button  {
	 background: #006985;
 }



.h5p-image-slider-button-text {
  font-size: 3em;
}
 .h5p-image-slider-right-button .h5p-image-slider-button-text {
  background-color: #006985;
  border-radius: 50%;
}
.h5p-image-slider-current-progress-element {
  background: none;
  background-color: #006985;
}
.h5p-image-slider-progress-element {
  background: no-repeat url("./imatges/circle-inactive.png");
}
.h5p-image-slider-current-progress-element {
  background: no-repeat url("./imatges/circle-active.png");
}



.h5p-image-hotspot-popup {
  background: #8dd0e2;
  color: #006985;
}
.h5p-image-hotspot-popup-pointer.visible.to-the-right {
  border-right: 0.6em solid #8dd0e2;
}
.h5p-image-hotspot-popup-pointer {
  border-left: 0.6em solid #8dd0e2;
}
.h5p-question-buttons.h5p-question-visible {
  width: calc(100%);
}
.h5p-question-buttons .h5p-joubelui-button, .h5p-question-buttons .h5p-joubelui-button:first-child:last-child {
  margin: 0;
}




.h5p-image-hotspot-popup-body > * {
  line-height: 1.2;
}





.h5p-dialogcards-image-wrapper {
  margin-bottom: 1.5em;
}

.h5p-dialogcards-card-text .h5p-dialogcards-card-text-area p {
  font-size: 15px;
  color: #034f69;
}

@media screen and (min-width: 769px) {
	.h5p-dialogcards-card-text .h5p-dialogcards-card-text-area p {
	  font-size: 20px;
	}
}


@media screen and (max-width: 767px) {
  .h5p-dragquestion .h5p-draggable {
    font-size: 15px;
    text-align: left;
    display: inline-block;
    height: auto!important;
  }
}



.h5p-multi-media-choice .h5p-question-scorebar-container { display: none; }
.h5p-multi-media-choice-list-item {
  width: 265px!important;
}
.h5p-multi-media-choice .h5p-multi-media-choice-enabled:hover:not(.h5p-multi-media-choice-selected) {
  border-color: #0d6d86;
}
.h5p-multi-media-choice .h5p-multi-media-choice-selected:hover::after {
  background-color: #0d6d86;
}
.h5p-multi-media-choice .h5p-multi-media-choice-selected {
  border-color: #0d6d86;  
}
.h5p-multi-media-choice .h5p-multi-media-choice-show-correct::before {
  color: #0d6d86;
}
.h5p-multi-media-choice .h5p-multi-media-choice-show-correct {
  border-color: #0d6d86;
}





.h5p-flashcards.h5p-standalone {
  background-color: #d8d1e0;
}
.h5p-flashcards.h5p-standalone .h5p-description,
.h5p-flashcards .h5p-navigation .h5p-button,
.h5p-flashcards .h5p-progress,
.h5p-show-results button,
.h5p-flashcards .h5p-results-answer span.h5p-correct,
.h5p-flashcards .h5p-results-answer,
.h5p-flashcards .h5p-results-title,
.h5p-flashcards .h5p-results-score span, 
.h5p-flashcards .h5p-results-list-item,
.h5p-flashcards .h5p-results-retry-button {
  color: #0a6a85;
}
.h5p-flashcards .h5p-results-score,
.h5p-flashcards .h5p-results-answer span {
  color: #333;
}
.h5p-flashcards .h5p-answer .h5p-button {
  background-color: #0a6a85;
}
.h5p-flashcards .h5p-visual-progress div {
  background-color: #0a6a85;
}