@roqua/quby-frontend 0.11.2 → 0.12.1

package/dist/quby-frontend.es.js

@@ -6651,7 +6651,7 @@ class AlwaysCondition extends BaseCondition {
 }
 class AnsweredCondition extends BaseCondition {
   match(response) {
-    const fieldState = response.getFieldState(this.condition.fieldKey);
+    const fieldState = response.getVisibilityFieldState(this.condition.fieldKey);
     if (fieldState.hidden && !this.condition.evenWhenHidden) {
       return false;
     }
@@ -6738,7 +6738,6 @@ class Questionnaire {
   constructor(data) {
     __publicField(this, "key");
     __publicField(this, "panels");
-    __publicField(this, "footer");
     __publicField(this, "questions");
     __publicField(this, "validations");
     __publicField(this, "visibilityRules");
@@ -6748,11 +6747,12 @@ class Questionnaire {
     // type checked on response.
     __publicField(this, "cssVars");
     __publicField(this, "layoutVersion");
+    __publicField(this, "defaultLanguage");
+    __publicField(this, "translations", {});
     __privateAdd(this, _flatOptions, {});
     this.key = data.key;
     this.questions = data.questions;
     this.panels = data.panels;
-    this.footer = data.footer;
     this.validations = data.validations;
     this.visibilityRules = data.visibilityRules.map((rule) => buildVisibilityRule(rule));
     this.textvars = Object.values(data.textvars);
@@ -6760,6 +6760,8 @@ class Questionnaire {
     this.defaultAnswerValue = data.defaultAnswerValue;
     this.cssVars = data.cssVars;
     this.layoutVersion = data.layoutVersion || "v1";
+    this.defaultLanguage = data.language || "nl";
+    this.translations = data.translations;
   }
   getField(key) {
     return this.questions[key];
@@ -6774,10 +6776,19 @@ class Questionnaire {
       return [question];
     }
   }
+  getChildQuestionKeys(questionKey) {
+    const question = this.getField(questionKey);
+    if (question.type === "radio" || question.type === "check_box") {
+      return question.children.flatMap((child) => "questions" in child ? child.questions.map((q) => q.key) : []);
+    } else {
+      return [];
+    }
+  }
+  // get all options for the question, including those in optgroups, excludes other children.
   getFlatOptions(questionKey) {
     var _a;
     const question = this.getField(questionKey);
-    if (question.type !== "select" && question.type !== "radio" && question.type !== "scale") {
+    if (question.type !== "select" && question.type !== "radio" && question.type !== "scale" && question.type !== "check_box") {
       throw new Error(`Question ${questionKey} does not have options.`);
     }
     return (_a = __privateGet(this, _flatOptions))[questionKey] ?? (_a[questionKey] = question.children.flatMap((option_or_group) => {
@@ -6793,7 +6804,7 @@ class Questionnaire {
   getOptionNumberValue(questionKey, optionKey) {
     var _a;
     const option = (_a = this.getFlatOptions(questionKey)) == null ? void 0 : _a.find((opt) => opt.key === optionKey);
-    if (option && typeof option.value === "number") {
+    if (option && "value" in option && typeof option.value === "number") {
       return option.value;
     } else {
       return null;
@@ -12567,11 +12578,13 @@ const _Calculations = class _Calculations {
     }
     return this.results[key] ?? null;
   }
-  handleValueChanged(key) {
+  // returns the keys of the calculations that have changed.
+  handleValueChanged(questionKey) {
     var _a;
-    (_a = this.questionKeyToCalculationKeys[key]) == null ? void 0 : _a.forEach((calculationKey) => {
+    (_a = this.questionKeyToCalculationKeys[questionKey]) == null ? void 0 : _a.forEach((calculationKey) => {
       delete this.results[calculationKey];
     });
+    return this.questionKeyToCalculationKeys[questionKey] ? Array.from(this.questionKeyToCalculationKeys[questionKey]) : [];
   }
   calculate(calculation) {
     return z(calculation).with({ op: "string_value" }, ({ key }) => this.stringValue(key)).with({ op: N.union("number", "number_value", "sum", "subtract", "multiply", "divide", "round") }, this.calculateNumber).with({ op: N.union(...ICalcBooleanOpsSchema.options) }, this.calculateBoolean).exhaustive();
@@ -12925,6 +12938,12 @@ class Response {
     __publicField(this, "errors");
     __publicField(this, "visibility");
     __publicField(this, "changeHandlers");
+    __publicField(this, "questionCallbacks");
+    // useSyncExternalStore callback per question key.
+    // useSyncExternalStore subscribe method for each key. Same method if key use used multiple times.
+    __publicField(this, "subscribeMethods");
+    __publicField(this, "fieldStates");
+    // cache for field states to prevent rerenders.
     __publicField(this, "flags");
     __publicField(this, "textvars");
     __publicField(this, "activeQuestionKey");
@@ -12936,10 +12955,13 @@ class Response {
     this.errors = /* @__PURE__ */ new Map();
     this.visibility = /* @__PURE__ */ new Map();
     this.changeHandlers = [];
+    this.fieldStates = /* @__PURE__ */ new Map();
     this.flags = answer.flags;
     this.textvars = this.initTextvars(answer.textvars);
     this.activeQuestionKey = null;
     this.calculations = new Calculations(questionnaire.sexpVariables, this);
+    this.questionCallbacks = /* @__PURE__ */ new Map();
+    this.subscribeMethods = /* @__PURE__ */ new Map();
     this.validate();
     this.calculateVisibility();
   }
@@ -12962,26 +12984,61 @@ class Response {
   offChange(callback) {
     lodashExports.pull(this.changeHandlers, callback);
   }
+  // first argument of useSyncExternalStore
+  subscribeToQuestion(questionKey) {
+    if (!this.subscribeMethods.has(questionKey)) {
+      this.subscribeMethods.set(questionKey, (callback) => {
+        this.questionCallbacks.set(questionKey, callback);
+        return () => {
+          this.questionCallbacks.delete(questionKey);
+        };
+      });
+    }
+    return this.subscribeMethods.get(questionKey);
+  }
+  // Cached, so react can prevent rerenders when nothing changes.
   getFieldState(key) {
-    const errors = this.errors.get(key) || [];
+    if (!this.fieldStates.has(key)) {
+      const errors = this.errors.get(key) || [];
+      this.fieldStates.set(key, {
+        // comment is where the cache is deleted.
+        key,
+        // constant
+        value: this.values[key],
+        // setValue
+        showErrors: this.beenActives.has(key) && !this.isDisabled(key) && errors.length > 0,
+        // setValue, only way to change errors.
+        valid: errors.length === 0,
+        // setValue, only way to change errors.
+        errors,
+        // // setValue, only way to change errors.
+        hidden: !this.isVisible(key),
+        // calculateVisibility when visibity changes.
+        disabled: this.isDisabled(key),
+        // Only for children, setValue also triggers all the children.
+        isActiveQuestion: this.activeQuestionKey === key,
+        // setActiveQuestion
+        setAsActiveQuestion: () => this.setActiveQuestion(key),
+        // constant
+        setValue: (newValue) => this.setValue(key, newValue)
+        // constant
+      });
+    }
+    return this.fieldStates.get(key);
+  }
+  getValidationFieldState(key) {
     return {
-      key,
       value: this.values[key],
-      // loading existing answers will need to make this true!
-      showErrors: this.beenActives.has(key) && !this.isDisabled(key) && errors.length > 0,
-      valid: errors.length === 0,
-      errors,
-      hidden: !this.isVisible(key),
-      disabled: this.isDisabled(key),
-      isActiveQuestion: this.activeQuestionKey === key,
-      setAsActiveQuestion: () => this.setActiveQuestion(key),
-      setValue: (newValue) => this.setValue(key, newValue)
+      addError: (error) => this.addError(key, error)
     };
   }
-  getValidationFieldState(key) {
+  getVisibilityFieldState(key) {
     return {
       value: this.values[key],
-      addError: (error) => this.addError(key, error)
+      hidden: !this.isVisible(key),
+      // calculateVisibility when visibity changes.
+      disabled: this.isDisabled(key)
+      // Only for children, setValue also triggers all the children.
     };
   }
   setTextvar(key, value) {
@@ -12990,6 +13047,7 @@ class Response {
     } else {
       this.textvars.set(key, this.questionnaire.textvars.find((textvar) => textvar.key === key).default);
     }
+    this.changeHandlers.forEach((handler) => handler(this, "textvarChanged", key));
   }
   // Set to coupled question-value, then to passed textvars, then to default.
   // Edits fromServer, since we copied it 
@@ -13013,17 +13071,37 @@ class Response {
       this.setTextvar(question.setsTextvar, value);
     }
     this.validate();
-    this.calculations.handleValueChanged(key);
+    this.handleCalculations(key);
     this.calculateVisibility();
+    this.fieldStateChanged(key);
     this.changeHandlers.forEach((handler) => handler(this, "valueChanged"));
   }
+  // Called on value change, to handle invalidating calculations and then curly strings that depend on those.
+  handleCalculations(questionKey) {
+    this.calculations.handleValueChanged(questionKey).forEach((variableKey) => {
+      this.changeHandlers.forEach((handler) => handler(this, "sexpVariableChanged", variableKey));
+    });
+  }
+  // called on value/active/visibility change, remove cache for question and it children and notify listeners.
+  fieldStateChanged(key) {
+    var _a;
+    this.fieldStates.delete(key);
+    this.questionnaire.getChildQuestionKeys(key).forEach((childKey) => {
+      this.fieldStates.delete(childKey);
+    });
+    (_a = this.questionCallbacks.get(key)) == null ? void 0 : _a();
+  }
   setActiveQuestion(key) {
     if (this.activeQuestionKey === key) return;
     if (this.activeQuestionKey) {
       this.touchField(this.activeQuestionKey);
     }
+    const oldActive = this.activeQuestionKey;
     this.activeQuestionKey = key;
-    this.changeHandlers.forEach((handler) => handler(this));
+    if (oldActive) this.fieldStateChanged(oldActive);
+    if (this.activeQuestionKey) {
+      this.fieldStateChanged(this.activeQuestionKey);
+    }
   }
   addError(key, error) {
     const questionErrors = this.errors.get(key) || [];
@@ -13098,22 +13176,25 @@ class Response {
   //   This has to be in order, since those calculations can then cause visibility changes in later questions.
   //   Dis/enabling question is not yet considered for this.
   calculateVisibility() {
-    const calcDepsVisible = Object.keys(this.calculations.questionKeyToCalculationKeys).reduce((h2, key) => {
-      h2[key] = this.isVisible(key);
-      return h2;
-    }, {});
+    const rules = this.questionnaire.visibilityRules;
+    if (rules.length === 0) return;
+    const old_visibility = Array.from(this.visibility.keys()).reduce((m2, key) => (m2.set(key, this.isVisible(key)), m2), /* @__PURE__ */ new Map());
     this.visibility = /* @__PURE__ */ new Map();
-    let currentQuestionKey = null;
-    this.questionnaire.visibilityRules.forEach((rule) => {
-      currentQuestionKey ?? (currentQuestionKey = rule.questionKey);
-      if (rule.questionKey !== currentQuestionKey) {
-        if (calcDepsVisible[currentQuestionKey] && calcDepsVisible[currentQuestionKey] !== this.isVisible(currentQuestionKey)) {
-          this.calculations.handleValueChanged(currentQuestionKey);
-        }
-        currentQuestionKey = rule.questionKey;
-      }
+    let anyChange = false;
+    rules.forEach((rule, count) => {
+      var _a;
       rule.runAgainst(this);
+      if (rule.questionKey !== ((_a = rules[count + 1]) == null ? void 0 : _a.questionKey)) {
+        if (old_visibility.get(rule.questionKey) !== this.isVisible(rule.questionKey)) {
+          this.calculations.handleValueChanged(rule.questionKey);
+          this.fieldStateChanged(rule.questionKey);
+          anyChange = true;
+        }
+      }
     });
+    if (anyChange) {
+      this.changeHandlers.forEach((handler) => handler(this, "visibilityChanged"));
+    }
   }
   markShown(fieldKey) {
     const visibility = this.visibility.get(fieldKey) || { shown: false, hidden: false };
@@ -13167,6 +13248,98 @@ function presenceValue(v2) {
   }
   return v2;
 }
+const TEXTVAR_REGEX = /\{\{((?<type>[a-z_]+)\.(?<textvar>[a-z0-9_]+)|(?<textvaronly>[a-z0-9_]+))\}\}/g;
+class QuestionnaireTranslationsCurlies {
+  constructor(response, questionnaire, language) {
+    __publicField(this, "response");
+    __publicField(this, "questionnaire");
+    __publicField(this, "keyToInterpolatedString");
+    __publicField(this, "keyToInterpolatedStringArray");
+    __publicField(this, "variableToKeys");
+    __publicField(this, "language");
+    __publicField(this, "translations");
+    // useSyncExternalStore callbacks for each key.
+    __publicField(this, "callbacks");
+    // useSyncExternalStore subscribe method for each key. Same method if key use used multiple times.
+    __publicField(this, "subscribeMethods");
+    this.response = response;
+    this.questionnaire = questionnaire;
+    this.language = language;
+    this.translations = questionnaire.translations[language] || {};
+    this.keyToInterpolatedString = /* @__PURE__ */ new Map();
+    this.keyToInterpolatedStringArray = /* @__PURE__ */ new Map();
+    this.variableToKeys = /* @__PURE__ */ new Map();
+    this.callbacks = /* @__PURE__ */ new Map();
+    this.subscribeMethods = /* @__PURE__ */ new Map();
+    this.fetch = this.fetch.bind(this);
+    this.buildVariableToKeys();
+    this.response.onChange((_response, type, key) => {
+      var _a;
+      if (type === "textvarChanged" || type === "sexpVariableChanged") {
+        (_a = this.variableToKeys.get(key)) == null ? void 0 : _a.forEach((i18nKey) => {
+          var _a2;
+          this.keyToInterpolatedString.delete(i18nKey);
+          (_a2 = this.callbacks.get(i18nKey)) == null ? void 0 : _a2.forEach((callback) => callback());
+        });
+      }
+    });
+  }
+  // first argument to useSyncExternalStore
+  // needs to be the same function ref everytime.
+  subscribeToKey(key) {
+    if (!this.subscribeMethods.has(key)) {
+      this.subscribeMethods.set(key, (callback) => {
+        if (!this.callbacks.has(key)) this.callbacks.set(key, /* @__PURE__ */ new Set());
+        this.callbacks.get(key).add(callback);
+        return () => {
+          this.callbacks.get(key).delete(callback);
+        };
+      });
+    }
+    return this.subscribeMethods.get(key);
+  }
+  fetch(key) {
+    if (!this.keyToInterpolatedString.has(key)) {
+      if (!this.translations[key]) return void 0;
+      this.keyToInterpolatedString.set(key, this.interpolateCurlies(this.translations[key]));
+    }
+    return this.keyToInterpolatedString.get(key);
+  }
+  // TODO: change array whenever any of the values changes.
+  //       only used for sliders right now, that did not support variables anyway.
+  fetchArray(key) {
+    if (!this.keyToInterpolatedStringArray.has(key)) {
+      const array = [];
+      for (let index = 0; ; index++) {
+        const interpolated = this.fetch(`${key}.${index}`);
+        if (interpolated === void 0) break;
+        array.push(interpolated);
+      }
+      this.keyToInterpolatedStringArray.set(key, array);
+    }
+    return this.keyToInterpolatedStringArray.get(key);
+  }
+  interpolateCurlies(str) {
+    return str.replace(TEXTVAR_REGEX, (...args) => {
+      var _a;
+      const { type, textvar, textvaronly } = args[args.length - 1];
+      const value = type === "calculation" ? (_a = this.response.calculations.getResult(textvar)) == null ? void 0 : _a.toString() : this.response.textvars.get(`${this.questionnaire.key}_${textvar || textvaronly}`);
+      return lodashExports.escape(value || "");
+    });
+  }
+  buildVariableToKeys() {
+    for (const [key, value] of Object.entries(this.translations)) {
+      Array.from(value.matchAll(TEXTVAR_REGEX)).forEach((match) => {
+        const { type, textvar, textvaronly } = match.groups;
+        const variable = type === "calculation" ? textvar : `${this.questionnaire.key}_${textvar || textvaronly}`;
+        if (!this.variableToKeys.has(variable)) {
+          this.variableToKeys.set(variable, []);
+        }
+        this.variableToKeys.get(variable).push(key);
+      });
+    }
+  }
+}
 const defaultQuestionnaire = new Questionnaire({
   key: "test",
   title: "test",
@@ -13175,13 +13348,19 @@ const defaultQuestionnaire = new Questionnaire({
   questions: {},
   visibilityRules: [],
   textvars: {},
-  validations: []
+  validations: [],
+  translations: {}
 });
 const defaultResponse = new Response(defaultQuestionnaire, {
   value: {},
   flags: {},
   textvars: /* @__PURE__ */ new Map()
 });
+const defaultQuestionnaireTranslationsCurlies = new QuestionnaireTranslationsCurlies(
+  defaultResponse,
+  defaultQuestionnaire,
+  "nl"
+);
 const defaultDisplayOptions = {
   displayMode: "paged",
   darkMode: false,
@@ -13193,7 +13372,8 @@ const QubyContext = React__default.createContext({
   questionnaire: defaultQuestionnaire,
   response: defaultResponse,
   setQuestionRef: defaultSetQuestionRef,
-  displayOptions: defaultDisplayOptions
+  displayOptions: defaultDisplayOptions,
+  translationsCurlies: defaultQuestionnaireTranslationsCurlies
 });
 class ResponseParseError extends Error {
 }
@@ -13252,32 +13432,6 @@ const parseMultiSelectAnswer = (answer, question) => {
   });
   return answerSet;
 };
-const TEXTVAR_REGEX = /\{\{((?<type>[a-z_]+)\.(?<textvar>[a-z0-9_]+)|(?<textvaronly>[a-z0-9_]+))\}\}/g;
-class CurliesInterpolator {
-  constructor(response, questionnaire) {
-    __publicField(this, "response");
-    __publicField(this, "questionnaire");
-    __publicField(this, "stringToVariables");
-    this.response = response;
-    this.questionnaire = questionnaire;
-    this.stringToVariables = /* @__PURE__ */ new Map();
-    this.interpolateCurlies = this.interpolateCurlies.bind(this);
-  }
-  interpolateCurlies(str) {
-    if (!this.stringToVariables.has(str)) {
-      this.stringToVariables.set(str, Array.from(str.matchAll(TEXTVAR_REGEX)).map((match) => match.groups.textvar));
-    }
-    if (this.stringToVariables.get(str).length == 0) {
-      return str;
-    }
-    return str.replace(TEXTVAR_REGEX, (...args) => {
-      var _a;
-      const { type, textvar, textvaronly } = args[args.length - 1];
-      const value = type === "calculation" ? (_a = this.response.calculations.getResult(textvar)) == null ? void 0 : _a.toString() : this.response.textvars.get(`${this.questionnaire.key}_${textvar || textvaronly}`);
-      return lodashExports.escape(value || "");
-    });
-  }
-}
 var classnames = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
@@ -13438,6 +13592,22 @@ const ALLOWED_CSS_VARS = [
   "question-mb-factor"
 ];
 const mapCssVars = (cssVars) => cssVars && lodashExports.mapKeys(lodashExports.pick(cssVars, ALLOWED_CSS_VARS), (_2, key) => `--${key}`);
+const useTranslationCurliesFor = (i18nKey) => {
+  const { translationsCurlies } = React__default.useContext(QubyContext);
+  const interpolatedString = React__default.useSyncExternalStore(
+    translationsCurlies.subscribeToKey(i18nKey),
+    () => translationsCurlies.fetch(i18nKey)
+  );
+  return interpolatedString;
+};
+const useTranslationCurliesArrayFor = (i18nKey) => {
+  const { translationsCurlies } = React__default.useContext(QubyContext);
+  const interpolatedStringArray = React__default.useSyncExternalStore(
+    translationsCurlies.subscribeToKey(i18nKey),
+    () => translationsCurlies.fetchArray(i18nKey)
+  );
+  return interpolatedStringArray;
+};
 const ProgressBar = ({
   max,
   current
@@ -13472,40 +13642,42 @@ const ProgressBar = ({
   ] }) });
 };
 const HtmlItem = ({ item }) => {
-  const interpolateCurlies = React__default.useContext(InterpolateCurliesContext);
-  return /* @__PURE__ */ jsx("div", { className: "item", children: /* @__PURE__ */ jsx("div", { className: "prose text", dangerouslySetInnerHTML: { __html: interpolateCurlies(item.html) } }) });
+  const html = useTranslationCurliesFor(`${item.key}`);
+  if (!html) throw new Error(`HtmlItem with key ${item.key} has no translation`);
+  return /* @__PURE__ */ jsx("div", { className: "item", children: /* @__PURE__ */ jsx("div", { className: "prose text", dangerouslySetInnerHTML: { __html: html } }) });
 };
 const MainLabel = ({ question }) => {
-  const interpolateCurlies = React__default.useContext(InterpolateCurliesContext);
-  if (!question.title) return null;
-  const titleText = interpolateCurlies(question.title);
+  const titleText = useTranslationCurliesFor(`${question.key}.title`);
+  if (!titleText) return null;
   const labelFor = `answer_${question.key}`;
-  const mb = question.description ? "mb-1" : "mb-2";
-  return /* @__PURE__ */ jsx("div", { className: `${mb} main`, children: /* @__PURE__ */ jsx("label", { htmlFor: labelFor, dangerouslySetInnerHTML: { __html: titleText } }) });
+  return /* @__PURE__ */ jsx("div", { className: "main", children: /* @__PURE__ */ jsx("label", { htmlFor: labelFor, dangerouslySetInnerHTML: { __html: titleText } }) });
 };
 const QuestionDescription = (props) => {
-  const interpolateCurlies = React__default.useContext(InterpolateCurliesContext);
-  if (!props.question.description) return null;
-  const description = interpolateCurlies(props.question.description);
+  const description = useTranslationCurliesFor(`${props.question.key}.description`);
+  if (!description) return null;
   return /* @__PURE__ */ jsx("div", { className: "font-light description prose", dangerouslySetInnerHTML: { __html: description } });
 };
 const ValidationErrors = ({ fieldState }) => {
   if (!fieldState.showErrors) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: fieldState.errors.map((error) => /* @__PURE__ */ jsx(Error$1, { error }, error.type)) });
+  return /* @__PURE__ */ jsx(Fragment, { children: fieldState.errors.map((error) => /* @__PURE__ */ jsx(Error$1, { error, fieldKey: fieldState.key }, error.type)) });
 };
-const Error$1 = ({ error }) => {
+const Error$1 = ({ error, fieldKey }) => {
   const className = classNames("error", error.type);
-  const message = useMessageAsString(error.message);
+  const message = useMessageAsString(error, fieldKey);
   return /* @__PURE__ */ jsx("div", { className, children: message });
 };
-function useMessageAsString(message) {
+function useMessageAsString(error, fieldKey) {
   const { t: t2 } = useTranslation();
-  if (typeof message === "string") {
-    return message;
+  const tMessage = useTranslationCurliesFor(`${fieldKey}.validation.${error.type}.explanation`);
+  if (tMessage) {
+    return tMessage;
+  } else if (typeof error.message === "string") {
+    return error.message;
+  } else {
+    const args = { ...error.message };
+    delete args.t;
+    return t2(`validations.${error.message.t}`, args);
   }
-  const args = { ...message };
-  delete args.t;
-  return t2(`validations.${message.t}`, args);
 }
 const QuestionWrapper = (props) => {
   const { question, fieldState, setQuestionRef } = props;
@@ -13517,16 +13689,17 @@ const QuestionWrapper = (props) => {
     indent: (question.indent || 0) > 0
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    question.contextDescription && /* @__PURE__ */ jsx(ContextDescriptionItem, { html: question.contextDescription }),
+    /* @__PURE__ */ jsx(ContextDescriptionItem, { i18nKey: `${question.key}.context_description` }),
     /* @__PURE__ */ jsxs("div", { className, ref: questionRef, style: mapCssVars(question.cssVars), children: [
       /* @__PURE__ */ jsx(ValidationErrors, { fieldState }),
       props.children
     ] })
   ] });
 };
-const ContextDescriptionItem = ({ html }) => {
-  const interpolateCurlies = React__default.useContext(InterpolateCurliesContext);
-  return /* @__PURE__ */ jsx("div", { className: "context-description prose", dangerouslySetInnerHTML: { __html: interpolateCurlies(html) } });
+const ContextDescriptionItem = ({ i18nKey }) => {
+  const interpolatedString = useTranslationCurliesFor(i18nKey);
+  if (!interpolatedString) return null;
+  return /* @__PURE__ */ jsx("div", { className: "context-description prose", dangerouslySetInnerHTML: { __html: interpolatedString } });
 };
 const StringQuestion = ({ question, fieldState, setQuestionRef }) => {
   var _a;
@@ -13618,15 +13791,14 @@ const Option$4 = ({ question, option, index, fieldState }) => {
           onFocus: fieldState.setAsActiveQuestion
         }
       ),
-      /* @__PURE__ */ jsx(ShowDescription$1, { option })
+      /* @__PURE__ */ jsx(ShowDescription$1, { question, option })
     ] })
   ] });
 };
-const ShowDescription$1 = ({ option }) => {
-  const interpolateCurlies = React__default.useContext(InterpolateCurliesContext);
-  const description = option.label || option.description;
-  if (!description) return null;
-  return /* @__PURE__ */ jsx("label", { htmlFor: option.viewId, children: /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: interpolateCurlies(description) } }) });
+const ShowDescription$1 = ({ question, option }) => {
+  const label = useTranslationCurliesFor(`${question.key}.${option.key}.label`);
+  if (!label) return null;
+  return /* @__PURE__ */ jsx("label", { htmlFor: option.viewId, children: /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: label } }) });
 };
 const ShowValue$2 = ({ question, option }) => {
   if (!question.showValues) return null;
@@ -13654,14 +13826,7 @@ const RadioQuestion = ({ question, fieldState, setQuestionRef }) => {
           fieldState
         },
         child.key
-      ) : /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "inner-title",
-          dangerouslySetInnerHTML: { __html: child.html }
-        },
-        child.key
-      )) })
+      ) : /* @__PURE__ */ jsx(InnerTitle$1, { i18nKey: `${question.key}.${child.key}.html` }, child.key)) })
     ] })
   ] });
 };
