._loadingState_18tzg_1 {
  padding: 3rem 0;
  text-align: center;
}

._spinner_18tzg_6 {
  display: inline-block;
  width: var(--rep-spinner-size);
  height: var(--rep-spinner-size);
  flex-shrink: 0;

  color: var(--rep-color-loading-indicator);

  vertical-align: -0.125em;
  border: var(--rep-spinner-border) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--rep-radius-circle);
  animation: _sharedSpin_18tzg_1 0.75s linear infinite;
}

/* Size modifiers rebind the aliases and nothing else. */

._spinnerLg_18tzg_23 {
  --rep-spinner-size: var(--rep-spinner-size-lg);
}

._spinnerSm_18tzg_27 {
  --rep-spinner-size: var(--rep-spinner-size-sm);
  --rep-spinner-border: var(--rep-spinner-border-sm);
}

/* Takes its colour from the text it sits in rather than the loading blue. */
._spinnerCurrentColor_18tzg_33 {
  color: inherit;
}

@keyframes _sharedSpin_18tzg_1 {
  to {
    transform: rotate(360deg);
  }
}

._srOnly_18tzg_43 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

._loadingText_18tzg_55 {
  margin-top: 1rem;

  color: var(--rep-color-text-muted);
}

._iconSpacing_18tzg_61 {
  margin-right: 0.5rem;
}

._alert_18tzg_65 {
  position: relative;
  padding: 0.75rem 2.75rem 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;

  border-radius: var(--rep-radius-small);
}

._alertSuccess_18tzg_74 {
  color: var(--rep-color-success-text);

  background-color: var(--rep-color-success-surface);

  border-color: var(--rep-color-success-border);
}

._alertError_18tzg_82 {
  color: var(--rep-color-error-text);

  background-color: var(--rep-color-error-surface);

  border-color: var(--rep-color-error-border);
}

._alertInfo_18tzg_90 {
  color: var(--rep-color-info-text);

  background-color: var(--rep-color-info-surface);

  border-color: var(--rep-color-info-border);
}

._alertWarning_18tzg_98 {
  color: var(--rep-color-warning-text);

  background-color: var(--rep-color-warning-surface);

  border-color: var(--rep-color-warning-border);
}

._alertCloseButton_18tzg_106 {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.6rem 0.9rem;
  color: inherit;
  font-size: 1.0rem;
  line-height: 1;
  background: transparent;
  border: 0;
  opacity: 0.5;
  cursor: pointer;
}

._alertCloseButton_18tzg_106:hover {
  opacity: 0.8;
}

._tableResponsive_18tzg_124 {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

._tableCell_18tzg_130 {
  vertical-align: middle;
}

._capitalize_18tzg_134 {
  text-transform: capitalize;
}

._uppercase_18tzg_138 {
  text-transform: uppercase;
}

._smallCell_18tzg_142 {
  font-size: 0.875rem;
}

._centerCell_18tzg_146 {
  text-align: center;
}

._mutedText_18tzg_150 {
  color: var(--rep-color-text-muted);
}

/* A chip for a category or a part label. */
._badge_18tzg_155 {
  display: inline-block;
  padding: 0.25em 0.4em;
  color: var(--rep-color-on-action);
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: var(--rep-color-text-muted);
  border-radius: var(--rep-radius-small);
}

/* Generic Regular-sized Form/Action Button styles */
._actionButton_18tzg_170 {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rep-btn-gap);
  min-height: var(--rep-btn-height);
  min-width: var(--rep-btn-min-width);
  padding: var(--rep-btn-padding-y) var(--rep-btn-padding-x);
  border: none;
  border-radius: var(--rep-btn-radius);
  font-family: inherit;
  font-size: var(--rep-btn-font-size);
  font-weight: var(--rep-btn-font-weight);
  line-height: var(--rep-btn-line-height);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--rep-btn-shadow);
  transition: var(--rep-btn-transition);
}

._actionButton_18tzg_170:focus-visible {
  outline: 2px solid var(--rep-color-focus);
  outline-offset: 2px;
}

._actionButton_18tzg_170:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--rep-btn-shadow-hover);
}

._actionButton_18tzg_170:active:not(:disabled) {
  transform: translateY(0);
}

._actionButton_18tzg_170:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Intent modifiers set background-colour and colour. Nothing else. */

._btnRed_18tzg_213 {
  background-color: var(--rep-intent-red-bg);
  color: var(--rep-intent-red-fg);
}

._btnRed_18tzg_213:hover:not(:disabled) {
  background-color: var(--rep-intent-red-bg-hover);
}

._btnGreen_18tzg_222 {
  background-color: var(--rep-intent-green-bg);
  color: var(--rep-intent-green-fg);
}

._btnGreen_18tzg_222:hover:not(:disabled) {
  background-color: var(--rep-intent-green-bg-hover);
}

