:root {
  --mdc-typography-font-family: var(--jr-main-text-font, calmetta);
}

body, main {
  /* we need to do that, because otherwise the iframe wouldn't shrink, anymore */
  min-height: auto;
  width: 100%;
}

/* we need the following for compatibility with the LEGACY theme */
.jr-svg-symbol-repository {
  display: none !important;
  height: 0;
}

body, html {
  background-color: transparent;
}

body {
  font-family: var(--jr-main-text-font, calmetta);
  font-size: var(--jr-main-text-size, var(--jdFontSize4));
  font-weight: var(--jr-regular-button-label-text-weight, var(--jdFontWeightsRegular));
  line-height: var(--jr-main-text-line-height);
}

body > .j-main {
  align-self: center;
  max-width: 50rem;
}

.j-bgc,
.j-background {
  --j-color-background: var(--jr-main-container-color, var(--jdSemanticBgLightgrey));
  background: var(--j-color-background);

  --j-color-foreground: var(--jr-main-text-color, var(--jdSemanticFgBlack));
  color: var(--j-color-foreground);
}