/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
/*  Accessibility */
/*  Accessibility Focus Indicators @_variables.scss */
.sr-only {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  height: 0;
  width: 0;
  opacity: 0;
}

* {
  outline: var(--focus-outline--off);
  box-shadow: 0 0 0 0px var(--focus-dropshadow--off);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}
*:focus, *:focus-visible {
  outline: var(--focus-outline);
  box-shadow: 0 0 0 6px var(--focus-dropshadow);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

::cue {
  font-size: var(--text-xl);
}

.app-header#header,
.chart-renderer#main,
.app-footer#footer {
  outline: none;
  border: none;
  box-shadow: inset 0 0 0 0px var(--focus-color-0), inset 0 0 0 0px var(--focus-dropshadow--off);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}
.app-header#header:focus,
.chart-renderer#main:focus,
.app-footer#footer:focus {
  outline: none;
  border: none;
  box-shadow: inset 0 0 0 3px var(--focus-dropshadow), inset 0 0 0 3px var(--focus-dropshadow);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.app-menu__chapter .title {
  outline: none;
  box-shadow: inset 0 0 0 0px var(--focus-color-0), inset 0 0 0 0px var(--focus-dropshadow--off);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}
.app-menu__chapter .title:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus-color), inset 0 0 0 4px var(--focus-dropshadow);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.skip-to-content {
  position: absolute;
  top: 0;
  margin: 0;
  text-align: center;
  z-index: var(--zindex-accessibility);
  background: var(-black);
  box-shadow: var(--skip-to-content-shadow);
  width: initial;
  margin: initial;
  max-width: initial;
  min-width: initial;
  padding-left: initial;
  padding-top: initial;
  padding-bottom: initial;
  border-radius: var(--button-border-radius);
}
.skip-to-content li {
  display: inline;
}
.skip-to-content li a {
  background: var(--black);
  color: var(--white);
  text-decoration: none;
  border-radius: var(--button-border-radius);
  padding: 0;
}
.skip-to-content li a:focus, .skip-to-content li a:active {
  position: static;
  font-size: var(--text-md);
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  overflow: auto;
  display: block;
  background: var(--black);
  color: var(--white);
  padding: 1ch 2ch;
  margin: 0.5ch 0.5ch;
}

.hide-skip-to-content {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  left: initial;
  overflow: hidden;
  display: inline;
}

.ui-modal-container {
  position: fixed;
  left: 0;
  top: 0;
  padding-top: var(--space-xl);
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: var(--zindex-accessibility);
}
.ui-modal-container .ui-modal {
  border-radius: var(--button-border-radius);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  opacity: 1;
  border-width: 1px;
  border-style: solid;
  border-color: var(--gray-300);
  box-shadow: var(--modal-box-shadow);
  position: relative;
}
.ui-modal-container .ui-modal__bg {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--modal-screen);
  position: fixed;
  transition: all 0.3s;
}
.ui-modal-container .ui-modal__content {
  color: var(--black);
  width: auto;
  max-height: 80vh;
  overflow: auto;
  padding: var(--space-lg);
  position: relative;
  background-color: var(--gray-100);
  border-radius: var(--button-border-radius);
  border: var(--modal-border);
}
.ui-modal-container .ui-modal__content-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  padding: var(--space-sm);
  pointer-events: none;
}
.ui-modal-container .ui-modal__content-header h2#accessibility-toolbar {
  display: none;
}
.ui-modal-container .ui-modal__content-header .ui-modal__close {
  border-radius: 200px;
  height: 40px;
  width: 40px;
  padding: var(--space-xs);
  border-width: 2px;
  border-style: solid;
  pointer-events: all;
}
.ui-modal-container .ui-modal__content-header .ui-modal__close span {
  font-size: var(--text-xl);
  color: var(--gray-600);
}
.ui-modal-container .ui-modal__content .apply-ally-modal__section .app-ally-modal__no-bg {
  margin: var(--space-md) 0;
  margin-bottom: var(--space-lg);
  padding-left: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.ui-modal-container .ui-modal__content .apply-ally-modal__section .app-ally-modal__no-bg #no-bg-switch {
  padding-left: var(--space-md);
  font-size: var(--text-xs);
  line-height: normal;
  color: var(--gray-700);
}