._btnBlue_18tzg_231 {
  background-color: var(--rep-intent-blue-bg);
  color: var(--rep-intent-blue-fg);
}

._btnBlue_18tzg_231:hover:not(:disabled) {
  background-color: var(--rep-intent-blue-bg-hover);
}

._btnCyan_18tzg_240 {
  background-color: var(--rep-intent-cyan-bg);
  color: var(--rep-intent-cyan-fg);
}

._btnCyan_18tzg_240:hover:not(:disabled) {
  background-color: var(--rep-intent-cyan-bg-hover);
}

._btnAmber_18tzg_249 {
  background-color: var(--rep-intent-amber-bg);
  color: var(--rep-intent-amber-fg);
}

._btnAmber_18tzg_249:hover:not(:disabled) {
  background-color: var(--rep-intent-amber-bg-hover);
}

._btnTeal_18tzg_258 {
  background-color: var(--rep-intent-teal-bg);
  color: var(--rep-intent-teal-fg);
}

._btnTeal_18tzg_258:hover:not(:disabled) {
  background-color: var(--rep-intent-teal-bg-hover);
}

._btnSlate_18tzg_267 {
  background-color: var(--rep-intent-slate-bg);
  color: var(--rep-intent-slate-fg);
}

._btnSlate_18tzg_267:hover:not(:disabled) {
  background-color: var(--rep-intent-slate-bg-hover);
}

/* For one side of a choice not yet taken: it wears the app's neutral surface,
   so whichever side has been chosen is the only colour in the row. */
._btnQuiet_18tzg_278 {
  background-color: var(--rep-color-surface-secondary);
  color: var(--rep-color-text-secondary);
}

._btnQuiet_18tzg_278:hover:not(:disabled) {
  background-color: var(--rep-color-surface-secondary-hover);
}

._btnOverlay_18tzg_287 {
  background-color: var(--rep-intent-overlay-bg);
  color: var(--rep-intent-overlay-fg);
}

._btnOverlay_18tzg_287:hover:not(:disabled) {
  background-color: var(--rep-intent-overlay-bg-hover);
}

/* For a control that floats over content instead of sitting on a surface: it
   wears the page scrim, so it stays legible whatever it covers. */
._btnScrim_18tzg_298 {
  background-color: var(--rep-color-overlay);
  color: var(--rep-color-on-overlay);
}

/* For a control on a scrim already dark enough that darkening it further would
   hide the control: a wash of the foreground colour instead. */
._btnGlass_18tzg_305 {
  background-color: var(--rep-color-glass);
  color: var(--rep-color-on-overlay);
}

._btnGlass_18tzg_305:hover:not(:disabled) {
  background-color: var(--rep-color-glass-hover);
}

/* A thumb never hovers, and this is the chrome of a lightbox. */
._btnGlass_18tzg_305:active:not(:disabled) {
  background-color: var(--rep-color-glass-active);
}

/* The colour each flag category wears wherever a flagged question shows it.
   Same intent palette as the buttons, so a flag and a button never drift apart. */

._flagNeedsChanges_18tzg_322 {
  background-color: var(--rep-intent-amber-bg);
  color: var(--rep-intent-amber-fg);
}

._flagInappropriate_18tzg_327 {
  background-color: var(--rep-intent-red-bg);
  color: var(--rep-intent-red-fg);
}

._flagStudyMe_18tzg_332 {
  background-color: var(--rep-intent-blue-bg);
  color: var(--rep-intent-blue-fg);
}

/* Size modifiers rebind the semantic aliases and nothing else. */

._buttonXs_18tzg_339 {
  --rep-btn-height: var(--rep-btn-height-xs);
  --rep-btn-padding-x: var(--rep-btn-padding-x-xs);
  --rep-btn-font-size: var(--rep-btn-font-size-xs);
  --rep-btn-min-width: var(--rep-btn-min-width-xs);
  --rep-btn-icon-size: var(--rep-btn-icon-size-xs);
}

._buttonSm_18tzg_347 {
  --rep-btn-height: var(--rep-btn-height-sm);
  --rep-btn-padding-x: var(--rep-btn-padding-x-sm);
  --rep-btn-font-size: var(--rep-btn-font-size-sm);
  --rep-btn-min-width: var(--rep-btn-min-width-sm);
}

._buttonTouchXs_18tzg_354 {
  --rep-btn-height: var(--rep-btn-height-touch-xs);
  --rep-btn-padding-x: var(--rep-btn-padding-x-touch-xs);
  --rep-btn-font-size: var(--rep-btn-font-size-touch-xs);
  --rep-btn-min-width: var(--rep-btn-min-width-touch);
  --rep-btn-icon-size: var(--rep-btn-icon-size-touch-xs);
}