@@ -13697,18 +13862,22 @@ const Option$3 = ({ question, option, fieldState }) => {
       }
     ) }),
     /* @__PURE__ */ jsx(ShowValue$1, { question, option }),
-    /* @__PURE__ */ jsx(ShowDescription, { option }),
+    /* @__PURE__ */ jsx(ShowDescription, { question, option }),
     /* @__PURE__ */ jsx(SubQuestions, { questions: option.questions })
   ] });
 };
-const ShowDescription = ({ option }) => {
-  const interpolateCurlies = React__default.useContext(InterpolateCurliesContext);
-  if (!option.label && !option.description) return null;
-  const label = option.label || option.description;
-  const description = option.label ? option.description : void 0;
+const InnerTitle$1 = ({ i18nKey }) => {
+  const interpolatedString = useTranslationCurliesFor(i18nKey);
+  if (!interpolatedString) return null;
+  return /* @__PURE__ */ jsx("div", { className: "inner-title", dangerouslySetInnerHTML: { __html: interpolatedString } });
+};
+const ShowDescription = ({ question, option }) => {
+  const label = useTranslationCurliesFor(`${question.key}.${option.key}.label`);
+  const description = useTranslationCurliesFor(`${question.key}.${option.key}.description`);
+  if (!label) return null;
   return /* @__PURE__ */ jsxs("div", { className: "inline labelwrapper", children: [
-    /* @__PURE__ */ jsx("label", { htmlFor: option.viewId, "aria-describedby": description && `${option.viewId}_description`, children: /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: interpolateCurlies(label) } }) }),
-    description && /* @__PURE__ */ jsx("div", { className: "de-em", id: `${option.viewId}_description`, dangerouslySetInnerHTML: { __html: interpolateCurlies(description || "") } })
+    /* @__PURE__ */ jsx("label", { htmlFor: option.viewId, "aria-describedby": description && `${option.viewId}_description`, children: /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: label } }) }),
+    description && /* @__PURE__ */ jsx("div", { className: "de-em", id: `${option.viewId}_description`, dangerouslySetInnerHTML: { __html: description } })
   ] });
 };
 const ShowValue$1 = ({ question, option }) => {
@@ -13737,20 +13906,27 @@ const SelectQuestion = ({ question, fieldState, setQuestionRef }) => {
           id: `answer_${question.key}`,
           name: question.key,
           children: [
-            question.placeholder ? /* @__PURE__ */ jsx("option", { className: "placeholder", children: question.placeholder }, "placeholder") : null,
-            question.children.map((child) => child.type === "optgroup" ? /* @__PURE__ */ jsx(Optgroup, { label: child.label, options: child.options, fieldState }, child.key) : /* @__PURE__ */ jsx(Option$2, { option: child, fieldState }, child.key))
+            /* @__PURE__ */ jsx(Placeholder, { i18nKey: `${question.key}.placeholder` }),
+            question.children.map((child) => child.type === "optgroup" ? /* @__PURE__ */ jsx(Optgroup, { question, optgroup: child, fieldState }, child.key) : /* @__PURE__ */ jsx(Option$2, { question, option: child, fieldState }, child.key))
           ]
         }
       ) })
     ] })
   ] });
 };
-const Optgroup = ({ label, options, fieldState }) => {
-  return /* @__PURE__ */ jsx("optgroup", { label, children: options.map((option) => /* @__PURE__ */ jsx(Option$2, { option, fieldState }, option.key)) });
+const Placeholder = ({ i18nKey }) => {
+  const interpolatedString = useTranslationCurliesFor(i18nKey);
+  if (!interpolatedString) return null;
+  return /* @__PURE__ */ jsx("option", { className: "placeholder", children: interpolatedString }, "placeholder");
+};
+const Optgroup = ({ question, optgroup, fieldState }) => {
+  const label = useTranslationCurliesFor(`${question.key}.${optgroup.key}.label`);
+  return /* @__PURE__ */ jsx("optgroup", { label, children: optgroup.options.map((option) => /* @__PURE__ */ jsx(Option$2, { question, option, fieldState }, option.key)) });
 };
-const Option$2 = ({ option, fieldState }) => {
+const Option$2 = ({ question, option, fieldState }) => {
+  const interpolatedString = useTranslationCurliesFor(`${question.key}.${option.key}.label`);
   if (option.hidden && fieldState.value !== option.key) return null;
-  return /* @__PURE__ */ jsx("option", { value: option.key, disabled: false, children: option.label || option.description });
+  return /* @__PURE__ */ jsx("option", { value: option.key, disabled: false, children: interpolatedString });
 };
 function htmlId$7(question) {
   return `answer_${question.key}_input`;
@@ -13769,6 +13945,7 @@ const DatePartsQuestion = ({ question, fieldState, setQuestionRef }) => {
 };
 const DateParts = ({ question, parts, fieldState }) => {
   const { t: t2 } = useTranslation();
+  const questionTitle = useTranslationCurliesFor(`${question.key}.title`);
   const handleChange = (event, component) => {
     const newValue = new Map(fieldState.value || []);
     const componentValue = event.target.value.trim();
@@ -13797,7 +13974,7 @@ const DateParts = ({ question, parts, fieldState }) => {
             {
               id: `answer_${question.key}_${datePart.part}`,
               name: `${question.key}_${datePart.part}`,
-              "aria-label": `${question.title} ${t2(datePart.part)}`,
+              "aria-label": `${questionTitle} ${t2(datePart.part)}`,
               type: "text",
               className: "me-1",
               value: ((_a = fieldState.value) == null ? void 0 : _a.get(datePart.part)) || "",
@@ -14886,14 +15063,15 @@ const LABEL_MX = 16;
 const LABEL_ROW_SPACING = 4;
 const LABEL_BORDER = 1;
 const SliderQuestion = ({ question, fieldState, setQuestionRef }) => {
+  const labels = useTranslationCurliesArrayFor(question.labelsI18nKey || `${question.key}.labels`) || [];
   const handleChange = (newValues) => {
     fieldState.setValue(newValues[0]);
   };
   const parentRef = React__default.useRef(null);
-  const labelPositioning = useLabelPositioning(question.labels, parentRef);
+  const labelPositioning = useLabelPositioning(labels, parentRef);
   const blank = fieldState.value == null;
   const value = fieldState.value ?? question.defaultPosition;
-  const markerLabels = calculateMarkerLabels$1(question);
+  const markerLabels = calculateMarkerLabels(question, labels);
   return /* @__PURE__ */ jsxs(QuestionWrapper, { question, fieldState, setQuestionRef, children: [
     /* @__PURE__ */ jsx(MainLabel, { question }),
     /* @__PURE__ */ jsxs("div", { className: "description-and-fields", dir: "ltr", children: [
@@ -14907,8 +15085,8 @@ const SliderQuestion = ({ question, fieldState, setQuestionRef }) => {
           max: question.maximum,
           step: question.step,
           disabled: fieldState.disabled,
-          renderTrack: ({ props, children }) => /* @__PURE__ */ jsx("div", { ...props, style: { ...props.style, ...trackStyles$1 }, children }),
-          renderThumb: (thumbProps) => renderThumb$1({
+          renderTrack: ({ props, children }) => /* @__PURE__ */ jsx("div", { ...props, style: { ...props.style, ...trackStyles }, children }),
+          renderThumb: (thumbProps) => renderThumb({
             ...thumbProps,
             id: `answer_${question.key}`,
             blank: blank || fieldState.disabled,
@@ -14917,13 +15095,13 @@ const SliderQuestion = ({ question, fieldState, setQuestionRef }) => {
             isActiveQuestion: fieldState.isActiveQuestion,
             onFocus: fieldState.setAsActiveQuestion
           }),
-          renderMark: ({ props, index }) => markerLabels[index] !== void 0 ? renderMark$1(props, markerLabels[index], labelPositioning) : null
+          renderMark: ({ props, index }) => markerLabels[index] !== void 0 ? renderMark(props, markerLabels[index], labelPositioning) : null
         }
       ) })
     ] })
   ] });
 };
-const renderThumb$1 = ({ props, id, value, isDragged, blank, showTooltip, startThumbHidden, isActiveQuestion, onFocus }) => {
+const renderThumb = ({ props, id, value, isDragged, blank, showTooltip, startThumbHidden, isActiveQuestion, onFocus }) => {
   if (startThumbHidden && blank) {
     return /* @__PURE__ */ createElement("div", { ...props, key: props.key, onFocus });
   }
@@ -14936,10 +15114,10 @@ const renderThumb$1 = ({ props, id, value, isDragged, blank, showTooltip, startT
       key: props.key,
       style: {
         ...props.style,
-        ...baseThumbStyles$1,
-        ...isDragged && isDraggedThumbStyles$1,
+        ...baseThumbStyles,
+        ...isDragged && isDraggedThumbStyles,
         ...isActiveQuestion && activeThumbStyles,
-        ...blank && invalidThumbStyles$1
+        ...blank && invalidThumbStyles
       },
       onFocus
     },
@@ -14950,10 +15128,10 @@ const renderThumb$1 = ({ props, id, value, isDragged, blank, showTooltip, startT
       border: "1px solid oklch(var(--foreground))",
       borderWidth: "0 1px 0 1px"
     } }),
-    showTooltip && isDragged && /* @__PURE__ */ jsx("div", { style: labelStyles$1, children: value })
+    showTooltip && isDragged && /* @__PURE__ */ jsx("div", { style: labelStyles, children: value })
   );
 };
-const renderMark$1 = (props, label, { info, setRef }) => {
+const renderMark = (props, label, { info, setRef }) => {
   const top = LABEL_MIN_ARROW_HEIGHT + (info.tops[label.idx] || 0);
   const labelBorderRadius = label.first ? "0 4px 4px" : label.last ? "4px 0 4px 4px" : "4px";
   return /* @__PURE__ */ createElement(
@@ -15007,24 +15185,25 @@ const LabelArrow = ({ top, label }) => {
     /* @__PURE__ */ jsx("path", { d: arrow, fill: "oklch(var(--slider-track))", strokeLinecap: "square", stroke: "oklch(var(--foreground))" })
   ] }) });
 };
-const calculateMarkerLabels$1 = (question) => {
-  if (question.labels.length === 0) return {};
+const calculateMarkerLabels = (question, labels) => {
   const nroMarkers = (question.maximum - question.minimum) / question.step;
+  if (labels.length === 0) return {};
+  if (labels.length === 1) return { [Math.floor(nroMarkers / 2)]: { text: labels[0], first: false, last: false, idx: 0 } };
   const markerLabels = {};
-  question.labels.forEach((label, idx) => {
-    const markerIdx = Math.floor(idx * nroMarkers / (question.labels.length - 1));
-    markerLabels[markerIdx] = { text: label, first: idx === 0, last: idx === question.labels.length - 1, idx };
+  labels.forEach((label, idx) => {
+    const markerIdx = Math.floor(idx * nroMarkers / (labels.length - 1));
+    markerLabels[markerIdx] = { text: label, first: idx === 0, last: idx === labels.length - 1, idx };
   });
   return markerLabels;
 };
-const trackStyles$1 = {
+const trackStyles = {
   border: `${TRACK_BORDER}px solid oklch(var(--foreground))`,
   background: "oklch(var(--slider-track))",
   height: TRACK_HEIGHT,
   borderRadius: "2px",
   marginBottom: "18px"
 };
-const baseThumbStyles$1 = {
+const baseThumbStyles = {
   height: "28px",
   width: "34px",
   backgroundColor: "oklch(var(--background))",
@@ -15034,16 +15213,16 @@ const baseThumbStyles$1 = {
 const activeThumbStyles = {
   backgroundColor: "rgba(27,124,194,0.7)"
 };
-const isDraggedThumbStyles$1 = {
+const isDraggedThumbStyles = {
   boxShadow: "inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB"
 };
-const invalidThumbStyles$1 = {
+const invalidThumbStyles = {
   backgroundColor: "transparent",
   border: "none",
   padding: "1px",
   boxShadow: "inset 0 0 1px oklch(var(--foreground)), inset 0 1px 7px oklch(var(--foreground) / 0.5), 0 3px 6px -3px oklch(var(--foreground) / 0.3)"
 };
-const labelStyles$1 = {
+const labelStyles = {
   position: "absolute",
   top: "-29px",
   left: "16px",
@@ -15134,136 +15313,6 @@ function maxHeight(nodes) {
 function overlaps(nodes) {
   return nodes.some((node, idx) => idx > 0 && node.getBoundingClientRect().left - LABEL_MX < nodes[idx - 1].getBoundingClientRect().right);
 }
-const OldSliderQuestion = ({ question, fieldState, setQuestionRef }) => {
-  const handleChange = (newValues) => {
-    fieldState.setValue(newValues[0]);
-  };
-  const blank = fieldState.value == null;
-  const value = fieldState.value || question.defaultPosition;
-  const markerLabels = calculateMarkerLabels(question);
-  return /* @__PURE__ */ jsxs(QuestionWrapper, { question, fieldState, setQuestionRef, children: [
-    /* @__PURE__ */ jsx(MainLabel, { question }),
-    /* @__PURE__ */ jsxs("div", { className: "description-and-fields", children: [
-      /* @__PURE__ */ jsx(QuestionDescription, { question }),
-      /* @__PURE__ */ jsx("div", { className: "fields mt-3", children: /* @__PURE__ */ jsx(
-        libExports.Range,
-        {
-          values: [value],
-          onChange: handleChange,
-          min: question.minimum,
-          max: question.maximum,
-          step: question.step,
-          disabled: fieldState.disabled,
-          renderTrack: ({ props, children }) => /* @__PURE__ */ jsx("div", { ...props, style: { ...props.style, ...trackStyles }, children }),
-          renderThumb: (thumbProps) => renderThumb({
-            ...thumbProps,
-            blank: blank || fieldState.disabled,
-            showTooltip: question.valueTooltip,
-            startThumbHidden: question.startThumbHidden,
-            onFocus: fieldState.setAsActiveQuestion
-          }),
-          renderMark: ({ props, index }) => markerLabels[index] !== void 0 ? renderMark(props, markerLabels[index]) : null
-        }
-      ) })
-    ] })
-  ] });
-};
-const renderThumb = ({ props, value, isDragged, blank, showTooltip, startThumbHidden, onFocus }) => {
-  if (startThumbHidden && blank) {
-    return /* @__PURE__ */ jsx("div", { ...props });
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...props,
-      style: {
-        ...props.style,
-        ...baseThumbStyles,
-        ...isDragged && isDraggedThumbStyles,
-        ...blank && invalidThumbStyles
-      },
-      onFocus,
-      children: [
-        "||",
-        showTooltip && isDragged && /* @__PURE__ */ jsx("div", { style: labelStyles, children: value })
-      ]
-    }
-  );
-};
-const renderMark = (props, label) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ...props,
-    style: {
-      ...props.style,
-      top: "18px",
-      marginTop: 0,
-      // override from props.style
-      height: "9px",
-      width: "1px",
-      backgroundColor: "#d3d3d3"
-    },
-    children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: "8px",
-          width: "max-content",
-          textAlign: label.first ? "left" : label.last ? "right" : "center",
-          transform: label.first ? void 0 : label.last ? "translateX(-100%)" : "translateX(-50%)"
-        },
-        dangerouslySetInnerHTML: { __html: label.text }
-      }
-    )
-  }
-);
-const calculateMarkerLabels = (question) => {
-  if (question.labels.length === 0) return {};
-  const nroMarkers = (question.maximum - question.minimum) / question.step;
-  const markerLabels = {};
-  question.labels.forEach((label, labelIndex) => {
-    const markerIdx = Math.floor(labelIndex * nroMarkers / (question.labels.length - 1));
-    markerLabels[markerIdx] = { text: label, first: labelIndex === 0, last: labelIndex === question.labels.length - 1 };
-  });
-  return markerLabels;
-};
-const trackStyles = {
-  border: "1px solid #d3d3d3",
-  background: "#fafafa",
-  height: "18px",
-  borderRadius: "4px",
-  marginBottom: "18px",
-  boxShadow: "inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB"
-};
-const baseThumbStyles = {
-  height: "28px",
-  width: "34px",
-  textAlign: "center",
-  lineHeight: "27px",
-  backgroundColor: "rgba(27,124,194,0.7)",
-  color: "#E8E7E6",
-  border: "1px solid #9AC1DD",
-  borderRadius: "3px",
-  boxShadow: "inset 0 0 1px #FFF, inset 0 1px 7px #9AC1DD, 0 3px 6px -3px #9AC1DD"
-};
-const isDraggedThumbStyles = {
-  boxShadow: "inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB"
-};
-const invalidThumbStyles = {
-  backgroundColor: "rgba(255, 255, 255, .5)",
-  boxShadow: "none",
-  border: "1px solid #D9D9D9"
-};
-const labelStyles = {
-  position: "absolute",
-  top: "-28px",
-  left: "17px",
-  transform: "translateX(-50%)",
-  color: "#000",
-  fontWeight: "bold",
-  padding: "4px"
-};
 const TextareaQuestion = ({ question, fieldState, setQuestionRef }) => {
   var _a;
   const mbvArgs = useMightBecomeValid((_a = fieldState.value) == null ? void 0 : _a.toString(), (newValue) => {
@@ -15315,19 +15364,13 @@ const CheckBoxQuestion = ({ question, fieldState, setQuestionRef }) => {
           fieldState
         },
         child.key
-      ) : /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "text-lg font-medium my-1 inner-title",
-          dangerouslySetInnerHTML: { __html: child.html }
-        },
-        child.key
-      )) })
+      ) : /* @__PURE__ */ jsx(InnerTitle, { i18nKey: `${question.key}.${child.key}.html` }, child.key)) })
     ] })
   ] });
 };
 const Option$1 = ({ question, option, fieldState }) => {
-  const interpolateCurlies = React__default.useContext(InterpolateCurliesContext);
+  const label = useTranslationCurliesFor(`${question.key}.${option.key}.label`);
+  const description = useTranslationCurliesFor(`${question.key}.${option.key}.description`);
   const value = fieldState.value || /* @__PURE__ */ new Set();
   const checked = value.has(option.key) || false;
   if (option.hidden && !checked) return null;
@@ -15340,8 +15383,6 @@ const Option$1 = ({ question, option, fieldState }) => {
     // TODO
   });
   const handleChange = (_event) => option.key && fieldState.setValue(toggleValue(fieldState, option.key, question));