.ui-modal__wrapper {
  display: flex;
  flex-direction: column;
}
.ui-modal__wrapper .app-ally-modal__section-title {
  font-size: var(--text-md);
  font-weight: 600;
}
.ui-modal__wrapper .app-ally-modal__color-modes {
  display: flex;
  align-items: center;
  flex-direction: row;
  padding-left: var(--space-md);
}
.ui-modal__wrapper .app-ally-modal__color-modes .color-mode__name {
  display: none;
}
.ui-modal__wrapper .app-ally-modal__color-modes button.color-mode {
  border-radius: 3000px;
  padding: 0;
  background: transparent;
  width: var(--icon-size-xl, 32px);
  height: var(--icon-size-xl, 32px);
  outline: var(--focus-outline--off);
  box-shadow: 0 0 0 0px var(--focus-dropshadow--off);
  transition: border 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
.ui-modal__wrapper .app-ally-modal__color-modes button.color-mode.auto {
  width: auto;
  height: auto;
}
.ui-modal__wrapper .app-ally-modal__color-modes button.color-mode.auto .color-mode__name {
  display: block;
  margin: 0 var(--space-lg);
  letter-spacing: 0.1ch;
}
.ui-modal__wrapper .app-ally-modal__color-modes button.color-mode:focus, .ui-modal__wrapper .app-ally-modal__color-modes button.color-mode:focus-visible {
  outline: var(--focus-outline);
  box-shadow: 0 0 0 6px var(--focus-dropshadow);
  transition: border 0.2s ease, box-shadow 0.2s ease;
  z-index: 99999;
}
.ui-modal__wrapper .app-ally-modal__color-modes button.color-mode .cbi,
.ui-modal__wrapper .app-ally-modal__color-modes button.color-mode .cbi svg.cbi__svg {
  width: var(--icon-size-xl, 48px);
  height: var(--icon-size-xl, 48px);
}
.ui-modal__wrapper .app-ally-modal__actions {
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: var(--space-md);
}
.ui-modal__wrapper .app-ally-modal__actions button {
  border-radius: 100px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  font-weight: bold;
  background-color: transparent;
  border: none;
  outline: var(--focus-outline--off);
  box-shadow: 0 0 0 0px var(--focus-dropshadow--off);
  transition: border 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
.ui-modal__wrapper .app-ally-modal__actions button:focus, .ui-modal__wrapper .app-ally-modal__actions button:focus-visible {
  outline: var(--focus-outline);
  box-shadow: 0 0 0 6px var(--focus-dropshadow);
  transition: border 0.2s ease, box-shadow 0.2s ease;
  z-index: 99999;
}
.ui-modal__wrapper .app-ally-modal__shortcuts {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.ui-modal__wrapper .app-ally-modal__shortcuts table {
  width: auto;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--gray-700);
  line-height: normal;
}
.ui-modal__wrapper tbody {
  display: flex;
  flex-direction: column;
}
.ui-modal__wrapper tbody tr td {
  max-width: initial;
  min-width: 280px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ui-modal__wrapper tbody tr td kbd {
  border-radius: var(--radius-xs);
  padding: var(--space-md);
  font-weight: bold;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin: 0;
  width: 4ch;
  min-width: 4ch;
  text-align: center;
  color: var(--rl-black);
  background: var(--rl-white);
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.ui-modal__wrapper tbody tr td,
.ui-modal__wrapper tbody tr th {
  padding: 8px;
  text-align: left;
}

body#cbook-body .ui-modal__wrapper .app-ally-modal__color-modes button.color-mode.auto .color-mode__name {
  font-size: var(--text-xxxs);
}

.app-ally-modal__color-modes button.color-mode.selected,
.app-ally-modal__actions button.selected {
  border-width: 2px;
  border-style: dashed;
  border-color: var(--black);
}

.app-ally-modal__actions button.button__contrast--normal {
  color: var(--rl-black);
  background-color: var(--rl-white);
}
.app-ally-modal__actions button.button__contrast--normal.selected {
  border-color: var(--rl-black);
}
.app-ally-modal__actions button.button__contrast--blackwhite {
  color: var(--contrast-black);
  background-color: var(--contrast-white);
}
.app-ally-modal__actions button.button__contrast--blackwhite.selected {
  border-color: var(--contrast-black);
}
.app-ally-modal__actions button.button__contrast--whiteblack {
  color: var(--contrast-white);
  background-color: var(--contrast-black);
}
.app-ally-modal__actions button.button__contrast--whiteblack.selected {
  border-color: var(--contrast-white);
}
.app-ally-modal__actions button.button__contrast--yellowblue {
  color: var(--contrast-yellow);
  background-color: var(--contrast-blue);
}
.app-ally-modal__actions button.button__contrast--yellowblue.selected {
  border-color: var(-contrast--yellow);
}
.app-ally-modal__actions button.button__contrast--blueyellow {
  color: var(--contrast-blue);
  background-color: var(--contrast-yellow);
}
.app-ally-modal__actions button.button__contrast--blueyellow.selected {
  border-color: var(--contrast-blue);
}
.app-ally-modal__actions button.button__contrast--greenblack {
  color: var(--contrast-green);
  background-color: var(--contrast-black);
}
.app-ally-modal__actions button.button__contrast--greenblack.selected {
  border-color: var(--contrast-green);
}
.app-ally-modal__actions button.button__contrast--redcyan {
  color: var(--contrast-red);
  background-color: var(--contrast-cyan);
}
.app-ally-modal__actions button.button__contrast--redcyan.selected {
  border-color: var(--contrast-red);
}

body#cbook-body .app-ally-modal__actions .button__font-size--normal {
  font-size: 1rem;
}
body#cbook-body .app-ally-modal__actions .button__font-size--medium {
  font-size: 1.25rem;
}
body#cbook-body .app-ally-modal__actions .button__font-size--large {
  font-size: 1.75rem;
}
body#cbook-body .app-ally-modal__actions .button__font-size--x-large {
  font-size: 2rem;
}

body#cbook-body.contrast--blackwhite,
body#extension-body.contrast--blackwhite {
  --text-color: var(--contrast-black);
  --text-color-inverse: var(--contrast-white);
  --primary-color: var(--contrast-black);
  --primary-color-rgb: var(--contrast-black-rgb);
  --secondary-color: var(--contrast-black);
  --secondary-color-rgb: var(--contrast-black-rgb);
  --tertiary-color: var(--contrast-black);
  --tertiary-color-rgb: var(--contrast-black-rgb);
  --black: var(--contrast-black);
  --gray-950: var(--contrast-black);
  --gray-900: var(--contrast-black);
  --gray-900-rgb: var(--contrast-black-rgb);
  --gray-850: var(--contrast-black);
  --gray-800: var(--contrast-black);
  --gray-800-rgb: var(--contrast-black-rgb);
  --gray-750: var(--contrast-black);
  --gray-700: var(--contrast-black);
  --gray-600: var(--contrast-black);
  --gray-500: var(--contrast-black);
  --gray-400: var(--contrast-white);
  --gray-300: var(--contrast-white);
  --gray-350: var(--contrast-white);
  --gray-200: var(--contrast-white);
  --gray-200-rgb: var(--contrast-white-rgb);
  --gray-250: var(--contrast-white);
  --gray-100: var(--contrast-white);
  --gray-100-rgb: var(--contrast-white-rgb);
  --gray-150: var(--contrast-white);
  --white: var(--contrast-white);
  --card-back-color: var(--contrast-black);
  --card-back-bg: var(--contrast-white);
  --card-front-color: var(--contrast-black);
  --card-front-bg: var(--contrast-white);
  --hotspot-modal-bg: var(--contrast-white);
  --hotspot-modal-img-bg: var(--contrast-white);
  --cbook-outline-color: var(--contrast-black);
  --toogle-story-book-handler: var(--contrast-black);
}

body#cbook-body.contrast--whiteblack,
body#extension-body.contrast--whiteblack {
  --text-color: var(--contrast-white);
  --text-color-inverse: var(--contrast-black);
  --primary-color: var(--contrast-white);
  --primary-color-rgb: var(--contrast-white-rgb);
  --secondary-color: var(--contrast-white);
  --secondary-color-rgb: var(--contrast-white-rgb);
  --tertiary-color: var(--contrast-white);
  --tertiary-color-rgb: var(--contrast-white-rgb);
  --black: var(--contrast-white);
  --gray-950: var(--contrast-white);
  --gray-900: var(--contrast-white);
  --gray-900-rgb: var(--contrast-white-rgb);
  --gray-850: var(--contrast-white);
  --gray-800: var(--contrast-white);
  --gray-800-rgb: var(--contrast-white-rgb);
  --gray-750: var(--contrast-white);
  --gray-700: var(--contrast-white);
  --gray-600: var(--contrast-white);
  --gray-500: var(--contrast-white);
  --gray-400: var(--contrast-black);
  --gray-300: var(--contrast-black);
  --gray-350: var(--contrast-black);
  --gray-200: var(--contrast-black);
  --gray-200-rgb: var(--contrast-black-rgb);
  --gray-250: var(--contrast-black);
  --gray-100: var(--contrast-black);
  --gray-100-rgb: var(--contrast-black-rgb);
  --gray-150: var(--contrast-black);
  --white: var(--contrast-black);
  --card-back-color: var(--contrast-white);
  --card-back-bg: var(--contrast-black);
  --card-front-color: var(--contrast-white);
  --card-front-bg: var(--contrast-black);
  --hotspot-modal-bg: var(--contrast-black);
  --hotspot-modal-img-bg: var(--contrast-black);
  --cbook-outline-color: var(--contrast-white);
  --toogle-story-book-handler: var(--contrast-white);
}