._buttonTouchSm_18tzg_362 {
  --rep-btn-height: var(--rep-btn-height-touch-sm);
  --rep-btn-padding-x: var(--rep-btn-padding-x-touch-sm);
  --rep-btn-font-size: var(--rep-btn-font-size-touch-sm);
  --rep-btn-min-width: var(--rep-btn-min-width-touch);
  --rep-btn-radius: var(--rep-btn-radius-touch-sm);
  --rep-btn-icon-size: var(--rep-btn-icon-size-touch-sm);
}

._buttonTouchMd_18tzg_371 {
  --rep-btn-height: var(--rep-btn-height-touch-md);
  --rep-btn-padding-x: var(--rep-btn-padding-x-touch-md);
  --rep-btn-font-size: var(--rep-btn-font-size-touch-md);
  --rep-btn-min-width: var(--rep-btn-min-width-touch);
  --rep-btn-radius: var(--rep-btn-radius-touch-md);
  --rep-btn-icon-size: var(--rep-btn-icon-size-touch-md);
}

._buttonTouchLg_18tzg_380 {
  --rep-btn-height: var(--rep-btn-height-touch-lg);
  --rep-btn-padding-x: var(--rep-btn-padding-x-touch-lg);
  --rep-btn-font-size: var(--rep-btn-font-size-touch-lg);
  --rep-btn-min-width: var(--rep-btn-min-width-touch);
  --rep-btn-radius: var(--rep-btn-radius-touch-lg);
  --rep-btn-icon-size: var(--rep-btn-icon-size-touch-lg);
}

/* Corners are handed to a clipping parent, e.g. the two halves of a split
   button. Geometry comes from the alias, so this stays a modifier. */
._buttonFlush_18tzg_391 {
  --rep-btn-radius: 0;
}

/* An icon-only control: no label to pad, so the tier's height is also its
   diameter. Pair it with a size modifier, never with a geometry of its own. */
._buttonRound_18tzg_397 {
  --rep-btn-padding-x: 0;
  --rep-btn-padding-y: 0;
  --rep-btn-min-width: var(--rep-btn-height);
  --rep-btn-radius: var(--rep-btn-radius-round);
}

/* For a control labelled with a phrase rather than a word: it wraps onto a
   second line instead of overflowing a narrow row. */
._buttonWrap_18tzg_406 {
  --rep-btn-line-height: var(--rep-btn-line-height-wrap);

  white-space: normal;
  text-align: center;
}

/* An icon inside a control. Sized by whichever tier the control is wearing. */
._buttonIcon_18tzg_414 {
  width: var(--rep-btn-icon-size);
  height: var(--rep-btn-icon-size);
  flex-shrink: 0;
}

/* An icon that turns while the control's work is in flight. */
._spinIcon_18tzg_421 {
  animation: _sharedSpin_18tzg_1 0.75s linear infinite;
}

/* A bar's title that opens and closes what it heads: a chevron and a bold label
   on whatever colour the bar wears. Its state is read off `aria-expanded`. */
._disclosureToggle_18tzg_427 {
  display: flex;
  align-items: center;
  gap: var(--rep-btn-gap);
  flex: 0 0 auto;
  margin-left: calc(-1 * var(--rep-disclosure-padding-x));
  padding: var(--rep-disclosure-padding-y) var(--rep-disclosure-padding-x);
  color: inherit;
  font-family: inherit;
  font-size: var(--rep-disclosure-font-size);
  font-weight: 700;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: var(--rep-radius-control);
  cursor: pointer;
  user-select: none;
}

._disclosureToggle_18tzg_427::before {
  content: "";
  width: var(--rep-disclosure-chevron-size);
  height: var(--rep-disclosure-chevron-size);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(1px, -2px) rotate(-45deg);
  transition: transform var(--rep-transition-fast);
}

._disclosureToggle_18tzg_427[aria-expanded="true"]::before {
  transform: translateY(-2px) rotate(45deg);
}

._disclosureToggle_18tzg_427:hover {
  background: var(--rep-disclosure-hover-bg);
}

._disclosureToggle_18tzg_427:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* Layout: one row of equal controls. */
._actionRow_18tzg_470 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rep-btn-row-gap);
  width: 100%;
}

._actionRow_18tzg_470 > * {
  flex: 1 1 0;
}

/* Layout: controls that share rows and wrap onto as many as they need. */
._actionCluster_18tzg_482 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rep-btn-row-gap);
  width: 100%;
}

._actionCluster_18tzg_482 > * {
  flex: 1 1 var(--rep-btn-cluster-basis);
}

._splitLayout_18tzg_493 {
  display: flex;
  gap: 20px;
  width: 100%;
  align-items: flex-start;
}

._formPane_18tzg_500 {
  flex: 1 1 0%;
  min-width: 0;
}

._previewPane_18tzg_505 {
  width: 400px;
  min-width: 320px;
  position: sticky;
  top: 20px;
}

@media (max-width: 991px) {
  ._splitLayout_18tzg_493 {
    flex-direction: column;
  }

  ._previewPane_18tzg_505 {
    width: 100%;
    min-width: 0;
    position: static;
  }
}