.h5p-dragquestion .h5p-question-content {
  --h5p-theme-spacing-xl: calc(3em * 0.8);
  --h5p-theme-spacing-l: calc(2em * 0.8);
  --h5p-theme-spacing-m: calc(1.5em * 0.8);
  --h5p-theme-spacing-s: calc(1em * 0.8);
  --h5p-theme-spacing-xs: calc(0.65em * 0.8);
  --h5p-theme-spacing-xxs: calc(0.5em * 0.8);
  --h5p-theme-font-size-xxl: 1.5em;
  --h5p-theme-font-size-xl: 1.25em;
  --h5p-theme-font-size-l: 1.125em;
  --h5p-theme-font-size-m: 1em;
  --h5p-theme-font-size-s: 0.85em;
}

.h5p-dragquestion .h5p-question-plus-one-container,
.h5p-dragquestion .h5p-question-minus-one-container {
  height: calc(1.25em * 0.638297872);
  position: absolute;
  right: -0.15em;
  scale: unset;
  top: -0.15em;
  width: 1.25em;
}

.h5p-dragquestion {
  display: block;
  background: #fff;
}

html.h5p-iframe .h5p-container.h5p-dragquestion.h5p-semi-fullscreen,
html.h5p-iframe .h5p-container.h5p-dragquestion.h5p-fullscreen {
  overflow-y: auto;
  overflow-x: hidden;
}

html.h5p-iframe .h5p-container.h5p-dragquestion.h5p-semi-fullscreen {
  overflow-x: auto;
}

.h5p-question-content.h5p-dragquestion-has-no-background {
  border-bottom: 1px solid #eee;
}

.h5p-dragquestion .h5p-question-content > .h5p-inner {
  position: relative;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  margin: 0 auto;
  overflow: hidden;
}

.h5p-dragquestion .h5p-question-content {
  margin-left: 0;
  margin-right: 0;
}

.h5p-dragquestion .h5p-static {
  background: var(--h5p-theme-ui-base);
  position: absolute;
  z-index: 1;
}

.h5p-dragquestion .h5p-static.h5p-advanced-text {
  padding: 0.25em 0.5em;
  border-radius: 0.25em;
}

.h5p-dragquestion .h5p-static > h2 {
  font-size: 1.5em;
  line-height: 1.25em;
  margin: 0;
}

.h5p-dragquestion .h5p-static > p {
  margin: 0;
  padding: 0;
  font-size: 1em;
  line-height: 1.25em;
}

.h5p-dragquestion .h5p-draggable {
  --padding: 0.3em;

  line-height: 1.25em;
  padding-block: var(--padding);
  position: absolute;
}

.h5p-dragquestion .h5p-draggable:not(.h5p-draggable--has-handle) {
  padding-inline: var(--padding);
}

.h5p-dragquestion .h5p-draggable::before {
  font-size: 1rem; /* Prevent scaling depending on task size settings */
}

.h5p-dragquestion
  .h5p-draggable:has(.h5p-image):not(:hover):not(
    :focus
  ).h5p-draggable--has-handle::before {
  display: none;
}

.h5p-dragquestion .h5p-draggable:has(.h5p-image).h5p-draggable--has-handle {
  padding-inline: var(--padding);
  padding-left: var(--padding);
}

.h5p-dragquestion:not(:has(.h5p-question-evaluation-container.evaluation-mode))
  .h5p-draggable:has(.h5p-image):hover.h5p-draggable--has-handle,
.h5p-dragquestion:not(:has(.h5p-question-evaluation-container.evaluation-mode))
  .h5p-draggable:has(.h5p-image):focus.h5p-draggable--has-handle {
  /* --border-width and --handle-width stem from H5P.Components.Draggable */
  padding-left: calc(
    var(--border-width) + var(--handle-width) + var(--padding)
  );
  transform: translateX(calc(-1 * var(--border-width) - var(--handle-width)));
}

.h5p-dragquestion .h5p-draggable:focus-visible {
  border-radius: 4px;
  outline: 2px ridge var(--h5p-theme-contrast-cta-white);
  outline-offset: 2px;
}

.h5p-dragquestion .h5p-draggable .h5p-advanced-text {
  margin-inline: auto;
  width: 100%;
}

.h5p-dragquestion .h5p-draggable .h5p-image {
  height: 100%;
  width: 100%;
}

/* Override component css */
.h5p-dragquestion .h5p-draggable p,
.h5p-dragquestion .h5p-draggable span {
  display: inline-block;
  align-content: center;
  width: 100%;
  margin: auto;
  color: var(--h5p-theme-text-primary);
  padding: var(--h5p-theme-spacing-xxs) 0;
  line-height: 1;
  font-size: var(--h5p-theme-font-size-m);
}

.h5p-dragquestion .h5p-draggable.h5p-correct p {
  color: var(--h5p-theme-feedback-correct-main);
}

.h5p-dragquestion .h5p-draggable.h5p-wrong p {
  color: var(--h5p-theme-feedback-incorrect-main);
}

.h5p-dragquestion .h5p-draggable img {
  -webkit-user-drag: none;
  pointer-events: none;
}

