.h5p-documentation-tool {
  font-size: var(--h5p-theme-font-size-m);
}

/* Resets buttons styling */
.h5p-documentation-tool-main-content .page-help-text {
  font-family: var(--h5p-theme-font-name);
  font-size: var(--h5p-theme-font-size-m);
  background: none;
  border: 0;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
}

.h5p-documentation-tool .page-help-text::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Fix for box sizing themes */
.h5p-documentation-tool * {
  box-sizing: content-box;
}

.h5p-documentation-tool .joubel-exportable-area {
  box-sizing: border-box;
}

.h5p-documentation-tool .h5p-documentation-tool-main-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: var(--h5p-theme-ui-base);
}

.h5p-documentation-tool .h5p-documentation-tool-main-content:before {
  content: none;
}

.h5p-standalone.h5p-documentation-tool {
  max-width: 75em;
}

.h5p-documentation-tool-page-container {
  min-height: 500px;
  width: 100%;
  display: flex;
  color: var(--h5p-theme-text-secondary);
  padding: var(--h5p-theme-spacing-m);
}

.h5p-documentation-tool-page-container .h5p-documentation-tool-page {
  display: none;
  flex-direction: column;
  height: 100%;
  width: 100%;
  margin-bottom: var(--h5p-theme-spacing-s);
}

.h5p-documentation-tool-page-container .h5p-documentation-tool-page.current {
  display: flex;
}

.h5p-documentation-tool-page-container .h5p-documentation-tool-page * {
  visibility: hidden;
}

.h5p-documentation-tool-page-container .h5p-documentation-tool-page.current * {
  visibility: visible;
}

/* Make things untabbable when export page is open */
.h5p-documentation-tool-main-content.hidden .h5p-navigation-menu,
.h5p-documentation-tool-main-content.hidden .h5p-documentation-tool-page.current * {
  visibility: hidden;
}


/* Page header */
.h5p-documentation-tool-page .page-header {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-bottom: solid 1px var(--h5p-theme-stroke-1);
  gap: 10px;
  padding: 0 0 var(--h5p-theme-spacing-xxs) 0;
  outline: none; /* Override focus effect */
}

.h5p-documentation-tool-page .page-title {
  font-size: var(--h5p-theme-font-size-l);
  font-weight: bold;
  color: var(--h5p-theme-text-primary);
}


.h5p-documentation-tool-page .page-help-text {
  color: var(--h5p-theme-contrast-cta-white);
  cursor: pointer;
}

.h5p-documentation-tool-page .page-help-text:before {
  font-family: 'h5p-theme';
  content: "\e917";
  margin-right: var(--h5p-theme-spacing-xxs);
  margin-left: var(--h5p-theme-spacing-xxs);
  display: inline-block;
}
.h5p-documentation-tool-page .page-help-text:focus-visible {
  background-color: var(--h5p-theme-ui-base);
  outline: 2px ridge var(--h5p-theme-contrast-cta-white);
  outline-offset: 2px;
  border-radius: 20px;
}

.h5p-documentation-tool .h5p-documentation-tool-footer {
  display: flex;
  gap: var(--h5p-theme-spacing-xxs);
  justify-content: flex-end;

  margin-top: auto;

  container-type: inline-size;
  container-name: h5p-navigation;
}

/* ------ Documentation Tool Buttons --------------- */
/* Rounded button css in 'H5P.JoubelUI' library      */

.h5p-documentation-tool .h5p-theme-nav-button {
  box-sizing: border-box;
}

/* ---------------------------- Responsive view ----------------------------- */
.h5p-documentation-tool .h5p-documentation-tool-main-content.responsive .h5p-documentation-tool-page-container {
  margin-left: calc(var(--h5p-theme-spacing-s)*2.2);
}

@container h5p-navigation (max-width: 400px) {
  .h5p-documentation-tool .h5p-theme-next::after,
  .h5p-documentation-tool .h5p-theme-previous::before {
    margin: 0;
  }
}