-  const label = option.label || option.description;
-  const description = option.label ? option.description : void 0;
   return /* @__PURE__ */ jsxs("div", { className: divClassNames, children: [
     /* @__PURE__ */ jsx("div", { className: "inline radiocheckwrapper", children: /* @__PURE__ */ jsx(
       "input",
@@ -15358,12 +15399,17 @@ const Option$1 = ({ question, option, fieldState }) => {
     ) }),
     /* @__PURE__ */ jsx(ShowValue, { question, option }),
     /* @__PURE__ */ jsxs("div", { className: "inline labelwrapper", children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: option.viewId, "aria-describedby": description && `${option.viewId}_description`, children: /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: interpolateCurlies(label) } }) }),
-      description && /* @__PURE__ */ jsx("div", { className: "de-em", id: `${option.viewId}_description`, dangerouslySetInnerHTML: { __html: interpolateCurlies(description || "") } })
+      /* @__PURE__ */ jsx("label", { htmlFor: option.viewId, "aria-describedby": description && `${option.viewId}_description`, children: /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: label } }) }),
+      description && /* @__PURE__ */ jsx("div", { className: "de-em", id: `${option.viewId}_description`, dangerouslySetInnerHTML: { __html: description } })
     ] }),
     /* @__PURE__ */ jsx(SubQuestions, { questions: option.questions })
   ] });
 };
+const InnerTitle = ({ i18nKey }) => {
+  const interpolatedString = useTranslationCurliesFor(i18nKey);
+  if (!interpolatedString) return null;
+  return /* @__PURE__ */ jsx("div", { className: "text-lg font-medium my-1 inner-title", dangerouslySetInnerHTML: { __html: interpolatedString } });
+};
 const ShowValue = () => {
   return null;
 };
@@ -17568,6 +17614,7 @@ const Option = ({ option }) => {
 };
 const SplitToUnitsQuestion = ({ question, fieldState, setQuestionRef }) => {
   const { t: t2 } = useTranslation();
+  const questionTitle = useTranslationCurliesFor(`${question.key}.title`);
   const valueHash = makeValueHash(question, fieldState.value ?? null);
   const setValue = (key, value) => {
     fieldState.setValue(calcValue(question, valueHash.set(key, value)));
@@ -17581,7 +17628,7 @@ const SplitToUnitsQuestion = ({ question, fieldState, setQuestionRef }) => {
           "input",
           {
             type: "text",
-            "aria-label": `${question.title} ${t2(`units.${unit}`, { defaultValue: unit })}`,
+            "aria-label": `${questionTitle} ${t2(`units.${unit}`, { defaultValue: unit })}`,
             id: `answer_${question.key}_${unit}`,
             name: `${question.key}_${unit}`,
             value: (valueHash == null ? void 0 : valueHash.get(unit)) ?? "",
@@ -17617,74 +17664,43 @@ function calcValue(question, values) {
 function htmlId(question) {
   return `answer_${question.key}_input`;
 }
+const RenderWithFieldState = ({ Component, question }) => {
+  const { response, setQuestionRef } = React__default.useContext(QubyContext);
+  const fieldState = React__default.useSyncExternalStore(
+    response.subscribeToQuestion(question.key),
+    () => response.getFieldState(question.key)
+  );
+  if (fieldState.hidden) return null;
+  return /* @__PURE__ */ jsx(Component, { question, fieldState, setQuestionRef }, question.key);
+};
 const QuestionItem = ({ fieldKey }) => {
-  const { questionnaire, response, setQuestionRef, displayOptions } = React__default.useContext(QubyContext);
+  const { questionnaire } = React__default.useContext(QubyContext);
   const question = questionnaire.getField(fieldKey);
   switch (question.as) {
-    case "string": {
-      const fieldState = response.getFieldState(fieldKey);
-      if (fieldState.hidden) return null;
-      return /* @__PURE__ */ jsx(StringQuestion, { question, fieldState, setQuestionRef });
-    }
-    case "country_select": {
-      const fieldState = response.getFieldState(fieldKey);
-      if (fieldState.hidden) return null;
-      return /* @__PURE__ */ jsx(CountrySelectQuestion, { question, fieldState, setQuestionRef });
-    }
-    case "scale": {
-      const fieldState = response.getFieldState(fieldKey);
-      if (fieldState.hidden) return null;
-      return /* @__PURE__ */ jsx(ScaleQuestion, { question, fieldState, setQuestionRef });
-    }
-    case "radio": {
-      const fieldState = response.getFieldState(fieldKey);
-      if (fieldState.hidden) return null;
-      return /* @__PURE__ */ jsx(RadioQuestion, { question, fieldState, setQuestionRef });
-    }
-    case "select": {
-      const fieldState = response.getFieldState(fieldKey);
-      if (fieldState.hidden) return null;
-      return /* @__PURE__ */ jsx(SelectQuestion, { question, fieldState, setQuestionRef });
-    }
-    case "date_parts": {
-      const fieldState = response.getFieldState(fieldKey);
-      if (fieldState.hidden) return null;
-      return /* @__PURE__ */ jsx(DatePartsQuestion, { question, fieldState, setQuestionRef });
-    }
-    case "integer": {
-      const fieldState = response.getFieldState(fieldKey);
-      if (fieldState.hidden) return null;
-      return /* @__PURE__ */ jsx(IntegerQuestion, { question, fieldState, setQuestionRef });
-    }
-    case "float": {
-      const fieldState = response.getFieldState(fieldKey);
-      if (fieldState.hidden) return null;
-      return /* @__PURE__ */ jsx(FloatQuestion, { question, fieldState, setQuestionRef });
-    }
-    case "slider": {
-      const fieldState = response.getFieldState(fieldKey);
-      if (fieldState.hidden) return null;
-      if (displayOptions.newLayout) {
-        return /* @__PURE__ */ jsx(SliderQuestion, { question, fieldState, setQuestionRef });
-      } else {
-        return /* @__PURE__ */ jsx(OldSliderQuestion, { question, fieldState, setQuestionRef });
-      }
-    }
-    case "split_to_units": {
-      const fieldState = response.getFieldState(fieldKey);
-      if (fieldState.hidden) return null;
-      return /* @__PURE__ */ jsx(SplitToUnitsQuestion, { question, fieldState, setQuestionRef });
-    }
-    case "textarea": {
-      const fieldState = response.getFieldState(fieldKey);
-      if (fieldState.hidden) return null;
-      return /* @__PURE__ */ jsx(TextareaQuestion, { question, fieldState, setQuestionRef });
-    }
-    case "check_box": {
-      const fieldState = response.getFieldState(fieldKey);
-      if (fieldState.hidden) return null;
-      return /* @__PURE__ */ jsx(CheckBoxQuestion, { question, fieldState, setQuestionRef });
-    }
+    case "string":
+      return /* @__PURE__ */ jsx(RenderWithFieldState, { Component: StringQuestion, question }, fieldKey);
+    case "country_select":
+      return /* @__PURE__ */ jsx(RenderWithFieldState, { Component: CountrySelectQuestion, question }, fieldKey);
+    case "scale":
+      return /* @__PURE__ */ jsx(RenderWithFieldState, { Component: ScaleQuestion, question }, fieldKey);
+    case "radio":
+      return /* @__PURE__ */ jsx(RenderWithFieldState, { Component: RadioQuestion, question }, fieldKey);
+    case "select":
+      return /* @__PURE__ */ jsx(RenderWithFieldState, { Component: SelectQuestion, question }, fieldKey);
+    case "date_parts":
+      return /* @__PURE__ */ jsx(RenderWithFieldState, { Component: DatePartsQuestion, question }, fieldKey);
+    case "integer":
+      return /* @__PURE__ */ jsx(RenderWithFieldState, { Component: IntegerQuestion, question }, fieldKey);
+    case "float":
+      return /* @__PURE__ */ jsx(RenderWithFieldState, { Component: FloatQuestion, question }, fieldKey);
+    case "slider":
+      return /* @__PURE__ */ jsx(RenderWithFieldState, { Component: SliderQuestion, question }, fieldKey);
+    case "split_to_units":
+      return /* @__PURE__ */ jsx(RenderWithFieldState, { Component: SplitToUnitsQuestion, question }, fieldKey);
+    case "textarea":
+      return /* @__PURE__ */ jsx(RenderWithFieldState, { Component: TextareaQuestion, question }, fieldKey);
+    case "check_box":
+      return /* @__PURE__ */ jsx(RenderWithFieldState, { Component: CheckBoxQuestion, question }, fieldKey);
   }
   throw new Error(`unknown question type`);
 };
@@ -17852,6 +17868,16 @@ function useInView({
   result.entry = result[2];
   return result;
 }
+const TranslationCurlies = ({ i18nKey, Component }) => {
+  const interpolatedString = useTranslationCurliesFor(i18nKey);
+  if (!interpolatedString) return null;
+  return /* @__PURE__ */ jsx(Component, { children: interpolatedString });
+};
+const TranslationCurliesHtml = ({ i18nKey, Component }) => {
+  const interpolatedString = useTranslationCurliesFor(i18nKey);
+  if (!interpolatedString) return null;
+  return /* @__PURE__ */ jsx(Component, { dangerouslySetInnerHTML: { __html: interpolatedString } });
+};
 const InfoItem = ({ item }) => {
   const [open, setOpen] = React__default.useState(item.startOpen);
   const [opening, setOpening] = React__default.useState(false);
@@ -17889,12 +17915,12 @@ const InfoItem = ({ item }) => {
         onKeyDown: iconClick,
         "aria-haspopup": "dialog",
         "aria-expanded": open || item.startOpen && inView,
-        "aria-controls": `#%{item.key}`,
+        "aria-controls": `%{item.key}`,
         tabIndex: item.startOpen ? -1 : 0,
         children: item.subtype == "question-bar" ? null : /* @__PURE__ */ jsx(InfoSvg, {})
       }
     ),
-    open && /* @__PURE__ */ jsx("div", { id: item.key, className: classNames("info-html prose", { "open": open, "opening": opening }), children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: item.html } }) }),
+    open && /* @__PURE__ */ jsx("div", { id: item.key, className: classNames("info-html prose", { "open": open, "opening": opening }), children: /* @__PURE__ */ jsx(TranslationCurliesHtml, { i18nKey: `${item.key}.html`, Component: "div" }) }),
     item.items.map((subItem, idx) => /* @__PURE__ */ jsx(PanelItem, { item: subItem }, idx))
   ] });
 };