body#cbook-body.contrast--yellowblue,
body#extension-body.contrast--yellowblue {
  --text-color: var(--contrast-yellow);
  --text-color-inverse: var(--contrast-blue);
  --primary-color: var(--contrast-yellow);
  --primary-color-rgb: var(--contrast-yellow-rgb);
  --secondary-color: var(--contrast-yellow);
  --secondary-color-rgb: var(--contrast-yellow-rgb);
  --tertiary-color: var(--contrast-yellow);
  --tertiary-color-rgb: var(--contrast-yellow-rgb);
  --black: var(--contrast-yellow);
  --gray-950: var(--contrast-yellow);
  --gray-900: var(--contrast-yellow);
  --gray-900-rgb: var(--contrast-yellow-rgb);
  --gray-850: var(--contrast-yellow);
  --gray-800: var(--contrast-yellow);
  --gray-800-rgb: var(--contrast-yellow-rgb);
  --gray-750: var(--contrast-yellow);
  --gray-700: var(--contrast-yellow);
  --gray-600: var(--contrast-yellow);
  --gray-500: var(--contrast-yellow);
  --gray-400: var(--contrast-blue);
  --gray-300: var(--contrast-blue);
  --gray-350: var(--contrast-blue);
  --gray-200: var(--contrast-blue);
  --gray-200-rgb: var(--contrast-blue-rgb);
  --gray-250: var(--contrast-blue);
  --gray-100: var(--contrast-blue);
  --gray-100-rgb: var(--contrast-blue-rgb);
  --gray-150: var(--contrast-blue);
  --white: var(--contrast-blue);
  --card-back-color: var(--contrast-yellow);
  --card-back-bg: var(--contrast-blue);
  --card-front-color: var(--contrast-yellow);
  --card-front-bg: var(--contrast-blue);
  --hotspot-modal-bg: var(--contrast-blue);
  --hotspot-modal-img-bg: var(--contrast-blue);
  --cbook-outline-color: var(--contrast-yellow);
  --toogle-story-book-handler: var(--contrast-yellow);
}

body#cbook-body.contrast--blueyellow,
body#extension-body.contrast--blueyellow {
  --text-color: var(--contrast-blue);
  --text-color-inverse: var(--contrast-yellow);
  --primary-color: var(--contrast-blue);
  --primary-color-rgb: var(--contrast-blue-rgb);
  --secondary-color: var(--contrast-blue);
  --secondary-color-rgb: var(--contrast-blue-rgb);
  --tertiary-color: var(--contrast-blue);
  --tertiary-color-rgb: var(--contrast-blue-rgb);
  --black: var(--contrast-blue);
  --gray-950: var(--contrast-blue);
  --gray-900: var(--contrast-blue);
  --gray-900-rgb: var(--contrast-blue-rgb);
  --gray-850: var(--contrast-blue);
  --gray-800: var(--contrast-blue);
  --gray-800-rgb: var(--contrast-blue-rgb);
  --gray-750: var(--contrast-blue);
  --gray-700: var(--contrast-blue);
  --gray-600: var(--contrast-blue);
  --gray-500: var(--contrast-blue);
  --gray-400: var(--contrast-yellow);
  --gray-300: var(--contrast-yellow);
  --gray-350: var(--contrast-yellow);
  --gray-200: var(--contrast-yellow);
  --gray-200-rgb: var(--contrast-yellow-rgb);
  --gray-250: var(--contrast-yellow);
  --gray-100: var(--contrast-yellow);
  --gray-100-rgb: var(--contrast-yellow-rgb);
  --gray-150: var(--contrast-yellow);
  --white: var(--contrast-yellow);
  --card-back-color: var(--contrast-blue);
  --card-back-bg: var(--contrast-yellow);
  --card-front-color: var(--contrast-blue);
  --card-front-bg: var(--contrast-yellow);
  --hotspot-modal-bg: var(--contrast-yellow);
  --hotspot-modal-img-bg: var(--contrast-yellow);
  --cbook-outline-color: var(--contrast-blue);
  --toogle-story-book-handler: var(--contrast-blue);
}

body#cbook-body.contrast--greenblack,
body#extension-body.contrast--greenblack {
  --text-color: var(--contrast-green);
  --text-color-inverse: var(--contrast-black);
  --primary-color: var(--contrast-green);
  --primary-color-rgb: var(--contrast-green-rgb);
  --secondary-color: var(--contrast-green);
  --secondary-color-rgb: var(--contrast-green-rgb);
  --tertiary-color: var(--contrast-green);
  --tertiary-color-rgb: var(--contrast-green-rgb);
  --black: var(--contrast-green);
  --gray-950: var(--contrast-green);
  --gray-900: var(--contrast-green);
  --gray-900-rgb: var(--contrast-green-rgb);
  --gray-850: var(--contrast-green);
  --gray-800: var(--contrast-green);
  --gray-800-rgb: var(--contrast-green-rgb);
  --gray-750: var(--contrast-green);
  --gray-700: var(--contrast-green);
  --gray-600: var(--contrast-green);
  --gray-500: var(--contrast-green);
  --gray-400: var(--contrast-black);
  --gray-300: var(--contrast-black);
  --gray-350: var(--contrast-black);
  --gray-200: var(--contrast-black);
  --gray-200-rgb: var(--contrast-black-rgb);
  --gray-250: var(--contrast-black);
  --gray-100: var(--contrast-black);
  --gray-100-rgb: var(--contrast-black-rgb);
  --gray-150: var(--contrast-black);
  --white: var(--contrast-black);
  --card-back-color: var(--contrast-green);
  --card-back-bg: var(--contrast-black);
  --card-front-color: var(--contrast-green);
  --card-front-bg: var(--contrast-black);
  --hotspot-modal-bg: var(--contrast-black);
  --hotspot-modal-img-bg: var(--contrast-black);
  --cbook-outline-color: var(--contrast-green);
  --toogle-story-book-handler: var(--contrast-green);
}

body#cbook-body.contrast--redcyan,
body#extension-body.contrast--redcyan {
  --text-color: var(--contrast-red);
  --text-color-inverse: var(--contrast-cyan);
  --primary-color: var(--contrast-red);
  --primary-color-rgb: var(--contrast-red-rgb);
  --secondary-color: var(--contrast-red);
  --secondary-color-rgb: var(--contrast-red-rgb);
  --tertiary-color: var(--contrast-red);
  --tertiary-color-rgb: var(--contrast-red-rgb);
  --black: var(--contrast-red);
  --gray-950: var(--contrast-red);
  --gray-900: var(--contrast-red);
  --gray-900-rgb: var(--contrast-red-rgb);
  --gray-850: var(--contrast-red);
  --gray-800: var(--contrast-red);
  --gray-800-rgb: var(--contrast-red-rgb);
  --gray-750: var(--contrast-red);
  --gray-700: var(--contrast-red);
  --gray-600: var(--contrast-red);
  --gray-500: var(--contrast-red);
  --gray-400: var(--contrast-cyan);
  --gray-300: var(--contrast-cyan);
  --gray-350: var(--contrast-cyan);
  --gray-200: var(--contrast-cyan);
  --gray-200-rgb: var(--contrast-cyan-rgb);
  --gray-250: var(--contrast-cyan);
  --gray-100: var(--contrast-cyan);
  --gray-100-rgb: var(--contrast-cyan-rgb);
  --gray-150: var(--contrast-cyan);
  --white: var(--contrast-cyan);
  --card-back-color: var(--contrast-red);
  --card-back-bg: var(--contrast-cyan);
  --card-front-color: var(--contrast-red);
  --card-front-bg: var(--contrast-cyan);
  --hotspot-modal-bg: var(--contrast-cyan);
  --hotspot-modal-img-bg: var(--contrast-cyan);
  --cbook-outline-color: var(--contrast-red);
  --toogle-story-book-handler: var(--contrast-red);
}