.h5p-dragquestion .h5p-dropped.h5p-correct,
.h5p-dragquestion .h5p-dropzone.h5p-correct-answer {
  color: var(--h5p-theme-feedback-correct-main);
  border: 0.1em solid var(--h5p-theme-feedback-correct-third);
  box-shadow: none;
  background: hsl(
    from var(--h5p-theme-feedback-correct-secondary) h s l /
      var(--content-opacity, 1)
  );
}

.h5p-dragquestion .h5p-dropped.h5p-wrong {
  border: 0.1em solid var(--h5p-theme-feedback-incorrect-third);
  color: var(--h5p-theme-feedback-incorrect-main);
  background: hsl(
    from var(--h5p-theme-feedback-incorrect-secondary) h s l /
      var(--content-opacity, 1)
  );
}

.h5p-dragquestion .h5p-dropped.h5p-wrong,
.h5p-dragquestion .h5p-dropped.h5p-correct {
  text-align: left;
  box-shadow: none !important;
}

.h5p-dragquestion .h5p-draggable.h5p-correct::after,
.h5p-dragquestion .h5p-draggable.h5p-wrong::after {
  font-family: 'h5p-theme';
  font-size: 0.65em;
  font-weight: normal;
  position: absolute;
  right: -0.15em;
  bottom: -0.15em;
  background: var(--h5p-theme-ui-base);
  border-radius: 0.25em;
  line-height: 1;
  padding: 0.125em;
}

.h5p-dragquestion .h5p-draggable.h5p-correct.h5p-advanced-text::after,
.h5p-dragquestion .h5p-draggable.h5p-wrong.h5p-advanced-text::after {
  background: none;
}

.h5p-dragquestion .h5p-draggable:not(.h5p-draggable--has-handle).h5p-dropped {
  border-color: transparent;
}

.h5p-dragquestion .h5p-dropped.h5p-correct::after {
  content: '\e903';
  border: var(--h5p-theme-feedback-correct-main) solid 0.125em;
}

.h5p-dragquestion .h5p-dropped.h5p-wrong::after {
  content: '\e902';
  border: var(--h5p-theme-feedback-incorrect-main) solid 0.125em;
}

.h5p-dragquestion .h5p-draggable:not(.h5p-draggable--has-handle):hover {
  border-color: transparent;
}

/* Make sure dragquestion has margins in fullscreen */
.h5p-dragquestion.h5p-fullscreen > .h5p-question-buttons,
.h5p-dragquestion.h5p-fullscreen > .h5p-question-feedback,
.h5p-dragquestion.h5p-fullscreen > .h5p-question-introduction {
  margin-left: 1em;
  margin-right: 1em;
}

/* Full screen button styling */
.h5p-dragquestion .h5p-my-fullscreen-button-enter,
.h5p-dragquestion .h5p-my-fullscreen-button-exit {
  display: flex;
  align-items: center;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
  padding: var(--h5p-theme-spacing-xs);
  font-size: var(--h5p-theme-font-size-m);
  background-color: var(--h5p-theme-contrast-cta-light);
  border-radius: var(--h5p-theme-border-radius-large);
  color: var(--h5p-theme-contrast-cta-white);
  cursor: pointer;
}

.h5p-dragquestion .h5p-my-fullscreen-button-enter:hover,
.h5p-dragquestion .h5p-my-fullscreen-button-exit:hover {
  background-color: color-mix(
    in srgb,
    var(--h5p-theme-contrast-cta-light),
    transparent 60%
  );
}

.h5p-dragquestion .h5p-my-fullscreen-button-enter:focus-visible,
.h5p-dragquestion .h5p-my-fullscreen-button-exit:focus-visible {
  outline: var(--h5p-theme-contrast-cta-white) solid 2px;
}

.h5p-dragquestion .h5p-my-fullscreen-button-enter {
  line-height: 1.5em;
  width: 1.5em;
  height: 1.5em;
}

.h5p-dragquestion .h5p-my-fullscreen-button-exit {
  line-height: 1.5em;
  width: 1.5em;
  height: 1.5em;
}

.h5p-dragquestion .h5p-my-fullscreen-button-enter::before {
  font-family: 'h5p-theme';
  content: '\e915';
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

.h5p-dragquestion .h5p-my-fullscreen-button-exit::before {
  font-family: 'h5p-theme';
  content: '\e914';
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

.h5p-dragquestion .h5p-dq-no-dz {
  position: absolute;
}

.h5p-dragquestion .h5p-dragquestion-introduction {
  outline: none;
}

.h5p-dragquestion .h5p-draggable .h5p-question-plus-one-container,
.h5p-dragquestion .h5p-draggable .h5p-question-minus-one-container {
  background-color: hsl(0, 0%, 100%);
}

.h5p-dragquestion .h5p-question-plus-one,
.h5p-dragquestion .h5p-question-minus-one {
  width: 1.25em;
  height: calc(1.25em * 0.638297872);
  top: 0;
  left: 0;
}

.h5p-dragquestion
  .h5p-dq-highlight-dz
  .h5p-dropzone
  > .h5p-inner.h5p-dropzone--active,
.h5p-dragquestion .h5p-dq-highlight-dz-always .h5p-dropzone > .h5p-inner {
  padding: 0;
  border: 2px dashed var(--h5p-theme-contrast-cta-white);
  border-style: dashed;
}