@@ -17915,7 +17941,7 @@ const PanelItem = (props) => {
       return /* @__PURE__ */ jsx(HtmlItem, { item: props.item });
     }
     case "question": {
-      return /* @__PURE__ */ jsx(QuestionItem, { fieldKey: props.item.key });
+      return /* @__PURE__ */ jsx(QuestionItem, { fieldKey: props.item.key }, props.item.key);
     }
     case "info": {
       return /* @__PURE__ */ jsx(InfoItem, { item: props.item });
@@ -17927,17 +17953,10 @@ const PanelItem = (props) => {
 };
 const PanelContent = ({ panel }) => {
   return /* @__PURE__ */ jsxs("div", { className: "m-panel-padding", children: [
-    /* @__PURE__ */ jsx(Title, { title: panel.title }),
+    /* @__PURE__ */ jsx(TranslationCurlies, { i18nKey: `${panel.key}.title`, Component: "h1" }),
     panel.items.map((item, idx) => /* @__PURE__ */ jsx(PanelItem, { item }, idx))
   ] });
 };
-const Title = ({ title }) => {
-  if (title) {
-    return /* @__PURE__ */ jsx("h1", { children: title });
-  } else {
-    return null;
-  }
-};
 const buttonsClassName = "buttons bg-slate-100 dark:bg-slate-700 p-panel-padding";
 const Paginator = (props) => {
   const [activeIndex, setActiveIndex] = React__default.useState(props.panelLogic.firstPanelIndexToActivate());
@@ -18020,15 +18039,19 @@ const Button = ({ value, onClick, onFocus, variant }) => {
 const Hotkeys = () => {
   return null;
 };
-const InterpolateCurliesContext = React__default.createContext((str) => str);
+const Footer = () => {
+  const footerHtml = useTranslationCurliesFor("footer");
+  if (!footerHtml) return null;
+  return /* @__PURE__ */ jsx("footer", { className: "quby-footer", dangerouslySetInnerHTML: { __html: footerHtml } });
+};
 const AnswerPage = ({ questionnaire, response, displayOptions, allowSkipValidation, onSave, onAbort, onPreviousQuestionnaire }) => {
   useRerenderOnResponseChange(response);
   const [nextSavePressWillOnlyRunMinimalValidations, setNextSavePressWillOnlyRunMinimalValidations] = useNextSavePressWillOnlyRunMinimalValidations(response);
   const qubyRef = React__default.useRef(null);
+  const questionRefs = React__default.useMemo(() => /* @__PURE__ */ new Map(), [questionnaire]);
+  const translationsCurlies = React__default.useMemo(() => new QuestionnaireTranslationsCurlies(response, questionnaire, questionnaire.defaultLanguage), [response, questionnaire, questionnaire.defaultLanguage]);
   useQuestionShortkeys(response, questionnaire, qubyRef);
   const displayMode = displayOptions.displayMode;
-  const questionRefs = /* @__PURE__ */ new Map();
-  const curliesInterpolator = new CurliesInterpolator(response, questionnaire);
   const panelLogic = new PanelLogic(response, questionnaire.panels);
   const beforeNext = (panelIndex) => {
     const panel = questionnaire.panels[panelIndex];
@@ -18067,13 +18090,13 @@ const AnswerPage = ({ questionnaire, response, displayOptions, allowSkipValidati
       scrollToAndFocus(ref);
     }
   } : void 0;
-  const setQuestionRef = (key, ref) => {
+  const setQuestionRef = React__default.useCallback((key, ref) => {
     questionRefs.set(key, ref);
-  };
+  }, [questionRefs]);
   const topClassName = classNames({
     dark: displayOptions.darkMode
   });
-  return /* @__PURE__ */ jsx(InterpolateCurliesContext.Provider, { value: curliesInterpolator.interpolateCurlies, children: /* @__PURE__ */ jsx(QubyContext.Provider, { value: { questionnaire, response, displayOptions, setQuestionRef }, children: /* @__PURE__ */ jsxs("div", { ref: qubyRef, className: topClassName, style: mapCssVars(questionnaire.cssVars), dir: displayOptions.dir, children: [
+  return /* @__PURE__ */ jsx(QubyContext.Provider, { value: { questionnaire, response, displayOptions, setQuestionRef, translationsCurlies }, children: /* @__PURE__ */ jsxs("div", { ref: qubyRef, className: topClassName, style: mapCssVars(questionnaire.cssVars), dir: displayOptions.dir, children: [
     /* @__PURE__ */ jsx("form", { className: "paged", onSubmit: (event) => event.preventDefault(), children: /* @__PURE__ */ jsx(
       Paginator,
       {
@@ -18087,13 +18110,13 @@ const AnswerPage = ({ questionnaire, response, displayOptions, allowSkipValidati
         onFocus: () => response.setActiveQuestion(null)
       }
     ) }),
-    questionnaire.footer && /* @__PURE__ */ jsx("footer", { dangerouslySetInnerHTML: { __html: questionnaire.footer } })
-  ] }) }) });
+    /* @__PURE__ */ jsx(Footer, {})
+  ] }) });
 };
 const useRerenderOnResponseChange = (response) => {
   const [_2, setCounter] = React__default.useState(0);
   React__default.useEffect(() => {
-    const handleChange = (_response) => setCounter((number) => number + 1);
+    const handleChange = (_response, type) => ["visibilityChanged"].includes(type) && setCounter((number) => number + 1);
     response.onChange(handleChange);
     return () => response.offChange(handleChange);
   });
@@ -18118,7 +18141,7 @@ const scrollToAndFocus = (ref) => {
     firstInput.focus();
   }
 };
-const styles = '/*\n! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: \'\';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user\'s configured `sans` font-family by default.\n5. Use the user\'s configured `sans` font-feature-settings by default.\n6. Use the user\'s configured `sans` font-variation-settings by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user\'s configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type=\'button\'],\n[type=\'reset\'],\n[type=\'submit\'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type=\'search\'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user\'s configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role="button"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don\'t get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n  em {\n    font-style: italic;\n    font-weight: 500;\n  }\n\n  strong {\n    font-weight: bolder;\n  }\n    strong em {\n      font-weight: inherit;\n    }\n\n  em.clean {\n    font-style: inherit;\n  }\n\n  strong.clean { \n    font-weight: inherit;\n  }\n\n  .underline { /* mostly for <strong class="clean underline"> */\n    text-decoration: underline;\n  }\n\n  /* de-emphasize the text */\n  .de-em {\n  font-weight: 300;\n}\n  .de-em em {\n  font-weight: 400;\n}\n  .de-em strong {\n  font-weight: 600;\n}\n\n  a {\n    color: oklch(var(--primary));\n    text-decoration: underline;\n  }\n\n  .serif {\n    font-family: Georgia, serif;\n  }\n\n  small {\n    font-size: 0.8rem;\n  }\n    .text-center img, .text-center svg, .text-center input[type="radio"] { /* These are made display block by tailwind, but we want to center when scaled */\n      margin-inline: auto;\n    }\n\n  h1, h2, h3, h4, .h1, .h2, .h3, .h4 {\n  font-weight: 700;\n}\n\n  h1 em, h2 em, h3 em, h4 em, .h1 em, .h2 em, .h3 em, .h4 em {\n      font-weight: inherit;\n    }\n\n  h1 strong, h2 strong, h3 strong, h4 strong, .h1 strong, .h2 strong, .h3 strong, .h4 strong {\n  font-weight: 900;\n}\n\n  h1, h2, h3, h4, .h1, .h2, .h3, .h4 {\n    margin: 1.5rem 0 1rem;\n  }\n\n  h1, .h1 {\n    font-size: 1.75rem;\n    margin: 1.5rem 0 2rem;\n  }\n\n  h2, .h2 {\n    font-size: 1.5rem;\n  }\n\n  h3, .h3 {\n    font-size: 1.25rem;\n  }\n\n  h4, .h4 {\n    font-size: 1rem;\n  }\n  :host {\n    --page: 1 0 0;\n    --background: 1 0 0;\n    --foreground: .21 .04 266; /* text color */\n    --foreground-80: .38 .04 266;\n    --foreground-60: .55 .04 266;\n    --muted: var(--foreground-60); /* text color muted */\n    --super-muted: .95 .04 266;\n    --primary: .454 .135 254;\n    --primary-muted: .5 .135 254;\n    --primary-hover: 0.5 0.16 254;\n    --primary-inv: var(--background);\n    --error-bar: .64 .24 27;\n    --error-background: var(--error-bar) / .4;\n    --slider-track: .91 0 0;\n    --info-block-bg: .87 .055 223;\n    --info-block-fg: var(--foreground);\n\n    --panel-padding: 1rem;\n    --default-radius: 0.25rem;\n    --checkradio-size: 1rem;\n    --checkradio-padding: 0.75rem;\n    --question-padding: 2rem;\n    --question-bar-padding: 8px;\n    --question-bar-width: 4px;\n    --list-indent: 1.5rem;\n\n    /* To change in questionnaires */\n    --option-gap-y: 0; /* vertical gap between options, 1, 2, 3, 4 */\n    --question-mb-factor: 1; /* vertical gap to the next question, 0, 0.5, 1, 1.5, 2 */\n    --max-page-width: 75rem;\n  }\n\n  @media(min-width: 800px) {\n    :host {\n      --panel-padding: 2rem;\n      --question-bar-padding: 10px;\n    }\n  }\n\n  .dark {\n    --page: .186 .031 272;\n    --background: 0 0 0;\n    --foreground: 1 0 0;\n    --foreground-80: .8 0 0;\n    --foreground-60: .6 0 0;\n    --foreground-40: .4 0 0;\n    --muted: var(--foreground-60);\n    --super-muted: .3 0 0;\n    --primary: .68 .16 254;\n    --primary-hover: 0.5 0.16 254;\n    --primary-muted: .3 .135 254;\n    --primary-inv: var(--foreground);\n    --slider-track: .23 0 197;\n    --info-block-bg: .4342 .052 233;\n    --info-block-fg: var(--foreground);\n  }\n\n  :host {\n    all: initial;\n    display: block;\n    position: relative; /* fix absolute children when quby lives in a scrolling container */\n    /* Copied from tailwind html css. */\n    line-height: 1.5; /* 1 */\n    -webkit-text-size-adjust: 100%; /* 2 */\n    -moz-tab-size: 4;\n      -o-tab-size: 4;\n         tab-size: 4; /* 3 */\n    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */\n    font-feature-settings: normal; /* 5 */\n    font-variation-settings: normal; /* 6 */\n\n    /* Made normal font thinner (300) in tailwind.conf */\n\n    font-weight: 400;\n  }\n\n  input, textarea, select {\n    border: 1px solid oklch(var(--foreground));\n    border-radius: var(--default-radius);\n  }\n    input:focus, textarea:focus, select:focus {\n      box-shadow: 0 0 0 6px oklch(var(--primary) / .2);\n      outline: 3px solid transparent; /* replace shadow when forced colors */\n      border-color: oklch(var(--primary));\n    }\n    input:disabled, textarea:disabled, select:disabled {\n      color: oklch(var(--foreground-60));\n      border-color: oklch(var(--foreground-60));\n      cursor: not-allowed;\n    }\n\n  input:not([type=checkbox]):not([type=radio]), textarea, select {\n    padding: .4rem;\n    background-color: oklch(var(--background));\n    color: var(--foreground);\n    caret-color: oklch(var(--primary));\n  }\n\n  input[type=checkbox], input[type=radio] {\n    --check-color: var(--foreground); /* when active changes to primary */\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n    position: relative;\n    display: grid; /* easiest way to perfectly center the ::before */\n    place-content: center;\n    width: var(--checkradio-size);\n    height: var(--checkradio-size);\n    margin: .25rem 0;\n  } /* center vertically, (line-height-height)/2 */\n    input[type=checkbox]:hover, input[type=radio]:hover {\n      border-color: oklch(var(--primary)); /* minimal feedback that clicking radio/label will do something */\n      border-width: 2px;\n    }\n    input[type=checkbox]::before, input[type=radio]::before {\n      content: "";\n      width: calc(var(--checkradio-size) - 6px);\n      height: calc(var(--checkradio-size) - 6px);\n      transform: scale(0); /* hide when not checked */\n      transition: 125ms transform ease-in-out;\n      box-shadow: inset 1em 1em oklch(var(--check-color)); /* bg instead of bgcolor to enable printing */\n      background-color: CanvasText; /* replace shadow when forced colors */\n    }\n    input[type=checkbox]::after, input[type=radio]::after {\n      content: "";\n      position: absolute;\n      top: -4px;\n      inset-inline-start: -4px;\n      height: 24px;\n      width: 24px;\n    }\n    input[type=checkbox]:checked::before, input[type=radio]:checked::before {\n      transform: scale(1);\n    }\n\n  input[type=checkbox] {\n    border-radius: var(--default-radius);\n  }\n    input[type=checkbox]::before {\n      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); /* checkmark */\n    } \n  input[type=radio] {\n    border-radius: 50%;\n  }\n    input[type=radio]::before {\n      border-radius: 50%;\n    }\n  .active input[type=checkbox]:not(:disabled), .active input[type=radio]:not(:disabled) {\n    --check-color: var(--primary);\n  }\n\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n.progress-bar {\n    margin: var(--panel-padding);\n  }\n.progress-bar .progress-wrapper .progress-slider {\n    background-position: 0 4px;\n    display: inline-block;\n    height: 12px;\n    border: 1px solid #ccc;\n    border-radius: 6px;\n    padding: 1px;\n  }\n.panel .progress-bar .progress-wrapper {\n    text-align: center;\n  }\n.progress-bar .progress-stop {\n    height: 8px;\n    line-height: 8px;\n    width: 6px;\n    background: none;\n    font-size: 6px;\n    text-indent: -1234em;\n    display: block;\n    float: inline-start;\n  }\n.progress-bar .progress-stop.first-child {\n    width: 8px;\n    border-radius: 5px 0 0 5px;\n  }\n.progress-bar .progress-stop.last-child {\n    width: 8px;\n    border-radius: 0 5px 5px 0;\n  }\n.progress-bar .progress-stop.active {\n    background: oklch(var(--muted));\n  }\n.progress-bar .progress-stop.current {\n    border-radius: 0 5px 5px 0;\n  }\n.progress-bar .progress-stop.current.first-child {\n    border-radius: 5px;\n  }\n.progress-bar .progress-details {\n    color: has(var(--muted));\n    font-size: 9px;\n  }\n.prose p {\n      margin: 0 0 1rem 0;\n    }\n/* for things like description we want less, so the parent will determine the outer margin. */\n/* if only margin-trim was more widely supported */\n.prose > *:first-child {\n      margin-top: 0;\n    }\n.prose > *:last-child {\n      margin-bottom: 0;\n    }\n.prose ul {\n      list-style-type: disc;\n      margin-block: 0 1rem;\n      margin-inline: var(--list-indent) 0;\n    }\n.prose ol {\n      list-style-type: lower-alpha;\n      margin-block: 0 1rem;\n      margin-inline: var(--list-indent) 0;\n    }\n.prose ol.list-decimal {\n        list-style-type: decimal;\n      }\n.prose li {\n      padding-inline-start: 0.5rem;\n    }\n.prose hr {\n      margin: var(--question-padding) 1rem;\n      border: none;\n      height: 0.125rem;\n      background-color: oklch(var(--muted));\n    }\n.prose hr.compact {\n      margin: 1rem;\n    }\nblockquote {\n    margin: 1em 2em;\n  }\nblockquote >* {\n        font-style: italic;\n    }\nblockquote >p::before,\n    blockquote >p:last-child::after,\n    blockquote >ul::before,\n    blockquote >ul:last-child > li:last-child::after {\n        content: "“";\n        font-family: Georgia;\n        font-size: 2.5rem;\n        margin-block: -.8rem 0;\n        margin-inline: -1.4rem 0;\n        position: absolute;\n        color: #666;\n    }\nblockquote >ul::before {\n      margin-inline-start: calc(-1.1rem - var(--list-indent));\n    }\nblockquote >p:last-child::after,\n    blockquote >ul:last-child > li:last-child::after {\n        content: "”";\n        margin: 0;\n        margin-inline-start: -.1rem\n    }\nblockquote.blue-quotes p::before,\n    blockquote.blue-quotes p:last-child::after {\n        color: #298ED5;\n    }\n.visible {\n  visibility: visible;\n}\n.absolute {\n  position: absolute;\n}\n.sticky {\n  position: sticky;\n}\n.order-last {\n  order: 9999;\n}\n.float-right {\n  float: right;\n}\n.m-panel-padding {\n  margin: var(--panel-padding);\n}\n.mx-1 {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n}\n.my-1 {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n.mb-1 {\n  margin-bottom: 0.25rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.me-1 {\n  margin-inline-end: 0.25rem;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-3 {\n  margin-top: 0.75rem;\n}\n.block {\n  display: block;\n}\n.inline-block {\n  display: inline-block;\n}\n.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.table {\n  display: table;\n}\n.hidden {\n  display: none;\n}\n.w-1\\/2 {\n  width: 50%;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-1\\/4 {\n  width: 25%;\n}\n.w-1\\/5 {\n  width: 20%;\n}\n.w-1\\/6 {\n  width: 16.666667%;\n}\n.w-2\\/3 {\n  width: 66.666667%;\n}\n.w-2\\/5 {\n  width: 40%;\n}\n.w-3\\/4 {\n  width: 75%;\n}\n.w-3\\/5 {\n  width: 60%;\n}\n.w-4\\/5 {\n  width: 80%;\n}\n.w-5\\/6 {\n  width: 83.333333%;\n}\n.w-full {\n  width: 100%;\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.resize {\n  resize: both;\n}\n.list-decimal {\n  list-style-type: decimal;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-warning {\n  --tw-border-opacity: 1;\n  border-color: rgb(255 165 0 / var(--tw-border-opacity));\n}\n.bg-slate-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(241 245 249 / var(--tw-bg-opacity));\n}\n.p-panel-padding {\n  padding: var(--panel-padding);\n}\n.text-center {\n  text-align: center;\n}\n.align-top {\n  vertical-align: top;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.font-light {\n  font-weight: 300;\n}\n.font-medium {\n  font-weight: 500;\n}\n.underline {\n  text-decoration-line: underline;\n}\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n:host > div {\n  background-color: oklch(var(--page));\n  color: oklch(var(--foreground));\n  min-height: 100cqh;\n}\n:host > div > * {\n  max-width: var(--max-page-width);\n  margin: 0 auto;\n}\n.panel + .panel {\n  margin-top: 5rem;\n}\n.option .labelwrapper p {\n  display: inline; /* temp fix, should be stripped by quby-compiler */\n}\n.item.question, .question-bar {\n  --question-bar-color: var(--super-muted);\n  box-shadow: calc(-1 * var(--question-bar-padding)) 0 0 0 oklch(var(--page)), calc(0px - var(--question-bar-width) - var(--question-bar-padding)) 0px 0px 0px oklch(var(--question-bar-color));\n}\n.item.question:dir(rtl), .question-bar:dir(rtl) {\n    box-shadow: calc(var(--question-bar-padding)) 0 0 0 oklch(var(--page)), calc(var(--question-bar-width) + var(--question-bar-padding)) 0px 0px 0px oklch(var(--question-bar-color));\n  }\n.item.question.active, .item.question .item:has(.active), .question-bar.active, .question-bar .item:has(.active) {\n    --question-bar-color: var(--primary);\n  }\n.item.question.errors, .question-bar.errors {\n    --question-bar-color: var(--error-background);\n  }\n.item.question.errors.active, .question-bar.errors.active {\n    --question-bar-color: var(--error-bar);\n  }\n.item .main {\n  font-weight: 700;\n}\n.item .main em {\n      font-weight: inherit;\n    }\n.item .main strong {\n  font-weight: 900;\n}\n.item .inner-title {\n    margin: 1rem 0 0.5rem;\n    font-weight: 600;\n  }\n.item .inner-title em {\n  font-weight: 700;\n}\n.item .inner-title strong {\n  font-weight: 800;\n}\n.item .description-and-fields > .description {\n  font-weight: 300;\n}\n.item .description-and-fields > .description em {\n  font-weight: 400;\n}\n.item .description-and-fields > .description strong {\n  font-weight: 600;\n}\n.item .description-and-fields > .description {\n  margin-bottom: 0.5rem;\n}\n.item .description-and-fields > .description .instruction {\n  font-weight: 400;\n}\n.item .description-and-fields > .description .example {}\n.item .description-and-fields > .description .explanation {}\nbutton {\n  border-radius: 0.375rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  font-weight: 600;\n}\nbutton:focus-visible {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\nbutton.secondary {\n  border-width: 2px;\n  border-color: oklch(var(--primary));\n  background-color: oklch(var(--background));\n  color: oklch(var(--primary));\n}\nbutton.secondary:hover {\n      border-color: oklch(var(--primary-hover));\n      color: oklch(var(--primary-hover));\n    }\nbutton.primary {\n  background-color: oklch(var(--primary));\n  color: oklch(var(--background));\n}\nbutton.primary:hover {\n      background-color: oklch(var(--primary-hover));\n    }\n.info-item {\n  --icon-size: 20px;\n  --icon-margin: 8px;\n}\n.info-item .info-html {\n    margin-bottom: var(--question-padding);\n    z-index: 1; /* prevent showing under slider */\n    padding-inline-end: calc(var(--icon-size) + 2 * var(--icon-margin));\n  }\n.info-item .info-html.open { /* opened by clicking icon */\n      position: sticky;\n      top: 0;\n    }\n.info-item .info-html>div { /* actual content, extra div needed to animate scale. */\n      transform-origin: center top;\n      transition: inherit;\n    }\n.info-item .info-html>div :first-child {\n        margin-top: 0;\n      }\n.info-item .info-html>div :last-child {\n        margin-bottom: 0;\n      }\n.info-item .info-html.opening {\n      height: 0;\n      margin-bottom: 0;\n    }\n.info-item .info-html.opening>div { \n        transform: scale(1, 0); /* animating scale, since we can\'t both hide content and have the icon float */\n      }\n.info-item .info-html {\n    transition: all 0.3s linear;\n    interpolate-size: allow-keywords;\n}\n/* gradient under info-html, to make text fade under it */\n.info-item .info-html::after {\n      content: "";\n      position: absolute;\n      bottom: calc(-1 * var(--question-padding));\n      height: var(--question-padding);\n      width: 100%;\n      left: 0;\n      background: linear-gradient(in oklch, oklch(var(--page)), transparent);\n    }\n.info-item .info-icon {\n    position: relative; /* with z-index to make it appear above the info-html */\n    z-index: 2;\n    float: inline-end;\n    top: 0;\n    transition: margin 0.5s;\n    position: sticky;\n  }\n.info-item .info-icon:hover {\n      cursor: pointer;\n    }\n.info-item .info-icon.stuck {\n      margin-right: calc(-1 * var(--panel-padding));\n    }\n.info-item .info-icon svg {\n      width: var(--icon-size);\n      height: var(--icon-size);\n      margin: var(--icon-margin);\n    }\n/* default type */\n.info-item.info .info-html, .info-item.info .info-icon {\n      background-color: oklch(var(--info-block-bg));\n    }\n.info-item.info .info-html {\n  padding: 0.5rem;\n      color: oklch(var(--info-block-fg));\n}\n/* type actionbar */\n.info-item.question-bar .info-html, .info-item.question-bar info-icon {\n      background-color: oklch(var(--page));\n    }\n.info-item.question-bar .info-html {\n      padding: 0;\n    }\n.info-item.question-bar .info-html>div {\n        max-height: 40vh; /* Just a precaution, should be shorter */\n        overflow: auto;\n      }\n.item.radio .option, .item.check_box .option {\n  display: flex;\n  flex-wrap: wrap;\n}\n.item.radio .option .radiocheckwrapper, .item.check_box .option .radiocheckwrapper {\n    flex: 0 0 var(--checkradio-size);\n  }\n.item.radio .option .value, .item.check_box .option .value {\n    flex: 0 0 2rem;\n    text-align: right;\n  }\n.item.radio .option .labelwrapper, .item.check_box .option .labelwrapper {\n    flex: 1 1 0;\n  }\n.item.radio .option .labelwrapper>*, .item.check_box .option .labelwrapper>* {\n      padding-inline-start: var(--checkradio-padding); /* padding in label, so no space between input and label */\n    }\n.item.radio .option .subquestions, .item.check_box .option .subquestions {\n    width: 100%; /* forces it to the next lines */\n  }\n.item.radio .option + .option, .item.check_box .option + .option {\n    margin-top: calc(var(--option-gap-y) * 0.25rem);\n  }\n.subquestions {\n  margin-inline-start: calc(var(--question-bar-padding) + var(--checkradio-size)/2 + 2px); /* align active bar under checkbox/radio */\n}\n/* context-description doesn\'t live under question, so doesn\'t react to a single question override. */\n.item, .context-description {\n  position: relative;\n  margin-bottom: calc(var(--question-padding) * var(--question-mb-factor));\n}\n.item:has(+.indent.question) {\n  margin-bottom: 0;\n  padding-bottom: calc(var(--question-padding) * var(--question-mb-factor) / 2);\n}\n.question.indent {\n  padding-inline-start: calc(var(--checkradio-size) + var(--checkradio-padding));\n}\n/* align with option text, it\'s often below selects and a fine padding for other types */\n.question.indent::before {\n    content: "";\n    position: absolute;\n    top: 10px;\n    inset-inline-start: 0;\n    margin-inline-start: calc(0px - var(--question-bar-padding));\n    width: calc(var(--checkradio-size) + var(--question-bar-padding));\n    height: var(--question-bar-width);\n    background-color: oklch(var(--super-muted));\n  }\n.question.indent.active::before {\n    background-color: oklch(var(--primary));\n  }\n.subquestions .item {\n  margin-bottom: 0;\n}\n/* Distance from inputs feel than from text, since they don\'t have extra line-height padding.\n  * So we add a bit of padding, but not for radio/checkbox, \n  *   since they do have line-height from the labels.\n  *   but also because it would prevent margin-collapsing when they have subquestions.\n  * Let\'s hope someday text-box-trim will make this obsolete. */\n.item:not(.radio):not(.check_box) .description-and-fields {\n  padding-bottom: 0.5em;\n}\n.item .error {\n  background: oklch(var(--error-background));\n  outline: 1px solid oklch(var(--error-bar));\n  border-radius: var(--default-radius);\n  margin: 0.25rem;\n  padding: 0.25rem;\n}\nfooter {\n  font-weight: 300;\n}\nfooter em {\n  font-weight: 400;\n}\nfooter strong {\n  font-weight: 600;\n}\nfooter {\n  font-size: .875rem;\n  padding: var(--panel-padding);\n  color: oklch(var(--foreground-80));\n}\n:is(.dark .dark\\:bg-slate-700) {\n  --tw-bg-opacity: 1;\n  background-color: rgb(51 65 85 / var(--tw-bg-opacity));\n}\n';
+const styles = '/*\n! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: \'\';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user\'s configured `sans` font-family by default.\n5. Use the user\'s configured `sans` font-feature-settings by default.\n6. Use the user\'s configured `sans` font-variation-settings by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user\'s configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type=\'button\'],\n[type=\'reset\'],\n[type=\'submit\'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type=\'search\'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user\'s configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role="button"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don\'t get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n  em {\n    font-style: italic;\n    font-weight: 500;\n  }\n\n  strong {\n    font-weight: bolder;\n  }\n    strong em {\n      font-weight: inherit;\n    }\n\n  em.clean {\n    font-style: inherit;\n  }\n\n  strong.clean { \n    font-weight: inherit;\n  }\n\n  .underline { /* mostly for <strong class="clean underline"> */\n    text-decoration: underline;\n  }\n\n  /* de-emphasize the text */\n  .de-em {\n  font-weight: 300;\n}\n  .de-em em {\n  font-weight: 400;\n}\n  .de-em strong {\n  font-weight: 600;\n}\n\n  a {\n    color: oklch(var(--primary));\n    text-decoration: underline;\n  }\n\n  .serif {\n    font-family: Georgia, serif;\n  }\n\n  small {\n    font-size: 0.8rem;\n  }\n    .text-center img, .text-center svg, .text-center input[type="radio"] { /* These are made display block by tailwind, but we want to center when scaled */\n      margin-inline: auto;\n    }\n\n  h1, h2, h3, h4, .h1, .h2, .h3, .h4 {\n  font-weight: 700;\n}\n\n  h1 em, h2 em, h3 em, h4 em, .h1 em, .h2 em, .h3 em, .h4 em {\n      font-weight: inherit;\n    }\n\n  h1 strong, h2 strong, h3 strong, h4 strong, .h1 strong, .h2 strong, .h3 strong, .h4 strong {\n  font-weight: 900;\n}\n\n  h1, h2, h3, h4, .h1, .h2, .h3, .h4 {\n    margin: 1.5rem 0 1rem;\n  }\n\n  h1, .h1 {\n    font-size: 1.75rem;\n    margin: 1.5rem 0 2rem;\n  }\n\n  h2, .h2 {\n    font-size: 1.5rem;\n  }\n\n  h3, .h3 {\n    font-size: 1.25rem;\n  }\n\n  h4, .h4 {\n    font-size: 1rem;\n  }\n  :host {\n    --page: 1 0 0;\n    --background: 1 0 0;\n    --foreground: .21 .04 266; /* text color */\n    --foreground-80: .38 .04 266;\n    --foreground-60: .55 .04 266;\n    --muted: var(--foreground-60); /* text color muted */\n    --super-muted: .95 .04 266;\n    --primary: .454 .135 254;\n    --primary-muted: .5 .135 254;\n    --primary-hover: 0.5 0.16 254;\n    --primary-inv: var(--background);\n    --error-bar: .64 .24 27;\n    --error-background: var(--error-bar) / .4;\n    --slider-track: .91 0 0;\n    --info-block-bg: .87 .055 223;\n    --info-block-fg: var(--foreground);\n\n    --panel-padding: 1rem;\n    --default-radius: 0.25rem;\n    --checkradio-size: 1rem;\n    --checkradio-padding: 0.75rem;\n    --question-padding: 2rem;\n    --question-bar-padding: 8px;\n    --question-bar-width: 4px;\n    --list-indent: 1.5rem;\n\n    /* To change in questionnaires */\n    --option-gap-y: 0; /* vertical gap between options, 1, 2, 3, 4 */\n    --question-mb-factor: 1; /* vertical gap to the next question, 0, 0.5, 1, 1.5, 2 */\n    --max-page-width: 75rem;\n  }\n\n  @media(min-width: 800px) {\n    :host {\n      --panel-padding: 2rem;\n      --question-bar-padding: 10px;\n    }\n  }\n\n  .dark {\n    --page: .186 .031 272;\n    --background: 0 0 0;\n    --foreground: 1 0 0;\n    --foreground-80: .8 0 0;\n    --foreground-60: .6 0 0;\n    --foreground-40: .4 0 0;\n    --muted: var(--foreground-60);\n    --super-muted: .3 0 0;\n    --primary: .68 .16 254;\n    --primary-hover: 0.5 0.16 254;\n    --primary-muted: .3 .135 254;\n    --primary-inv: var(--foreground);\n    --slider-track: .23 0 197;\n    --info-block-bg: .4342 .052 233;\n    --info-block-fg: var(--foreground);\n  }\n\n  :host {\n    all: initial;\n    display: block;\n    position: relative; /* fix absolute children when quby lives in a scrolling container */\n    /* Copied from tailwind html css. */\n    line-height: 1.5; /* 1 */\n    -webkit-text-size-adjust: 100%; /* 2 */\n    -moz-tab-size: 4;\n      -o-tab-size: 4;\n         tab-size: 4; /* 3 */\n    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */\n    font-feature-settings: normal; /* 5 */\n    font-variation-settings: normal; /* 6 */\n\n    /* Made normal font thinner (300) in tailwind.conf */\n\n    font-weight: 400;\n  }\n\n  input, textarea, select {\n    border: 1px solid oklch(var(--foreground));\n    border-radius: var(--default-radius);\n  }\n    input:focus, textarea:focus, select:focus {\n      box-shadow: 0 0 0 6px oklch(var(--primary) / .2);\n      outline: 3px solid transparent; /* replace shadow when forced colors */\n      border-color: oklch(var(--primary));\n    }\n    input:disabled, textarea:disabled, select:disabled {\n      color: oklch(var(--foreground-60));\n      border-color: oklch(var(--foreground-60));\n      cursor: not-allowed;\n    }\n\n  input:not([type=checkbox]):not([type=radio]), textarea, select {\n    padding: .4rem;\n    background-color: oklch(var(--background));\n    color: var(--foreground);\n    caret-color: oklch(var(--primary));\n  }\n\n  input[type=checkbox], input[type=radio] {\n    --check-color: var(--foreground); /* when active changes to primary */\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n    position: relative;\n    display: grid; /* easiest way to perfectly center the ::before */\n    place-content: center;\n    width: var(--checkradio-size);\n    height: var(--checkradio-size);\n    margin: .25rem 0;\n  } /* center vertically, (line-height-height)/2 */\n    input[type=checkbox]:hover, input[type=radio]:hover {\n      border-color: oklch(var(--primary)); /* minimal feedback that clicking radio/label will do something */\n      border-width: 2px;\n    }\n    input[type=checkbox]::before, input[type=radio]::before {\n      content: "";\n      width: calc(var(--checkradio-size) - 6px);\n      height: calc(var(--checkradio-size) - 6px);\n      transform: scale(0); /* hide when not checked */\n      transition: 125ms transform ease-in-out;\n      box-shadow: inset 1em 1em oklch(var(--check-color)); /* bg instead of bgcolor to enable printing */\n      background-color: CanvasText; /* replace shadow when forced colors */\n    }\n    input[type=checkbox]::after, input[type=radio]::after {\n      content: "";\n      position: absolute;\n      top: -4px;\n      inset-inline-start: -4px;\n      height: 24px;\n      width: 24px;\n    }\n    input[type=checkbox]:checked::before, input[type=radio]:checked::before {\n      transform: scale(1);\n    }\n\n  input[type=checkbox] {\n    border-radius: var(--default-radius);\n  }\n    input[type=checkbox]::before {\n      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); /* checkmark */\n    } \n  input[type=radio] {\n    border-radius: 50%;\n  }\n    input[type=radio]::before {\n      border-radius: 50%;\n    }\n  .active input[type=checkbox]:not(:disabled), .active input[type=radio]:not(:disabled) {\n    --check-color: var(--primary);\n  }\n\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n.progress-bar {\n    margin: var(--panel-padding);\n  }\n.progress-bar .progress-wrapper .progress-slider {\n    background-position: 0 4px;\n    display: inline-block;\n    height: 12px;\n    border: 1px solid #ccc;\n    border-radius: 6px;\n    padding: 1px;\n  }\n.panel .progress-bar .progress-wrapper {\n    text-align: center;\n  }\n.progress-bar .progress-stop {\n    height: 8px;\n    line-height: 8px;\n    width: 6px;\n    background: none;\n    font-size: 6px;\n    text-indent: -1234em;\n    display: block;\n    float: inline-start;\n  }\n.progress-bar .progress-stop.first-child {\n    width: 8px;\n    border-radius: 5px 0 0 5px;\n  }\n.progress-bar .progress-stop.last-child {\n    width: 8px;\n    border-radius: 0 5px 5px 0;\n  }\n.progress-bar .progress-stop.active {\n    background: oklch(var(--muted));\n  }\n.progress-bar .progress-stop.current {\n    border-radius: 0 5px 5px 0;\n  }\n.progress-bar .progress-stop.current.first-child {\n    border-radius: 5px;\n  }\n.progress-bar .progress-details {\n    color: has(var(--muted));\n    font-size: 9px;\n  }\n.prose p {\n      margin: 0 0 1rem 0;\n    }\n/* for things like description we want less, so the parent will determine the outer margin. */\n/* if only margin-trim was more widely supported */\n.prose > *:first-child {\n      margin-top: 0;\n    }\n.prose > *:last-child {\n      margin-bottom: 0;\n    }\n.prose ul {\n      list-style-type: disc;\n      margin-block: 0 1rem;\n      margin-inline: var(--list-indent) 0;\n    }\n.prose ol {\n      list-style-type: lower-alpha;\n      margin-block: 0 1rem;\n      margin-inline: var(--list-indent) 0;\n    }\n.prose ol.list-decimal {\n        list-style-type: decimal;\n      }\n.prose li {\n      padding-inline-start: 0.5rem;\n    }\n.prose hr {\n      margin: var(--question-padding) 1rem;\n      border: none;\n      height: 0.125rem;\n      background-color: oklch(var(--muted));\n    }\n.prose hr.compact {\n      margin: 1rem;\n    }\nblockquote {\n    margin: 1em 2em;\n  }\nblockquote >* {\n        font-style: italic;\n    }\nblockquote >p::before,\n    blockquote >p:last-child::after,\n    blockquote >ul::before,\n    blockquote >ul:last-child > li:last-child::after {\n        content: "“";\n        font-family: Georgia;\n        font-size: 2.5rem;\n        margin-block: -.8rem 0;\n        margin-inline: -1.4rem 0;\n        position: absolute;\n        color: #666;\n    }\nblockquote >ul::before {\n      margin-inline-start: calc(-1.1rem - var(--list-indent));\n    }\nblockquote >p:last-child::after,\n    blockquote >ul:last-child > li:last-child::after {\n        content: "”";\n        margin: 0;\n        margin-inline-start: -.1rem\n    }\nblockquote.blue-quotes p::before,\n    blockquote.blue-quotes p:last-child::after {\n        color: #298ED5;\n    }\n.visible {\n  visibility: visible;\n}\n.absolute {\n  position: absolute;\n}\n.sticky {\n  position: sticky;\n}\n.order-last {\n  order: 9999;\n}\n.float-right {\n  float: right;\n}\n.m-panel-padding {\n  margin: var(--panel-padding);\n}\n.mx-1 {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n}\n.my-1 {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.me-1 {\n  margin-inline-end: 0.25rem;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-3 {\n  margin-top: 0.75rem;\n}\n.block {\n  display: block;\n}\n.inline-block {\n  display: inline-block;\n}\n.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.table {\n  display: table;\n}\n.hidden {\n  display: none;\n}\n.w-1\\/2 {\n  width: 50%;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-1\\/4 {\n  width: 25%;\n}\n.w-1\\/5 {\n  width: 20%;\n}\n.w-1\\/6 {\n  width: 16.666667%;\n}\n.w-2\\/3 {\n  width: 66.666667%;\n}\n.w-2\\/5 {\n  width: 40%;\n}\n.w-3\\/4 {\n  width: 75%;\n}\n.w-3\\/5 {\n  width: 60%;\n}\n.w-4\\/5 {\n  width: 80%;\n}\n.w-5\\/6 {\n  width: 83.333333%;\n}\n.w-full {\n  width: 100%;\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.resize {\n  resize: both;\n}\n.list-decimal {\n  list-style-type: decimal;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-warning {\n  --tw-border-opacity: 1;\n  border-color: rgb(255 165 0 / var(--tw-border-opacity));\n}\n.bg-slate-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(241 245 249 / var(--tw-bg-opacity));\n}\n.p-panel-padding {\n  padding: var(--panel-padding);\n}\n.text-center {\n  text-align: center;\n}\n.align-top {\n  vertical-align: top;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.font-light {\n  font-weight: 300;\n}\n.font-medium {\n  font-weight: 500;\n}\n.underline {\n  text-decoration-line: underline;\n}\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n:host > div {\n  background-color: oklch(var(--page));\n  color: oklch(var(--foreground));\n  min-height: 100cqh;\n}\n:host > div > * {\n  max-width: var(--max-page-width);\n  margin: 0 auto;\n}\n.panel + .panel {\n  margin-top: 5rem;\n}\n.option .labelwrapper p {\n  display: inline; /* temp fix, should be stripped by quby-compiler */\n}\n.item.question, .question-bar {\n  --question-bar-color: var(--super-muted);\n  box-shadow: calc(-1 * var(--question-bar-padding)) 0 0 0 oklch(var(--page)), calc(0px - var(--question-bar-width) - var(--question-bar-padding)) 0px 0px 0px oklch(var(--question-bar-color));\n}\n.item.question:dir(rtl), .question-bar:dir(rtl) {\n    box-shadow: calc(var(--question-bar-padding)) 0 0 0 oklch(var(--page)), calc(var(--question-bar-width) + var(--question-bar-padding)) 0px 0px 0px oklch(var(--question-bar-color));\n  }\n.item.question.active, .item.question .item:has(.active), .question-bar.active, .question-bar .item:has(.active) {\n    --question-bar-color: var(--primary);\n  }\n.item.question.errors, .question-bar.errors {\n    --question-bar-color: var(--error-background);\n  }\n.item.question.errors.active, .question-bar.errors.active {\n    --question-bar-color: var(--error-bar);\n  }\n.item .main {\n  font-weight: 700;\n}\n.item .main em {\n      font-weight: inherit;\n    }\n.item .main strong {\n  font-weight: 900;\n}\n.item .main {\n  margin-bottom: 0.25rem; /* margin to .description, collapses with .field if that is the next element */\n}\n.item .inner-title {\n    margin: 1rem 0 0.5rem;\n    font-weight: 600;\n  }\n.item .inner-title em {\n  font-weight: 700;\n}\n.item .inner-title strong {\n  font-weight: 800;\n}\n.item .description-and-fields > .description {\n  font-weight: 300;\n}\n.item .description-and-fields > .description em {\n  font-weight: 400;\n}\n.item .description-and-fields > .description strong {\n  font-weight: 600;\n}\n.item .description-and-fields > .description .instruction {\n  font-weight: 400;\n}\n.item .description-and-fields > .description .example {}\n.item .description-and-fields > .description .explanation {}\n.item .fields {\n  margin-top: 0.5rem;\n}\nbutton {\n  border-radius: 0.375rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  font-weight: 600;\n}\nbutton:focus-visible {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\nbutton.secondary {\n  border-width: 2px;\n  border-color: oklch(var(--primary));\n  background-color: oklch(var(--background));\n  color: oklch(var(--primary));\n}\nbutton.secondary:hover {\n      border-color: oklch(var(--primary-hover));\n      color: oklch(var(--primary-hover));\n    }\nbutton.primary {\n  background-color: oklch(var(--primary));\n  color: oklch(var(--background));\n}\nbutton.primary:hover {\n      background-color: oklch(var(--primary-hover));\n    }\n.info-item {\n  --icon-size: 20px;\n  --icon-margin: 8px;\n}\n.info-item .info-html {\n    margin-bottom: var(--question-padding);\n    z-index: 1; /* prevent showing under slider */\n    padding-inline-end: calc(var(--icon-size) + 2 * var(--icon-margin));\n  }\n.info-item .info-html.open { /* opened by clicking icon */\n      position: sticky;\n      top: 0;\n    }\n.info-item .info-html>div { /* actual content, extra div needed to animate scale. */\n      transform-origin: center top;\n      transition: inherit;\n    }\n.info-item .info-html>div :first-child {\n        margin-top: 0;\n      }\n.info-item .info-html>div :last-child {\n        margin-bottom: 0;\n      }\n.info-item .info-html.opening {\n      height: 0;\n      margin-bottom: 0;\n    }\n.info-item .info-html.opening>div { \n        transform: scale(1, 0); /* animating scale, since we can\'t both hide content and have the icon float */\n      }\n.info-item .info-html {\n    transition: all 0.3s linear;\n    interpolate-size: allow-keywords;\n}\n/* gradient under info-html, to make text fade under it */\n.info-item .info-html::after {\n      content: "";\n      position: absolute;\n      bottom: calc(-1 * var(--question-padding));\n      height: var(--question-padding);\n      width: 100%;\n      left: 0;\n      background: linear-gradient(in oklch, oklch(var(--page)), transparent);\n    }\n.info-item .info-icon {\n    position: relative; /* with z-index to make it appear above the info-html */\n    z-index: 2;\n    float: inline-end;\n    top: 0;\n    transition: margin 0.5s;\n    position: sticky;\n  }\n.info-item .info-icon:hover {\n      cursor: pointer;\n    }\n.info-item .info-icon.stuck {\n      margin-right: calc(-1 * var(--panel-padding));\n    }\n.info-item .info-icon svg {\n      width: var(--icon-size);\n      height: var(--icon-size);\n      margin: var(--icon-margin);\n    }\n/* default type */\n.info-item.info .info-html, .info-item.info .info-icon {\n      background-color: oklch(var(--info-block-bg));\n    }\n.info-item.info .info-html {\n  padding: 0.5rem;\n      color: oklch(var(--info-block-fg));\n}\n/* type actionbar */\n.info-item.question-bar .info-html, .info-item.question-bar info-icon {\n      background-color: oklch(var(--page));\n    }\n.info-item.question-bar .info-html {\n      padding: 0;\n    }\n.info-item.question-bar .info-html>div {\n        max-height: 40vh; /* Just a precaution, should be shorter */\n        overflow: auto;\n      }\n.item.radio .option, .item.check_box .option {\n  display: flex;\n  flex-wrap: wrap;\n}\n.item.radio .option .radiocheckwrapper, .item.check_box .option .radiocheckwrapper {\n    flex: 0 0 var(--checkradio-size);\n  }\n.item.radio .option .value, .item.check_box .option .value {\n    flex: 0 0 2rem;\n    text-align: right;\n  }\n.item.radio .option .labelwrapper, .item.check_box .option .labelwrapper {\n    flex: 1 1 0;\n  }\n.item.radio .option .labelwrapper>*, .item.check_box .option .labelwrapper>* {\n      padding-inline-start: var(--checkradio-padding); /* padding in label, so no space between input and label */\n    }\n.item.radio .option .subquestions, .item.check_box .option .subquestions {\n    width: 100%; /* forces it to the next lines */\n  }\n.item.radio .option + .option, .item.check_box .option + .option {\n    margin-top: calc(var(--option-gap-y) * 0.25rem);\n  }\n.subquestions {\n  margin-inline-start: calc(var(--question-bar-padding) + var(--checkradio-size)/2 + 2px); /* align active bar under checkbox/radio */\n}\n/* context-description doesn\'t live under question, so doesn\'t react to a single question override. */\n.item, .context-description {\n  position: relative;\n  margin-bottom: calc(var(--question-padding) * var(--question-mb-factor));\n}\n.item:has(+.indent.question) {\n  margin-bottom: 0;\n  padding-bottom: calc(var(--question-padding) * var(--question-mb-factor) / 2);\n}\n.question.indent {\n  padding-inline-start: calc(var(--checkradio-size) + var(--checkradio-padding));\n}\n/* align with option text, it\'s often below selects and a fine padding for other types */\n.question.indent::before {\n    content: "";\n    position: absolute;\n    top: 10px;\n    inset-inline-start: 0;\n    margin-inline-start: calc(0px - var(--question-bar-padding));\n    width: calc(var(--checkradio-size) + var(--question-bar-padding));\n    height: var(--question-bar-width);\n    background-color: oklch(var(--super-muted));\n  }\n.question.indent.active::before {\n    background-color: oklch(var(--primary));\n  }\n.subquestions .item {\n  margin-bottom: 0;\n}\n/* Distance from inputs feel than from text, since they don\'t have extra line-height padding.\n  * So we add a bit of padding, but not for radio/checkbox, \n  *   since they do have line-height from the labels.\n  *   but also because it would prevent margin-collapsing when they have subquestions.\n  * Let\'s hope someday text-box-trim will make this obsolete. */\n.item:not(.radio):not(.check_box) .description-and-fields {\n  padding-bottom: 0.5em;\n}\n.item .error {\n  background: oklch(var(--error-background));\n  outline: 1px solid oklch(var(--error-bar));\n  border-radius: var(--default-radius);\n  margin: 0.25rem;\n  padding: 0.25rem;\n}\nfooter {\n  font-weight: 300;\n}\nfooter em {\n  font-weight: 400;\n}\nfooter strong {\n  font-weight: 600;\n}\nfooter {\n  font-size: .875rem;\n  padding: var(--panel-padding);\n  color: oklch(var(--foreground-80));\n}\n:is(.dark .dark\\:bg-slate-700) {\n  --tw-bg-opacity: 1;\n  background-color: rgb(51 65 85 / var(--tw-bg-opacity));\n}\n';
 const oldStyles = ':host {\n  --background: 0 0% 100%;\n}\n\n.item.date_parts .mr-1 {\n  margin-right: 0.125rem;\n}\n.item.date_parts .mb-2 { \n  margin-bottom: 0.25rem;\n}\n\n\n/* line 5, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed,\nfigure, figcaption, footer, header, hgroup,\nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font: inherit;\n  font-size: 100%;\n  vertical-align: baseline;\n}\n\n/* line 22, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\nhtml {\n  line-height: 1;\n}\n\n/* line 24, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\nol, ul {\n  list-style: none;\n}\n\n/* line 26, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n/* line 28, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\ncaption, th, td {\n  text-align: left;\n  font-weight: normal;\n  vertical-align: middle;\n}\n\n/* line 30, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\nq, blockquote {\n  quotes: none;\n}\n/* line 103, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\nq:before, q:after, blockquote:before, blockquote:after {\n  content: "";\n  content: none;\n}\n\n/* line 32, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\na img {\n  border: none;\n}\n\n/* line 116, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\narticle, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {\n  display: block;\n}\n\n/* line 3, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n#modalFrameDialog {\n  padding: 0;\n}\n\n/* line 6, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n#modalFrame {\n  width: 100%;\n  height: 99%;\n}\n\n/* line 11, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n.x_container {\n  display: none;\n}\n\n/* line 15, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\nsup, sub {\n  font-size: 0.8em !important;\n  position: relative;\n  line-height: 0;\n}\n\n/* line 21, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\nsup {\n  top: -0.4em;\n}\n\n/* line 25, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\nsub {\n  bottom: -0.25em;\n}\n\n/* line 29, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\nhtml {\n  overflow-x: hidden;\n}\n\n/* line 33, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\nbody {\n  font-family: Verdana, sans-serif;\n  font-size: 0.8em;\n  line-height: normal;\n  background-color: #eeeeee;\n  max-width: 100%;\n  overflow-x: hidden;\n  position: relative;\n}\n\n/* line 43, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n.panel-action-links {\n  text-align: right;\n  margin-bottom: 1em;\n}\n\n/* line 48, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n.panel-action-link {\n  margin-left: 1em;\n}\n\n/* line 52, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n#mastfoot {\n  margin: 0 auto;\n  max-width: 900px;\n  text-align: right;\n  color: #aaaaaa;\n}\n/* line 58, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n#mastfoot:before {\n  content: "\\2014";\n}\n/* line 62, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n#mastfoot:after {\n  content: "\\2014";\n}\n\n/* line 67, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n#noscript-warning {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  background: yellow;\n  border: 4px solid red;\n  color: red;\n  font-size: 1.5em;\n  text-align: center;\n}\n\n/* line 79, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n.nowrap {\n  white-space: nowrap;\n}\n\n/* line 83, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\nselect {\n  width: 100%;\n}\n\n/* line 87, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\ni {\n  font-style: italic !important;\n}\n\n/* line 91, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\nem {\n  font-weight: bold;\n}\n\n/* line 95, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n#content {\n  margin-bottom: 4em;\n}\n/* line 98, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n#content input[disabled] {\n  background-color: #ddd;\n}\n/* line 102, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n#content .flash {\n  max-width: 59em;\n  _width: 59em;\n  padding-left: 1em;\n  padding-right: 1em;\n  margin-left: auto;\n  margin-right: auto;\n  margin-bottom: 1em;\n}\n/* line 38, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/general/_clearfix.scss */\n#content .flash:after {\n  content: "";\n  display: table;\n  clear: both;\n}\n/* line 106, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n#content .flash div {\n  padding: 5px;\n  background: #333333;\n  border: 1px solid black;\n}\n/* line 112, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n#content .flash .error {\n  background: #ffbbbb;\n  border: 1px solid #ff3333;\n}\n/* line 116, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n#content .flash .notice {\n  background: #ffffcc;\n  border: 1px solid #ffcc66;\n}\n/* line 120, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n#content .flash .success {\n  background-color: #ccffcc;\n  border: 1px solid #11cc11;\n}\n/* line 126, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n#content #force-submit {\n  background: #ffffcc;\n  border: 1px solid #ffcc66;\n  padding: 3em;\n  font-size: 1.2em;\n  margin-bottom: 5em;\n}\n/* line 133, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n#content #force-submit h1 {\n  font-weight: bold;\n  margin-bottom: 1em;\n}\n/* line 134, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n#content #force-submit p {\n  margin-bottom: 1em;\n}\n/* line 137, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n#content .specifier {\n  margin: 0 !important;\n}\n/* line 139, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n#content .specifier.errors {\n  width: auto !important;\n  float: left;\n}\n\n/* line 148, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n.evenRow {\n  background-color: #eeeeee;\n}\n\n/* line 157, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n.hotkeyDialog p {\n  margin: 1em 0;\n}\n/* line 160, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n.hotkeyDialog td {\n  border: 0px;\n}\n\n/* line 165, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\ntable {\n  width: 100%;\n  border-collapse: collapse;\n  margin-bottom: 1.5em;\n}\n/* line 169, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\ntable thead tr th {\n  background: black;\n  color: white;\n  padding: 5px;\n}\n/* line 175, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\ntable tr.even {\n  background: #e9e9e9;\n}\n/* line 179, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\ntable td {\n  padding: 5px;\n  border: 1px solid #cecece;\n  vertical-align: top;\n}\n\n/* line 186, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n.ui-dialog-buttonpane {\n  overflow: hidden !important;\n}\n\n/* line 190, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\npre {\n  font-family: "Deja Vu Sans Mono", "Courier New", "Courier", monospace;\n}\n\n/* line 194, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n.question {\n  background: #e5e5e5;\n  margin: 2em;\n  padding: 2em;\n}\n\n/* line 202, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\nlabel.placeholder {\n  cursor: text;\n  padding: 4px 4px 4px 4px;\n  color: #999999;\n}\n\n/* line 209, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\ninput::-webkit-input-placeholder, textarea::-webkit-input-placeholder {\n  color: #999999;\n}\n\n/* line 213, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\ninput:placeholder, textarea:placeholder {\n  color: #999999;\n}\n\n/* line 217, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n.focus {\n  background: #cce8ed !important;\n}\n\n/* line 221, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n.print {\n  width: 83.05085%;\n  float: left;\n  margin-right: 1.69492%;\n  display: inline;\n  margin-top: 2em;\n}\n/* line 224, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n.print a {\n  color: blue;\n  text-decoration: underline;\n}\n\n/* line 230, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\n.error .stacktrace {\n  color: #777;\n  white-space: pre-line;\n}\n\n/* line 235, /home/marten/rgoc/quby/app/assets/stylesheets/quby/screen.scss */\nhtml.busy, html.busy * {\n  cursor: wait !important;\n}\n\n/* line 4, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.hidden {\n  display: none;\n}\n\n/* line 7, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .noVisibleQuestions, .single-page .noVisibleQuestions {\n  display: none;\n}\n/* line 9, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .hide, .single-page .hide {\n  margin: 0 !important;\n  outline: none !important;\n}\n/* line 14, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .hide > *, .single-page .hide > * {\n  display: none !important;\n}\n/* line 34, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel, .single-page .panel {\n  background: white;\n}\n/* line 6, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .panel, .single-page .panel {\n  max-width: 59em;\n  _width: 59em;\n  padding-left: 1em;\n  padding-right: 1em;\n  margin-left: auto;\n  margin-right: auto;\n  padding-top: 20px;\n}\n/* line 38, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/general/_clearfix.scss */\n.paged .panel:after, .single-page .panel:after {\n  content: "";\n  display: table;\n  clear: both;\n}\n/* line 40, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\n.paged .panel .table div, .single-page .panel .table div, .paged .panel .table span, .single-page .panel .table span, .paged .panel .table applet, .single-page .panel .table applet, .paged .panel .table object, .single-page .panel .table object, .paged .panel .table iframe, .single-page .panel .table iframe,\n.paged .panel .table h1,\n.single-page .panel .table h1, .paged .panel .table h2, .single-page .panel .table h2, .paged .panel .table h3, .single-page .panel .table h3, .paged .panel .table h4, .single-page .panel .table h4, .paged .panel .table h5, .single-page .panel .table h5, .paged .panel .table h6, .single-page .panel .table h6, .paged .panel .table p, .single-page .panel .table p, .paged .panel .table blockquote, .single-page .panel .table blockquote, .paged .panel .table pre, .single-page .panel .table pre,\n.paged .panel .table a,\n.single-page .panel .table a, .paged .panel .table abbr, .single-page .panel .table abbr, .paged .panel .table acronym, .single-page .panel .table acronym, .paged .panel .table address, .single-page .panel .table address, .paged .panel .table big, .single-page .panel .table big, .paged .panel .table cite, .single-page .panel .table cite, .paged .panel .table code, .single-page .panel .table code,\n.paged .panel .table del,\n.single-page .panel .table del, .paged .panel .table dfn, .single-page .panel .table dfn, .paged .panel .table em, .single-page .panel .table em, .paged .panel .table img, .single-page .panel .table img, .paged .panel .table ins, .single-page .panel .table ins, .paged .panel .table kbd, .single-page .panel .table kbd, .paged .panel .table q, .single-page .panel .table q, .paged .panel .table s, .single-page .panel .table s, .paged .panel .table samp, .single-page .panel .table samp,\n.paged .panel .table small,\n.single-page .panel .table small, .paged .panel .table strike, .single-page .panel .table strike, .paged .panel .table strong, .single-page .panel .table strong, .paged .panel .table sub, .single-page .panel .table sub, .paged .panel .table sup, .single-page .panel .table sup, .paged .panel .table tt, .single-page .panel .table tt, .paged .panel .table var, .single-page .panel .table var,\n.paged .panel .table b,\n.single-page .panel .table b, .paged .panel .table u, .single-page .panel .table u, .paged .panel .table i, .single-page .panel .table i, .paged .panel .table center, .single-page .panel .table center,\n.paged .panel .table dl,\n.single-page .panel .table dl, .paged .panel .table dt, .single-page .panel .table dt, .paged .panel .table dd, .single-page .panel .table dd, .paged .panel .table ol, .single-page .panel .table ol, .paged .panel .table ul, .single-page .panel .table ul, .paged .panel .table li, .single-page .panel .table li,\n.paged .panel .table fieldset,\n.single-page .panel .table fieldset, .paged .panel .table form, .single-page .panel .table form, .paged .panel .table label, .single-page .panel .table label, .paged .panel .table legend, .single-page .panel .table legend,\n.paged .panel .table table,\n.single-page .panel .table table, .paged .panel .table caption, .single-page .panel .table caption, .paged .panel .table tbody, .single-page .panel .table tbody, .paged .panel .table tfoot, .single-page .panel .table tfoot, .paged .panel .table thead, .single-page .panel .table thead, .paged .panel .table tr, .single-page .panel .table tr, .paged .panel .table th, .single-page .panel .table th, .paged .panel .table td, .single-page .panel .table td,\n.paged .panel .table article,\n.single-page .panel .table article, .paged .panel .table aside, .single-page .panel .table aside, .paged .panel .table canvas, .single-page .panel .table canvas, .paged .panel .table details, .single-page .panel .table details, .paged .panel .table embed, .single-page .panel .table embed,\n.paged .panel .table figure,\n.single-page .panel .table figure, .paged .panel .table figcaption, .single-page .panel .table figcaption, .paged .panel .table footer, .single-page .panel .table footer, .paged .panel .table header, .single-page .panel .table header, .paged .panel .table hgroup, .single-page .panel .table hgroup,\n.paged .panel .table menu,\n.single-page .panel .table menu, .paged .panel .table nav, .single-page .panel .table nav, .paged .panel .table output, .single-page .panel .table output, .paged .panel .table ruby, .single-page .panel .table ruby, .paged .panel .table section, .single-page .panel .table section, .paged .panel .table summary, .single-page .panel .table summary,\n.paged .panel .table time,\n.single-page .panel .table time, .paged .panel .table mark, .single-page .panel .table mark, .paged .panel .table audio, .single-page .panel .table audio, .paged .panel .table video, .single-page .panel .table video {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font: inherit;\n  font-size: 100%;\n  vertical-align: baseline;\n}\n/* line 55, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\n.paged .panel .table table, .single-page .panel .table table {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n/* line 57, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\n.paged .panel .table caption, .single-page .panel .table caption, .paged .panel .table th, .single-page .panel .table th, .paged .panel .table td, .single-page .panel .table td {\n  text-align: left;\n  font-weight: normal;\n  vertical-align: middle;\n}\n/* line 59, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\n.paged .panel .table q, .single-page .panel .table q, .paged .panel .table blockquote, .single-page .panel .table blockquote {\n  quotes: none;\n}\n/* line 103, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\n.paged .panel .table q:before, .single-page .panel .table q:before, .paged .panel .table q:after, .single-page .panel .table q:after, .paged .panel .table blockquote:before, .single-page .panel .table blockquote:before, .paged .panel .table blockquote:after, .single-page .panel .table blockquote:after {\n  content: "";\n  content: none;\n}\n/* line 61, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\n.paged .panel .table a img, .single-page .panel .table a img {\n  border: none;\n}\n/* line 4, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table p, .single-page .panel .table p, .paged .panel .table div, .single-page .panel .table div {\n  display: inline;\n}\n/* line 8, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table caption, .single-page .panel .table caption {\n  margin-bottom: 0.5em;\n}\n/* line 12, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table .errors, .single-page .panel .table .errors {\n  outline: 2px solid red !important;\n}\n/* line 16, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table .error, .single-page .panel .table .error {\n  display: inline-block;\n  background: #ffbbbb;\n  outline: 1px solid #ff3333;\n}\n/* line 20, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table .error.hidden, .single-page .panel .table .error.hidden {\n  display: none;\n}\n/* line 27, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table table, .single-page .panel .table table {\n  border-bottom: 1px solid black;\n  border-collapse: collapse;\n  margin: 0;\n}\n/* line 28, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table table *, .single-page .panel .table table * {\n  width: auto;\n}\n/* line 32, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table table .option, .single-page .panel .table table .option {\n  white-space: normal;\n}\n/* line 36, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table table td > div > *, .single-page .panel .table table td > div > * {\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n}\n/* line 44, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table table .row, .single-page .panel .table table .row {\n  width: 100%;\n  float: right;\n  margin-right: 0;\n  display: inline;\n  float: none;\n  display: table-row;\n}\n/* line 45, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table table .row td, .single-page .panel .table table .row td, .paged .panel .table table .row th, .single-page .panel .table table .row th {\n  display: table-cell;\n  border: 0;\n  border-bottom: 1px solid #bbb;\n  vertical-align: top;\n  float: none;\n}\n/* line 50, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table table .row td.main, .single-page .panel .table table .row td.main, .paged .panel .table table .row th.main, .single-page .panel .table table .row th.main {\n  vertical-align: middle;\n}\n/* line 55, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table table .row.inner_row td, .single-page .panel .table table .row.inner_row td {\n  border: 0;\n}\n/* line 56, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table table .row:first-child td, .single-page .panel .table table .row:first-child td {\n  border-top: 1px solid #bbb;\n}\n/* line 62, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table table .row input, .single-page .panel .table table .row input {\n  /* These properties get overriden by our table reset, so we have to re-apply them with a more specific selector */\n}\n/* line 63, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table table .row input.float, .single-page .panel .table table .row input.float, .paged .panel .table table .row input.integer, .single-page .panel .table table .row input.integer {\n  width: 54px;\n}\n/* line 67, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table table .row input.string, .single-page .panel .table table .row input.string, .paged .panel .table table .row input.textarea, .single-page .panel .table table .row input.textarea {\n  width: 92%;\n}\n/* line 73, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table table .row input.sized, .single-page .panel .table table .row input.sized {\n  width: auto;\n}\n/* line 76, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table table .row input.fd-form-element-hidden, .single-page .panel .table table .row input.fd-form-element-hidden {\n  display: none;\n}\n/* line 86, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table table .row .unit, .single-page .panel .table table .row .unit {\n  vertical-align: -20%;\n  padding-left: 4px;\n}\n/* line 93, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table .item, .single-page .panel .table .item {\n  float: none;\n  width: auto;\n  margin-right: auto;\n  display: block;\n}\n/* line 96, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table .main, .single-page .panel .table .main {\n  width: 33.33333%;\n  float: none !important;\n  display: table-cell !important;\n}\n/* line 100, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table .main label small, .single-page .panel .table .main label small {\n  font-size: 0.7em;\n}\n/* line 102, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table .description, .single-page .panel .table .description {\n  text-align: right;\n}\n/* line 107, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table .option_sets .option, .single-page .panel .table .option_sets .option {\n  padding-left: 1em;\n  padding-bottom: 0.5em;\n  vertical-align: bottom;\n}\n/* line 113, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table .dark, .single-page .panel .table .dark {\n  background-color: #eee;\n}\n/* line 116, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n.paged .panel .table .light, .single-page .panel .table .light {\n  background-color: #fff;\n}\n@media (max-width: 420px) {\n  /* line 16, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n  .paged .horizontal.item.scale table, .single-page .horizontal.item.scale table {\n    table-layout: fixed;\n  }\n  /* line 18, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n  .paged .horizontal.item.scale table td.last p, .single-page .horizontal.item.scale table td.last p {\n    position: absolute;\n    right: 20px;\n    max-width: 5rem;\n    text-align: right;\n  }\n}\n/* line 28, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged tr, .single-page tr {\n  border: 1px solid #aaa;\n}\n/* line 32, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .item, .single-page .item {\n  width: 100%;\n  float: right;\n  margin-right: 0;\n  display: inline;\n  margin-bottom: 18px;\n}\n/* line 41, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .item.horizontal.radio .option, .single-page .item.horizontal.radio .option, .paged .item.horizontal.check_box .option, .single-page .item.horizontal.check_box .option,\n.paged .item.vertical.radio .option,\n.single-page .item.vertical.radio .option,\n.paged .item.vertical.check_box .option,\n.single-page .item.vertical.check_box .option {\n  width: 100%;\n  float: right;\n  margin-right: 0;\n  display: inline;\n}\n/* line 43, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .item.horizontal.radio .option .radiocheckwrapper, .single-page .item.horizontal.radio .option .radiocheckwrapper, .paged .item.horizontal.check_box .option .radiocheckwrapper, .single-page .item.horizontal.check_box .option .radiocheckwrapper,\n.paged .item.vertical.radio .option .radiocheckwrapper,\n.single-page .item.vertical.radio .option .radiocheckwrapper,\n.paged .item.vertical.check_box .option .radiocheckwrapper,\n.single-page .item.vertical.check_box .option .radiocheckwrapper {\n  width: 6.77966%;\n  float: left;\n  margin-right: 1.69492%;\n  display: inline;\n}\n/* line 44, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .item.horizontal.radio .option .labelwrapper, .single-page .item.horizontal.radio .option .labelwrapper, .paged .item.horizontal.check_box .option .labelwrapper, .single-page .item.horizontal.check_box .option .labelwrapper,\n.paged .item.vertical.radio .option .labelwrapper,\n.single-page .item.vertical.radio .option .labelwrapper,\n.paged .item.vertical.check_box .option .labelwrapper,\n.single-page .item.vertical.check_box .option .labelwrapper {\n  width: 91.52542%;\n  float: right;\n  margin-right: 0;\n  display: inline;\n}\n/* line 47, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .item.horizontal.radio .option.show_values .value, .single-page .item.horizontal.radio .option.show_values .value, .paged .item.horizontal.check_box .option.show_values .value, .single-page .item.horizontal.check_box .option.show_values .value,\n.paged .item.vertical.radio .option.show_values .value,\n.single-page .item.vertical.radio .option.show_values .value,\n.paged .item.vertical.check_box .option.show_values .value,\n.single-page .item.vertical.check_box .option.show_values .value {\n  width: 6.77966%;\n  float: left;\n  margin-right: 1.69492%;\n  display: inline;\n}\n/* line 48, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .item.horizontal.radio .option.show_values .labelwrapper, .single-page .item.horizontal.radio .option.show_values .labelwrapper, .paged .item.horizontal.check_box .option.show_values .labelwrapper, .single-page .item.horizontal.check_box .option.show_values .labelwrapper,\n.paged .item.vertical.radio .option.show_values .labelwrapper,\n.single-page .item.vertical.radio .option.show_values .labelwrapper,\n.paged .item.vertical.check_box .option.show_values .labelwrapper,\n.single-page .item.vertical.check_box .option.show_values .labelwrapper {\n  width: 83.05085%;\n  float: right;\n  margin-right: 0;\n  display: inline;\n}\n/* line 66, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .item.horizontal.string input, .single-page .item.horizontal.string input, .paged .item.horizontal.string textarea, .single-page .item.horizontal.string textarea, .paged .item.horizontal.textarea input, .single-page .item.horizontal.textarea input, .paged .item.horizontal.textarea textarea, .single-page .item.horizontal.textarea textarea,\n.paged .item.vertical.string input,\n.single-page .item.vertical.string input,\n.paged .item.vertical.string textarea,\n.single-page .item.vertical.string textarea,\n.paged .item.vertical.textarea input,\n.single-page .item.vertical.textarea input,\n.paged .item.vertical.textarea textarea,\n.single-page .item.vertical.textarea textarea {\n  width: 100%;\n  margin-right: 0;\n  display: inline;\n}\n/* line 67, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .item.horizontal.string .sized, .single-page .item.horizontal.string .sized, .paged .item.horizontal.textarea .sized, .single-page .item.horizontal.textarea .sized,\n.paged .item.vertical.string .sized,\n.single-page .item.vertical.string .sized,\n.paged .item.vertical.textarea .sized,\n.single-page .item.vertical.textarea .sized {\n  width: auto;\n}\n/* line 97, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .progress-bar, .single-page .progress-bar {\n  width: 100%;\n  float: right;\n  margin-right: 0;\n  display: inline;\n  margin-left: -20px;\n  margin-right: -20px;\n  padding: 1.5em 20px;\n}\n/* line 104, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .progress-bar .progress-wrapper .progress-slider, .single-page .progress-bar .progress-wrapper .progress-slider {\n  background-position: 0 3px;\n  display: inline-block;\n  zoom: 1;\n}\n/* line 107, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .progress-bar .progress-wrapper .progress-slider .progress-stop, .single-page .progress-bar .progress-wrapper .progress-slider .progress-stop {\n  margin: 0 2px;\n  width: 8px;\n  height: 8px;\n}\n/* line 112, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .progress-bar .progress-wrapper .progress-slider.long-list, .single-page .progress-bar .progress-wrapper .progress-slider.long-list {\n  display: none;\n}\n/* line 119, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .buttons, .single-page .buttons {\n  width: 100%;\n  float: right;\n  margin-right: 0;\n  display: inline;\n  margin-left: -20px;\n  margin-right: -20px;\n  padding: 1.5em 20px;\n  border-bottom: 1px dotted #d0d0d0;\n}\n/* line 126, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .buttons .back, .single-page .buttons .back {\n  width: 49.15254%;\n  float: left;\n  margin-right: 1.69492%;\n  display: inline;\n}\n/* line 127, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .buttons .prev, .single-page .buttons .prev {\n  width: 49.15254%;\n  float: left;\n  margin-right: 1.69492%;\n  display: inline;\n}\n/* line 128, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .buttons .next, .single-page .buttons .next {\n  width: 49.15254%;\n  float: right;\n  margin-right: 0;\n  display: inline;\n  text-align: right;\n}\n/* line 129, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .buttons .abort, .single-page .buttons .abort {\n  display: none;\n}\n/* line 130, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .buttons .print, .single-page .buttons .print {\n  display: none;\n}\n/* line 131, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .buttons .print, .single-page .buttons .print {\n  width: 100%;\n  float: left;\n  margin-right: 1.69492%;\n  display: inline;\n  text-align: right;\n}\n/* line 132, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/mobile.scss */\n.paged .buttons .save, .single-page .buttons .save {\n  width: 49.15254%;\n  float: right;\n  margin-right: 0;\n  display: inline;\n  text-align: right;\n}\n@media (min-width: 35em) {\n  /* line 2, /home/marten/rgoc/quby/app/assets/stylesheets/quby/general/desktop.scss */\n  .paged #content, .single-page #content {\n    margin: 6em auto 0em auto;\n  }\n  /* line 9, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged tr, .single-page tr {\n    border: none;\n  }\n  /* line 13, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .panel, .single-page .panel {\n    padding-left: 1em;\n    padding-right: 1em;\n    margin-left: auto;\n    margin-right: auto;\n    /* Overwrite width. New susy version seems to break this */\n    max-width: 49.5em;\n    border: 4px solid #dddddd;\n    margin-top: 6em;\n    padding: 3em 2em 1.5em;\n  }\n  /* line 38, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/general/_clearfix.scss */\n  .paged .panel:after, .single-page .panel:after {\n    content: "";\n    display: table;\n    clear: both;\n  }\n  /* line 40, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\n  .paged .panel .table div, .single-page .panel .table div, .paged .panel .table span, .single-page .panel .table span, .paged .panel .table applet, .single-page .panel .table applet, .paged .panel .table object, .single-page .panel .table object, .paged .panel .table iframe, .single-page .panel .table iframe,\n  .paged .panel .table h1,\n  .single-page .panel .table h1, .paged .panel .table h2, .single-page .panel .table h2, .paged .panel .table h3, .single-page .panel .table h3, .paged .panel .table h4, .single-page .panel .table h4, .paged .panel .table h5, .single-page .panel .table h5, .paged .panel .table h6, .single-page .panel .table h6, .paged .panel .table p, .single-page .panel .table p, .paged .panel .table blockquote, .single-page .panel .table blockquote, .paged .panel .table pre, .single-page .panel .table pre,\n  .paged .panel .table a,\n  .single-page .panel .table a, .paged .panel .table abbr, .single-page .panel .table abbr, .paged .panel .table acronym, .single-page .panel .table acronym, .paged .panel .table address, .single-page .panel .table address, .paged .panel .table big, .single-page .panel .table big, .paged .panel .table cite, .single-page .panel .table cite, .paged .panel .table code, .single-page .panel .table code,\n  .paged .panel .table del,\n  .single-page .panel .table del, .paged .panel .table dfn, .single-page .panel .table dfn, .paged .panel .table em, .single-page .panel .table em, .paged .panel .table img, .single-page .panel .table img, .paged .panel .table ins, .single-page .panel .table ins, .paged .panel .table kbd, .single-page .panel .table kbd, .paged .panel .table q, .single-page .panel .table q, .paged .panel .table s, .single-page .panel .table s, .paged .panel .table samp, .single-page .panel .table samp,\n  .paged .panel .table small,\n  .single-page .panel .table small, .paged .panel .table strike, .single-page .panel .table strike, .paged .panel .table strong, .single-page .panel .table strong, .paged .panel .table sub, .single-page .panel .table sub, .paged .panel .table sup, .single-page .panel .table sup, .paged .panel .table tt, .single-page .panel .table tt, .paged .panel .table var, .single-page .panel .table var,\n  .paged .panel .table b,\n  .single-page .panel .table b, .paged .panel .table u, .single-page .panel .table u, .paged .panel .table i, .single-page .panel .table i, .paged .panel .table center, .single-page .panel .table center,\n  .paged .panel .table dl,\n  .single-page .panel .table dl, .paged .panel .table dt, .single-page .panel .table dt, .paged .panel .table dd, .single-page .panel .table dd, .paged .panel .table ol, .single-page .panel .table ol, .paged .panel .table ul, .single-page .panel .table ul, .paged .panel .table li, .single-page .panel .table li,\n  .paged .panel .table fieldset,\n  .single-page .panel .table fieldset, .paged .panel .table form, .single-page .panel .table form, .paged .panel .table label, .single-page .panel .table label, .paged .panel .table legend, .single-page .panel .table legend,\n  .paged .panel .table table,\n  .single-page .panel .table table, .paged .panel .table caption, .single-page .panel .table caption, .paged .panel .table tbody, .single-page .panel .table tbody, .paged .panel .table tfoot, .single-page .panel .table tfoot, .paged .panel .table thead, .single-page .panel .table thead, .paged .panel .table tr, .single-page .panel .table tr, .paged .panel .table th, .single-page .panel .table th, .paged .panel .table td, .single-page .panel .table td,\n  .paged .panel .table article,\n  .single-page .panel .table article, .paged .panel .table aside, .single-page .panel .table aside, .paged .panel .table canvas, .single-page .panel .table canvas, .paged .panel .table details, .single-page .panel .table details, .paged .panel .table embed, .single-page .panel .table embed,\n  .paged .panel .table figure,\n  .single-page .panel .table figure, .paged .panel .table figcaption, .single-page .panel .table figcaption, .paged .panel .table footer, .single-page .panel .table footer, .paged .panel .table header, .single-page .panel .table header, .paged .panel .table hgroup, .single-page .panel .table hgroup,\n  .paged .panel .table menu,\n  .single-page .panel .table menu, .paged .panel .table nav, .single-page .panel .table nav, .paged .panel .table output, .single-page .panel .table output, .paged .panel .table ruby, .single-page .panel .table ruby, .paged .panel .table section, .single-page .panel .table section, .paged .panel .table summary, .single-page .panel .table summary,\n  .paged .panel .table time,\n  .single-page .panel .table time, .paged .panel .table mark, .single-page .panel .table mark, .paged .panel .table audio, .single-page .panel .table audio, .paged .panel .table video, .single-page .panel .table video {\n    margin: 0;\n    padding: 0;\n    border: 0;\n    font: inherit;\n    font-size: 100%;\n    vertical-align: baseline;\n  }\n  /* line 55, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\n  .paged .panel .table table, .single-page .panel .table table {\n    border-collapse: collapse;\n    border-spacing: 0;\n  }\n  /* line 57, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\n  .paged .panel .table caption, .single-page .panel .table caption, .paged .panel .table th, .single-page .panel .table th, .paged .panel .table td, .single-page .panel .table td {\n    text-align: left;\n    font-weight: normal;\n    vertical-align: middle;\n  }\n  /* line 59, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\n  .paged .panel .table q, .single-page .panel .table q, .paged .panel .table blockquote, .single-page .panel .table blockquote {\n    quotes: none;\n  }\n  /* line 103, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\n  .paged .panel .table q:before, .single-page .panel .table q:before, .paged .panel .table q:after, .single-page .panel .table q:after, .paged .panel .table blockquote:before, .single-page .panel .table blockquote:before, .paged .panel .table blockquote:after, .single-page .panel .table blockquote:after {\n    content: "";\n    content: none;\n  }\n  /* line 61, /home/marten/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */\n  .paged .panel .table a img, .single-page .panel .table a img {\n    border: none;\n  }\n  /* line 4, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table p, .single-page .panel .table p, .paged .panel .table div, .single-page .panel .table div {\n    display: inline;\n  }\n  /* line 8, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table caption, .single-page .panel .table caption {\n    margin-bottom: 0.5em;\n  }\n  /* line 12, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table .errors, .single-page .panel .table .errors {\n    outline: 2px solid red !important;\n  }\n  /* line 16, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table .error, .single-page .panel .table .error {\n    display: inline-block;\n    background: #ffbbbb;\n    outline: 1px solid #ff3333;\n  }\n  /* line 20, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table .error.hidden, .single-page .panel .table .error.hidden {\n    display: none;\n  }\n  /* line 27, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table table, .single-page .panel .table table {\n    border-bottom: 1px solid black;\n    border-collapse: collapse;\n    margin: 0;\n  }\n  /* line 28, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table table *, .single-page .panel .table table * {\n    width: auto;\n  }\n  /* line 32, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table table .option, .single-page .panel .table table .option {\n    white-space: normal;\n  }\n  /* line 36, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table table td > div > *, .single-page .panel .table table td > div > * {\n    margin-top: 0.5em;\n    margin-bottom: 0.5em;\n  }\n  /* line 44, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table table .row, .single-page .panel .table table .row {\n    width: 100%;\n    float: right;\n    margin-right: 0;\n    float: none;\n    display: table-row;\n  }\n  /* line 45, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table table .row td, .single-page .panel .table table .row td, .paged .panel .table table .row th, .single-page .panel .table table .row th {\n    display: table-cell;\n    border: 0;\n    border-bottom: 1px solid #bbb;\n    vertical-align: top;\n    float: none;\n  }\n  /* line 50, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table table .row td.main, .single-page .panel .table table .row td.main, .paged .panel .table table .row th.main, .single-page .panel .table table .row th.main {\n    vertical-align: middle;\n  }\n  /* line 55, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table table .row.inner_row td, .single-page .panel .table table .row.inner_row td {\n    border: 0;\n  }\n  /* line 56, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table table .row:first-child td, .single-page .panel .table table .row:first-child td {\n    border-top: 1px solid #bbb;\n  }\n  /* line 62, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table table .row input, .single-page .panel .table table .row input {\n    /* These properties get overriden by our table reset, so we have to re-apply them with a more specific selector */\n  }\n  /* line 63, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table table .row input.float, .single-page .panel .table table .row input.float, .paged .panel .table table .row input.integer, .single-page .panel .table table .row input.integer {\n    width: 54px;\n  }\n  /* line 67, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table table .row input.string, .single-page .panel .table table .row input.string, .paged .panel .table table .row input.textarea, .single-page .panel .table table .row input.textarea {\n    width: 92%;\n  }\n  /* line 73, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table table .row input.sized, .single-page .panel .table table .row input.sized {\n    width: auto;\n  }\n  /* line 76, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table table .row input.fd-form-element-hidden, .single-page .panel .table table .row input.fd-form-element-hidden {\n    display: none;\n  }\n  /* line 86, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table table .row .unit, .single-page .panel .table table .row .unit {\n    vertical-align: -20%;\n    padding-left: 4px;\n  }\n  /* line 93, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table .item, .single-page .panel .table .item {\n    float: none;\n    width: auto;\n    margin-right: auto;\n  }\n  /* line 96, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table .main, .single-page .panel .table .main {\n    width: 33.33333%;\n    float: none !important;\n    display: table-cell !important;\n  }\n  /* line 100, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table .main label small, .single-page .panel .table .main label small {\n    font-size: 0.7em;\n  }\n  /* line 102, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table .description, .single-page .panel .table .description {\n    text-align: right;\n  }\n  /* line 107, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table .option_sets .option, .single-page .panel .table .option_sets .option {\n    padding-left: 1em;\n    padding-bottom: 0.5em;\n    vertical-align: bottom;\n  }\n  /* line 113, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table .dark, .single-page .panel .table .dark {\n    background-color: #eee;\n  }\n  /* line 116, /home/marten/rgoc/quby/app/assets/stylesheets/quby/table/layout.scss */\n  .paged .panel .table .light, .single-page .panel .table .light {\n    background-color: #fff;\n  }\n  /* line 25, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item, .single-page .item {\n    width: 100%;\n    float: right;\n    margin-right: 0;\n    margin-bottom: 18px;\n  }\n  /* line 34, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.horizontal.radio .option, .single-page .item.horizontal.radio .option, .paged .item.horizontal.check_box .option, .single-page .item.horizontal.check_box .option {\n    width: 100%;\n    float: right;\n    margin-right: 0;\n  }\n  /* line 37, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.horizontal.radio .option .radiocheckwrapper, .single-page .item.horizontal.radio .option .radiocheckwrapper, .paged .item.horizontal.check_box .option .radiocheckwrapper, .single-page .item.horizontal.check_box .option .radiocheckwrapper {\n    width: 4.0404%;\n    float: left;\n    margin-right: 1.0101%;\n  }\n  /* line 38, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.horizontal.radio .option .labelwrapper, .single-page .item.horizontal.radio .option .labelwrapper, .paged .item.horizontal.check_box .option .labelwrapper, .single-page .item.horizontal.check_box .option .labelwrapper {\n    width: 94.94949%;\n    float: right;\n    margin-right: 0;\n  }\n  /* line 43, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.horizontal.radio .option.show_values .value, .single-page .item.horizontal.radio .option.show_values .value, .paged .item.horizontal.check_box .option.show_values .value, .single-page .item.horizontal.check_box .option.show_values .value {\n    width: 4.0404%;\n    float: left;\n    margin-right: 1.0101%;\n  }\n  /* line 44, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.horizontal.radio .option.show_values .labelwrapper, .single-page .item.horizontal.radio .option.show_values .labelwrapper, .paged .item.horizontal.check_box .option.show_values .labelwrapper, .single-page .item.horizontal.check_box .option.show_values .labelwrapper {\n    width: 89.89899%;\n    float: right;\n    margin-right: 0;\n  }\n  /* line 49, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.horizontal.radio .option .subquestions, .single-page .item.horizontal.radio .option .subquestions, .paged .item.horizontal.check_box .option .subquestions, .single-page .item.horizontal.check_box .option .subquestions {\n    margin-left: 5.05051%;\n    width: 74.74747%;\n    float: left;\n    margin-right: 1.0101%;\n  }\n  /* line 53, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.horizontal.radio .option .subquestions .item, .single-page .item.horizontal.radio .option .subquestions .item, .paged .item.horizontal.check_box .option .subquestions .item, .single-page .item.horizontal.check_box .option .subquestions .item {\n    width: 74.74747%;\n    float: left;\n    margin-right: 1.0101%;\n  }\n  /* line 55, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.horizontal.radio .option .subquestions .item input, .single-page .item.horizontal.radio .option .subquestions .item input, .paged .item.horizontal.check_box .option .subquestions .item input, .single-page .item.horizontal.check_box .option .subquestions .item input {\n    width: auto;\n  }\n  /* line 58, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.horizontal.radio .option .subquestions .radiocheckwrapper, .single-page .item.horizontal.radio .option .subquestions .radiocheckwrapper, .paged .item.horizontal.check_box .option .subquestions .radiocheckwrapper, .single-page .item.horizontal.check_box .option .subquestions .radiocheckwrapper {\n    width: 10px;\n    padding-right: 20px;\n  }\n  /* line 62, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.horizontal.radio .option .subquestions .labelwrapper, .single-page .item.horizontal.radio .option .subquestions .labelwrapper, .paged .item.horizontal.check_box .option .subquestions .labelwrapper, .single-page .item.horizontal.check_box .option .subquestions .labelwrapper {\n    width: auto;\n    float: none;\n  }\n  /* line 69, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.horizontal.radio .inner-title, .single-page .item.horizontal.radio .inner-title, .paged .item.horizontal.check_box .inner-title, .single-page .item.horizontal.check_box .inner-title {\n    width: 100%;\n    float: right;\n    margin-right: 0;\n  }\n  /* line 74, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.horizontal.string input, .single-page .item.horizontal.string input, .paged .item.horizontal.string textarea, .single-page .item.horizontal.string textarea, .paged .item.horizontal.textarea input, .single-page .item.horizontal.textarea input, .paged .item.horizontal.textarea textarea, .single-page .item.horizontal.textarea textarea {\n    width: 100%;\n    margin-right: 0;\n  }\n  /* line 75, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.horizontal.string .sized, .single-page .item.horizontal.string .sized, .paged .item.horizontal.textarea .sized, .single-page .item.horizontal.textarea .sized {\n    width: auto;\n  }\n  /* line 106, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.vertical .main, .single-page .item.vertical .main {\n    width: 39.39394%;\n    float: left;\n    margin-right: 1.0101%;\n  }\n  /* line 110, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.vertical .description-and-fields, .single-page .item.vertical .description-and-fields {\n    width: 59.59596%;\n    float: right;\n    margin-right: 0;\n    float: left;\n  }\n  /* line 4, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n  .paged .item.vertical .description-and-fields .description h2, .single-page .item.vertical .description-and-fields .description h2 {\n    font-size: 1.2em;\n    font-weight: bold;\n    border-top: 8px solid #ddd;\n    padding-top: 16px;\n  }\n  /* line 11, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n  .paged .item.vertical .description-and-fields .description small, .single-page .item.vertical .description-and-fields .description small {\n    font-size: 80%;\n  }\n  /* line 12, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n  .paged .item.vertical .description-and-fields .description strong, .single-page .item.vertical .description-and-fields .description strong {\n    font-style: italic;\n  }\n  /* line 13, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n  .paged .item.vertical .description-and-fields .description em, .single-page .item.vertical .description-and-fields .description em {\n    font-weight: bold;\n  }\n  /* line 15, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n  .paged .item.vertical .description-and-fields .description p, .single-page .item.vertical .description-and-fields .description p {\n    margin-bottom: 18px;\n  }\n  /* line 17, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n  .paged .item.vertical .description-and-fields .description ul, .single-page .item.vertical .description-and-fields .description ul {\n    margin-top: 1em;\n    margin-left: 1em;\n    margin-bottom: 2em;\n  }\n  /* line 21, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n  .paged .item.vertical .description-and-fields .description ul li, .single-page .item.vertical .description-and-fields .description ul li {\n    list-style-type: disc;\n    margin-bottom: 1em !important;\n  }\n  /* line 25, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n  .paged .item.vertical .description-and-fields .description ul li p, .single-page .item.vertical .description-and-fields .description ul li p {\n    margin-bottom: 0;\n  }\n  /* line 27, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n  .paged .item.vertical .description-and-fields .description ul li ul, .single-page .item.vertical .description-and-fields .description ul li ul {\n    margin-bottom: 1em;\n    margin-left: 1.5em;\n  }\n  /* line 30, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n  .paged .item.vertical .description-and-fields .description ul li ul li, .single-page .item.vertical .description-and-fields .description ul li ul li {\n    margin-bottom: 0 !important;\n    list-style-type: none;\n  }\n  /* line 38, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n  .paged .item.vertical .description-and-fields .description ol li, .single-page .item.vertical .description-and-fields .description ol li {\n    list-style-type: lower-alpha;\n  }\n  /* line 118, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.vertical.radio .option, .single-page .item.vertical.radio .option, .paged .item.vertical.check_box .option, .single-page .item.vertical.check_box .option {\n    width: 100%;\n    float: right;\n    margin-right: 0;\n  }\n  /* line 121, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.vertical.radio .option .radiocheckwrapper, .single-page .item.vertical.radio .option .radiocheckwrapper, .paged .item.vertical.check_box .option .radiocheckwrapper, .single-page .item.vertical.check_box .option .radiocheckwrapper {\n    width: 6.77966%;\n    float: left;\n    margin-right: 1.69492%;\n  }\n  /* line 122, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.vertical.radio .option .labelwrapper, .single-page .item.vertical.radio .option .labelwrapper, .paged .item.vertical.check_box .option .labelwrapper, .single-page .item.vertical.check_box .option .labelwrapper {\n    width: 91.52542%;\n    float: right;\n    margin-right: 0;\n  }\n  /* line 125, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.vertical.radio .option.show_values .value, .single-page .item.vertical.radio .option.show_values .value, .paged .item.vertical.check_box .option.show_values .value, .single-page .item.vertical.check_box .option.show_values .value {\n    width: 6.77966%;\n    float: left;\n    margin-right: 1.69492%;\n  }\n  /* line 126, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.vertical.radio .option.show_values .labelwrapper, .single-page .item.vertical.radio .option.show_values .labelwrapper, .paged .item.vertical.check_box .option.show_values .labelwrapper, .single-page .item.vertical.check_box .option.show_values .labelwrapper {\n    width: 83.05085%;\n    float: right;\n    margin-right: 0;\n  }\n  /* line 129, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.vertical.radio .option .subquestions, .single-page .item.vertical.radio .option .subquestions, .paged .item.vertical.check_box .option .subquestions, .single-page .item.vertical.check_box .option .subquestions {\n    margin-left: 5.05051%;\n    width: 91.52542%;\n    float: left;\n    margin-right: 1.69492%;\n  }\n  /* line 133, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.vertical.radio .option .subquestions .item, .single-page .item.vertical.radio .option .subquestions .item, .paged .item.vertical.check_box .option .subquestions .item, .single-page .item.vertical.check_box .option .subquestions .item {\n    width: 91.52542%;\n    float: left;\n    margin-right: 1.69492%;\n  }\n  /* line 135, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.vertical.radio .option .subquestions .item .main, .single-page .item.vertical.radio .option .subquestions .item .main, .paged .item.vertical.check_box .option .subquestions .item .main, .single-page .item.vertical.check_box .option .subquestions .item .main {\n    width: 100%;\n    float: right;\n    margin-right: 0;\n  }\n  /* line 136, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.vertical.radio .option .subquestions .item input, .single-page .item.vertical.radio .option .subquestions .item input, .paged .item.vertical.check_box .option .subquestions .item input, .single-page .item.vertical.check_box .option .subquestions .item input {\n    width: auto;\n  }\n  /* line 139, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.vertical.radio .option .subquestions .radiocheckwrapper, .single-page .item.vertical.radio .option .subquestions .radiocheckwrapper, .paged .item.vertical.check_box .option .subquestions .radiocheckwrapper, .single-page .item.vertical.check_box .option .subquestions .radiocheckwrapper {\n    width: 10px;\n    padding-right: 20px;\n  }\n  /* line 143, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.vertical.radio .option .subquestions .labelwrapper, .single-page .item.vertical.radio .option .subquestions .labelwrapper, .paged .item.vertical.check_box .option .subquestions .labelwrapper, .single-page .item.vertical.check_box .option .subquestions .labelwrapper {\n    width: auto;\n    float: none;\n  }\n  /* line 150, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.vertical.radio .inner-title, .single-page .item.vertical.radio .inner-title, .paged .item.vertical.check_box .inner-title, .single-page .item.vertical.check_box .inner-title {\n    width: 100%;\n    float: right;\n    margin-right: 0;\n  }\n  /* line 155, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.vertical.string input, .single-page .item.vertical.string input, .paged .item.vertical.string textarea, .single-page .item.vertical.string textarea, .paged .item.vertical.textarea input, .single-page .item.vertical.textarea input, .paged .item.vertical.textarea textarea, .single-page .item.vertical.textarea textarea {\n    width: 100%;\n    margin-right: 0;\n  }\n  /* line 156, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .item.vertical.string .sized, .single-page .item.vertical.string .sized, .paged .item.vertical.textarea .sized, .single-page .item.vertical.textarea .sized {\n    width: auto;\n  }\n  /* line 175, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .progress-bar, .single-page .progress-bar {\n    width: 100%;\n    float: right;\n    margin-right: 0;\n    margin: 1.5em -2em -1.5em;\n    padding: 1.5em 2em;\n  }\n  /* line 181, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .progress-bar .progress-wrapper .progress-slider, .single-page .progress-bar .progress-wrapper .progress-slider {\n    background-position: 0 4px;\n    display: inline-block;\n    zoom: 1;\n  }\n  /* line 184, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .progress-bar .progress-wrapper .progress-slider .progress-stop, .single-page .progress-bar .progress-wrapper .progress-slider .progress-stop {\n    margin: 0 3px;\n    width: 10px;\n    height: 10px;\n  }\n  /* line 189, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .progress-bar .progress-wrapper .progress-slider.long-list, .single-page .progress-bar .progress-wrapper .progress-slider.long-list {\n    display: inline-block;\n    zoom: 1;\n  }\n  /* line 196, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .buttons, .single-page .buttons {\n    width: 100%;\n    float: right;\n    margin-right: 0;\n    margin: 1.5em -2em -1.5em;\n    padding: 1.5em 2em;\n    border-bottom: 0;\n  }\n  /* line 202, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .buttons .back, .single-page .buttons .back {\n    width: 24.24242%;\n    float: left;\n    margin-right: 1.0101%;\n  }\n  /* line 203, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .buttons .prev, .single-page .buttons .prev {\n    width: 24.24242%;\n    float: left;\n    margin-right: 1.0101%;\n  }\n  /* line 204, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .buttons .abort, .single-page .buttons .abort {\n    width: 24.24242%;\n    float: left;\n    margin-right: 1.0101%;\n    text-align: center;\n    display: block;\n  }\n  /* line 205, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .buttons .print, .single-page .buttons .print {\n    width: 100%;\n    float: left;\n    margin-right: 1.0101%;\n    text-align: right;\n  }\n  /* line 206, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .buttons .next, .single-page .buttons .next {\n    width: 24.24242%;\n    float: right;\n    margin-right: 0;\n    text-align: right;\n  }\n  /* line 207, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged/desktop.scss */\n  .paged .buttons .save, .single-page .buttons .save {\n    width: 24.24242%;\n    float: right;\n    margin-right: 0;\n    text-align: right;\n  }\n}\n/* line 41, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel, .single-page .panel {\n  margin-bottom: 2em;\n  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);\n}\n/* line 45, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel h1, .single-page .panel h1 {\n  font-size: 1.5em;\n  font-weight: bold;\n  margin-bottom: 1.2em;\n  z-index: 400;\n}\n/* line 52, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel hr, .single-page .panel hr {\n  height: 8px;\n  border: 0;\n  background: #ddd;\n}\n/* line 54, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .progress-bar, .single-page .panel .progress-bar {\n  height: 25px;\n}\n/* line 56, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .progress-bar .progress-wrapper, .single-page .panel .progress-bar .progress-wrapper {\n  text-align: center;\n}\n/* line 58, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .progress-bar .progress-wrapper .progress-slider, .single-page .panel .progress-bar .progress-wrapper .progress-slider {\n  height: 8px;\n  text-align: center;\n  border: 1px solid #ccc;\n  padding: 0;\n  border-radius: 6px;\n  overflow: hidden;\n  padding: 1px;\n}\n/* line 66, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .progress-bar .progress-wrapper .progress-slider .progress-stop, .single-page .panel .progress-bar .progress-wrapper .progress-slider .progress-stop {\n  height: 8px;\n  line-height: 8px;\n  width: 6px;\n  background: #fff;\n  font-size: 6px;\n  text-indent: -1234em;\n  display: block;\n  float: left;\n  text-align: center;\n  margin: 0;\n}\n/* line 77, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .progress-bar .progress-wrapper .progress-slider .progress-stop.first-child, .single-page .panel .progress-bar .progress-wrapper .progress-slider .progress-stop.first-child {\n  width: 8px;\n  border-radius: 5px 0 0 5px;\n}\n/* line 78, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .progress-bar .progress-wrapper .progress-slider .progress-stop.last-child, .single-page .panel .progress-bar .progress-wrapper .progress-slider .progress-stop.last-child {\n  width: 8px;\n  border-radius: 0 5px 5px 0;\n}\n/* line 79, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .progress-bar .progress-wrapper .progress-slider .progress-stop.active, .single-page .panel .progress-bar .progress-wrapper .progress-slider .progress-stop.active {\n  background: #999;\n}\n/* line 80, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .progress-bar .progress-wrapper .progress-slider .progress-stop.current, .single-page .panel .progress-bar .progress-wrapper .progress-slider .progress-stop.current {\n  border-radius: 0 5px 5px 0;\n}\n/* line 82, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .progress-bar .progress-wrapper .progress-slider .progress-stop.current.first-child, .single-page .panel .progress-bar .progress-wrapper .progress-slider .progress-stop.current.first-child {\n  border-radius: 5px;\n}\n/* line 88, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .progress-bar .progress-wrapper .progress-details, .single-page .panel .progress-bar .progress-wrapper .progress-details {\n  color: #999;\n  font-size: 9px;\n  margin: 4px 0 0 0;\n  display: block;\n}\n/* line 97, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .buttons, .single-page .panel .buttons {\n  border-top: 1px dotted #d6d6d6;\n  background: #f3f3f3;\n}\n/* line 103, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.hidden, .single-page .panel .item.hidden {\n  display: none;\n}\n/* line 105, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.errors, .single-page .panel .item.errors {\n  outline: 1px solid red;\n  padding: 0.4em;\n}\n/* line 108, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.errors .error, .single-page .panel .item.errors .error {\n  background: #ffaaaa;\n  color: #550000;\n  outline: 1px solid red;\n  padding: 0.3em;\n  margin-bottom: 0.3em;\n}\n/* line 117, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item .main, .single-page .panel .item .main {\n  font-weight: bold;\n}\n/* line 119, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item .main em, .single-page .panel .item .main em {\n  font-style: italic;\n}\n/* line 4, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .text h2, .single-page .panel .item .text h2 {\n  font-size: 1.2em;\n  font-weight: bold;\n  border-top: 8px solid #ddd;\n  padding-top: 16px;\n}\n/* line 11, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .text small, .single-page .panel .item .text small {\n  font-size: 80%;\n}\n/* line 12, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .text strong, .single-page .panel .item .text strong {\n  font-style: italic;\n}\n/* line 13, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .text em, .single-page .panel .item .text em {\n  font-weight: bold;\n}\n/* line 15, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .text p, .single-page .panel .item .text p {\n  margin-bottom: 18px;\n}\n/* line 17, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .text ul, .single-page .panel .item .text ul {\n  margin-top: 1em;\n  margin-left: 1em;\n  margin-bottom: 2em;\n}\n/* line 21, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .text ul li, .single-page .panel .item .text ul li {\n  list-style-type: disc;\n  margin-bottom: 1em !important;\n}\n/* line 25, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .text ul li p, .single-page .panel .item .text ul li p {\n  margin-bottom: 0;\n}\n/* line 27, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .text ul li ul, .single-page .panel .item .text ul li ul {\n  margin-bottom: 1em;\n  margin-left: 1.5em;\n}\n/* line 30, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .text ul li ul li, .single-page .panel .item .text ul li ul li {\n  margin-bottom: 0 !important;\n  list-style-type: none;\n}\n/* line 38, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .text ol li, .single-page .panel .item .text ol li {\n  list-style-type: lower-alpha;\n}\n/* line 4, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .description-and-fields .description h2, .single-page .panel .item .description-and-fields .description h2 {\n  font-size: 1.2em;\n  font-weight: bold;\n  border-top: 8px solid #ddd;\n  padding-top: 16px;\n}\n/* line 11, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .description-and-fields .description small, .single-page .panel .item .description-and-fields .description small {\n  font-size: 80%;\n}\n/* line 12, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .description-and-fields .description strong, .single-page .panel .item .description-and-fields .description strong {\n  font-style: italic;\n}\n/* line 13, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .description-and-fields .description em, .single-page .panel .item .description-and-fields .description em {\n  font-weight: bold;\n}\n/* line 15, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .description-and-fields .description p, .single-page .panel .item .description-and-fields .description p {\n  margin-bottom: 18px;\n}\n/* line 17, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .description-and-fields .description ul, .single-page .panel .item .description-and-fields .description ul {\n  margin-top: 1em;\n  margin-left: 1em;\n  margin-bottom: 2em;\n}\n/* line 21, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .description-and-fields .description ul li, .single-page .panel .item .description-and-fields .description ul li {\n  list-style-type: disc;\n  margin-bottom: 1em !important;\n}\n/* line 25, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .description-and-fields .description ul li p, .single-page .panel .item .description-and-fields .description ul li p {\n  margin-bottom: 0;\n}\n/* line 27, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .description-and-fields .description ul li ul, .single-page .panel .item .description-and-fields .description ul li ul {\n  margin-bottom: 1em;\n  margin-left: 1.5em;\n}\n/* line 30, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .description-and-fields .description ul li ul li, .single-page .panel .item .description-and-fields .description ul li ul li {\n  margin-bottom: 0 !important;\n  list-style-type: none;\n}\n/* line 38, /home/marten/rgoc/quby/app/assets/stylesheets/quby/partials/_text.scss */\n.paged .panel .item .description-and-fields .description ol li, .single-page .panel .item .description-and-fields .description ol li {\n  list-style-type: lower-alpha;\n}\n/* line 133, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.horizontal .main, .single-page .panel .item.horizontal .main {\n  margin-bottom: 1em;\n}\n/* line 139, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.radio .inner-title, .single-page .panel .item.radio .inner-title, .paged .panel .item.check_box .inner-title, .single-page .panel .item.check_box .inner-title {\n  margin-top: 1.5em;\n  margin-bottom: 1.5em;\n  font-weight: bold;\n}\n/* line 147, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.radio .option .labelwrapper p, .single-page .panel .item.radio .option .labelwrapper p, .paged .panel .item.check_box .option .labelwrapper p, .single-page .panel .item.check_box .option .labelwrapper p {\n  display: inline;\n}\n/* line 151, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.radio .option.show_values .value, .single-page .panel .item.radio .option.show_values .value, .paged .panel .item.check_box .option.show_values .value, .single-page .panel .item.check_box .option.show_values .value {\n  text-align: center;\n}\n/* line 158, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.scale td, .single-page .panel .item.scale td {\n  border: 0;\n  text-align: center;\n}\n/* line 164, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.scale .option.optionwidth1, .single-page .panel .item.scale .option.optionwidth1, .paged .panel .item.scale .description.optionwidth1, .single-page .panel .item.scale .description.optionwidth1 {\n  width: 20%;\n}\n/* line 165, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.scale .option.optionwidth2, .single-page .panel .item.scale .option.optionwidth2, .paged .panel .item.scale .description.optionwidth2, .single-page .panel .item.scale .description.optionwidth2 {\n  width: 20%;\n}\n/* line 166, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.scale .option.optionwidth3, .single-page .panel .item.scale .option.optionwidth3, .paged .panel .item.scale .description.optionwidth3, .single-page .panel .item.scale .description.optionwidth3 {\n  width: 20%;\n}\n/* line 167, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.scale .option.optionwidth4, .single-page .panel .item.scale .option.optionwidth4, .paged .panel .item.scale .description.optionwidth4, .single-page .panel .item.scale .description.optionwidth4 {\n  width: 20%;\n}\n/* line 168, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.scale .option.optionwidth5, .single-page .panel .item.scale .option.optionwidth5, .paged .panel .item.scale .description.optionwidth5, .single-page .panel .item.scale .description.optionwidth5 {\n  width: 20%;\n}\n/* line 169, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.scale .option.optionwidth6, .single-page .panel .item.scale .option.optionwidth6, .paged .panel .item.scale .description.optionwidth6, .single-page .panel .item.scale .description.optionwidth6 {\n  width: 16.66667%;\n}\n/* line 170, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.scale .option.optionwidth7, .single-page .panel .item.scale .option.optionwidth7, .paged .panel .item.scale .description.optionwidth7, .single-page .panel .item.scale .description.optionwidth7 {\n  width: 14.28571%;\n}\n/* line 171, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.scale .option.optionwidth8, .single-page .panel .item.scale .option.optionwidth8, .paged .panel .item.scale .description.optionwidth8, .single-page .panel .item.scale .description.optionwidth8 {\n  width: 12.5%;\n}\n/* line 172, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.scale .option.optionwidth9, .single-page .panel .item.scale .option.optionwidth9, .paged .panel .item.scale .description.optionwidth9, .single-page .panel .item.scale .description.optionwidth9 {\n  width: 11.11111%;\n}\n/* line 173, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.scale .option.optionwidth10, .single-page .panel .item.scale .option.optionwidth10, .paged .panel .item.scale .description.optionwidth10, .single-page .panel .item.scale .description.optionwidth10 {\n  width: 10%;\n}\n/* line 174, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.scale .option.optionwidth11, .single-page .panel .item.scale .option.optionwidth11, .paged .panel .item.scale .description.optionwidth11, .single-page .panel .item.scale .description.optionwidth11 {\n  width: 9.09091%;\n}\n/* line 175, /home/marten/rgoc/quby/app/assets/stylesheets/quby/paged.scss */\n.paged .panel .item.scale .option.optionwidth12, .single-page .panel .item.scale .option.optionwidth12, .paged .panel .item.scale .description.optionwidth12, .single-page .panel .item.scale .description.optionwidth12 {\n  width: 8.33333%;\n}\n\n/* line 4, /home/marten/rgoc/quby/app/assets/stylesheets/quby/single_page/layout.scss */\n.single-page .hidden {\n  display: none;\n}\n/* line 6, /home/marten/rgoc/quby/app/assets/stylesheets/quby/single_page/layout.scss */\n.single-page .panel.noVisibleQuestions {\n  display: none;\n}\n/* line 10, /home/marten/rgoc/quby/app/assets/stylesheets/quby/single_page/layout.scss */\n.single-page .item.hide {\n  margin: 0 !important;\n  outline: none !important;\n}\n/* line 15, /home/marten/rgoc/quby/app/assets/stylesheets/quby/single_page/layout.scss */\n.single-page .item.hide > * {\n  display: none !important;\n}\n';
 const RTL_LANGUAGES = ["ar", "he", "fa", "ur"];
 const Quby = (props) => {
@@ -18185,14 +18208,12 @@ export {
   AnswerGroupMinimumValidator,
   AnswerPage,
   BaseValidator,
-  CurliesInterpolator,
   DatePartsAnswerSchema,
   DatePartsComponentSchema,
   FlagsSchema,
   ICalcBooleanOpsSchema,
   ICalcBooleanReducerOpsSchema,
   ICalcComparerOpsSchema,
-  InterpolateCurliesContext,
   MaximumCheckedAllowedValidator,
   MaximumDateValidator,
   MaximumValidator,
@@ -18204,6 +18225,7 @@ export {
   Quby,
   QubyContext,
   Questionnaire,
+  QuestionnaireTranslationsCurlies,
   RegexpValidator,
   RequiresAnswerValidator,
   Response,