body#cbook-body.bg--hidden .chart__background-image,
body#extension-body.bg--hidden .chart__background-image {
  display: none;
}

body#cbook-body.bg--hidden #app-responsive-hotspots-backend .chart__background #chart-bg-id,
body#extension-body.bg--hidden #app-responsive-hotspots .chart__background #chart-bg-id {
  display: block;
}

/* Color Contrast Overrides for specific cBOOK Elements  */
body#cbook-body.contrast--blackwhite,
body#cbook-body.contrast--whiteblack,
body#cbook-body.contrast--yellowblue,
body#cbook-body.contrast--blueyellow,
body#cbook-body.contrast--greenblack,
body#cbook-body.contrast--redcyan {
  --input-border: 1px solid var(--gray-500);
  --cbook-menu-border: 2px solid var(--gray-500);
  --cbook-social-border: 2px solid var(--gray-500);
  --button-border: 1px solid var(--gray-500);
  --button-secondary-border: 1px dashed var(--gray-500);
  --menu-chapter-border: 1px dashed var(--gray-500);
  --menu-chapter-arrow: var(--gray-900);
  --modal-border: 4px solid var(--black);
}
body#cbook-body.contrast--blackwhite .progress-display__background,
body#cbook-body.contrast--whiteblack .progress-display__background,
body#cbook-body.contrast--yellowblue .progress-display__background,
body#cbook-body.contrast--blueyellow .progress-display__background,
body#cbook-body.contrast--greenblack .progress-display__background,
body#cbook-body.contrast--redcyan .progress-display__background {
  stroke: var(--black);
  stroke-width: 1px;
  stroke-dasharray: 4px 4px;
  stroke-dashoffset: 69px;
}
body#cbook-body.contrast--blackwhite .progress-display .perc-val,
body#cbook-body.contrast--whiteblack .progress-display .perc-val,
body#cbook-body.contrast--yellowblue .progress-display .perc-val,
body#cbook-body.contrast--blueyellow .progress-display .perc-val,
body#cbook-body.contrast--greenblack .progress-display .perc-val,
body#cbook-body.contrast--redcyan .progress-display .perc-val {
  color: var(--footer-color);
  text-shadow: -2px -2px 0px var(--white), -1px -1px 0px var(--white), 1px 1px 0px var(--white), 2px 2px 0px var(--white);
}
body#cbook-body.contrast--blackwhite .chart-progress__popup,
body#cbook-body.contrast--whiteblack .chart-progress__popup,
body#cbook-body.contrast--yellowblue .chart-progress__popup,
body#cbook-body.contrast--blueyellow .chart-progress__popup,
body#cbook-body.contrast--greenblack .chart-progress__popup,
body#cbook-body.contrast--redcyan .chart-progress__popup {
  border: 1px solid var(--black);
}
body#cbook-body.contrast--blackwhite .chart-progress__popup .input-range__track--background,
body#cbook-body.contrast--whiteblack .chart-progress__popup .input-range__track--background,
body#cbook-body.contrast--yellowblue .chart-progress__popup .input-range__track--background,
body#cbook-body.contrast--blueyellow .chart-progress__popup .input-range__track--background,
body#cbook-body.contrast--greenblack .chart-progress__popup .input-range__track--background,
body#cbook-body.contrast--redcyan .chart-progress__popup .input-range__track--background {
  border: 1px solid var(--black);
}

/* Color Contrast Overrides for specific EXT Elements */
body#extension-body.contrast--blackwhite .ReactModalPortal .ReactModal__Overlay,
body#extension-body.contrast--whiteblack .ReactModalPortal .ReactModal__Overlay,
body#extension-body.contrast--yellowblue .ReactModalPortal .ReactModal__Overlay,
body#extension-body.contrast--blueyellow .ReactModalPortal .ReactModal__Overlay,
body#extension-body.contrast--greenblack .ReactModalPortal .ReactModal__Overlay,
body#extension-body.contrast--redcyan .ReactModalPortal .ReactModal__Overlay {
  color: var(--hotspot-modal-color);
  background-color: var(--hotspot-modal-bg);
  --hotspot-modal-color: var(--gray-900);
  --hotspot-modal-bg: var(--gray-100);
  --hotspot-modal-img-bg: var(--gray-100);
  --hotspot-close-color: var(--gray-100);
  --hotspot-close-bg: var(--gray-900);
}
body#extension-body.contrast--blackwhite #app-explorer .card-item .card__front,
body#extension-body.contrast--blackwhite #app-explorer .card-item .card__back,
body#extension-body.contrast--whiteblack #app-explorer .card-item .card__front,
body#extension-body.contrast--whiteblack #app-explorer .card-item .card__back,
body#extension-body.contrast--yellowblue #app-explorer .card-item .card__front,
body#extension-body.contrast--yellowblue #app-explorer .card-item .card__back,
body#extension-body.contrast--blueyellow #app-explorer .card-item .card__front,
body#extension-body.contrast--blueyellow #app-explorer .card-item .card__back,
body#extension-body.contrast--greenblack #app-explorer .card-item .card__front,
body#extension-body.contrast--greenblack #app-explorer .card-item .card__back,
body#extension-body.contrast--redcyan #app-explorer .card-item .card__front,
body#extension-body.contrast--redcyan #app-explorer .card-item .card__back {
  color: var(--gray-900);
  background-color: var(--gray-100);
  border: 2px solid var(--gray-900);
}
body#extension-body.contrast--blackwhite #app-responsive-hotspots .entity .agenda__bullet,
body#extension-body.contrast--blackwhite #app-responsive-hotspots .entity .hotspot__bullet,
body#extension-body.contrast--blackwhite #app-responsive-hotspots .entity.entity__area .area__content,
body#extension-body.contrast--whiteblack #app-responsive-hotspots .entity .agenda__bullet,
body#extension-body.contrast--whiteblack #app-responsive-hotspots .entity .hotspot__bullet,
body#extension-body.contrast--whiteblack #app-responsive-hotspots .entity.entity__area .area__content,
body#extension-body.contrast--yellowblue #app-responsive-hotspots .entity .agenda__bullet,
body#extension-body.contrast--yellowblue #app-responsive-hotspots .entity .hotspot__bullet,
body#extension-body.contrast--yellowblue #app-responsive-hotspots .entity.entity__area .area__content,
body#extension-body.contrast--blueyellow #app-responsive-hotspots .entity .agenda__bullet,
body#extension-body.contrast--blueyellow #app-responsive-hotspots .entity .hotspot__bullet,
body#extension-body.contrast--blueyellow #app-responsive-hotspots .entity.entity__area .area__content,
body#extension-body.contrast--greenblack #app-responsive-hotspots .entity .agenda__bullet,
body#extension-body.contrast--greenblack #app-responsive-hotspots .entity .hotspot__bullet,
body#extension-body.contrast--greenblack #app-responsive-hotspots .entity.entity__area .area__content,
body#extension-body.contrast--redcyan #app-responsive-hotspots .entity .agenda__bullet,
body#extension-body.contrast--redcyan #app-responsive-hotspots .entity .hotspot__bullet,
body#extension-body.contrast--redcyan #app-responsive-hotspots .entity.entity__area .area__content {
  color: var(--gray-900);
  background-color: var(--gray-100);
  border: 2px solid var(--gray-900);
}

/*100 %*/
body#extension-body.font-size--normal,
body#cbook-body.font-size--normal {
  --text-multiplier: 1;
}

/*130 %*/
body#extension-body.font-size--medium,
body#cbook-body.font-size--medium {
  --text-multiplier: 1.3;
  --header: 60px;
  --footer: 60px;
}

/*170 %*/
body#extension-body.font-size--large,
body#cbook-body.font-size--large {
  --text-multiplier: 1.7;
  --header: 60px;
  --footer: 60px;
}
body#extension-body.font-size--large .ui-modal__wrapper .app-ally-modal__shortcuts table,
body#cbook-body.font-size--large .ui-modal__wrapper .app-ally-modal__shortcuts table {
  width: 100%;
  margin: 0 var(--space-md);
}
body#extension-body.font-size--large .app-footer__options,
body#cbook-body.font-size--large .app-footer__options {
  width: 100%;
}
body#extension-body.font-size--large .app-footer__options span,
body#cbook-body.font-size--large .app-footer__options span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body#extension-body.font-size--large .app-footer__options span.switch-label,
body#cbook-body.font-size--large .app-footer__options span.switch-label {
  opacity: 1;
}
body#extension-body.font-size--large .app-footer__options span.switch-label--active,
body#cbook-body.font-size--large .app-footer__options span.switch-label--active {
  opacity: 0;
}
body#extension-body.font-size--large #footer .ui-switch,
body#extension-body.font-size--large #footer .ui-switch.on,
body#cbook-body.font-size--large #footer .ui-switch,
body#cbook-body.font-size--large #footer .ui-switch.on {
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: all;
  z-index: 10;
  border-radius: var(--button-border-radius);
}
body#extension-body.font-size--large #footer .ui-switch:hover,
body#extension-body.font-size--large #footer .ui-switch:focus,
body#cbook-body.font-size--large #footer .ui-switch:hover,
body#cbook-body.font-size--large #footer .ui-switch:focus {
  background: transparent;
  border: none;
  box-shadow: none;
}
body#extension-body.font-size--large #footer .ui-switch .ui-switch__handler,
body#cbook-body.font-size--large #footer .ui-switch .ui-switch__handler {
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: all;
}
body#extension-body.font-size--large #footer .ui-switch:hover .ui-switch__handler,
body#extension-body.font-size--large #footer .ui-switch:focus .ui-switch__handler,
body#cbook-body.font-size--large #footer .ui-switch:hover .ui-switch__handler,
body#cbook-body.font-size--large #footer .ui-switch:focus .ui-switch__handler {
  box-shadow: none;
  opacity: 0.8;
}

/*200 %*/
body#extension-body.font-size--x-large,
body#cbook-body.font-size--x-large {
  --text-multiplier: 2;
  --space-xl: 4ch;
  --space-lg: 1ch;
  --space-md: 0.5ch;
  --space-sm: 0.4ch;
  --space-xs: 0.25ch;
  --space-xxs: 0.125ch;
  --space-zero: 0;
  --paddings--wide: var(--space-md);
  --icon-size-s: 24px;
  --icon-size-m: 32px;
  --header: 70px;
  --footer: 70px;
  --menu-width: 100%;
  --menu-close-position-right: 0;
  --social-width: 100%;
  --social-close-position-left: 0;
}
body#extension-body.font-size--x-large .ui-modal__wrapper .app-ally-modal__shortcuts table,
body#cbook-body.font-size--x-large .ui-modal__wrapper .app-ally-modal__shortcuts table {
  width: 100%;
  margin: 0 var(--space-md);
}

/* 150 % */
body#cbook-body.font-size--medium .input-range__label-container {
  top: -0.5ch;
}

body#cbook-body.font-size--medium .app-menu__chapter .progress-display {
  margin: 0;
  width: 60px;
  height: 60px;
  transform: scale(1);
  display: flex;
  align-items: center;
  justify-content: center;
}

body#cbook-body.font-size--medium .progress-display__svg svg {
  transform: scale(1.5);
}

body#cbook-body.font-size--medium .progress-display--compact .perc-val {
  right: -19px;
  top: 3px;
  font-size: var(--text-xs);
}

body#cbook-body.font-size--medium .app-footer#footer .progress-display--compact .perc-val {
  right: -23px;
  top: -8px;
}

/* 150 % */
/* 200 % */
/* Condensing Book/Story Mode Switch */
body#cbook-body.font-size--x-large .app-footer__options {
  width: 100px;
}

body#cbook-body.font-size--x-large .app-footer__options span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

body#cbook-body.font-size--x-large .app-footer__options span.switch-label {
  opacity: 1;
}

body#cbook-body.font-size--x-large .app-footer__options span.switch-label--active {
  opacity: 0;
}

body#cbook-body.font-size--x-large #footer .ui-switch,
body#cbook-body.font-size--x-large #footer .ui-switch.on {
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: all;
  z-index: 10;
  border-radius: var(--button-border-radius);
}

body#cbook-body.font-size--x-large #footer .ui-switch:hover,
body#cbook-body.font-size--x-large #footer .ui-switch:focus {
  background: transparent;
  border: none;
  box-shadow: none;
}

body#cbook-body.font-size--x-large #footer .ui-switch:hover .ui-switch__handler,
body#cbook-body.font-size--x-large #footer .ui-switch:focus .ui-switch__handler {
  box-shadow: none;
  opacity: 0.8;
}

body#cbook-body.font-size--x-large #footer .ui-switch .ui-switch__handler {
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: all;
}

body#cbook-body.font-size--x-large .chart-menu__visited {
  margin: 0;
}

body#cbook-body.font-size--x-large .chart-menu__link {
  padding: var(--space-md);
}

body#cbook-body.font-size--x-large .app-menu__chapter .title .title-wrapper {
  margin-left: var(--space-xl);
}

body#cbook-body.font-size--x-large .app-menu__chapter .progress-display {
  margin: 0;
  width: 60px;
  height: 60px;
  transform: scale(1);
  display: flex;
  align-items: center;
  justify-content: center;
}

body#cbook-body.font-size--x-large .progress-display__svg svg {
  transform: scale(1.5);
}

body#cbook-body.font-size--x-large .progress-display--compact .perc-val {
  right: -35px;
  top: -3px;
  font-size: var(--text-xs);
}

body#cbook-body.font-size--x-large .numeral-indicator {
  left: calc(var(--space-md) * -1);
  top: calc(var(--space-md) * -2);
  width: 2ch;
  height: 2ch;
  line-height: 2ch;
}

body#cbook-body.font-size--x-large .input-range__label-container {
  top: -1ch;
}

body#cbook-body.font-size--x-large .app-footer#footer .progress-display--compact .perc-val {
  right: -36px;
  top: -14px;
}

/* Condensing Book/Story Mode Switch */
/* 200% */
/* Responsive Styling considering Display Scaling 125% and 150% */
@media only screen and (min-width: 1600px) and (-webkit-max-device-pixel-ratio: 1.5), only screen and (min-width: 1600px) and (-webkit-max-device-pixel-ratio: 1.25) {
  html[color-mode=dark] #cbook-body,
  html[color-mode=dark] #extension-body,
  html[color-mode=dark] #app-responsive-hotspots-backend,
  html[color-mode=dark] #editor-body,
  html[color-mode=dark] ::before,
  html[color-mode=dark] ::after,
  html[color-mode=light] #cbook-body,
  html[color-mode=light] #extension-body,
  html[color-mode=light] #app-responsive-hotspots-backend,
  html[color-mode=light] #editor-body,
  html[color-mode=light] ::before,
  html[color-mode=light] ::after,
  #cbook-body,
  #extension-body,
  #app-responsive-hotspots-backend,
  #editor-body,
  ::before,
  ::after {
    --cbook-width: 100%;
    --cbook-height: 100%;
    --menu-width: 50%;
    --social-width: 45%;
    --padding-top-bot: 48px;
    --padding-re-li: 48px;
    --stage-width: 100%;
    --text-xxxs: 0.75rem;
    --stage-height: calc( var(--cbook-height) + var(--header) - var(--footer) - var(--padding-top-bot) - var(--padding-top-bot));
    --menu-height: var(--stage-height);
    --social-height: var(--stage-height);
    --footer-z-index: var(--zindex-tooltip);
    --header-z-index: var(--zindex-tooltip);
    --footer-pages: flex;
    --footer-qick-fav-label: none;
    --footer-bonus-label: none;
    --footer-notes-label: none;
    --footer-activity-label: none;
  }
}
/* Responsive Styling */
@media only screen and (min-width: 1600px) and (-webkit-max-device-pixel-ratio: 1) {
  html[color-mode=dark] #cbook-body,
  html[color-mode=dark] #extension-body,
  html[color-mode=dark] #app-responsive-hotspots-backend,
  html[color-mode=dark] #editor-body,
  html[color-mode=dark] ::before,
  html[color-mode=dark] ::after,
  html[color-mode=light] #cbook-body,
  html[color-mode=light] #extension-body,
  html[color-mode=light] #app-responsive-hotspots-backend,
  html[color-mode=light] #editor-body,
  html[color-mode=light] ::before,
  html[color-mode=light] ::after,
  #cbook-body,
  #extension-body,
  #app-responsive-hotspots-backend,
  #editor-body,
  ::before,
  ::after {
    --cbook-width: 1676px;
    --cbook-height: 1036px;
    --menu-width: 45%;
    --social-width: 45%;
    --padding-top-bot: 48px;
    --padding-re-li: 48px;
    --stage-width: 100%;
    --stage-height: calc(
      var(--cbook-height) - var(--header) - var(--footer) -
        var(--padding-top-bot) - var(--padding-top-bot)
    );
    --menu-height: var(--stage-height);
    --social-height: var(--stage-height);
    --footer-z-index: var(--zindex-popover);
    --header-z-index: var(--zindex-popover);
    --footer-pages: flex;
    --footer-qick-fav-label: inline-block;
    --footer-bonus-label: inline-block;
    --footer-notes-label: inline-block;
    --footer-activity-label: inline-block;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  html[color-mode=dark] #cbook-body,
  html[color-mode=dark] #extension-body,
  html[color-mode=dark] #app-responsive-hotspots-backend,
  html[color-mode=dark] #editor-body,
  html[color-mode=dark] ::before,
  html[color-mode=dark] ::after,
  html[color-mode=light] #cbook-body,
  html[color-mode=light] #extension-body,
  html[color-mode=light] #app-responsive-hotspots-backend,
  html[color-mode=light] #editor-body,
  html[color-mode=light] ::before,
  html[color-mode=light] ::after,
  #cbook-body,
  #extension-body,
  #app-responsive-hotspots-backend,
  #editor-body,
  ::before,
  ::after {
    --cbook-width: 1078px;
    --cbook-height: 720px;
    --menu-width: 45%;
    --social-width: 45%;
    --padding-top-bot: 48px;
    --padding-re-li: 48px;
    --stage-width: 100%;
    --stage-height: calc(
      var(--cbook-height) - var(--header) - var(--footer) -
        var(--padding-top-bot) - var(--padding-top-bot)
    );
    --menu-height: var(--stage-height);
    --social-height: var(--stage-height);
    --footer-z-index: var(--zindex-popover);
    --header-z-index: var(--zindex-popover);
    --footer-pages: flex;
    --footer-qick-fav-label: inline-block;
    --footer-bonus-label: inline-block;
    --footer-notes-label: inline-block;
    --footer-activity-label: inline-block;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1023px) {
  html[color-mode=dark] #cbook-body,
  html[color-mode=dark] #extension-body,
  html[color-mode=dark] #app-responsive-hotspots-backend,
  html[color-mode=dark] #editor-body,
  html[color-mode=dark] ::before,
  html[color-mode=dark] ::after,
  html[color-mode=light] #cbook-body,
  html[color-mode=light] #extension-body,
  html[color-mode=light] #app-responsive-hotspots-backend,
  html[color-mode=light] #editor-body,
  html[color-mode=light] ::before,
  html[color-mode=light] ::after,
  #cbook-body,
  #extension-body,
  #app-responsive-hotspots-backend,
  #editor-body,
  ::before,
  ::after {
    --cbook-width: 100%;
    --cbook-height: 100%;
    --menu-width: 50%;
    --social-width: 45%;
    --padding-top-bot: 48px;
    --padding-re-li: 48px;
    --stage-width: 100%;
    --stage-height: calc(
      var(--cbook-height) + var(--header) - var(--footer) -
        var(--padding-top-bot) - var(--padding-top-bot)
    );
    --menu-height: var(--stage-height);
    --social-height: var(--stage-height);
    --footer-z-index: var(--zindex-tooltip);
    --header-z-index: var(--zindex-tooltip);
    --footer-pages: flex;
    --footer-qick-fav-label: none;
    --footer-bonus-label: none;
    --footer-notes-label: none;
    --footer-activity-label: none;
  }
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
  html[color-mode=dark] #cbook-body,
  html[color-mode=dark] #extension-body,
  html[color-mode=dark] #app-responsive-hotspots-backend,
  html[color-mode=dark] #editor-body,
  html[color-mode=dark] ::before,
  html[color-mode=dark] ::after,
  html[color-mode=light] #cbook-body,
  html[color-mode=light] #extension-body,
  html[color-mode=light] #app-responsive-hotspots-backend,
  html[color-mode=light] #editor-body,
  html[color-mode=light] ::before,
  html[color-mode=light] ::after,
  #cbook-body,
  #extension-body,
  #app-responsive-hotspots-backend,
  #editor-body,
  ::before,
  ::after {
    --cbook-width: 100%;
    --cbook-height: 100%;
    --menu-width: 70%;
    --social-width: 70%;
    --padding-top-bot: 0px;
    --padding-re-li: 0px;
    --stage-width: 100%;
    --stage-height: calc(
      var(--cbook-height) - var(--header) - var(--footer) -
        var(--padding-top-bot) - var(--padding-top-bot)
    );
    --menu-height: var(--stage-height);
    --social-height: var(--stage-height);
    --footer-z-index: var(--zindex-tooltip);
    --header-z-index: var(--zindex-tooltip);
    --footer-pages: none;
    --footer-qick-fav-label: none;
    --footer-bonus-label: none;
    --footer-notes-label: none;
    --footer-activity-label: none;
    --button-nav-left: 0px;
    --button-nav-right: 0px;
  }
  .social-app .close-btn,
  .app-menu .close-btn {
    width: 50%;
    height: 100%;
    top: 0;
    margin: 0;
    padding: 0;
    background: rgba(var(--gray-100-rgb), 0.7);
    box-shadow: inset 0px 0px 100px var(--white);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
  }
  .social-app .close-btn {
    left: initial;
    right: 100%;
  }
  .app-menu .close-btn {
    left: 100%;
  }
  .social-app .close-btn:hover,
  .social-app .close-btn:active,
  .social-app .close-btn:focus {
    left: initial;
    right: 100%;
  }
  .app-menu .close-btn:hover,
  .app-menu .close-btn:active,
  .app-menu .close-btn:focus {
    left: 100%;
  }
  .social-app .close-btn:hover,
  .app-menu .close-btn:hover,
  .social-app .close-btn:active,
  .app-menu .close-btn:active,
  .social-app .close-btn:focus,
  .app-menu .close-btn:focus {
    background: rgba(var(--gray-100-rgb), 0.9);
    box-shadow: inset 0px 0px 100px var(--white);
  }
  .app-menu .close-btn .cbi,
  .social-app .close-btn .cbi {
    display: none;
  }
  .chart__legend-item {
    font-size: var(--text-xxs);
  }
}
@media only screen and (max-width: 479px) {
  html[color-mode=dark] #cbook-body,
  html[color-mode=dark] #extension-body,
  html[color-mode=dark] #app-responsive-hotspots-backend,
  html[color-mode=dark] #editor-body,
  html[color-mode=dark] ::before,
  html[color-mode=dark] ::after,
  html[color-mode=light] #cbook-body,
  html[color-mode=light] #extension-body,
  html[color-mode=light] #app-responsive-hotspots-backend,
  html[color-mode=light] #editor-body,
  html[color-mode=light] ::before,
  html[color-mode=light] ::after,
  #cbook-body,
  #extension-body,
  #app-responsive-hotspots-backend,
  #editor-body,
  ::before,
  ::after {
    --cbook-width: 100%;
    --cbook-height: 100%;
    --menu-width: 100%;
    --social-width: 100%;
    --padding-top-bot: 0px;
    --padding-re-li: 0px;
    --stage-width: 100%;
    --stage-height: calc(
      var(--cbook-height) - var(--header) - var(--footer) -
        var(--padding-top-bot) - var(--padding-top-bot)
    );
    --menu-height: var(--stage-height);
    --social-height: var(--stage-height);
    --footer-z-index: var(--zindex-tooltip);
    --header-z-index: var(--zindex-tooltip);
    --footer-pages: none;
    --footer-qick-fav-label: none;
    --footer-bonus-label: none;
    --footer-notes-label: none;
    --footer-activity-label: none;
    --button-nav-left: 0px;
    --button-nav-right: 0px;
  }
  .cbi-m {
    --icon-size-m: 20px;
  }
  .app-menu .close-btn {
    display: none;
  }
  .social-app .close-btn {
    right: 100%;
    left: -5px;
  }
  .app-menu__search-wrapper .app-menu__favorites-only label {
    font-size: var(--text-xxxs);
  }
  .app-menu__results .app-menu__chapters {
    padding: 0 var(--space-zero);
  }
  .chart-menu__visited {
    display: none;
  }
  .chart__buttonbar {
    margin: var(--space-sm);
  }
  .chart__legend-item {
    font-size: var(--text-xxxs);
  }
  .chart__btn {
    padding: var(--space-sm) var(--space-md);
  }
}
/* Color Contrast Overrides for specific EXT Elements */
body#extension-body.contrast--blackwhite #app-community-voting,
body#extension-body.contrast--whiteblack #app-community-voting,
body#extension-body.contrast--yellowblue #app-community-voting,
body#extension-body.contrast--blueyellow #app-community-voting,
body#extension-body.contrast--greenblack #app-community-voting,
body#extension-body.contrast--redcyan #app-community-voting {
  /* BALKEN start */
  /* BALKEN end */
  /* SLIDER */
  /* SLIDER end */
}
body#extension-body.contrast--blackwhite #app-community-voting .chart-balken__bar,
body#extension-body.contrast--whiteblack #app-community-voting .chart-balken__bar,
body#extension-body.contrast--yellowblue #app-community-voting .chart-balken__bar,
body#extension-body.contrast--blueyellow #app-community-voting .chart-balken__bar,
body#extension-body.contrast--greenblack #app-community-voting .chart-balken__bar,
body#extension-body.contrast--redcyan #app-community-voting .chart-balken__bar {
  border: 1px dashed var(--black);
}
body#extension-body.contrast--blackwhite #app-community-voting .chart-balken__bar.selected,
body#extension-body.contrast--whiteblack #app-community-voting .chart-balken__bar.selected,
body#extension-body.contrast--yellowblue #app-community-voting .chart-balken__bar.selected,
body#extension-body.contrast--blueyellow #app-community-voting .chart-balken__bar.selected,
body#extension-body.contrast--greenblack #app-community-voting .chart-balken__bar.selected,
body#extension-body.contrast--redcyan #app-community-voting .chart-balken__bar.selected {
  border: 2px solid var(--black);
}
body#extension-body.contrast--blackwhite #app-community-voting .chart-balken__field,
body#extension-body.contrast--whiteblack #app-community-voting .chart-balken__field,
body#extension-body.contrast--yellowblue #app-community-voting .chart-balken__field,
body#extension-body.contrast--blueyellow #app-community-voting .chart-balken__field,
body#extension-body.contrast--greenblack #app-community-voting .chart-balken__field,
body#extension-body.contrast--redcyan #app-community-voting .chart-balken__field {
  border: 2px solid var(--white);
  outline: 1px solid rgb(var(--gray-900-rgb), 1);
  background-image: radial-gradient(rgba(var(--gray-900-rgb), 0.6) 20%, transparent 15%), radial-gradient(rgba(var(--gray-900-rgb), 0.6) 20%, transparent 17%);
  background-position: 0px 0px, 10px 10px;
  background-size: 7px 7px;
}
body#extension-body.contrast--blackwhite #app-community-voting .chart-balken__field div,
body#extension-body.contrast--whiteblack #app-community-voting .chart-balken__field div,
body#extension-body.contrast--yellowblue #app-community-voting .chart-balken__field div,
body#extension-body.contrast--blueyellow #app-community-voting .chart-balken__field div,
body#extension-body.contrast--greenblack #app-community-voting .chart-balken__field div,
body#extension-body.contrast--redcyan #app-community-voting .chart-balken__field div {
  background: var(--black);
  background-color: var(--black);
  opacity: 1;
  background-image: repeating-linear-gradient(45deg, var(--white) 25%, transparent 25%, transparent 75%, var(--white) 75%, var(--white)), repeating-linear-gradient(45deg, var(--white) 25%, transparent 25%, transparent 75%, var(--white) 75%, var(--white));
  background-position: 0 0, 3px 3px;
  background-size: 6px 6px;
}
body#extension-body.contrast--blackwhite #app-community-voting .chart-balken__field:nth-child(2) div,
body#extension-body.contrast--whiteblack #app-community-voting .chart-balken__field:nth-child(2) div,
body#extension-body.contrast--yellowblue #app-community-voting .chart-balken__field:nth-child(2) div,
body#extension-body.contrast--blueyellow #app-community-voting .chart-balken__field:nth-child(2) div,
body#extension-body.contrast--greenblack #app-community-voting .chart-balken__field:nth-child(2) div,
body#extension-body.contrast--redcyan #app-community-voting .chart-balken__field:nth-child(2) div {
  background: var(--white);
  background-color: var(--white);
  opacity: 1;
  background-image: repeating-linear-gradient(45deg, var(--black) 0, var(--black) 1px, transparent 0, transparent 50%);
  background-size: 10px 10px;
}
body#extension-body.contrast--blackwhite #app-community-voting .choice__slider ul,
body#extension-body.contrast--whiteblack #app-community-voting .choice__slider ul,
body#extension-body.contrast--yellowblue #app-community-voting .choice__slider ul,
body#extension-body.contrast--blueyellow #app-community-voting .choice__slider ul,
body#extension-body.contrast--greenblack #app-community-voting .choice__slider ul,
body#extension-body.contrast--redcyan #app-community-voting .choice__slider ul {
  outline: 1px solid rgb(var(--gray-900-rgb), 1);
  border-radius: 3000px;
}
body#extension-body.contrast--blackwhite #app-community-voting .voter--unselected,
body#extension-body.contrast--whiteblack #app-community-voting .voter--unselected,
body#extension-body.contrast--yellowblue #app-community-voting .voter--unselected,
body#extension-body.contrast--blueyellow #app-community-voting .voter--unselected,
body#extension-body.contrast--greenblack #app-community-voting .voter--unselected,
body#extension-body.contrast--redcyan #app-community-voting .voter--unselected {
  border: 2px solid var(--white);
  outline: 1px solid rgb(var(--gray-900-rgb), 1);
  background-image: radial-gradient(rgba(var(--gray-900-rgb), 0.6) 20%, transparent 15%), radial-gradient(rgba(var(--gray-900-rgb), 0.6) 20%, transparent 17%);
  background-position: 0px 0px, 10px 10px;
  background-size: 7px 7px;
}
body#extension-body.contrast--blackwhite #app-community-voting .voter.userSlider .voter--selected,
body#extension-body.contrast--blackwhite #app-community-voting .voter.userSlider .voter--active,
body#extension-body.contrast--whiteblack #app-community-voting .voter.userSlider .voter--selected,
body#extension-body.contrast--whiteblack #app-community-voting .voter.userSlider .voter--active,
body#extension-body.contrast--yellowblue #app-community-voting .voter.userSlider .voter--selected,
body#extension-body.contrast--yellowblue #app-community-voting .voter.userSlider .voter--active,
body#extension-body.contrast--blueyellow #app-community-voting .voter.userSlider .voter--selected,
body#extension-body.contrast--blueyellow #app-community-voting .voter.userSlider .voter--active,
body#extension-body.contrast--greenblack #app-community-voting .voter.userSlider .voter--selected,
body#extension-body.contrast--greenblack #app-community-voting .voter.userSlider .voter--active,
body#extension-body.contrast--redcyan #app-community-voting .voter.userSlider .voter--selected,
body#extension-body.contrast--redcyan #app-community-voting .voter.userSlider .voter--active {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
}
body#extension-body.contrast--blackwhite #app-community-voting .voter.communitySlider .voter--selected,
body#extension-body.contrast--blackwhite #app-community-voting .voter.communitySlider .voter--active,
body#extension-body.contrast--whiteblack #app-community-voting .voter.communitySlider .voter--selected,
body#extension-body.contrast--whiteblack #app-community-voting .voter.communitySlider .voter--active,
body#extension-body.contrast--yellowblue #app-community-voting .voter.communitySlider .voter--selected,
body#extension-body.contrast--yellowblue #app-community-voting .voter.communitySlider .voter--active,
body#extension-body.contrast--blueyellow #app-community-voting .voter.communitySlider .voter--selected,
body#extension-body.contrast--blueyellow #app-community-voting .voter.communitySlider .voter--active,
body#extension-body.contrast--greenblack #app-community-voting .voter.communitySlider .voter--selected,
body#extension-body.contrast--greenblack #app-community-voting .voter.communitySlider .voter--active,
body#extension-body.contrast--redcyan #app-community-voting .voter.communitySlider .voter--selected,
body#extension-body.contrast--redcyan #app-community-voting .voter.communitySlider .voter--active {
  background: var(--black);
  background-color: var(--black);
  opacity: 1;
  background-image: repeating-linear-gradient(45deg, var(--white) 25%, transparent 25%, transparent 75%, var(--white) 75%, var(--white)), repeating-linear-gradient(45deg, var(--white) 25%, transparent 25%, transparent 75%, var(--white) 75%, var(--white));
  background-position: 0 0, 3px 3px;
  background-size: 6px 6px;
}
body#extension-body.contrast--blackwhite #app-community-voting .voter.studySlider .voter--selected,
body#extension-body.contrast--blackwhite #app-community-voting .voter.studySlider .voter--active,
body#extension-body.contrast--whiteblack #app-community-voting .voter.studySlider .voter--selected,
body#extension-body.contrast--whiteblack #app-community-voting .voter.studySlider .voter--active,
body#extension-body.contrast--yellowblue #app-community-voting .voter.studySlider .voter--selected,
body#extension-body.contrast--yellowblue #app-community-voting .voter.studySlider .voter--active,
body#extension-body.contrast--blueyellow #app-community-voting .voter.studySlider .voter--selected,
body#extension-body.contrast--blueyellow #app-community-voting .voter.studySlider .voter--active,
body#extension-body.contrast--greenblack #app-community-voting .voter.studySlider .voter--selected,
body#extension-body.contrast--greenblack #app-community-voting .voter.studySlider .voter--active,
body#extension-body.contrast--redcyan #app-community-voting .voter.studySlider .voter--selected,
body#extension-body.contrast--redcyan #app-community-voting .voter.studySlider .voter--active {
  background: var(--white);
  background-color: var(--white);
  opacity: 1;
  background-image: repeating-linear-gradient(45deg, var(--black) 0, var(--black) 1px, transparent 0, transparent 50%);
  background-size: 10px 10px;
}