@charset "UTF-8";
/** CSS Style Guide : http://cssguidelin.es/ */ /*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
@font-face {
  font-family: "Kabrio";
  src: url("./assets/fonts/Kabrio/Kabrio-Regular.eot"); /* IE9 Compat Modes */
  src: url("./assets/fonts/Kabrio/Kabrio-Regular.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/Kabrio/Kabrio-Regular.woff") format("woff"), url("./assets/fonts/Kabrio/Kabrio-Regular.woff2") format("woff2"), url("./assets/fonts/Kabrio/Kabrio-Regular.ttf") format("truetype"); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Kabrio";
  src: url("./assets/fonts/Kabrio/Kabrio-Bold.eot"); /* IE9 Compat Modes */
  src: url("./assets/fonts/Kabrio/Kabrio-Bold.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/Kabrio/Kabrio-Bold.woff") format("woff"), url("./assets/fonts/Kabrio/Kabrio-Bold.woff2") format("woff2"), url("./assets/fonts/Kabrio/Kabrio-Bold.ttf") format("truetype"); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "Kabrio";
  src: url("./assets/fonts/Kabrio/Kabrio-BoldItalic.eot"); /* IE9 Compat Modes */
  src: url("./assets/fonts/Kabrio/Kabrio-BoldItalic.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/Kabrio/Kabrio-BoldItalic.woff") format("woff"), url("./assets/fonts/Kabrio/Kabrio-BoldItalic.woff2") format("woff2"), url("./assets/fonts/Kabrio/Kabrio-BoldItalic.ttf") format("truetype"); /* Safari, Android, iOS */
  font-style: italic;
  font-weight: 700;
}
@font-face {
  font-family: "Kabrio";
  src: url("./assets/fonts/Kabrio/Kabrio-Extrabold.eot"); /* IE9 Compat Modes */
  src: url("./assets/fonts/Kabrio/Kabrio-Extrabold.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/Kabrio/Kabrio-Extrabold.woff") format("woff"), url("./assets/fonts/Kabrio/Kabrio-Extrabold.woff2") format("woff2"), url("./assets/fonts/Kabrio/Kabrio-Extrabold.ttf") format("truetype"); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 900;
}
@font-face {
  font-family: "Lato";
  src: url("./assets/fonts/Lato/Lato-Bold.eot"); /* IE9 Compat Modes */
  src: url("./assets/fonts/Lato/Lato-Bold.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/Lato/Lato-Bold.woff") format("woff"), url("./assets/fonts/Lato/Lato-Bold.woff2") format("woff2"), url("./assets/fonts/Lato/Lato-Bold.ttf") format("truetype"); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "Lato";
  src: url("./assets/fonts/Lato/Lato-Italic.eot"); /* IE9 Compat Modes */
  src: url("./assets/fonts/Lato/Lato-Italic.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/Lato/Lato-Italic.woff") format("woff"), url("./assets/fonts/Lato/Lato-Italic.woff2") format("woff2"), url("./assets/fonts/Lato/Lato-Italic.ttf") format("truetype"); /* Safari, Android, iOS */
  font-style: italic;
  font-weight: 400;
}
@font-face {
  font-family: "Lato Light";
  src: url("./assets/fonts/Lato/Lato-Light.eot"); /* IE9 Compat Modes */
  src: url("./assets/fonts/Lato/Lato-Light.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/Lato/Lato-Light.woff") format("woff"), url("./assets/fonts/Lato/Lato-Light.woff2") format("woff2"), url("./assets/fonts/Lato/Lato-Light.ttf") format("truetype"); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: "Lato";
  src: url("./assets/fonts/Lato/Lato-Regular.eot"); /* IE9 Compat Modes */
  src: url("./assets/fonts/Lato/Lato-Regular.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/Lato/Lato-Regular.woff") format("woff"), url("./assets/fonts/Lato/Lato-Regular.woff2") format("woff2"), url("./assets/fonts/Lato/Lato-Regular.ttf") format("truetype"); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("./assets/fonts/SourceSansPro/sourcesanspro-black-webfont.eot");
  src: url("./assets/fonts/SourceSansPro/sourcesanspro-black-webfont.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/SourceSansPro/sourcesanspro-black-webfont.woff2") format("woff2"), url("./assets/fonts/SourceSansPro/sourcesanspro-black-webfont.woff") format("woff"), url("./assets/fonts/SourceSansPro/sourcesanspro-black-webfont.ttf") format("truetype"), url("./assets/fonts/SourceSansPro/sourcesanspro-black-webfont.svg#source_sans_problack") format("svg");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("./assets/fonts/SourceSansPro/sourcesanspro-blackitalic-webfont.eot");
  src: url("./assets/fonts/SourceSansPro/sourcesanspro-blackitalic-webfont.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/SourceSansPro/sourcesanspro-blackitalic-webfont.woff2") format("woff2"), url("./assets/fonts/SourceSansPro/sourcesanspro-blackitalic-webfont.woff") format("woff"), url("./assets/fonts/SourceSansPro/sourcesanspro-blackitalic-webfont.ttf") format("truetype"), url("./assets/fonts/SourceSansPro/sourcesanspro-blackitalic-webfont.svg#source_sans_problack_italic") format("svg");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("./assets/fonts/SourceSansPro/sourcesanspro-bold-webfont.eot");
  src: url("./assets/fonts/SourceSansPro/sourcesanspro-bold-webfont.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/SourceSansPro/sourcesanspro-bold-webfont.woff2") format("woff2"), url("./assets/fonts/SourceSansPro/sourcesanspro-bold-webfont.woff") format("woff"), url("./assets/fonts/SourceSansPro/sourcesanspro-bold-webfont.ttf") format("truetype"), url("./assets/fonts/SourceSansPro/sourcesanspro-bold-webfont.svg#source_sans_probold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("./assets/fonts/SourceSansPro/sourcesanspro-bolditalic-webfont.eot");
  src: url("./assets/fonts/SourceSansPro/sourcesanspro-bolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/SourceSansPro/sourcesanspro-bolditalic-webfont.woff2") format("woff2"), url("./assets/fonts/SourceSansPro/sourcesanspro-bolditalic-webfont.woff") format("woff"), url("./assets/fonts/SourceSansPro/sourcesanspro-bolditalic-webfont.ttf") format("truetype"), url("./assets/fonts/SourceSansPro/sourcesanspro-bolditalic-webfont.svg#source_sans_probold_italic") format("svg");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("./assets/fonts/SourceSansPro/sourcesanspro-italic-webfont.eot");
  src: url("./assets/fonts/SourceSansPro/sourcesanspro-italic-webfont.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/SourceSansPro/sourcesanspro-italic-webfont.woff2") format("woff2"), url("./assets/fonts/SourceSansPro/sourcesanspro-italic-webfont.woff") format("woff"), url("./assets/fonts/SourceSansPro/sourcesanspro-italic-webfont.ttf") format("truetype"), url("./assets/fonts/SourceSansPro/sourcesanspro-italic-webfont.svg#source_sans_proitalic") format("svg");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("./assets/fonts/SourceSansPro/sourcesanspro-regular-webfont.eot");
  src: url("./assets/fonts/SourceSansPro/sourcesanspro-regular-webfont.eot?#iefix") format("embedded-opentype"), url("./assets/fonts/SourceSansPro/sourcesanspro-regular-webfont.woff2") format("woff2"), url("./assets/fonts/SourceSansPro/sourcesanspro-regular-webfont.woff") format("woff"), url("./assets/fonts/SourceSansPro/sourcesanspro-regular-webfont.ttf") format("truetype"), url("./assets/fonts/SourceSansPro/sourcesanspro-regular-webfont.svg#source_sans_proregular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.cbi {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  color: var(--icon-color);
  margin: var(--icon-margin);
}
.cbi:hover {
  color: var(--icon-color--hover);
}

.cbi svg.cbi__svg {
  overflow: visible;
  position: relative;
}

.cbi-s {
  width: var(--icon-size-s, 16px);
  height: var(--icon-size-s, 16px);
}

.cbi-m {
  width: var(--icon-size-m, 24px);
  height: var(--icon-size-m, 24px);
}

.cbi-l {
  width: var(--icon-size-l, 32px);
  height: var(--icon-size-l, 32px);
}

.cbi-xl {
  width: var(--icon-size-xl, 48px);
  height: var(--icon-size-xl, 48px);
}

.social-app-options__btn--text {
  margin: 0 0 0 1ch;
}

/* Work In Progress */
/* ICON Sprites */
@keyframes sprite-in {
  from {
    left: 0px;
  }
  to {
    left: calc(var(--icon-sprite-steps) * -1 * var(--icon-width));
  }
}
@keyframes sprite-out {
  from {
    left: calc(var(--icon-sprite-steps) * -1 * var(--icon-width));
  }
  to {
    left: 0px;
  }
}
/* WIP */
.cbi.cbi-animated {
  --icon-sprite-steps: 4;
  animation: sprite-in 0.15s steps(var(--icon-sprite-steps)) alternate-reverse;
}

.cbi.cbi-animated:hover svg.cbi__svg {
  animation: sprite-in 0.15s steps(var(--icon-sprite-steps)) forwards;
}

/* ICON Sprites */
/* Work In Progress */
.rte-autocomplete {
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
  z-index: 1000;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--text-sm);
}

.rte-autocomplete:before {
  content: "";
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: -7px;
  left: 9px;
}

.rte-autocomplete:after {
  content: "";
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  position: absolute;
  top: -6px;
  left: 10px;
}

.rte-autocomplete > li.loading {
  background: url("../assets/images/autocomplete_loading.gif") center no-repeat;
  height: 16px;
}

.rte-autocomplete > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: #333;
  white-space: nowrap;
  text-decoration: none;
}

.rte-autocomplete > li > a:hover, .rte-autocomplete > li > a:focus, .rte-autocomplete:hover > a, .rte-autocomplete:focus > a {
  color: #fff;
  text-decoration: none;
  background-color: #0081c2;
  background: linear-gradient(to bottom, #08c, #0077b3);
  background-repeat: repeat-x;
}

.rte-autocomplete > .active > a, .rte-autocomplete > .active > a:hover, .rte-autocomplete > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #0081c2;
  background: linear-gradient(to bottom, #08c, #0077b3);
  background-repeat: repeat-x;
  outline: 0;
}

span#autocomplete {
  font-weight: bold;
}

.react-autocomplete__results {
  width: 100%;
  max-height: 200px;
  overflow: auto;
}

.react-autocomplete__result {
  cursor: pointer;
}

.react-autocomplete__result--active {
  color: magenta;
  background-color: magenta;
}

.react-autocomplete__link {
  text-decoration: none;
}

/* Story / Book Mode Toggler */
.ui-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  min-width: 40px;
  height: 20px;
  background: var(--toogle-story-book-bg);
  border-radius: var(--toogle-story-radius);
  vertical-align: sub;
  cursor: pointer;
  outline: 0;
  border: 1px solid var(--toogle-story-book-border);
  box-shadow: var(--toogle-story-book-shadow);
  box-sizing: content-box;
}
.ui-switch.on {
  background: var(--toogle-story-book-bg--on);
}
.ui-switch:hover, .ui-switch:focus {
  background: var(--toogle-story-book-bg--hover);
}
.ui-switch:hover .ui-switch__handler, .ui-switch:focus .ui-switch__handler {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  opacity: 0.8;
}

.ui-switch__handler {
  position: absolute;
  display: inline-block;
  height: 20px;
  width: 20px;
  background: var(--toogle-story-book-handler);
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--toogle-story-handler-radius);
  top: 0;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/*  
  #legacyfix
*/
.no-borderradius .ui-switch {
  background: transparent url(../assets/images/switch.png) no-repeat 0 1px;
  border: 0;
  margin-bottom: -3px;
}
.no-borderradius .ui-switch.on {
  background-color: transparent;
  background-position: 0 -40px;
}
.no-borderradius .ui-switch:hover, .no-borderradius .ui-switch:focus {
  background-color: transparent;
  background-position: 0 -19px;
}
.no-borderradius .ui-switch:hover .ui-switch__handler, .no-borderradius .ui-switch:focus .ui-switch__handler {
  background-color: transparent;
}
.no-borderradius .ui-switch__handler {
  height: 20px;
  width: 20px;
  border: 0;
  background: transparent url(../assets/images/switch.png) no-repeat -45px 1px;
}

.ui-select {
  display: inline-block;
  position: relative;
  padding: 3px 4px;
  outline: 0;
  cursor: pointer;
  border: 1px solid magenta;
  line-height: 1.25;
}
.ui-select:focus, .ui-select:hover {
  color: #666;
}

.ui-select__selected:before {
  margin-right: 6px;
  vertical-align: middle;
  font-size: var(--text-sm);
}

.ui-select__options {
  position: absolute;
  top: 26px;
  right: -18px;
  min-width: 141px;
  text-align: center;
  z-index: 2;
  background: var(--toggle-button-bg);
  list-style: none;
  padding: 3px 0 7px;
  margin: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border: 1px solid magenta;
}
.ui-select__options:before, .ui-select__options:after {
  content: "";
  position: absolute;
  top: -20px;
  right: 12px;
  border: 10px solid transparent;
  border-bottom-color: var(--toggle-button-bg);
}
.ui-select__options:before {
  top: -21px;
  border-bottom-color: #fff;
}
.ui-select__options.ui-select__options--zero-padding {
  padding: 0;
}

.ui-select__option {
  margin: 0;
  padding: 0;
}

.ui-select__link {
  display: block;
  padding: 5px 10px;
  cursor: pointer;
}
.ui-select__link.ui-select__link--primary {
  background: var(--primary);
  color: var(--text-color-inverse);
}

.ui-draggable {
  cursor: grab;
  transition: opacity 0.3;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ui-draggable.dragging {
  z-index: 1;
  opacity: 0.8;
}
.ui-draggable.disabled {
  cursor: normal;
}
.ui-draggable--dimmed {
  opacity: 0.6;
}
.ui-draggable * {
  pointer-events: none;
}

.ui-dummy {
  opacity: 0.3;
  cursor: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

*[draggable=true] {
  -moz-user-select: none;
  -khtml-user-drag: element;
  cursor: move;
}

.ui-te {
  position: relative;
  display: inline-block;
}

.ui-te--active .ui-te__btn {
  border-color: #e600e6;
}

.ui-te__btn {
  border: 1px solid transparent;
  border-bottom: 0;
  background: magenta;
  outline: 0;
}

.ui-te__context {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: -1px;
  z-index: 2;
  white-space: nowrap;
  padding: 8px;
  border: 1px solid #e600e6;
  background: magenta;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15);
}

/* cBook Progress Circle */
.progress-display {
  transform: rotate(45deg);
}
.progress-display .perc-val {
  color: var(--footer-color);
}

.progress-display--compact .perc-val {
  position: absolute;
  right: -13px;
  top: -3px;
  transform-origin: center;
  transform: rotate(-45deg);
  display: block;
  width: 5ch;
  padding-left: 2px;
  font-size: var(--text-sm);
  font-weight: 100;
}

.progress-display__svg {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-display__background {
  stroke: var(--gray-200);
  stroke-width: 6px;
}

.progress-display__bar {
  stroke: var(--primary-color);
  stroke-width: 6px;
}

#cbook-body,
#extension-body,
#app-responsive-hotspots-backend,
#editor-body,
#tinymce,
::before,
::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-width: 1078px;
  --cbook-height: 720px;
  --stage-width: 100%;
  --stage-height: calc(var(--cbook-height) - var(--header) - var(--footer) - var(--padding-top-bot) - var(--padding-top-bot));
  --font-paragraph: Kabrio, Lato, Segoe UI, Aria, Source Sans Pro, Roboto;
  --font-heading: Kabrio, Lato, Segoe UI, Aria, Source Sans Pro, Roboto;
  --font-overline: var(--font-paragraph);
  --font-heading: var(--font-paragraph);
  --font-caption: var(--font-paragraph);
  --font-label: monospace;
  --font-icon: "";
  --rl-black: #000000;
  --rl-white: #ffffff;
  --gray-hue: 216;
  --gray-sat: 8%;
  --black: hsl(var(--gray-hue), var(--gray-sat), 8%);
  --gray-950: hsl(var(--gray-hue), var(--gray-sat), 10%);
  --gray-900: hsl(var(--gray-hue), var(--gray-sat), 12%);
  --gray-900-rgb: 21, 28, 40;
  --gray-850: hsl(var(--gray-hue), var(--gray-sat), 16%);
  --gray-800: hsl(var(--gray-hue), var(--gray-sat), 21%);
  --gray-800-rgb: 45, 52, 62;
  --gray-750: hsl(var(--gray-hue), var(--gray-sat), 25%);
  --gray-700: hsl(var(--gray-hue), var(--gray-sat), 29%);
  --gray-600: hsl(var(--gray-hue), var(--gray-sat), 38%);
  --gray-500: hsl(var(--gray-hue), var(--gray-sat), 52%);
  --gray-400: hsl(var(--gray-hue), var(--gray-sat), 63%);
  --gray-300: hsl(var(--gray-hue), var(--gray-sat), 74%);
  --gray-350: hsl(var(--gray-hue), var(--gray-sat), 85%);
  --gray-200: hsl(var(--gray-hue), var(--gray-sat), 92%);
  --gray-200-rgb: 185, 187, 190;
  --gray-250: hsl(var(--gray-hue), var(--gray-sat), 89%);
  --gray-100: hsl(var(--gray-hue), var(--gray-sat), 95%);
  --gray-100-rgb: 241, 241, 242;
  --gray-150: hsl(var(--gray-hue), var(--gray-sat), 96%);
  --white: hsl(var(--gray-hue), var(--gray-sat), 100%);
  --contrast-yellow: yellow;
  --contrast-yellow-rgb: 255, 255, 0;
  --contrast-blue: blue;
  --contrast-blue-rgb: 0, 0, 255;
  --contrast-black: black;
  --contrast-black-rgb: 0, 0, 0;
  --contrast-white: white;
  --contrast-white-rgb: 255, 255, 255;
  --contrast-green: green;
  --contrast-green-rgb: 0, 128, 0;
  --contrast-red: darkred;
  --contrast-red-rgb: 139, 0, 0;
  --contrast-cyan: cyan;
  --contrast-cyan-rgb: 0, 255, 255;
  --light-color-1: rgb(255 255 255);
  --light-color-2: rgb(255 255 255);
  --light-color-3: rgb(153 159 168);
  --light-color-4: rgb(183 188 194);
  --light-border: rgb(255 255 255);
  --dark-color-1: rgb(28 30 33);
  --dark-color-2: rgb(28 30 33);
  --dark-color-3: rgb(89 95 105);
  --dark-color-4: rgb(123 131 142);
  --dark-border: rgb(255 255 255);
  --auto-color-1: rgb(68 73 80);
  --auto-color-2: rgb(28 30 33);
  --auto-color-3: rgb(233 234 236);
  --auto-color-4: rgb(255 255 255);
  --auto-border: rgb(255 255 255);
  --text-color: var(--black);
  --text-color-inverse: var(--white);
  --link-color: var(--black);
  --link-hover: var(--primary-color);
  --link-active: var(--focus-color);
  --link-visited: var(--secondary-color);
  --cbook-grey: var(--gray-200);
  --cbook-page-bg: var(--gray-200);
  --cbook-outline-color: transparent;
  --frame-bg: var(--cbook-grey);
  --frame-bg-color: transparent;
  --chart-bg-color: rgba(var(--gray-100-rgb),0.4);
  --page-bg-color: linear-gradient(45deg, var(--gray-200), var(--gray-100));
  --stage-bg-color: transparent;
  --primary-color: rgb(0, 177, 185);
  --primary-color-rgb: 0, 177, 185;
  --primary-color--hover: rgba( var(--primary-color-rgb), 0.5 );
  --secondary-color: rgb(35, 123, 161);
  --secondary-color-rgb: 35, 123, 161;
  --secondary-color--hover: rgba( var(--secondary-color-rgb), 0.5 );
  --tertiary-color: rgb(241, 141, 2);
  --tertiary-color-rgb: 241, 141, 2;
  --tertiary-color--hover: rgba( var(--tertiary-color-rgb), 0.5 );
  --client-1-color: rgb(250, 188, 49);
  --client-2-color: rgb(241, 141, 2);
  --client-3-color: rgb(35, 123, 161);
  --client-4-color: rgb(0, 177, 185);
  --primary: magenta;
  --success: #5cb85c;
  --danger: #d9534f;
  --warning: #f0ad4e;
  --info: #5bc0de;
  --cbook360: #00b1b9;
  --correct: var(--success);
  --wrong: var(--danger);
  --missing: var(--warning);
  --success-color--hover: rgba(92, 184, 92, 0.8);
  --danger-color--hover: rgba(217, 83, 79, 0.8);
  --warning-color--hover: rgba(240, 173, 78, 0.8);
  --info-color--hover: rgba(91, 192, 222, 0.8);
  --success-bg: rgba(92, 184, 92, 0.2);
  --danger-bg: rgba(217, 83, 79, 0.2);
  --warning-bg: rgba(240, 173, 78, 0.2);
  --info-bg: rgba(91, 192, 222, 0.2);
  --success-bg--hover: rgba(92, 184, 92, 0.15);
  --danger-bg--hover: rgba(217, 83, 79, 0.15);
  --warning-bg--hover: rgba(240, 173, 78, 0.15);
  --info-bg--hover: rgba(91, 192, 222, 0.15);
  --success-outline: #4cae4c;
  --danger-outline: #d43f3a;
  --warning-outline: #eea236;
  --info-outline: #46b8da;
  --success-outline--hover: #80c780;
  --danger-outline--hover: #e27c79;
  --warning-outline--hover: #f4c37d;
  --info-outline--hover: #85d0e7;
  --cbook-border-radius: var(--radius-sm);
  --cbook-menu-radius: var(--radius-sm);
  --cbook-social-radius: var(--cbook-border-radius);
  --cbook-shadow-container: rgb(38, 57, 77) 0px 20px 30px -10px;
  --cbook-menu-border: 2px solid transparent;
  --cbook-social-border: 2px solid transparent;
  --border-off: 1px solid transparent;
  --focus-color: rgb(48, 148, 248);
  --focus-color-rgb: 48, 148, 248;
  --focus-color-0: rgba(var(--focus-color-rgb), 0);
  --focus-color-1: rgba(var(--focus-color-rgb), 1);
  --focus-color-07: rgba(var(--focus-color-rgb), 0.3);
  --focus-dropshadow--off: var(--focus-color-0);
  --focus-outline--off: 0px solid var(--focus-color-0);
  --focus-dropshadow: var(--focus-color-07);
  --focus-outline: 2px solid var(--focus-color-1);
  --skip-to-content-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  --header: 50px;
  --footer: var(--header);
  --padding-top-bot: var(--header);
  --padding-re-li: 48px;
  --social-width: 50%;
  --space-xl: 4ch;
  --space-lg: 2ch;
  --space-md: 1ch;
  --space-sm: 0.8ch;
  --space-xs: 0.5ch;
  --space-xxs: 0.3ch;
  --space-zero: 0;
  --radius-rnd: 10rem;
  --radius-md: 1rem;
  --radius-sm: 0.6rem;
  --radius-xs: 5px;
  --radius-zero: 0;
  --text-multiplier: 1;
  --text-xxxl: calc(2.00rem * var(--text-multiplier));
  --text-xxl: calc(1.85rem * var(--text-multiplier));
  --text-xl: calc(1.5rem * var(--text-multiplier));
  --text-lg: calc(1.2rem * var(--text-multiplier));
  --text-md: calc(0.95rem * var(--text-multiplier));
  --text-sm: calc(0.85rem * var(--text-multiplier));
  --text-xs: calc(0.8rem * var(--text-multiplier));
  --text-xxs: calc(0.75rem * var(--text-multiplier));
  --text-xxxs: calc(0.7rem * var(--text-multiplier));
  --text-overline: var(--text-xs);
  --text-display: var(--text-xxxl);
  --text-caption: var(--text-lg);
  --text-description: var(--text-md),
  --icon-margin: 0 auto;
  --icon-padding: 0;
  --icon-size-s: 16px;
  --icon-size-m: 24px;
  --icon-size-l: 32px;
  --icon-size-xl: 48px;
  --border-radius: var(--radius-xs) var(--radius-xs) var(--radius-xs) var(--radius-xs);
  --paddings: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-xs);
  --paddings--wide: var(--space-sm) var(--space-md) var(--space-sm) var(--space-md);
  --paddings--zero: var(--space-zero);
  --margins: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-xs);
  --margins--wide: var(--space-sm) var(--space-md) var(--space-sm) var(--space-md);
  --margins--zero: var(--space-zero);
  --overlay-panel-blur: none;
  --overlay-panel-bg: transparent;
  --overlay-panel-text: var(--text-color);
  --header-title: inherit;
  --header-color: var(--gray-700);
  --header-bg: var(--gray-100);
  --footer-color: var(--gray-700);
  --footer-bg: var(--gray-100);
  --menu-color: var(--text-color);
  --menu-bg: inherit;
  --menu-modal-background: var(--modal-screen);
  --menu-color--hover: var(--primary-color);
  --menu-bg--hover: inherit;
  --menu-border-radius: var(--radius-rnd);
  --menu-text: var(--text-color);
  --menu-sm-head: var(--primary-color);
  --menu-search-box-bg: var(--gray-100);
  --menu-search-form-border: var(--input-border);
  --menu-search-text: var(--white);
  --menu-search-bg: var(--white);
  --menu-search-btn-bg: var(--danger);
  --menu-search-close: var(--white);
  --menu-chapter-bg: var(--white);
  --menu-chapter-arrow: var(--gray-200);
  --menu-chapter-hover-bg: var(--white);
  --menu-chapter-open-bg: var(--menu-chapter-hover-bg );
  --menu-chapter-super: var(--primary-color);
  --menu-chapter-title: var(--gray-900);
  --menu-chapter-border: 1px solid var(--gray-200);
  --menu-list-indicator--not-visited: var(--gray-200);
  --menu-list-indicator--visited: var(--primary-color);
  --menu-close-display: none;
  --menu-close-size: 34px;
  --menu-close-position-left: initial;
  --menu-close-position-right: calc(var(--menu-close-size) * -1);
  --menu-close-color: var(--white);
  --menu-close-bg: var(--black);
  --menu-close-color--hover: var(--white);
  --menu-close-bg--hover: var(--primary-color);
  --menu-close-radius: var(--radius-zero) var(--radius-zero) var( --radius-zero) var(--radius-zero);
  --social-close-radius: var(--radius-zero) var(--radius-zero) var( --radius-zero) var(--radius-zero);
  --menu-panel-bg: linear-gradient(to top, var(--gray-200) 0%, var(--gray-250) 100%);
  --menu-social-bg: linear-gradient(to top, var(--gray-200)0%, var(--gray-250) 100%);
  --menu-hero-bg: var(--menu-panel-bg);
  --menu-hero: var(--menu-hero-bg);
  --menu-tools: var(--menu-hero-bg);
  --menu-tools-border: border-bottom: 1px solid var(--gray-700);
  --menu-tools-shadow: var(--social-tools-shadow);
  --menu-body: var(--menu-hero-bg);
  --menu-chart-bg: var(--gray-200);
  --menu-chart-hover-bg: var(--gray-150);
  --menu-chart-active-bg: var(--primary-color);
  --menu-chart-active-text: var(--gray-800);
  --menu-chart-text: var(--gray-500);
  --menu-chart-text--not-visited: var(--menu-chart-text);
  --menu-chart-text--visited: var(--gray-900);
  --menu-fav: var(--gray-500);
  --menu-fav-active: var(--primary-color);
  --footer-btn-text: var(--gray-700);
  --footer-btn-bg: inherit;
  --footer-btn-shadow: none;
  --footer-btn-text--hover: var(--primary-color);
  --footer-btn-bg--hover: inherit;
  --chart-progress-text: var(--gray-700);
  --chart-progress-text--hover: var(--primary-color);
  --chart-content-padding: var(--space-lg);
  --social-close-position-left: calc(var(--menu-close-size) * -1);
  --social-close-position-right: initial;
  --social-hero-bg: var(--menu-social-bg);
  --social-hero: var(--social-hero-bg);
  --social-tools: transparent;
  --social-tools-border: border-bottom: 1px solid var(--gray-700);
  --social-tools-shadow: rgb(0 0 0 / 20%) 0px 15px 20px -20px;
  --social-body: var(--menu-social-bg);
  --social-modal-background: var(--modal-screen);
  --social-list-bg: var(--gray-150);
  --social-list-text: var(--black);
  --social-list-notes-bg: rgba(236, 236, 193, 0.7);
  --social-list-border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) var(--radius-sm);
  --social-list-box-shadow: rgb(50 50 105 / 15%) 0px 2px 5px 0px, rgb(0 0 0 / 5%) 0px 1px 1px 0px;
  --social-list-opacity: 0.8;
  --social-list-bg--hover: var(--menu-chart-hover-bg);
  --social-list-bg-hidden--hover: var(--gray-300);
  --social-list-text--hover: var(--social-list-text);
  --social-list-border-radius--hover: var(--social-list-border-radius);
  --social-list-box-shadow--hover: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
  --social-list-opacity--hover: 1;
  --social-list-title-color: var(--black);
  --social-list-meta-color: var(--gray-700);
  --social-sphere-bg: transparent;
  --social-sphere-hover-bg: var(--gray-200);
  --social-list-icon-background: inherit;
  --social-list-icon-border-radius: var(--radius-rnd);
  --social-msg-bg: var(--white);
  --social-msg-reply-bg: var(--white);
  --social-msg-own-highlight: var(--secondary-color);
  --social-msg-own-bg: rgba( var(--primary-color-rgb), 15%);
  --social-msg-own-text: var(--text-color);
  --social-msg-own-user: var(--social-msg-own-highlight);
  --social-msg-own-border: 5px;
  --social-msg-grp-highlight: var(--primary-color);
  --social-msg-grp-bg: rgba( var(--secondary-color-rgb), 15%);
  --social-msg-grp-text: var(--text-color);
  --social-msg-grp-user: var(--social-msg-grp-highlight);
  --social-msg-grp-border: 5px;
  --slide-link-padding: 0.3ch 1ch;
  --slide-link-margin: 0 1ch;
  --slide-link-background: var(--gray-800);
  --slide-link-color: var(--white);
  --slide-border: none;
  --slide-border-radius: 3px;
  --modal-bg: var(--gray-300);
  --modal-bg-blur: backdrop-filter(0px);
  --modal-box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
  --modal-border: 4px solid transparent;
  --modal-screen: rgba(0, 0, 0, 0.7);
  --modal-width: min(100%, 700px);
  --modal-quick-fav-width: min(100%, 700px);
  --icon-color: inherit;
  --icon-color--hover: inherit;
  --icon-color-1: rgb(250, 188, 49);
  --icon-color-1--hover: rgb(241, 141, 2);
  --icon-color-2: rgb(35, 123, 161);
  --icon-color-2--hover: rgb(0, 177, 185);
  --notes-bg-color: hsl(60deg 53% 95%);
  --notes-text: var(--rl-black);
  --notes-input-bg-color: hsl(60deg 53% 90%);
  --button-text: var(--gray-800);
  --button-background: var(--white);
  --button-text--hover: var(--primary-color);
  --button-background--hover: var(--gray-100);
  --button-success-color: var(--success);
  --button-success-bg: var(--success-bg);
  --button-success-outline: var(--success-outline);
  --button-success-color--hover: var(--success-color--hover);
  --button-success-bg--hover: var(--success-bg--hover);
  --button-success-outline--hover: var(--success-outline--hover);
  --button-danger-color: var(--danger);
  --button-danger-bg: var(--danger-bg);
  --button-danger-outline: var(--danger-outline);
  --button-danger-color--hover: var(--danger-color--hover);
  --button-danger-bg--hover: var(--danger-bg--hover);
  --button-danger-outline--hover: var(--danger-outline--hover);
  --button-padding: var(--paddings--wide);
  --button-margin: var(--margins);
  --button-border-radius: var(--border-radius);
  --button-border: 0px solid var(--gray-200);
  --button-drop-shadow-off: rgba(0, 0, 0, 0.0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.00) 0px 0px 0px 0px;
  --button-drop-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  --button-drop-shadow--hover: rgba(0, 0, 0, 0.4) 2px 5px 9px, rgba(0, 0, 0, 0.1) 0px 2px 4px -1px;
  --button-secondary-text: var(--gray-800);
  --button-secondary-background: var(--gray-100);
  --button-secondary-text--hover: var(--primary-color);
  --button-secondary-background--hover: var(--gray-200);
  --button-secondary-border: 1px solid var(--gray-200);
  --button-chart-text: var(--gray-100);
  --button-chart-background: var(--gray-900);
  --button-chart-text--hover: var(--primary-color);
  --button-chart-background--hover: var(--gray-700);
  --button-nav-padding: var(--paddings--zero);
  --button-nav-margin: var(--margins--zero);
  --button-nav-radius: var(--radius-rnd);
  --button-nav-size: 40px;
  --button-nav-position: calc(50% + var(--button-nav-size) / 2);
  --button-nav-left: calc(var(--button-nav-size) / -2 );
  --button-nav-right: calc(var(--button-nav-size) / -2 );
  --button-nav-smart-position: 40%;
  --button-nav-border: none;
  --button-nav-color: var(--white);
  --button-nav-bg: var(--black);
  --button-nav-color--hover: var(--white);
  --button-nav-bg--hover: var(--primary-color);
  --button-nav-opacity: 0.9;
  --button-nav-opacity--hover: 1;
  --sequence-player-bar-height: 24px;
  --sequence-player-progress-height: 5px;
  --sequence-player-progress-width: 70%;
  --sequence-player-progress-radius: var(--sequence-player-progress-height);
  --sequence-player-progress-color: var(--gray-800);
  --sequence-player-progress-bg: var(--gray-250);
  --sequence-player-icon-size: 20px;
  --input-margin: var(--button-margin);
  --input-padding: var(--button-padding);
  --input-text: var(--gray-800);
  --input-bg: var(--white);
  --input-height: var(--icon-size-m);
  --input-width: 100%;
  --input-border-radius: var(--border-radius);
  --input-border: 1px solid var(--gray-200);
  --toggle-button-text: var(--gray-800);
  --toggle-button-bg: var(--gray-100);
  --toggle-button-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  --toggle-button-padding: var(--space-xs) var(--space-md);
  --toggle-button-margin: var(--space-xs) var(--space-md);
  --toggle-button-border-radius: var(--border-radius);
  --toggle-button-border: 0;
  --toggle-button-text--hover: var(--primary-color);
  --toggle-button-bg--hover: var(--gray-150);
  --toggle-button-box-shadow--hover: rgba(0, 0, 0, 0.2) 0px 4px 7px -1px, rgba(0, 0, 0, 0.09) 0px 2px 5px -1px;
  --toggle-button--pressed-text: var(--gray-800);
  --toggle-button--pressed-bg: var(--gray-100);
  --toggle-button--pressed-box-shadow: none;
  --toggle-button--pressed-text--hover: var(--primary-color);
  --toggle-button--pressed-bg--hover: var(--gray-150);
  /* Book Mode Switch */
  --toogle-story-book-bg: var(--gray-300);
  --toogle-story-book-bg--on: var(--gray-400);
  --toogle-story-book-bg--hover: var(--gray-300);
  --toogle-story-book-handler: var(--gray-200);
  --toogle-story-book-te-bg: var(--gray-200);
  --toogle-story-book-border: var(--gray-500);
  --toogle-story-book-shadow: 1px 1px 5px rgba(0, 0, 0, .25) inset;
  --zindex-accessibility: 1800;
  --zindex-tooltip: 1700;
  --zindex-popover: 1600;
  --zindex-modal: 1500;
  --zindex-modal-backdrop: 1400;
  --zindex-cbook-ui: 1350;
  --zindex-fixed: 1300;
  --zindex-cbook-menus: 1250;
  --zindex-sticky: 1200;
  --zindex-dropdown: 1000;
  --header-z-index: var(--zindex-cbook-ui);
  --footer-z-index: var(--zindex-cbook-ui);
  --social-z-index: var(--zindex-cbook-menus);
  --menu-z-index: var(--zindex-cbook-menus);
  /* Helper Controls */
  --header-width: 100%;
  --header-position: relative;
  --header-top: initial;
  --footer-width: 100%;
  --footer-position: relative;
  --footer-bot: initial;
  --footer-alignment: space-between;
  --footer-paddings: var(--space-xs) var(--space-xs);
  --footer-progress: block;
  --footer-pages: flex;
  --footer-book-story-switch: flex;
  --footer-qick-fav: block;
  --footer-bonus: block;
  --footer-notes: block;
  --footer-activity: block;
  --footer-qick-fav-label: inline-block;
  --footer-bonus-label: inline-block;
  --footer-notes-label: inline-block;
  --footer-activity-label: inline-block;
  --show-favourites-label: flex;
  --menu-list-indicator--display: flex;
  --header-title--display: block;
  --toogle-story-radius: var(--radius-md);
  --toogle-story-handler-radius: 50%;
  --social-position: calc( var(--header));
  --social-height: calc(var(--cbook-height) - var(--header) - var(--footer) - var(--padding-top-bot) - var(--padding-top-bot));
  --menu-position: calc( var(--header));
  --menu-height: calc(var(--cbook-height) - var(--header) - var(--footer) - var(--padding-top-bot) - var(--padding-top-bot));
  --menu-width: 50%;
  --menu-search-alignment: center;
  --menu-list-width: 100%;
  --menu-list-bg: transparent;
  --menu-list-border: none;
}

/* DARK  MODE COLORS */
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 {
  --gray-hue: 216;
  --gray-sat: 8%;
  --white: hsl(var(--gray-hue), var(--gray-sat), 8%);
  --gray-150: hsl(var(--gray-hue), var(--gray-sat), 10%);
  --gray-100: hsl(var(--gray-hue), var(--gray-sat), 12%);
  --gray-100-rgb: 21, 28, 40;
  --gray-250: hsl(var(--gray-hue), var(--gray-sat), 16%);
  --gray-200: hsl(var(--gray-hue), var(--gray-sat), 21%);
  --gray-200-rgb: 45, 52, 62;
  --gray-350: hsl(var(--gray-hue), var(--gray-sat), 25%);
  --gray-300: hsl(var(--gray-hue), var(--gray-sat), 29%);
  --gray-400: hsl(var(--gray-hue), var(--gray-sat), 38%);
  --gray-500: hsl(var(--gray-hue), var(--gray-sat), 52%);
  --gray-600: hsl(var(--gray-hue), var(--gray-sat), 63%);
  --gray-700: hsl(var(--gray-hue), var(--gray-sat), 74%);
  --gray-750: hsl(var(--gray-hue), var(--gray-sat), 85%);
  --gray-800: hsl(var(--gray-hue), var(--gray-sat), 92%);
  --gray-800-rgb: 185, 187, 190;
  --gray-850: hsl(var(--gray-hue), var(--gray-sat), 89%);
  --gray-900: hsl(var(--gray-hue), var(--gray-sat), 95%);
  --gray-900-rgb: 241, 241, 242;
  --gray-950: hsl(var(--gray-hue), var(--gray-sat), 96%);
  --black: hsl(var(--gray-hue), var(--gray-sat), 100%);
}

/* DARK  MODE COLORS */
/* DARK MDOE COLORS */
@media (prefers-color-scheme: dark) {
  #cbook-body,
  #extension-body,
  #app-responsive-hotspots-backend,
  #editor-body,
  ::before,
  ::after {
    --gray-hue: 216;
    --gray-sat: 8%;
    --white: hsl(var(--gray-hue), var(--gray-sat), 8%);
    --gray-150: hsl(var(--gray-hue), var(--gray-sat), 10%);
    --gray-100: hsl(var(--gray-hue), var(--gray-sat), 12%);
    --gray-100-rgb: 21, 28, 40;
    --gray-250: hsl(var(--gray-hue), var(--gray-sat), 16%);
    --gray-200: hsl(var(--gray-hue), var(--gray-sat), 21%);
    --gray-200-rgb: 45, 52, 62;
    --gray-350: hsl(var(--gray-hue), var(--gray-sat), 25%);
    --gray-300: hsl(var(--gray-hue), var(--gray-sat), 29%);
    --gray-400: hsl(var(--gray-hue), var(--gray-sat), 38%);
    --gray-500: hsl(var(--gray-hue), var(--gray-sat), 52%);
    --gray-600: hsl(var(--gray-hue), var(--gray-sat), 63%);
    --gray-700: hsl(var(--gray-hue), var(--gray-sat), 74%);
    --gray-750: hsl(var(--gray-hue), var(--gray-sat), 85%);
    --gray-800: hsl(var(--gray-hue), var(--gray-sat), 92%);
    --gray-800-rgb: 185, 187, 190;
    --gray-850: hsl(var(--gray-hue), var(--gray-sat), 89%);
    --gray-900: hsl(var(--gray-hue), var(--gray-sat), 95%);
    --gray-900-rgb: 241, 241, 242;
    --gray-950: hsl(var(--gray-hue), var(--gray-sat), 96%);
    --black: hsl(var(--gray-hue), var(--gray-sat), 100%);
  }
}
/* DARK MDOE COLORS */
*,
*:before,
*:after {
  -webit-box-sizing: border-box;
  box-sizing: border-box;
}

/* SCROLL BARS */
::-webkit-scrollbar {
  border-radius: 8px;
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  border-radius: 8px;
  background: var(--gray-250);
}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: var(--gray-500);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-900);
}

/* Selection Style */
#cbook-html ::-moz-selection, #cbook-body ::-moz-selection, .cbook-container ::-moz-selection {
  background: var(--primary-color, initial); /* WebKit/Blink Browsers */
  color: var(--black);
}
#cbook-html ::selection,
#cbook-body ::selection,
.cbook-container ::selection {
  background: var(--primary-color, initial); /* WebKit/Blink Browsers */
  color: var(--black);
}

#cbook-html ::-moz-selection,
#cbook-body ::-moz-selection,
.cbook-container ::-moz-selection {
  background: var(--primary-color, initial); /* Gecko Browsers */
  color: var(--black, initial);
}

/* LINK Colors  */
a:link {
  color: var(--link-color);
  padding: var(--space-xxs);
  border-radius: var(--space-xxs);
}

a:visited {
  color: var(--link-visited);
  padding: var(--space-xxs);
  border-radius: var(--space-xxs);
}

a:hover {
  color: var(--link-hover);
  padding: var(--space-xxs);
  border-radius: var(--space-xxs);
}

a:active {
  color: var(--link-active);
  padding: var(--space-xxs);
  border-radius: var(--space-xxs);
}

a:focus,
a:focus-within {
  padding: var(--space-xxs);
  border-radius: var(--space-xxs);
}

#cbook-html,
#cbook-body,
.cbook-container {
  position: absolute !important;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

#extension-body {
  position: absolute !important;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#cbook-root.cbook-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--page-bg-color);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Set default font-family for Body */
body {
  font-family: var(--font-paragraph);
}

/* Set default font-size to 1 REM */
html {
  font-size: clamp(0.875rem, 0.693vw + 0.696rem, 1.25rem);
  background-color: transparent;
}

/* Set default font-stylings for alle Elements  */
div, span, p, button, input, label, section, article, * {
  font-family: inherit;
  font-size: var(--text-md);
  line-height: var(--text-md);
}

/* fix bug, css vars dont work on strong, italic */
italic, strong, b, strong *, b *, em, i, em *, i * {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.cbook-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  width: var(--cbook-width);
  height: var(--cbook-height);
  background-color: var(--frame-bg-color);
}

.book-wrapper {
  position: relative;
  overflow: visible;
  width: calc(var(--cbook-width) - var(--padding-re-li) - var(--padding-re-li));
  height: calc(var(--cbook-height) - var(--padding-top-bot) - var(--padding-top-bot));
  background-color: var(--frame-bg-color);
  box-shadow: var(--cbook-shadow-container);
  border-radius: var(--cbook-border-radius);
  flex-direction: column;
  transition: none;
  outline: 2px solid var(--cbook-outline-color);
}
.book-wrapper > .transitioner {
  height: var(--stage-height);
  width: var(--stage-width);
  background-color: var(--stage-bg-color);
  border-radius: var(--radius-zero);
  position: relative;
  z-index: 0;
}
.book-wrapper--is-loading {
  opacity: 0;
}

.chart-renderer {
  height: 100%;
  width: 100%;
  transition: none;
}

h1, h2, h3, h4, h5, h6 {
  -webkit-margin-before: 0.43em;
          margin-block-start: 0.43em;
  -webkit-margin-after: 0.67em;
          margin-block-end: 0.67em;
}

/* Warning Colors: H1 Should not be used / visible inside cBook Content */
h1 {
  font-size: 1.5rem;
  font-weight: 100;
  color: rgb(247, 7, 207) !important;
  text-decoration: line-through;
}

h2 {
  font-size: var(--text-xxxl);
  line-height: var(--text-xxxl);
  font-weight: 800;
}

h3 {
  font-size: var(--text-lg);
  line-height: var(--text-lg);
  font-weight: 800;
}

h4 {
  font-size: var(--text-md);
  font-weight: 800;
}

h5 {
  font-size: var(--text-sm);
}

h6 {
  font-size: var(--text-xs);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .book-wrapper {
    background-size: 100% 100%;
  }
}
.cbook-preloader {
  position: absolute;
  width: 26px;
  height: 0;
  border-radius: 13px;
  border: 13px solid var(--white);
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-color: var(--gray-500);
  left: 50%;
  top: 50%;
  margin: -13px 0 0 -13px;
  background: var(--white);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  animation: cbookprerot 0.6s linear infinite;
}
.cbook-preloader:before {
  content: "";
  display: block;
  position: absolute;
  top: -13px;
  left: 0;
  width: 13px;
  height: 26px;
  background: var(--gray-500);
  border-bottom: 13px solid var(--white);
  border-radius: 13px 0 0 13px;
}

@keyframes cbookprerot {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#editor-html .resizable_ace_editor * {
  font-family: monospace !important;
  font-size: initial !important;
  line-height: initial !important;
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.notifications {
  z-index: var(--zindex-popover);
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
}

.notification {
  position: absolute;
  padding: 1em 1.5em;
  top: 0px;
  width: 400px;
  left: 50%;
  margin-left: -200px;
  background: #f5f5f5;
  border: 1px solid #d8d9db;
  font-size: var(--text-sm);
  z-index: var(--zindex-popover);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  opacity: 0;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  pointer-events: none;
}

.notification-dialog {
  animation-name: notification_slidein;
  animation-duration: 3s;
  animation-direction: forwards;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  animation-delay: 0;
}

@keyframes notification_slidein {
  0% {
    bottom: 0;
    opacity: 0;
  }
  30% {
    bottom: 1ch;
    opacity: 1;
  }
  70% {
    bottom: 1ch;
    opacity: 1;
  }
  100% {
    bottom: 0;
    opacity: 0;
  }
}
.notification-dialog {
  position: absolute;
  display: flex;
  flex-direction: column;
  max-width: 500px;
  min-width: 250px;
  background: transparent;
  left: initial;
  bottom: 2ch;
  padding: 0.3ch 1ch;
  transition: 0.3s;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.notification-dialog__body {
  flex: 1 1 auto;
  line-height: 1.35;
  padding: 0.8ch;
  letter-spacing: 0.03rem;
  font-size: var(--text-xs);
}

.notification-dialog__header {
  display: flex;
  align-items: center;
  color: #34353c;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 700;
  border-bottom: none;
  padding: 0.8ch 0.8ch 0 0.8ch;
}

.notification-dialog__header-text {
  flex: 1 1 auto;
  margin-left: 1ch;
}

.notification-dialog--info .notification-dialog__header,
.notification-dialog--success .notification-dialog__header,
.notification-dialog--warning .notification-dialog__header,
.notification-dialog--error .notification-dialog__header,
.notification-dialog--danger .notification-dialog__header {
  background: transparent;
}

.notification-dialog--info {
  background: #c5e9f3;
  border: 1px solid #5bc0de;
}

.notification-dialog--info .notification-dialog__header,
.notification-dialog--info .notification-dialog__header .cbi,
.notification-dialog--info .notification-dialog__body a {
  color: #2390b0;
}

.notification-dialog--success {
  background: #b5dfb5;
  border: 1px solid #5cb85c;
}

.notification-dialog--success .notification-dialog__header,
.notification-dialog--success .notification-dialog__header .cbi,
.notification-dialog--success .notification-dialog__body a {
  color: #357935;
}

.notification-dialog--warning {
  background: #fae3c4;
  border: 1px solid #f0ad4e;
}

.notification-dialog--warning .notification-dialog__header,
.notification-dialog--warning .notification-dialog__header i.cbi,
.notification-dialog--warning .notification-dialog__body a {
  color: #c77c11;
}

.notification-dialog--error {
  background: #f0b9b8;
  border: 1px solid #d9534f;
}

.notification-dialog--error .notification-dialog__header,
.notification-dialog--error .notification-dialog__header .cbi,
.notification-dialog--error .notification-dialog__body a {
  color: #a02622;
}

.notification-dialog--danger {
  background: #f0b9b8;
  border: 1px solid #d9534f;
}

.notification-dialog--danger .notification-dialog__header,
.notification-dialog--danger .notification-dialog__header .cbi,
.notification-dialog--danger .notification-dialog__body a {
  color: #a02622;
}

.notification--info {
  color: #5bc0de;
  border-color: #46b8da;
}

.notification--success {
  color: #5cb85c;
  border-color: #4cae4c;
}

.notification--warning {
  color: #f0ad4e;
  border-color: #eea236;
}

.notification--danger {
  color: #d9534f;
  border-color: #d43f3a;
}

.notification--error {
  color: #d9534f;
  border-color: #d43f3a;
}

.notification-dialog__btn {
  border: none;
  background: none;
  transition: 0.3s;
  font-size: var(--text-md);
  vertical-align: middle;
  padding: 0;
  margin: 0 0 0 8px;
  color: #fff;
  width: 16px;
  height: 16px;
  box-shadow: none;
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

.app-header {
  position: var(--header-position);
  height: var(--header);
  width: var(--header-width);
  top: var(--header-top);
  z-index: var(--header-z-index);
  color: var(--header-color);
  background: var(--header-bg);
  border-top-left-radius: var(--cbook-border-radius);
  border-top-right-radius: var(--cbook-border-radius);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.app-header .header-chart-title {
  width: 100%;
  color: var(--header-title);
  padding: var(--button-padding);
  margin: var(--button-margin);
  border-radius: 0.25rem;
  display: var(--header-title--display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  --button-padding: 1ch 1ch;
}
.app-header .logo {
  max-height: var(--header);
}
.app-header .menu-toggler,
.app-header .a11y-toggler {
  color: var(--menu-color);
  background: var(--menu-bg);
  border-radius: var(--menu-border-radius);
  transition: none;
}
.app-header .menu-toggler:hover, .app-header .menu-toggler:focus,
.app-header .a11y-toggler:hover,
.app-header .a11y-toggler:focus {
  color: var(--menu-color--hover);
  background: var(--menu-bg--hover);
}

.menu-is-visible {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-is-visible .menu-toggler,
.menu-is-visible .a11y-toggler {
  color: var(--menu-close-color);
  background: var(--menu-close-bg);
}
.menu-is-visible .menu-toggler:hover, .menu-is-visible .menu-toggler:focus,
.menu-is-visible .a11y-toggler:hover,
.menu-is-visible .a11y-toggler:focus {
  color: var(--menu-close-color--hover);
  background: var(--menu-close-bg--hover);
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

.app-menu {
  position: absolute;
  color: var(--overlay-panel-text);
  -webkit-backdrop-filter: var(--overlay-panel-blur);
          backdrop-filter: var(--overlay-panel-blur);
  top: var(--menu-position);
  height: var(--menu-height);
  left: 0;
  opacity: 0;
  z-index: var(--menu-z-index);
  width: 100%;
  margin-left: 0;
  color: var(--menu-text);
  background: var(--menu-modal-background);
  border-radius: var(--radius-zero);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  transition: none;
}
.app-menu.visible {
  opacity: 1;
  transform: translate(0, 0);
  pointer-events: inherit;
}
.app-menu .close-btn {
  display: var(--menu-close-display);
  position: absolute;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--menu-close-size);
  height: var(--menu-close-size);
  line-height: 1;
  right: var(--menu-close-position-right);
  left: var(--menu-close-position-left);
  top: 0.5em;
  box-shadow: 2px 2px 0.4em rgba(0, 0, 0, 0.1);
  line-height: 34px;
  padding: 0;
  opacity: 1;
  border: 0;
  border-radius: var(--menu-close-radius);
  color: var(--menu-close-color);
  background: var(--menu-close-bg);
  outline: none;
  transition:none;
}
.app-menu .close-btn:hover, .app-menu .close-btn:focus {
  color: var(--menu-close-color--hover);
  background: var(--menu-close-bg--hover);
}

.app-menu > div {
  height: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
}

.app-menu__wrapper {
  width: var(--menu-width);
  color: var(--text-color);
  left: calc(var(--menu-width) * -1);
  pointer-events: all;
  transition: none;
  border: var(--space-xs) solid transparent;
}

.app-menu.app-menu-enter {
  opacity: 0;
  left: 0;
  width: 100%;
}
.app-menu.app-menu-enter .app-menu__wrapper {
  opacity: 0;
  left: calc(var(--menu-width) * -1);
}

.app-menu.app-menu-enter-active,
.app-menu.app-menu-enter-done {
  opacity: 1;
  left: 0;
  width: 100%;
}
.app-menu.app-menu-enter-active .app-menu__wrapper,
.app-menu.app-menu-enter-done .app-menu__wrapper {
  opacity: 1;
  left: 0;
}

.app-menu.app-menu-exit {
  opacity: 1;
  left: 0;
  width: 100%;
}

.app-menu.app-menu-exit-active,
.app-menu.app-menu-exit-done {
  opacity: 0;
  left: 0;
  width: 100%;
}
.app-menu.app-menu-exit-active .app-menu__wrapper,
.app-menu.app-menu-exit-done .app-menu__wrapper {
  opacity: 0;
  left: calc(var(--menu-width) * -1);
}

.menu-is-visible .app-menu {
  pointer-events: auto;
}

.app-menu__print {
  position: absolute;
  border: 0;
  background: none;
  padding: 10px;
  top: 10px;
  right: 10px;
  outline: 0;
  opacity: 0.8;
  transition: 0.3s;
}
.app-menu__print:hover, .app-menu__print:focus {
  opacity: 1;
}
.app-menu__print:after {
  display: inline-block;
  content: attr(title);
  position: absolute;
  height: 100%;
  right: 100%;
  top: 0;
  padding: 10px 0;
  font-size: var(--text-xxs);
  min-width: 110px;
  text-align: right;
}

.app-menu__header {
  flex: 0 0 auto;
  font-size: var(--text-lg);
  padding: var(--space-lg) var(--space-md);
  margin: 0;
  line-height: 1;
  background: var(--menu-hero);
  border-top-right-radius: var(--cbook-menu-radius);
  border-top-left-radius: var(--cbook-menu-radius);
  border: var(--cbook-menu-border);
  border-bottom: none;
}
.app-menu__header small {
  display: block;
  color: var(--menu-sm-head);
  font-size: var(--text-xxs);
}

.app-menu__results {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: auto;
  height: 100%;
  border-bottom-right-radius: var(--cbook-menu-radius);
  border-bottom-left-radius: var(--cbook-menu-radius);
  background: var(--menu-body);
  border: var(--cbook-menu-border);
  border-top: none;
}
.app-menu__results nav {
  height: 100%;
  width: var(--menu-list-width);
  position: relative;
  padding: 0 var(--space-md);
}
.app-menu__results .app-menu__chapters {
  padding: 0 var(--space-md);
}

.app-menu__chapters {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.app-menu__search-wrapper {
  flex: 0 0 auto;
  z-index: var(--menu-z-index);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.8ch;
  justify-content: var(--menu-search-alignment);
  background: var(--menu-tools);
  border-bottom: var(--menu-tools-border);
  box-shadow: var(--menu-tools-shadow);
  border: var(--cbook-menu-border);
  border-top: none;
}
.app-menu__search-wrapper .app-menu__favorites-only {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--space-lg);
}
.app-menu__search-wrapper .app-menu__favorites-only label {
  display: var(--show-favourites-label);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--text-sm);
}
.app-menu__search-wrapper .app-menu__favorites-only label .cbi {
  margin-left: var(--space-md);
}
.app-menu__search-wrapper .app-menu__favorites-only input#show-only-favorites {
  display: none;
}

.app-menu__search-form {
  position: relative;
  display: flex;
  margin: 0;
  justify-content: space-between;
  align-items: center;
  width: 50%;
}
.app-menu__search-form .cbi.cbi-filter {
  position: absolute;
  right: var(--space-md);
}

.app-menu__search::-ms-clear {
  display: none;
}

.app-menu__search-btn {
  position: absolute;
  right: 0;
  border: none;
  outline: none;
  box-shadow: none;
  background: none;
  z-index: 100000;
}
.app-menu__search-btn .cbi {
  position: relative;
  z-index: 1;
}

.app-menu__fav-btn {
  border: 0;
  background: none;
  margin: 0 0 0 25px;
}
.app-menu__fav-btn .ui-te__btn {
  height: 100%;
  font-size: var(--text-xl);
  background: none;
  padding-right: 0;
}
.app-menu__fav-btn .ui-checkbox {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: var(--text-xxs);
  justify-content: flex-end;
  padding: 0.5ch 1ch;
  border-radius: 3px;
}
.app-menu__fav-btn .ui-te__context {
  padding: 0 0 0 8px;
  line-height: 2;
}
.app-menu__fav-btn.ui-te--active {
  height: 39px;
}
.app-menu__fav-btn.ui-te--active .ui-te__btn {
  height: 39px;
  z-index: 3;
}

.app-menu__fav-btn--active {
  color: var(--menu-fav-active);
}

.app-menu__search-close {
  color: var(--menu-search-close);
  background: var(--menu-search-btn-bg);
  position: absolute;
  height: var(--input-height);
  width: var(--input-height);
  right: var(--space-md);
  padding: 0;
  margin: 0;
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-menu__search-close.hide {
  display: none;
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.app-menu__chapter {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}
.app-menu__chapter .title {
  display: flex;
  width: 100%;
  color: var(--menu-chapter-title);
  background: var(--menu-chapter-bg);
  position: relative;
  padding: var(--space-lg);
  padding-left: var(--space-md);
  margin: 0;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 700;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1.15;
  border: var(--menu-chapter-border);
}
.app-menu__chapter .title .cbi {
  color: var(--menu-chapter-arrow);
}
.app-menu__chapter .title .title-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: var(--space-lg);
}
.app-menu__chapter .title .title-super {
  display: block;
  color: var(--menu-chapter-super);
  text-transform: uppercase;
  font-size: var(--text-xs);
  font-weight: 400;
}
.app-menu__chapter .title:hover {
  background: var(--menu-chapter-hover-bg);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.app-menu__chapter .title:focus-visible {
  background: var(--menu-chapter-hover-bg);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.app-menu__chapter .title.open {
  background: var(--menu-chapter-open-bg);
  margin-bottom: var(--space-md);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-style: solid;
}
.app-menu__chapter .title.open:after {
  transform: rotate(90deg);
}
.app-menu__chapter .progress-display {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  transform: scale(0.8);
  border-radius: 100px;
  background: transparent;
}
.app-menu__chapter .title .progress-display--compact .perc-val {
  transform: rotate(0deg);
  background: transparent;
}

.chapter-not-available {
  opacity: 1;
}

.level-2.app-menu__chapter {
  padding-left: 1.5ch;
  padding-right: 0;
}

.level-3.app-menu__chapter {
  padding-left: 2.5ch;
  padding-right: 0;
}

.level-4.app-menu__chapter {
  padding-left: 3.5ch;
  padding-right: 0;
}

.level-5.app-menu__chapter {
  padding-left: 4.5ch;
  padding-right: 0;
}

.level-6.app-menu__chapter {
  padding-left: 5.5ch;
  padding-right: 0;
}

.level-7.app-menu__chapter {
  padding-left: 6.5ch;
  padding-right: 0;
}

.chart-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  transition: 0.4s;
  max-height: 0;
}
.chart-menu.open {
  max-height: initial;
}

.chart-menu__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-zero) var(--space-zero);
  border-radius: var(--radius-xs);
  background: var(--menu-list-bg);
  margin: var(--space-xs) var(--space-zero);
  border: var(--menu-list-border);
}
.chart-menu__item:hover, .chart-menu__item:focus {
  background: var(--menu-chart-hover-bg);
}

.chart-menu__link {
  display: flex;
  height: 30px;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  box-sizing: content-box;
  color: var(--menu-chart-text);
  text-decoration: none;
  font-size: var(--text-sm);
  border-radius: 3px;
  margin: 0 var(--space-md);
  border-left: 0px solid var(--primary-color);
}
.chart-menu__link span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chart-menu__link:before {
  content: attr(data-index);
  position: relative;
  display: block;
  width: 4ch;
  padding: 0 var(--space-md);
  opacity: 0.4;
}

.chart-status__visited .chart-menu__link {
  color: var(--menu-chart-text--visited);
}

.chart-status__not-visited .chart-menu__link {
  color: var(--menu-chart-text--not-visited);
}

.chart-status__disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.chart-menu__link--active {
  color: var(--menu-chart-active-text);
  font-weight: bold;
  border-left: 5px solid var(--primary-color);
}

.chart-menu__link--disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
.chart-menu__visited {
  color: var(--menu-list-indicator--not-visited);
  padding: 0.25ch;
  margin: 0.5ch;
  height: 30px;
  display: var(--menu-list-indicator--display);
  align-items: center;
  justify-content: center;
}
.chart-menu__visited--active {
  color: var(--menu-list-indicator--visited);
}

.chart-menu__fav-btn {
  color: var(--menu-fav);
}
.chart-menu__fav-btn:hover, .chart-menu__fav-btn:focus {
  color: var(--menu-fav-active);
}

.chart-menu__fav-btn--active {
  color: var(--menu-fav-active);
}
.chart-menu__fav-btn--active:hover, .chart-menu__fav-btn--active:focus {
  opacity: 0.5;
}

.app-modal {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  opacity: 0;
  cursor: pointer;
  transition: none;
  transform: scale(0.9);
}

.app-modal.app-modal-enter {
  opacity: 0;
  transform: scale(0.9);
  display: table;
}

.app-modal.app-modal-enter-active {
  opacity: 1;
  transform: scale(1);
  display: table;
}

.app-modal.app-modal-enter-done {
  opacity: 1;
  transform: scale(1);
  display: table;
}

.app-modal.app-modal-exit {
  opacity: 1;
  transform: scale(1);
  display: table;
}

.app-modal.app-modal-exit-active {
  opacity: 0;
  transform: scale(0.9);
  display: table;
}

.app-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: none;
  color: #fff;
  text-shadow: 0 0 3px #000;
  font-size: var(--text-xxl);
  outline: 0;
  transition: 0.3s;
  z-index: 10;
}
.app-modal__close:hover, .app-modal__close:focus {
  transform: scale(1.2);
}

.app-modal__wrapper {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.app-modal__img,
.app-modal__video {
  max-width: 960px;
  max-height: 512px;
}

.app-modal__loader {
  display: inline-block;
  background: url(../assets/images/loading.gif);
  width: 48px;
  height: 48px;
  overflow: hidden;
  line-height: 48px;
  text-indent: 99999px;
}

select,
input {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--input-height);
  width: var(--input-width);
  color: var(--input-text);
  background: var(--input-bg);
  padding: var(--input-padding);
  margin: var(--input-margin);
  border-radius: var(--input-border-radius);
  border: var(--input-border);
  box-shadow: none;
  box-sizing: content-box;
}

/* clears the ‘X’ from Chrome */
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

input[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

button {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  pointer-events: all;
  color: var(--button-text);
  background: var(--button-background);
  padding: var(--button-padding);
  margin: var(--button-margin);
  border-radius: var(--button-border-radius);
  border: var(--button-border);
  box-shadow: var(--button-drop-shadow);
  line-height: var(--icon-size-m);
}

figure {
  margin: 0;
}
figure img,
figure figurecaption {
  display: inline-block;
  width: 100%;
}
figure figurecaption {
  color: var(--gray-600);
  font-size: var(--text-xxxs);
  font-style: italic;
  text-align: center;
  padding: var(--space-sm);
}
figure figurecaption:empty {
  display: none;
}

/* All Button Text Labels */
.ui-toggle-text,
.social-app-options__btn-text,
.social-app-footer__button-text,
.multi-select__label,
.actions-menu__link-text,
.sphere-hidden__button-text {
  padding-left: var(--space-md);
}

/* Blank Buttons */
.menu-toggler,
.a11y-toggler,
.chart-menu__fav-btn,
.social-breadcrumb__link,
.rte-tools__btn,
.stro-button {
  --button-margin: var(--space-xs) var(--space-xs);
  --button-padding: var(--space-md) var(--space-md);
  --button-border: none;
  --button-drop-shadow: none;
  --button-background: none;
}

.highlight {
  color: var(--primary-color);
}

.btn {
  display: inline-block;
  border: 0;
  padding: 0.55em 1.5em 0.6em;
  cursor: pointer;
  background: var(--gray-100);
  color: var(--text-color);
  transition: 0.3s;
}
.btn:before {
  margin-right: 8px;
}
.btn:hover, .btn:focus {
  background: var(--gray-200);
}

.btn[disabled] {
  opacity: 0.55;
  background: var(--gray-500);
  color: var(--text-color);
}

.btn--primary {
  background: var(--primary);
  color: var(--text-color-inverse);
}
.btn--primary:hover, .btn--primary:focus {
  background: var(--gray-850);
}

.btn--submit {
  background: var(--primary-color);
  color: var(--text-color-inverse);
}
.btn--submit:hover, .btn--submit:focus {
  background: var(--primary-color);
  opacity: 0.95;
}

.btn--text {
  background: none;
  color: var(--primary-color);
}
.btn--text:hover, .btn--text:focus {
  background: none;
  color: var(--primary-color);
  opacity: 0.9;
}

.btn--text-secondary {
  background: none;
  color: var(--gray-600);
}
.btn--text-secondary:hover, .btn--text-secondary:focus {
  background: none;
  color: var(--gray-650);
}

.dropdown-menu {
  max-height: 170px;
  overflow: auto;
}

.user-inactive {
  color: var(--gray-200);
}
.user-inactive:after {
  color: var(--danger);
  margin-left: 0.3em;
}

.has-error input,
.has-error .mce-edit-area {
  box-shadow: inset 0 0 3px var(--danger);
}

.rating-bullet {
  color: var(--gray-600);
}

.rating-bullet--full {
  color: var(--primary-color);
}

.app-chart-nav {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 5;
  pointer-events: none;
}

.chart-nav {
  display: flex;
  position: absolute;
  cursor: pointer;
  bottom: var(--button-nav-position);
  left: var(--button-nav-left);
  color: var(--button-nav-color);
  background: var(--button-nav-bg);
  border: var(--button-nav-border);
  width: var(--button-nav-size);
  height: var(--button-nav-size);
  overflow: hidden;
  opacity: var(--button-nav-opacity);
  z-index: var(--zindex-accessibility);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--button-nav-radius);
  padding: var(--paddings--zero);
  margin: var(--margins--zero);
}
.chart-nav.next {
  right: var(--button-nav-right);
  left: auto;
}
.chart-nav:hover, .chart-nav:focus {
  color: var(--button-nav-color--hover);
  background: var(--button-nav-bg--hover);
  opacity: var(--button-nav-opacity--hover);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.chart-nav--back {
  left: var(--button-nav-left);
  bottom: var(--button-nav-smart-position);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.app-footer {
  position: var(--footer-position);
  height: var(--footer);
  width: var(--footer-width);
  z-index: var(--footer-z-index);
  bottom: var(--footer-bot);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: var(--footer-alignment);
  padding: var(--footer-paddings);
  color: var(--footer-color);
  background: var(--footer-bg);
  border-bottom-left-radius: var(--cbook-border-radius);
  border-bottom-right-radius: var(--cbook-border-radius);
}
.app-footer .progress-display {
  display: var(--footer-progress);
  cursor: pointer;
  position: relative;
  border-radius: 100%;
  padding: 0.5ch;
}

.chart-progress {
  display: var(--footer-pages);
  align-items: center;
  justify-self: center;
  height: 100%;
  white-space: nowrap;
}
.chart-progress__label {
  height: 100%;
  padding: 0.5ch 2ch;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--chart-progress-text);
  box-shadow: none;
}
.chart-progress__label:hover {
  color: var(--chart-progress-text--hover);
}

.app-footer .progress-display,
.chart-progress {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.app-footer__options {
  display: var(--footer-book-story-switch);
  position: relative;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.switch-label {
  display: inline-block;
  font-size: var(--text-xxxs);
  line-height: var(--text-xxxs);
  text-align: center;
  text-transform: uppercase;
  vertical-align: top;
  margin: 0 0.75em;
  font-weight: 800;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.switch-label.switch-label--active {
  font-weight: 100;
}

.actions-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.actions-menu__item {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}

#quick-favourites {
  display: var(--footer-qick-fav);
}
#quick-favourites .actions-menu__link-text {
  display: var(--footer-qick-fav-label);
}

#bonus-material {
  display: var(--footer-bonus);
}
#bonus-material .actions-menu__link-text {
  display: var(--footer-bonus-label);
}

#notes {
  display: var(--footer-notes);
}
#notes .actions-menu__link-text {
  display: var(--footer-notes-label);
}

#activity-center {
  display: var(--footer-activity);
}
#activity-center .actions-menu__link-text {
  display: var(--footer-activity-label);
}

.actions-menu__link {
  height: 100%;
  text-decoration: none;
  color: var(--footer-btn-text);
  background: var(--footer-btn-bg);
  box-shadow: var(--footer-btn-shadow);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.actions-menu__link:hover, .actions-menu__link:focus {
  color: var(--footer-btn-text--hover);
  background: var(--footer-btn-bg--hover);
}

.activities-are-visible .actions-menu__link.activity-link {
  color: var(--primary-color);
}

.notes-are-visible .actions-menu__link.notes-link {
  color: var(--primary-color);
}

.bonus-material-is-visible .actions-menu__link.bonus-link {
  color: var(--primary-color);
}

.quick-favourites-is-visible .actions-menu__link.favourites-link {
  color: var(--primary-color);
}

.chart-quick-nav-is-visible .progress-display .perc-val,
.chart-quick-nav-is-visible .chart-progress {
  color: var(--primary-color);
}

.actions-menu__indicator {
  position: absolute;
  left: calc(var(--space-md) * -1);
  top: calc(var(--space-md) * -1);
  font-size: var(--text-xxxs);
}

.numeral-indicator {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: calc(var(--space-md) * -1);
  top: calc(var(--space-md) * -1);
  color: var(--white);
  background: var(--primary-color);
  width: 2em;
  height: 2em;
  line-height: 1.8;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: bold;
  border-radius: 1em;
  border: 1px solid var(--primary-color);
}
.numeral-indicator.social-member-bubble__indicator {
  left: calc(var(--space-lg) * -1);
  top: calc(var(--space-md) * -1);
}

.numeral-indicator--alt {
  background: var(--gray-500);
  border-color: var(--gray-600);
}

@media only screen and (max-width: 768px) {
  .app-footer__options {
    width: 100%;
  }
  .app-footer__options span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .app-footer__options span.switch-label {
    opacity: 1;
  }
  .app-footer__options span.switch-label--active {
    opacity: 0;
  }
  .app-footer__options .ui-switch,
  .app-footer__options .ui-switch.on {
    background: transparent;
    border: none;
    box-shadow: none;
    pointer-events: all;
    z-index: 10;
    border-radius: var(--button-border-radius);
  }
  .app-footer__options .ui-switch .ui-switch__handler,
  .app-footer__options .ui-switch.on .ui-switch__handler {
    background: transparent;
    border: none;
    box-shadow: none;
    pointer-events: all;
  }
  .app-footer__options .ui-switch:hover, .app-footer__options .ui-switch:focus,
  .app-footer__options .ui-switch.on:hover,
  .app-footer__options .ui-switch.on:focus {
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .app-footer__options .ui-switch:hover .ui-switch__handler,
  .app-footer__options .ui-switch:hover .ui-switch__handler, .app-footer__options .ui-switch:focus .ui-switch__handler,
  .app-footer__options .ui-switch:focus .ui-switch__handler,
  .app-footer__options .ui-switch.on:hover .ui-switch__handler,
  .app-footer__options .ui-switch.on:hover .ui-switch__handler,
  .app-footer__options .ui-switch.on:focus .ui-switch__handler,
  .app-footer__options .ui-switch.on:focus .ui-switch__handler {
    box-shadow: none;
    opacity: 0.8;
  }
}
/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

.chart {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: auto;
  color: var(--text-color);
  background-color: var(--chart-bg-color);
  background-size: cover;
}
.chart:before, .chart:after {
  content: " ";
  display: table;
}
.chart:after {
  clear: both;
}
.chart iframe {
  -webkit-overflow-scrolling: touch !important;
}
.chart.sequence__chart {
  overflow: hidden;
}
.chart.chart--single .chart__interaction {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.slide-type-mediapage #main > .chart,
.slide-type-extensionpage #main > .chart {
  overflow: hidden;
}

/* SCROLL Verification testing */
/* SCROLL Verification testing */
.chart .question {
  width: 100%;
  padding: 0.5em 2em;
  font-weight: bold;
  background: #fefefe;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}

.paper {
  position: relative;
  width: 100%;
  height: 100%;
}

.answer {
  position: absolute;
  transform: translate3d(0, 0, 0);
  transform: translate(0, 0);
  cursor: pointer;
}

.answer--correct {
  color: #7dc23a;
}

.answer--wrong {
  color: #d9534f;
}

.answer__textwrapper--center {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

.chart__buttonbar {
  position: absolute;
  bottom: var(--sequence-player-bar-height);
  margin: var(--space-md);
  padding-bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  -webkit-backdrop-filter: var(--overlay-panel-blur);
          backdrop-filter: var(--overlay-panel-blur);
  border-radius: var(--radius-sm);
  z-index: 10;
  color: var(--gray-900);
  background: var(--gray-150);
}

.chart__buttonbar--top {
  top: 0;
  bottom: auto;
}

.chart__btn {
  padding: var(--space-md) var(--space-lg);
  margin: 0;
  color: var(--button-chart-text);
  background: var(--button-chart-background);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.chart__btn:focus, .chart__btn:hover {
  color: var(--button-chart-text--hover);
  background: var(--button-chart-background--hover);
}
.chart__btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.subtitle-selector-popup__item .chart__btn[disabled]:hover {
  color: var(--button-chart-text);
  background: var(--button-chart-background);
}
.chart__btn-reset {
  margin-right: var(--space-xs);
}
.evaluated .chart__btn-submit {
  display: none;
}

.chart__btn--text {
  margin: 0 0 0 1ch;
}

.chart__legend {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--space-lg);
}

.chart__legend-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 var(--space-md);
}
.chart__legend-item .cbi {
  margin-right: var(--space-xs);
}
.chart__legend-item:before {
  margin-right: 7px;
}

.chart__audio {
  position: absolute;
  bottom: -50px;
  height: 0;
  overflow: hidden;
}

.chart__next-link {
  display: none;
}

header.chart__header {
  position: relative;
  pointer-events: none;
  z-index: 10;
  order: -2;
}

.heading__overline {
  font-size: var(--text-overline);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  font-weight: bold;
}

.heading__display {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  color: var(--primary-color);
  margin-top: 0.25rem;
  margin-bottom: 0.85rem;
}

.heading__caption {
  font-size: var(--text-caption);
  font-weight: bold;
  font-style: italic;
  margin-bottom: 2rem;
  opacity: 0.6;
}

.heading__description {
  font-size: var(--text-description);
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

.sequence--chart {
  padding-bottom: 10px;
  background-repeat: no-repeat;
}

.seq-layer-wrapper {
  width: 100%;
  height: 100%;
}

.sequence-backshot,
.seq-layer {
  height: 100%;
  width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.seq-layer {
  display: none;
  opacity: 0;
}
.seq-layer .mce-content-body {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.sequence-backshot .mce-content-body {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.sequence__audio,
.sequence__audio video {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 1;
  pointer-events: none;
}

.sequence__audio {
  height: calc(100% - var(--sequence-player-bar-height));
}

.sequence__controls.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--zindex-cbook-ui);
}

.controls {
  width: 100%;
  position: absolute;
  bottom: 0;
  height: var(--sequence-player-bar-height, 24px);
  background: var(--footer-bg);
}
.controls:before, .controls:after {
  content: " ";
  display: table;
}
.controls:after {
  clear: both;
}
.controls .controls__subtitle {
  position: relative;
  display: flex;
  height: var(--sequence-player-bar-height, 24px);
  width: var(--sequence-player-bar-height, 24px);
  align-items: center;
  justify-content: center;
}
.controls .controls__pos {
  font-size: var(--text-xxxs);
  margin: 0 var(--space-lg);
}
.controls .controls__btn {
  width: var(--sequence-player-icon-size, 20px);
  height: var(--sequence-player-icon-size, 20px);
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.controls .controls__play-btn {
  width: var(--sequence-player-icon-size, 20px);
  height: var(--sequence-player-icon-size, 20px);
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: none;
}
.controls .controls__play-btn--loading {
  background-image: url(../assets/images/loading.gif);
  background-position: center;
  background-size: 12px 12px;
}
.controls .controls__play-btn--loading:hover, .controls .controls__play-btn--loading:focus {
  background-position: center;
}

.controls__subtitle {
  position: relative;
  width: var(--sequence-player-icon-size, 20px);
  height: var(--sequence-player-icon-size, 20px);
}

.subtitle-selector-popup {
  position: absolute;
  bottom: var(--sequence-player-bar-height);
  width: auto;
  align-items: center;
  justify-content: flex-start;
  background: rgba(0, 0, 0, 0.8);
  color: var(--white);
  pointer-events: none;
  opacity: 0;
  transition: 0.2s all;
  border-radius: var(--border-radius);
}
.subtitle-selector-popup form {
  position: relative;
  width: 100%;
}

.subtitle-selector-popup.subtitle-selector-popup--open {
  bottom: calc(var(--sequence-player-bar-height) + var(--space-xs));
  opacity: 1;
  transition: 0.2s all;
  pointer-events: all;
}
.subtitle-selector-popup.subtitle-selector-popup--open .controls__cc-btn {
  color: var(--gray-950);
}

.subtitle-selector-popup__item {
  position: relative;
  width: 100%;
  height: 3ch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-xs) var(--space-md);
}
.subtitle-selector-popup__item label,
.subtitle-selector-popup__item input {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  color: var(--black);
  font-size: var(--text-xxs);
}
.subtitle-selector-popup__item input {
  width: var(--icon-size-s);
  height: var(--icon-size-s);
  margin-right: 1ch;
}

.sequence__big-play {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}
.sequence__big-play .cbi-xl {
  color: var(--white);
  opacity: 0.7;
  width: 150px;
  height: 150px;
}
.fade-chart-enter {
  opacity: 0.01;
}

.fade-chart-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.fade-chart-exit {
  opacity: 1;
}

.fade-chart-exit-active {
  opacity: 0.01;
  transition: opacity 500ms ease-in;
}

.chart--media {
  padding: 0;
  text-align: center;
}
.chart--media .media-player {
  background-color: #000;
}

.mejs-controls .mejs-button button {
  background-image: url(../assets/images/controls.svg);
}

.mod-no-svg .mejs-controls .mejs-button button {
  background-image: url(../assets/images/controls.png);
}

.mejs-controls .mejs-captions-button .mejs-captions-selector,
.mejs-captions-text,
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector,
.mejs-postroll-layer,
.mejs-postroll-close,
.mejs-controls .mejs-speed-button .mejs-speed-selector,
.mejs-overlay-loading {
  background-image: url(../assets/images/player-bg.png);
}

.mejs-overlay-loading span {
  background-image: url(../assets/images/autocomplete_loading.gif);
}

.mejs-overlay-button {
  background-image: url(../assets/images/bigplay.svg);
}

.mod-no-svg .mejs-overlay-button {
  background-image: url(../assets/images/bigplay.png);
}

.media-image {
  height: 100%;
}

.media-element {
  height: 100% !important;
}

/* GLOBAL - MEDIA PLAYER */
.media-player {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}
.media-player video {
  width: 100%;
  height: 100%;
}
.media-player button.media-play__hero {
  position: absolute;
  top: calc(50% - var(--icon-size-xl) / 2);
  left: calc(50% - var(--icon-size-xl) / 2);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: var(--rl-white);
  box-shadow: 0 0 0 0px var(--focus-dropshadow--off);
  background: transparent;
  border-radius: 30000px;
  opacity: 0.7;
}
.media-player button.media-play__hero:hover {
  opacity: 1;
}
.media-player .media-player__controls.controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  pointer-events: all;
  overflow: visible;
  color: var(--black);
  padding: 0 var(--space-lg);
  gap: var(--space-md);
}
.media-player .media-player__controls .controls__volume-area {
  display: flex;
  align-items: center;
}
.media-player .media-player__controls .controls__volume-area .controls__volume-panel {
  height: auto;
}
.media-player .media-player__controls .controls__volume-area .controls__volume-panel .controls__volume-slider {
  margin: 0;
  padding: 0;
  /* -webkit-appearance: none; 
    appearance: none; */
  width: 100%;
  height: 0.5ch;
  background: var(--sequence-player-progress-bg);
  outline: none;
  opacity: 1;
  transition: none;
  accent-color: var(--primary-color);
}
.media-player .media-player__controls .controls__volume-area .controls__volume-panel .controls__volume-slider:hover {
  opacity: 1;
}
.media-player .media-player__controls .controls__volume-area .controls__volume-panel .controls__volume-slider .controls__volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 3000px;
  background: var(--primary-color);
  cursor: pointer;
}
.media-player .media-player__controls .controls__volume-area .controls__volume-panel .controls__volume-slider .controls__volume-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 3000px;
  background: var(--primary-color);
  cursor: pointer;
}
.media-player .media-player__controls .controls__progress {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  height: calc(100% - 13px);
  border-radius: var(--sequence-player-progress-radius);
  overflow: hidden;
  width: var(--sequence-player-progress-width);
  margin: 0 var(--space-md);
  cursor: pointer;
}
.media-player .media-player__controls .controls__progress:hover .controls__progress-tooltip {
  opacity: 1;
  transition: none;
}
.media-player .media-player__controls .controls__progress .controls__progress__bar {
  min-width: 0;
  height: var(--sequence-player-progress-height);
  background: var(--sequence-player-progress-color);
  position: absolute;
  left: 0;
}
.media-player .media-player__controls .controls__progress .controls__progress-bg {
  width: 100%;
  height: var(--sequence-player-progress-height);
  background: var(--sequence-player-progress-bg);
  position: absolute;
}
.media-player .media-player__controls .controls__progress .controls__progress-tooltip {
  position: fixed;
  transform: translate(-50%, -140%);
  font-size: var(--text-xs);
  line-height: var(--text-xs);
  color: var(--black);
  background: var(--white);
  padding: var(--space-xxs) var(--space-md);
  border-radius: 3000px;
  opacity: 0;
  transition: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.media-player .media-player__controls .controls__progress .controls__progress-tooltip:after {
  content: "";
  position: absolute;
  top: 95%;
  left: 50%;
  margin-left: -8px;
  border-width: 8px;
  border-style: solid;
  border-color: var(--white) transparent transparent transparent;
}
.media-player .media-player__controls .controls__progress .controls__progress-elapsed {
  background-color: var(--primary-color);
  position: relative;
  height: var(--sequence-player-progress-height);
}
.media-player .media-player__controls .controls__progress .controls__duration {
  font-size: var(--text-xxxs);
  line-height: var(--text-xxxs);
}
.media-player .media-player__controls .controls__progress-indicator {
  display: flex;
  flex-direction: row;
}
.media-player .media-player__controls .controls__progress-indicator .controls__duration {
  font-size: var(--text-xxxs);
  line-height: var(--text-xxxs);
  width: 5ch;
  display: flex;
}
.media-player .media-player__controls .controls__progress-indicator .controls__elapsed-time {
  margin-right: 0.5ch;
  font-weight: bold;
  font-size: var(--text-xxxs);
  line-height: var(--text-xxxs);
  width: auto;
  display: flex;
}
.media-player .media-player__controls .controls__progress-indicator .controls__elapsed-time:after {
  content: " /";
  font-weight: normal;
  display: inline;
  padding: 0 0.25ch;
}
.media-player .media-player__controls .controls__pos {
  display: none;
}

.sequence__controls.controls .controls__progress {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  height: calc(100% - 13px);
  border-radius: var(--sequence-player-progress-radius);
  background: var(--sequence-player-progress-bg);
  overflow: hidden;
  width: var(--sequence-player-progress-width);
  padding: 0 var(--space-lg);
  cursor: pointer;
}
.sequence__controls.controls .controls__progress .controls__progress__bar {
  min-width: 0;
  background-color: var(--primary-color);
  height: var(--sequence-player-progress-height);
  position: absolute;
  left: 0;
}

.dnd__wrapper {
  display: flex;
}
.dnd__wrapper.dnd--automatic {
  position: relative;
}
.dnd__wrapper.dnd--manual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.dnd__draggables {
  z-index: 5;
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 3;
  border-radius: var(--radius-xs);
  border: 1px dashed var(--gray-300);
  background: rgba(var(--gray-800-rgb), 0.1);
}

.dnd__dropgroup .dnd__droparea {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding: 1ch;
  margin: 0 1ch;
  margin-bottom: 2ch;
  background: transparent;
  border: 2px dashed rgba(255, 255, 255, 0.4);
  border-radius: var(--border-radius);
  position: relative;
}
.dnd__dropgroup .dnd__droparea .dnd__droparea-dropables {
  width: 100%;
  height: 100%;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 100;
}
.dnd__dropgroup .dnd__droparea .dnd__droparea-dropables:empty {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100px;
  margin: var(--space-md);
  border-radius: var(--radius-xs);
  border: 1px dashed white;
  background: rgba(var(--gray-800-rgb), 0.1);
}
.dnd__dropgroup .dnd__droparea .dnd__droparea-dropables:empty::after {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cg stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"%3E%3Cpath fill="none" stroke-dasharray="14" stroke-dashoffset="14" d="M6 19h12"%3E%3Canimate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="14%3B0"%2F%3E%3C%2Fpath%3E%3Cpath fill="white" d="M12 4 h2 v6 h2.5 L12 14.5M12 4 h-2 v6 h-2.5 L12 14.5"%3E%3Canimate attributeName="d" calcMode="linear" dur="1.5s" keyTimes="0%3B0.7%3B1" repeatCount="indefinite" values="M12 4 h2 v6 h2.5 L12 14.5M12 4 h-2 v6 h-2.5 L12 14.5%3BM12 4 h2 v3 h2.5 L12 11.5M12 4 h-2 v3 h-2.5 L12 11.5%3BM12 4 h2 v6 h2.5 L12 14.5M12 4 h-2 v6 h-2.5 L12 14.5"%2F%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(1px 1px 1px black);
  opacity: 0.6;
}
.dnd__dropgroup .dnd__droparea .dnd__droparea-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
.dnd__dropgroup .dnd__droparea .dnd__droparea-name {
  width: 100%;
  text-align: center;
  padding: 0.5ch;
  display: none;
  z-index: 1000;
}

.dnd__draggables .ui-draggable.dnd__draggable,
.dnd__dropgroup .ui-draggable.dnd__draggable {
  display: flex;
  align-items: center;
  background-color: var(--gray-100);
  color: var(--gray-900);
  width: auto;
  max-width: 300px;
  position: relative;
  padding: var(--space-md);
  margin: var(--space-xs);
  border-radius: var(--button-border-radius);
  min-height: initial;
  box-shadow: 1px 1px 4px var(--gray-300);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: grab;
}
.dnd__draggables .ui-draggable.dnd__draggable--correct,
.dnd__dropgroup .ui-draggable.dnd__draggable--correct {
  color: var(--correct);
  border: 2px solid var(--correct);
  opacity: 1;
}
.dnd__draggables .ui-draggable.dnd__draggable--incorrect,
.dnd__dropgroup .ui-draggable.dnd__draggable--incorrect {
  color: var(--wrong);
  border: 2px solid var(--wrong);
  opacity: 1;
}
.dnd__draggables .ui-draggable.dnd__draggable--missed,
.dnd__dropgroup .ui-draggable.dnd__draggable--missed {
  color: var(--missing);
  border: 2px solid var(--missing);
  opacity: 1;
}
.dnd__draggables .ui-draggable.dnd__draggable:hover,
.dnd__dropgroup .ui-draggable.dnd__draggable:hover {
  box-shadow: 0.3em 0.25em 10px rgba(0, 0, 0, 0.3);
  background-color: var(--white);
}
.dnd__draggables .ui-draggable.dnd__draggable .cbi,
.dnd__dropgroup .ui-draggable.dnd__draggable .cbi {
  margin-right: var(--space-md);
}

/* Automatic  */
.dnd--automatic .dnd__dropgroup.dnd__dropgroup--automatic {
  transition: none;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  flex-wrap: wrap;
  background: none;
}
.dnd--automatic.dnd--bottom {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  transition: none;
}
.dnd--automatic.dnd--bottom .dnd__draggables--bottom {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 200px;
}
.dnd--automatic.dnd--bottom .ui-draggable.dnd__draggable {
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.67) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.dnd--automatic.dnd--bottom .dnd__droparea-dropables .ui-draggable.dnd__draggable {
  position: relative;
}
.dnd--automatic.dnd--bottom .dnd__draggable[tabindex="0"] {
  z-index: 5;
}
.dnd--automatic.dnd--bottom .dnd__draggable:nth-child(even) {
  margin-right: -5px;
  transform: rotate(2deg);
}
.dnd--automatic.dnd--bottom .dnd__draggable:nth-child(odd) {
  margin-right: 5px;
  transform: rotate(-2deg);
}
.dnd--automatic.dnd--bottom-stacked {
  flex-direction: column-reverse;
}
.dnd--automatic.dnd--bottom-stacked .dnd__draggables--bottom-stacked {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.dnd--automatic.dnd--left {
  flex-direction: row;
}
.dnd--automatic.dnd--left .dnd__draggables--left {
  flex-shrink: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-width: 30%;
}
.dnd--automatic.dnd--top-left {
  flex-direction: column;
}
.dnd--automatic.dnd--top-left .dnd__draggables--top-left {
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.dnd--automatic.dnd--right {
  flex-direction: row-reverse;
}
.dnd--automatic.dnd--right .dnd__draggables--right {
  flex-shrink: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-width: 30%;
}
.dnd--automatic.dnd--top-right {
  flex-direction: column;
}
.dnd--automatic.dnd--top-right .dnd__draggables--top-right {
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

/* Manual  */
.dnd--manual .dnd__dropgroup.dnd__dropgroup--manual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: none;
}
.dnd--manual .dnd__dropgroup.dnd__dropgroup--manual .dnd__droparea {
  position: absolute;
  margin: 0;
}
.dnd--manual .dnd__draggables {
  pointer-events: none;
}
.dnd--manual .ui-draggable {
  pointer-events: all;
}
.dnd--manual.dnd--bottom {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  transition: none;
}
.dnd--manual.dnd--bottom .dnd__draggables--bottom {
  bottom: 0;
  position: absolute;
  width: 100%;
  margin: 0 auto;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dnd--manual.dnd--bottom .ui-draggable.dnd__draggable {
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.67) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.dnd--manual.dnd--bottom .dnd__droparea-dropables .ui-draggable.dnd__draggable {
  position: relative;
}
.dnd--manual.dnd--bottom .dnd__draggable[tabindex="0"] {
  z-index: 5;
}
.dnd--manual.dnd--bottom .dnd__draggable:nth-child(even) {
  margin-right: -5px;
  transform: rotate(2deg);
}
.dnd--manual.dnd--bottom .dnd__draggable:nth-child(odd) {
  margin-right: 5px;
  transform: rotate(-2deg);
}
.dnd--manual.dnd--bottom-stacked {
  flex-direction: column-reverse;
}
.dnd--manual.dnd--bottom-stacked .dnd__draggables--bottom-stacked {
  position: absolute;
  bottom: 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.dnd--manual.dnd--left {
  flex-direction: row;
}
.dnd--manual.dnd--left .dnd__draggables--left {
  flex-shrink: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-width: 30%;
  padding-left: var(--space-lg);
}
.dnd--manual.dnd--top-left {
  flex-direction: column;
}
.dnd--manual.dnd--top-left .dnd__draggables--top-left {
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.dnd--manual.dnd--right {
  flex-direction: row-reverse;
}
.dnd--manual.dnd--right .dnd__draggables--right {
  flex-shrink: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
  min-width: 30%;
  padding-right: var(--space-lg);
}
.dnd--manual.dnd--top-right {
  flex-direction: column;
}
.dnd--manual.dnd--top-right .dnd__draggables--top-right {
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

.chart--dnd.dnd--layout_1 .dnd__droparea {
  border: 1px dotted var(--gray-800);
  background: rgba(var(--gray-100-rgb), 90%);
  border-radius: var(--border-radius);
}
.chart--dnd.dnd--layout_1 .dnd__droparea .dnd__droparea-name {
  display: none;
}
.chart--dnd.dnd--layout_2 .dnd__droparea {
  border: 1px solid var(--gray-800);
  background: rgba(var(--gray-100-rgb), 20%);
  border-radius: var(--radius-xs);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.chart--dnd.dnd--layout_2 .dnd__droparea .dnd__droparea-name {
  display: block;
  font-weight: bold;
  color: var(--gray-900);
  background: rgba(var(--gray-100-rgb), 30%);
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.chart--dnd.dnd--layout_3 .dnd__droparea {
  border: 1px solid var(--black);
  background: rgba(var(--gray-900-rgb), 20%);
  color: var(--gray-100);
  border-radius: var(--radius-xs);
}
.chart--dnd.dnd--layout_3 .dnd__droparea .dnd__droparea-name {
  display: block;
  font-weight: bold;
  color: var(--gray-100);
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.chart--dnd.dnd--layout_4 .dnd__droparea {
  border: 2px dashed var(--gray-600);
  border-radius: var(--radius-xs);
}
.chart--dnd.dnd--layout_4 .dnd__droparea .dnd__droparea-name {
  display: block;
  font-weight: bold;
  color: var(--gray-900);
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.chart--dnd.dnd--layout_5 .dnd__droparea {
  border: 1px solid var(--client-1-color);
  background: rgba(250, 188, 49, 0.8);
  border-radius: var(--radius-xs);
}
.chart--dnd.dnd--layout_5 .dnd__droparea .dnd__droparea-name {
  display: block;
  font-weight: bold;
  color: var(--gray-900);
  background: rgba(var(--gray-100-rgb), 30%);
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.chart__interaction.multiple-dnd__wrapper {
  display: flex;
  flex-direction: revert;
  align-items: center;
  justify-content: space-around;
}
.chart__interaction.multiple-dnd__wrapper .ui-droparea.multiple-dnd__selected,
.chart__interaction.multiple-dnd__wrapper .ui-droparea.ui-droparea--dropable {
  padding: var(--space-xl) var(--space-lg);
  border-radius: var(--radius-xs);
  border: 1px dashed var(--gray-300);
  background: rgba(var(--gray-800-rgb), 0.1);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.multiple-dnd__answer {
  padding: var(--space-md);
  margin: var(--space-xs);
  color: var(--gray-900);
  background-color: var(--gray-100);
  border-radius: var(--button-border-radius);
  box-shadow: 1px 1px 4px var(--gray-300);
  display: flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: grab;
}
.multiple-dnd__answer.multiple-dnd__answer.ui-draggable--dimmed {
  opacity: 0.6;
  border: 1px dashed var(--gray-400);
  box-shadow: none;
}
.multiple-dnd__answer:hover {
  box-shadow: 0.3em 0.25em 10px rgba(0, 0, 0, 0.3);
  background-color: var(--white);
}
.multiple-dnd__answer .cbi {
  margin-right: var(--space-md);
}

.multiple-dnd__answer--selected {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: not-allowed;
}
.multiple-dnd__answer--selected.multiple-dnd__answer--correct {
  color: var(--correct);
  border: 2px solid var(--correct);
  opacity: 1;
}
.multiple-dnd__answer--selected.multiple-dnd__answer--incorrect {
  color: var(--wrong);
  border: 2px solid var(--wrong);
  opacity: 1;
}
.multiple-dnd__answer--selected.multiple-dnd__answer--missed {
  color: var(--missing);
  border: 2px solid var(--missing);
  opacity: 1;
}
.multiple-dnd__answer--selected:hover {
  box-shadow: 1px 1px 4px var(--gray-300);
  background-color: var(--gray-100);
}

@keyframes answer-feedback_fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.chart.chart--multiple .multiple__item {
  position: relative;
  margin: 1.5ch 0;
  width: 100%;
  display: flex;
  align-items: center;
  color: var(--button-text);
  background: none;
  padding: 0;
  border-radius: var(--button-border-radius);
  box-shadow: none;
  transition: none;
}
.chart.chart--multiple .multiple__item input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
  z-index: 1;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}
.chart.chart--multiple .multiple__item .multiple__answer {
  display: flex;
  align-items: center;
  position: relative;
  padding: 1.5ch;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 10;
  width: 70%;
  height: 100%;
  color: var(--button-text);
  border: var(--button-border);
  border-radius: var(--button-border-radius);
  background: var(--button-background--hover);
  box-shadow: var(--button-drop-shadow);
}
.chart.chart--multiple .multiple__item .multiple__answer:hover {
  color: var(--button-text--hover);
  background: var(--white);
  border-radius: var(--button-border-radius);
}
.chart.chart--multiple .multiple__item .multiple__answer:before {
  content: "⭘";
  margin: 0 1ch 0 0.25ch;
  font-size: var(--text-xxl);
}
.chart.chart--multiple .multiple__item .multiple__answer:before:hover:before {
  content: "⦿";
}
.chart.chart--multiple .multiple__item .multiple__answer--selected {
  color: var(--button-text--hover);
  background: var(--white);
  border-radius: var(--button-border-radius);
  box-shadow: var(--button-drop-shadow);
}
.chart.chart--multiple .multiple__item .multiple__answer--selected:before {
  content: "⦿";
}
.chart.chart--multiple .multiple__item .multiple__answers .multiple__item .multiple__answer__feedback {
  margin: 0 1rem;
  align-self: center;
  width: 0px;
  opacity: 0;
  overflow: hidden;
  transition: none;
.chart.chart--multiple .chart__body {
  display: flex;
  flex-direction: column;
}
.chart.chart--multiple .multiple__feedback {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 10;
  position: absolute;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
  pointer-events: none;
}
.chart.chart--multiple .multiple__feedback .modal-transition-enter-done {
  background: var(--modal-screen);
  display: block;
}
.chart.chart--multiple .multiple__feedback .ui-modal {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
}
.chart.chart--multiple .multiple__feedback .ui-modal .ui-modal__content-header {
  top: 0;
  right: 0;
  position: sticky;
  border-bottom: none;
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.chart.chart--multiple .multiple__feedback .ui-modal .ui-modal__content-header h2#global-feedback {
  display: none;
}
.chart.chart--multiple .multiple__feedback .ui-modal .ui-modal__content {
  background-color: transparent;
  border-radius: 0;
  padding: var(--space-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.chart.chart--multiple .multiple__feedback .chart__text-feedback {
  width: var(--modal-width);
  background: var(--white);
  padding: var(--space-xl);
  box-shadow: var(--cbook-shadow-container);
  border-radius: var(--radius-sm);
}
.chart.chart--multiple .multiple__feedback .multiple__answer__feedback-close {
  position: absolute;
  right: calc(50% - var(--modal-width) / 2);
  top: 50px;
  color: var(--black);
  background: transparent;
  box-shadow: none;
}
.chart.chart--multiple .multiple__answers {
  width: 100%;
  margin: 0;
  padding: 0 var(--space-xl);
  list-style: none;
  transition: none;
}
.chart.chart--multiple.chart--multiple--evaluated .multiple__answers {
  width: 100%;
  margin: 0;
  padding: 0 var(--space-xl);
  list-style: none;
  transition: none;
}
.chart.chart--multiple.chart--multiple--evaluated .multiple__answers .multiple__item .multiple__answer__feedback {
  animation: 1.3s forwards answer-feedback_fadein;
  margin: 0 1rem;
  align-self: center;
  width: 30%;
  opacity: 1;
}
.chart.chart--multiple.chart--multiple--evaluated .multiple__answers .multiple__item .multiple__answer__feedback .multiple__answer__feedback-text {
  transition: none;
  position: relative;
  padding: 1ch;
  display: flex;
  border-radius: 10px;
  font-style: italic;
  font-weight: 100;
  font-size: var(--text-xxs);
}
.chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--incorrect {
  box-shadow: none;
  background: var(--danger-bg);
  color: var(--danger-outline);
  border: 1px solid var(--danger-outline);
}
.chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--missed {
  box-shadow: none;
  background: var(--success-bg);
  color: var(--success-outline);
  border: 1px solid var(--success-outline);
}

.chart__body,
.ext__body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  height: auto;
  overflow: hidden;
  padding: var(--chart-content-padding);
}

.mce-content-body {
  height: 100%;
  width: 100%;
}

.chart__background {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.chart__background-image {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
}

.chart--single {
  position: relative;
  padding: 30px;
}

.single__question {
  font-size: var(--text-xl);
  font-weight: bold;
  padding: 1.25em 50px;
}

.single__answer {
  width: min(500px, 100%);
  height: auto;
  aspect-ratio: 1/1;
  margin: var(--space-lg);
  cursor: pointer;
  transition: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: var(--button-border);
  border-radius: var(--button-border-radius);
  background: var(--button-background--hover);
  box-shadow: 1px 1px 4px var(--gray-300);
}
.single__answer:hover, .single__answer:focus {
  transform: scale(1.04);
  outline: var(--focus-outline);
  /* box-shadow: 0 0 0 6px var(--focus-dropshadow); */
  box-shadow: 0.3em 0.25em 10px rgba(0, 0, 0, 0.3);
  background-color: var(--white);
}

.single__answer--selected {
  transform: scale(1.04);
  outline: var(--focus-outline);
  box-shadow: 0.3em 0.25em 10px rgba(0, 0, 0, 0.3);
  border: 2px solid var(--primary-color);
}

.single__answer--incorrect,
.single__answer--correct {
  transition: none;
  cursor: default;
  pointer-events: none;
}

.single__answer--correct {
  opacity: 1;
  transform: scale(1.04);
  border: 2px solid var(--correct);
}

.single__answer--incorrect {
  opacity: 0.4;
  transform: scale(1);
  border: 2px solid var(--wrong);
  box-shadow: none;
}

.single__txt {
  padding: var(--space-md) var(--space-md);
  padding-top: calc(2 * var(--space-xl));
  font-size: var(--text-md);
  line-height: var(--text-md);
  width: 100%;
  text-align: center;
  cursor: inherit;
  z-index: 10;
  color: var(--black);
  background: linear-gradient(0deg, rgba(var(--gray-100-rgb), 85%) 40%, transparent);
  border-radius: 0;
}

.single__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  z-index: 5;
}

#editor-body {
  font-size: initial;
}
#editor-body .tools {
  height: 120px;
  z-index: 500;
  background-color: #fafafa;
  background-size: 10px 10px;
  background-image: repeating-linear-gradient(45deg, #ebebeb 0, #ebebeb 1px, #fafafa 0, #fafafa 50%);
}
#editor-body .chart {
  position: relative;
}
#editor-body .chart.chart--template {
  padding: var(--chart-content-padding);
}
#editor-body .resizable_ace_editor {
  z-index: 2000 !important;
}

.activities-are-visible .chart--extension,
.notes-are-visible .chart--extension,
.bonus-material-is-visible .chart--extension,
.menu-is-visible .chart--extension {
  pointer-events: none;
  opacity: 0.7;
}

.chart__iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

#app-community-voting {
  /* BALKEN */
  /* SLIDER */
  /* RADAR */
  /* LINE */
}
#app-community-voting .chart__legend-item div {
  width: 20px;
  height: 20px;
  margin: 5px;
  border-radius: 3px;
}
#app-community-voting .voting-chart-container {
  margin: 0 var(--space-xl);
}
#app-community-voting .choice__legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#app-community-voting .choice__legend > div {
  width: 100%;
}
#app-community-voting .text-right {
  text-align: left;
}
#app-community-voting .text-center {
  text-align: center;
}
#app-community-voting .text-right {
  text-align: right;
}
#app-community-voting .balken-item {
  display: flex;
  align-items: center;
  height: 70px;
  margin: var(--space-md);
}
#app-community-voting .chart-balken__bar {
  width: 45%;
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: initial;
  background-color: initial;
  cursor: pointer;
  color: var(--button-text);
  background: var(--button-background);
  padding: var(--button-padding);
  margin: var(--button-margin);
  border-radius: var(--button-border-radius);
  border: var(--button-border);
  box-shadow: var(--button-drop-shadow);
}
#app-community-voting .chart-balken__bar.voted {
  opacity: 0.7;
  background: var(--gray-250);
  box-shadow: none;
}
#app-community-voting .chart-balken__bar.selected {
  opacity: 1;
  background: var(--white);
  outline: var(--focus-outline);
  box-shadow: 0 0 0 6px var(--focus-dropshadow);
  transition: border 0.2s ease, box-shadow 0.2s ease;
  border: 2px solid var(--primary-color);
}
#app-community-voting .chart-balken__bar.voted.selected {
  outline: none;
  box-shadow: var(--button-drop-shadow);
  transition: none;
}
#app-community-voting .chart-balken__eval-bar {
  width: 55%;
  height: 100%;
  margin-left: var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
#app-community-voting .chart-balken__field {
  background: var(--gray-250);
  border-radius: 100px;
  padding: 2px;
  margin: 2px;
  border: 2px solid transparent;
  outline: 1px solid transparent;
  background-image: radial-gradient(transparent 20%, transparent 15%), radial-gradient(transparent 20%, transparent 15%);
  background-position: 0px 0px, 10px 10px;
  background-size: 7px 7px;
}
#app-community-voting .chart-balken__field div {
  background: var(--gray-900);
  border-radius: 100px;
  height: 100%;
  display: flex;
  align-items: center;
}
#app-community-voting .chart-balken__field div span {
  padding: 0 var(--space-md);
  color: var(--black);
  background: var(--white);
  border-radius: 3000px;
  font-size: var(--text-xs);
  line-height: var(--text-xs);
}
#app-community-voting .chart-balken__field:nth-child(2) div {
  background: var(--gray-400);
}
#app-community-voting .userSlider {
  height: 20px;
}
#app-community-voting .studySlider,
#app-community-voting .communitySlider {
  height: 10px;
  margin-bottom: 6px;
}
#app-community-voting .choice-holder {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0;
  margin: 0;
}
#app-community-voting .choice-holder .choice {
  width: 45%;
  margin: 0 var(--space-md);
  margin-bottom: var(--space-xl);
}
#app-community-voting .voter {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  transition: 0.4s background-color;
}
#app-community-voting .voter li {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
#app-community-voting .voter.userSlider {
  margin-bottom: 10px;
}
#app-community-voting .voter.studySlider {
  margin-bottom: 5px;
}
#app-community-voting .voter--active {
  z-index: 10;
}
#app-community-voting .voter--selected,
#app-community-voting .voter--active {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
  border-right: 2px solid transparent;
  border-left: 2px solid transparent;
}
#app-community-voting .voter--unselected {
  background-color: var(--white);
  border-right: 2px solid transparent;
  border-left: 2px dotted var(--gray-250);
}
#app-community-voting ul.voter li:nth-child(1) {
  animation-delay: 0.02s;
}
#app-community-voting ul.voter li:nth-child(2) {
  animation-delay: 0.04s;
}
#app-community-voting ul.voter li:nth-child(3) {
  animation-delay: 0.06s;
}
#app-community-voting ul.voter li:nth-child(4) {
  animation-delay: 0.08s;
}
#app-community-voting ul.voter li:nth-child(5) {
  animation-delay: 0.1s;
}
#app-community-voting ul.voter li:nth-child(6) {
  animation-delay: 0.12s;
}
#app-community-voting ul.voter li:nth-child(7) {
  animation-delay: 0.14s;
}
#app-community-voting ul.voter li:nth-child(8) {
  animation-delay: 0.16s;
}
#app-community-voting ul.voter li:nth-child(9) {
  animation-delay: 0.18s;
}
#app-community-voting ul.voter li:nth-child(10) {
  animation-delay: 0.2s;
}
#app-community-voting ul.voter li:nth-child(11) {
  animation-delay: 0.22s;
}
#app-community-voting ul.voter li:nth-child(12) {
  animation-delay: 0.24s;
}
#app-community-voting ul.voter li:nth-child(13) {
  animation-delay: 0.26s;
}
#app-community-voting ul.voter li:nth-child(14) {
  animation-delay: 0.28s;
}
#app-community-voting ul.voter li:nth-child(15) {
  animation-delay: 0.3s;
}
#app-community-voting ul.voter li:nth-child(16) {
  animation-delay: 0.32s;
}
#app-community-voting ul.voter li:nth-child(17) {
  animation-delay: 0.34s;
}
#app-community-voting ul.voter li:nth-child(18) {
  animation-delay: 0.36s;
}
#app-community-voting ul.voter li:nth-child(19) {
  animation-delay: 0.38s;
}
#app-community-voting ul.voter li:nth-child(20) {
  animation-delay: 0.4s;
}
#app-community-voting ul.voter li:first-child {
  border-radius: 100px 0 0 100px;
  border-left: none;
}
#app-community-voting ul.voter li:last-child {
  border-radius: 0 100px 100px 0;
}
#app-community-voting .voter--active:after {
  content: "";
  position: relative;
  display: flex;
  top: -18px;
  width: 10px;
  margin: 0 auto;
  border-color: inherit;
  border-style: solid;
  border-width: 15px 10px 0 10px;
  border-top-color: inherit;
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
}
#app-community-voting .chart-einschatzung {
  display: flex;
  align-items: flex-start;
}
#app-community-voting .chart-einschatzung .choice__slider {
  margin-bottom: 20px;
}
#app-community-voting .chart-einschatzung .chart-slider__title {
  margin-bottom: 15px;
}
#app-community-voting .chart-einschatzung .voter--active:after {
  top: -15px;
  width: 10px;
  border-width: 10px 5px 0 5px;
}
#app-community-voting .chart-einschatzung__choice-container {
  width: 40%;
}
#app-community-voting .chart-einschatzung__diagram-container {
  width: 60%;
}
#app-community-voting.ext__line #chart-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
}
#app-community-voting.ext__line #chart-container .input-select-container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-evenly;
}
#app-community-voting.ext__line #chart-container .input-select-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--space-xs);
}
#app-community-voting.ext__line #chart-container .input-select-item select {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
}
#app-community-voting.ext__line #chart-container .input-select-item label {
  font-size: var(--text-xxs);
  padding-bottom: var(--space-sm);
}
#app-community-voting.ext__line #chart-container .chart-line__diagram-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
#app-community-voting.ext__line #chart-container .chart-line__diagram-labels-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-width: clamp(200px, 100%, 600px);
}
#app-community-voting.ext__line #chart-container .chart-line__diagram-labels-container .chart-line__diagram-label {
  width: 100%;
}
#app-community-voting.ext__line #chart-container .chart-line__diagram-labels-container .chart-line__diagram-label p {
  font-size: var(--text-xxxs);
  line-height: var(--text-xxs);
  padding: var(--space-sm) var(--space-md);
  margin: 0;
}

#app-community-wordcloud .wordcloud-container .container__flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#app-community-wordcloud .add-area-container {
  width: 30%;
  margin: 0;
  z-index: 10;
  min-width: 200px;
}
#app-community-wordcloud .tag-cloud-container {
  width: 70%;
}
#app-community-wordcloud .input-container {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  box-sizing: border-box;
  position: relative;
  margin-bottom: var(--space-lg);
}
#app-community-wordcloud .input-container button.addTag__button {
  z-index: 5;
  position: absolute;
  background: transparent;
  margin: 2px;
  margin-right: 3px;
  box-shadow: none;
}
#app-community-wordcloud .input-container .input-field {
  width: 100%;
  position: relative;
  display: flex;
}
#app-community-wordcloud .input-container .input-field input {
  padding-right: 5ch;
}
#app-community-wordcloud .my-tags__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: var(--gray-250);
  border-radius: 100px;
  padding-left: var(--space-lg);
  margin: var(--space-xs);
  font-size: var(--text-xxs);
}
#app-community-wordcloud .my-tags__item button {
  margin: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  padding: var(--space-xs);
  background: var(--gray-100);
  color: var(--gray-500);
  border-radius: 300px;
}
#app-community-wordcloud .my-tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#app-community-wordcloud .container__with-margin.warning-message {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#app-bulletin-board .bg {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.66);
}
#app-bulletin-board .bg .wrap {
  position: relative;
  padding: var(--space-lg);
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#app-bulletin-board .bg .wrap .window {
  position: relative;
  max-height: 100%;
  width: clamp(300px, 90vw, 750px);
  height: 100%;
  display: flex;
  border-radius: var(--radius-xs);
  background-color: var(--gray-100);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
#app-bulletin-board .bg .wrap .window > .chart__btn-close {
  position: relative;
  right: 0;
  height: 40px;
  width: 40px;
  padding: var(--space-xs);
  border-radius: 200px;
  border-width: 2px;
  border-style: solid;
  pointer-events: all;
}
#app-bulletin-board .bg .wrap .window .content {
  position: relative;
  height: 100%;
  width: 100%;
  max-height: calc(100% - 0rem);
  padding: var(--space-lg);
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
#app-bulletin-board .bg .wrap .window .content.popup-inner .image-slider__item__popup {
  display: flex;
  align-items: center;
  justify-content: center;
}
#app-bulletin-board .bg .wrap .window .content.popup-inner .image-slider__item__popup img {
  min-height: min(200px, 50vw);
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  display: grid;
  grid-template-rows: auto auto auto auto;
  grid-template-columns: 100%;
  grid-template-areas: "dialog-header" "dialog-content" "dialog-files" "dialog-actions";
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__header {
  grid-area: dialog-header;
  position: relative;
  display: flex;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content {
  grid-area: dialog-content;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte {
  margin: var(--input-margin);
  background-color: var(--white);
  border-radius: var(--input-border-radius);
  border: var(--input-border);
  display: flex;
  flex-wrap: wrap;
  /* QUILL EDITOR */
  /* QUILL EDITOR */
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-editor {
  border-radius: var(--input-border-radius);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-editor img,
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-editor svg,
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-editor video {
  -o-object-fit: contain;
     object-fit: contain;
  position: relative;
  width: 100%;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats {
  margin-right: var(--space-md);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats .ql-picker {
  width: auto;
  height: auto;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats .ql-picker .ql-picker-label {
  background: transparent;
  cursor: pointer;
  height: initial;
  width: initial;
  padding: var(--button-padding);
  margin: var(--button-margin);
  border-radius: var(--input-border-radius);
  border: var(--input-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  outline: var(--focus-outline--off);
  box-shadow: 0 0 0 0px var(--focus-dropshadow--off);
  transition: none;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats .ql-picker .ql-picker-label:focus, #app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats .ql-picker .ql-picker-label:focus-visible {
  outline: var(--focus-outline);
  box-shadow: 0 0 0 6px var(--focus-dropshadow);
  transition: none;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats .ql-picker .ql-picker-label.ql-active {
  color: var(--black);
  outline: 1px solid var(--black);
  border-color: var(--black);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats .ql-picker .ql-picker-label.ql-active .ql-stroke {
  color: var(--black);
  stroke: var(--black);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats .ql-picker .ql-picker-label svg {
  width: var(--icon-size-s, 16px);
  height: var(--icon-size-s, 16px);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats .ql-picker.ql-expanded .ql-picker-options {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats button,
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats .ql-picker-label {
  background: transparent;
  cursor: pointer;
  height: initial;
  width: initial;
  padding: var(--button-padding);
  margin: var(--button-margin);
  border-radius: var(--input-border-radius);
  border: var(--input-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  outline: var(--focus-outline--off);
  box-shadow: 0 0 0 0px var(--focus-dropshadow--off);
  transition: none;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats button:focus, #app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats button:focus-visible,
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats .ql-picker-label:focus,
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats .ql-picker-label:focus-visible {
  outline: var(--focus-outline);
  box-shadow: 0 0 0 6px var(--focus-dropshadow);
  transition: none;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats button.ql-active,
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats .ql-picker-label.ql-active {
  color: var(--black);
  outline: 1px solid var(--black);
  border-color: var(--black);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats button.ql-active .ql-stroke,
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats .ql-picker-label.ql-active .ql-stroke {
  color: var(--black);
  stroke: var(--black);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats button svg,
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats .ql-picker-label svg {
  width: var(--icon-size-s, 16px);
  height: var(--icon-size-s, 16px);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats button:hover,
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats .ql-picker-label:hover {
  border: 1px solid var(--black);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats button:hover .ql-stroke,
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats .ql-picker-label:hover .ql-stroke {
  stroke: var(--black);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats button:hover .ql-fill,
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats button:hover .ql-stroke.ql-fill,
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats .ql-picker-label:hover .ql-fill,
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-toolbar .ql-formats .ql-picker-label:hover .ql-stroke.ql-fill {
  fill: var(--black);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-snow {
  border: transparent;
  padding: 0;
  border-bottom: var(--input-border);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-snow .ql-stroke {
  stroke: var(--gray-600);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-snow .ql-fill,
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__rte .ql-snow .ql-stroke.ql-fill {
  fill: var(--gray-600);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__slider {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-areas: "dropzone";
  grid-gap: var(--space-xs);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__slider > div {
  margin: var(--input-margin);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__slider .image-slider__dropzone {
  grid-area: dropzone;
  min-height: 150px;
  border-radius: var(--radius-sm);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__slider .image-slider__dropzone .drop-area {
  background-color: var(--gray-200);
  border: 2px dashed var(--gray-350);
  height: 100%;
  width: 100%;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: none;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__slider .image-slider__dropzone .drop-area .dropZone-icon--text {
  font-size: var(--text-xs);
  text-align: center;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__slider .image-slider__dropzone.dz-drag-hover .drop-area {
  border-color: var(--focus-color-1);
  background-color: var(--focus-color-07);
  box-shadow: 0 0 0 6px var(--focus-dropshadow);
  transition: none;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__slider .image-slider__item {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: 100%;
  grid-template-areas: "img-slide-preview" "img-slide-info" "img-slide-actions";
  background-color: var(--gray-150);
  border-radius: var(--input-border-radius);
  border: var(--input-border);
  padding: var(--space-md);
  gap: var(--space-md);
  box-shadow: 0 0 0 0px var(--focus-dropshadow--off);
  transition: none;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__slider .image-slider__item__preview {
  grid-area: img-slide-preview;
  display: flex;
  flex-direction: row;
  background-color: var(--gray-200);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__slider .image-slider__item__preview .file-img {
  width: 100%;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__slider .image-slider__item__info {
  grid-area: img-slide-info;
  display: flex;
  flex-direction: row;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__slider .image-slider__item__info input {
  color: var(--gray-600);
  font-size: var(--text-xxxs);
  font-style: italic;
  text-align: center;
  padding: var(--space-sm);
  margin: 0;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__slider .image-slider__item__actions {
  grid-area: img-slide-actions;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__slider .image-slider__item__actions button {
  padding: var(--space-md);
  border-radius: 3000px;
  background: none;
  color: var(--black);
  box-shadow: none;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__slider .image-slider__item__actions button#remove-image {
  color: var(--danger);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__slider .image-slider__item__actions button .chart__btn--text {
  display: none;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__content__slider .image-slider__item:focus-within {
  background: var(--white);
  box-shadow: var(--toggle-button-box-shadow--hover);
  transition: none;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__files-list {
  grid-area: dialog-files;
  border-top: 1px solid var(--gray-250);
  border-bottom: 1px solid var(--gray-250);
  margin: var(--space-lg) 0;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__files-list .chart__btnGroup-attach-file {
  display: flex;
  flex-direction: column-reverse;
  padding: var(--space-md) 0;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__files-list .chart__btnGroup-attach-file .chart__btn-add-file {
  padding: 0;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__files-list .chart__btnGroup-attach-file .chart__btn-add-file label {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: var(--space-md) var(--space-lg);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__files-list .chart__btnGroup-attach-file .chart__btnGroup__description {
  font-size: var(--text-xxs);
  margin: var(--space-md) 0 0 0;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__files-list .chart__btnGroup-attach-file .chart__btnGroup__description button,
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__files-list .chart__btnGroup-attach-file .chart__btnGroup__description label {
  cursor: pointer;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__files-list .chart__btnGroup-attach-file input {
  display: none;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__files-list .chart__btnGroup-attach-file:empty {
  display: none;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__files-list .files-list {
  padding-left: 0;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__files-list .files-list li:nth-child(odd) {
  background-color: var(--gray-200);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__files-list .files-list li:nth-child(even) {
  background-color: var(--gray-250);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__files-list .files-list .attached-file {
  width: 100%;
  position: relative;
  display: grid;
  grid-template-rows: 56px;
  grid-template-columns: 24px 1fr auto;
  grid-gap: var(--space-md);
  padding-left: var(--space-md);
  grid-template-areas: "file-icon file-name file-action";
  align-items: center;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__files-list .files-list .attached-file .file-icon {
  grid-area: file-icon;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__files-list .files-list .attached-file .attached-file--name {
  grid-area: file-name;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__files-list .files-list .attached-file .chart__btn {
  grid-area: file-action;
  background: transparent;
  color: var(--black);
  box-shadow: none;
  width: auto;
  height: auto;
  aspect-ratio: 1/1;
  padding: var(--space-md);
  border-radius: 3000px;
  z-index: 99999;
  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;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__files-list .files-list .attached-file .chart__btn:focus, #app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__files-list .files-list .attached-file .chart__btn: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;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__actions {
  grid-area: dialog-actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__actions button {
  margin: var(--space-md);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__actions button#cancel {
  color: var(--danger);
  background: var(--danger-bg);
  outline: 1px solid var(--danger);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__actions button#save {
  color: var(--success);
  background: var(--success-bg);
  outline: 1px solid var(--success);
  transition: none;
}
#app-bulletin-board .bg .wrap .window .content.dialog-inner .dialog-inner__actions button#delete {
  background: var(--danger);
  color: var(--white);
  outline: 1px solid var(--danger);
  transition: none;
}
#app-bulletin-board .sort-field,
#app-bulletin-board .sort-field form {
  width: auto;
  display: flex;
  align-items: center;
}
#app-bulletin-board .form-group form {
  margin-right: var(--space-lg);
}
#app-bulletin-board .form-group label {
  white-space: nowrap;
}
#app-bulletin-board .post-container {
  width: 100%;
  list-style: none;
  padding-left: 0;
  display: inline-block;
  -moz-column-gap: var(--space-lg);
       column-gap: var(--space-lg);
  margin-top: var(--space-lg);
  -moz-columns: 3 200px;
       columns: 3 200px;
  min-height: 400px;
  height: auto;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}
@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  #app-bulletin-board .post-container {
    -moz-columns: 4 200px;
         columns: 4 200px;
  }
}
#app-bulletin-board .post-container .post {
  position: relative;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  grid-template-areas: "headers" "post-content" "reactions" "meta-information";
  list-style-type: none;
  overflow: hidden;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  color: var(--card-text-color, var(--text-color));
  background-color: var(--card-bg-color, var(--gray-150));
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12), 0 16px 16px rgba(0, 0, 0, 0.12);
  gap: var(--space-md);
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-xs);
}
#app-bulletin-board .post-container .post.post--user {
  border: 5px solid rgba(var(--primary-color-rgb), 0.4);
}
#app-bulletin-board .post-container .post.post--user .post__background {
  background-color: rgba(var(--primary-color-rgb), 0.15);
}
#app-bulletin-board .post-container .post.post--user .post__background img {
  opacity: 0.5;
}
#app-bulletin-board .post-container .post__title {
  grid-area: headers;
  position: relative;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto auto;
  grid-template-areas: "headers_h3 headers_action";
  z-index: 10;
}
#app-bulletin-board .post-container .post__title h3 {
  grid-area: headers_h3;
  display: block;
  position: relative;
  width: auto;
}
#app-bulletin-board .post-container .post__title__actions {
  grid-area: headers_action;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
#app-bulletin-board .post-container .post__title__actions .chart__btn {
  padding: var(--space-sm);
  background: transparent;
  color: var(--gray-600);
  border-radius: var(--radius-xs);
  outline: var(--focus-outline--off);
  box-shadow: 0 0 0 0px var(--focus-dropshadow--off);
  transition: none;
}
#app-bulletin-board .post-container .post__title__actions .chart__btn:focus, #app-bulletin-board .post-container .post__title__actions .chart__btn:focus-visible {
  outline: var(--focus-outline);
  box-shadow: 0 0 0 6px var(--focus-dropshadow);
  transition: beuzu;
}
#app-bulletin-board .post-container .post__title__actions .chart__btn span {
  display: none;
}
#app-bulletin-board .post-container .post__content {
  grid-area: post-content;
  z-index: 10;
}
#app-bulletin-board .post-container .post__reactions {
  grid-area: reactions;
  align-items: center;
  justify-self: center;
  width: 100%;
  z-index: 10;
}
#app-bulletin-board .post-container .post__reactions .selection-outer {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 30000px;
  padding: 0;
}
#app-bulletin-board .post-container .post__reactions .selection-outer .emoji-container {
  align-items: center;
  justify-content: center;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  justify-items: center;
}
#app-bulletin-board .post-container .post__reactions .selection-outer .emoji-container .card-emojis {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 300px;
  height: 30px;
  width: auto;
  border: 1px solid rgba(var(--gray-100-rgb), 0.5);
  border-color: rgba(var(--gray-100-rgb), 0.5);
  background-color: rgba(var(--gray-100-rgb), 0.5);
  padding: 0 var(--space-sm);
  margin: 2px var(--space-xxs);
  box-sizing: border-box;
  cursor: pointer;
}
#app-bulletin-board .post-container .post__reactions .selection-outer .emoji-container .card-emojis p {
  margin: 0;
  font-size: var(--text-xxxs);
}
#app-bulletin-board .post-container .post__reactions .selection-outer .emoji-container .card-emojis p:last-child {
  width: 3ch;
  text-align: center;
}
#app-bulletin-board .post-container .post__reactions .selection-outer .emoji-container .emoji-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  height: 30px;
  width: auto;
  border: 1px solid rgba(var(--gray-100-rgb), 0.5);
  border-color: transparent;
  background-color: rgba(var(--gray-100-rgb), 0.5);
  padding: 0 var(--space-xxs);
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#app-bulletin-board .post-container .post__reactions .selection-outer .emoji-container .emoji-item:hover {
  background: var(--white);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#app-bulletin-board .post-container .post__reactions .selection-outer .emoji-container .emoji-item:first-child {
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
}
#app-bulletin-board .post-container .post__reactions .selection-outer .emoji-container .emoji-item:last-child {
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
}
#app-bulletin-board .post-container .post__reactions .selection-outer .emoji-container .emoji-item p {
  margin: 0;
  font-size: var(--text-xxxs);
}
#app-bulletin-board .post-container .post__reactions .selection-outer .emoji-container .emoji-item p:last-child {
  width: 3ch;
  text-align: center;
}
#app-bulletin-board .post-container .post__reactions .selection-outer #selection {
  position: relative;
  aspect-ratio: 1/1;
  width: auto;
  height: 30px;
}
#app-bulletin-board .post-container .post__reactions .selection-outer #selection button {
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30000px;
  padding: 0px;
  margin: 0px;
  color: var(--button-text);
  background: var(--button-background);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#app-bulletin-board .post-container .post__reactions .selection-outer #selection button:hover {
  color: var(--button-text--hover);
  background: var(--button-background--hover);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#app-bulletin-board .post-container .post__meta {
  grid-area: meta-information;
  display: flex;
  align-items: center;
  opacity: 0.7;
  justify-content: space-between;
  z-index: 10;
}
#app-bulletin-board .post-container .post__meta * {
  font-family: monospace;
  font-size: var(--text-xxxs);
  line-height: var(--text-xxs);
}
#app-bulletin-board .post-container .post__meta__timestamp {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}
#app-bulletin-board .post-container .post__meta__timestamp span {
  display: inline-block;
}
#app-bulletin-board .post-container .post__meta__timestamp span:first-child {
  margin-right: 1ch;
}
#app-bulletin-board .post-container .post__meta__user {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
}
#app-bulletin-board .post-container .post__meta__user span {
  display: inline-block;
}
#app-bulletin-board .post-container .post__meta__user span:last-child {
  margin-left: 1ch;
}
#app-bulletin-board .post-container .post__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#app-bulletin-board .post-container .post__background img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
#app-bulletin-board .post-container .post__content {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 100%;
  grid-template-areas: "description" "slider" "indicator" "file-list";
}
#app-bulletin-board .post-container .post__content__text img,
#app-bulletin-board .post-container .post__content__text svg,
#app-bulletin-board .post-container .post__content__text video {
  -o-object-fit: contain;
     object-fit: contain;
  position: relative;
  width: 100%;
}
#app-bulletin-board .post-container .post__content__slider, #app-bulletin-board .post-container .post__content__slider-navigation {
  grid-area: slider;
}
#app-bulletin-board .post-container .post__content_slider-indicator {
  grid-area: indicator;
}
#app-bulletin-board .post-container .post__content__slider {
  aspect-ratio: 4/3;
}
#app-bulletin-board .post-container .post__content__slider .image-slider__inner {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  grid-template-areas: "slides";
}
#app-bulletin-board .post-container .post__content__slider .image-slider__inner .slide {
  grid-area: slides;
  opacity: 0;
}
#app-bulletin-board .post-container .post__content__slider .image-slider__inner .slide.active {
  opacity: 1;
}
#app-bulletin-board .post-container .post__content__slider .image-slider__inner .slide .slide-img-container {
  width: 100%;
  height: 100%;
}
#app-bulletin-board .post-container .post__content__slider .image-slider__inner .slide .slide-img-container figure {
  cursor: pointer;
}
#app-bulletin-board .post-container .post__content__slider .image-slider__inner .slide .slide-img-container figure img {
  -o-object-fit: contain;
     object-fit: contain;
  height: auto;
  width: 100%;
}
#app-bulletin-board .post-container .post__content__slider-indicator {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}
#app-bulletin-board .post-container .post__content__slider-indicator input {
  width: var(--space-md);
  height: var(--space-md);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 3000px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--gray-600);
  border-width: 3px;
}
#app-bulletin-board .post-container .post__content__slider-indicator input:checked {
  background-color: var(--primary-color);
}
#app-bulletin-board .post-container .post__content__slider-indicator input.last-active-btn {
  opacity: 0.5;
}
#app-bulletin-board .post-container .post__content__slider-indicator input:disabled {
  opacity: 0.2;
}
#app-bulletin-board .post-container .post__content__slider-navigation {
  position: relative;
  display: flex;
  align-self: center;
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 100%;
  z-index: 9;
  pointer-events: none;
}
#app-bulletin-board .post-container .post__content__slider-navigation .slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 30px;
  height: 30px;
  border-radius: 3000px;
  background-color: var(--gray-200);
  border: 2px solid var(--gray-300);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  pointer-events: all;
  padding: var(--space-xs);
}
#app-bulletin-board .post-container .post__content__files-list {
  grid-area: file-list;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: var(--space-md) 0;
  width: 100%;
}
#app-bulletin-board .post-container .post__content__files-list ul,
#app-bulletin-board .post-container .post__content__files-list li {
  padding-left: 0;
  width: calc(100% - 20px);
}
#app-bulletin-board .post-container .post__content__files-list .attached-file {
  display: flex;
  align-items: center;
  padding-left: 0;
  cursor: pointer;
}
#app-bulletin-board .post-container .post__content__files-list .attached-file a {
  position: relative;
  width: 100%;
  text-decoration: none;
}
#app-bulletin-board .post-container .post__content__files-list .attached-file .file-icon {
  min-width: var(--icon-size-m);
  min-height: var(--icon-size-m);
  width: var(--icon-size-m);
  height: var(--icon-size-m);
  margin-right: var(--space-md);
  padding: 3px;
}
#app-bulletin-board .post-container .post__content__files-list .attached-file--name {
  font-size: var(--text-xxxs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#app-essay .label-lists {
  min-width: 40%;
}
#app-essay .rte-container {
  min-width: auto;
  width: 100%;
}
#app-essay .chart__interaction-main {
  display: flex;
}
#app-essay .label-lists {
  padding: 0 5px;
  margin: 0;
}
#app-essay .label-lists li {
  list-style: none;
}
#app-essay .label-list__item button {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 5px 0;
  align-items: flex-start;
  text-align: left;
  opacity: 0.7;
  background: var(--gray-250);
}
#app-essay .label-list__item button.active {
  opacity: 1;
  background: var(--white);
}
#app-essay .chart__no-data {
  text-align: center;
}
#app-essay .chart__no-data_image {
  width: 40%;
}

#app-explorer {
  /* mini-Game - Start */
  /* mini-Game END */
  /* No Data */
  /* No Cards */
  /* actual Cards */
}
#app-explorer .deck {
  margin: auto;
  flex-grow: 1;
  min-width: 250px;
  min-height: 250px;
  position: relative;
}
#app-explorer .playing-card {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 3.875rem;
  height: 5.5rem;
  background-color: var(--white);
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  cursor: default;
  will-change: transform;
}
#app-explorer .playing-card:before,
#app-explorer .playing-card:after {
  position: absolute;
  font-size: var(--text-xxxs);
  text-align: center;
  line-height: var(--text-xxxs);
  white-space: pre-line;
  width: 0.55rem;
  letter-spacing: -0.1rem;
}
#app-explorer .playing-card:before {
  top: 0.15rem;
  left: 0;
}
#app-explorer .playing-card:after {
  bottom: 0.1rem;
  right: 0;
  transform: rotate(180deg);
}
#app-explorer .playing-card .face {
  height: 100%;
  background-position: 50% 50%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#app-explorer .playing-card .back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--primary-color);
  background-image: linear-gradient(30deg, rgba(0, 0, 0, 0.5) 12%, transparent 12.5%, transparent 87%, rgba(0, 0, 0, 0.5) 87.5%, rgba(0, 0, 0, 0.5)), linear-gradient(150deg, rgba(0, 0, 0, 0.5) 12%, transparent 12.5%, transparent 87%, rgba(0, 0, 0, 0.5) 87.5%, rgba(0, 0, 0, 0.5)), linear-gradient(30deg, rgba(0, 0, 0, 0.5) 12%, transparent 12.5%, transparent 87%, rgba(0, 0, 0, 0.5) 87.5%, rgba(0, 0, 0, 0.5)), linear-gradient(150deg, rgba(0, 0, 0, 0.5) 12%, transparent 12.5%, transparent 87%, rgba(0, 0, 0, 0.5) 87.5%, rgba(0, 0, 0, 0.5)), linear-gradient(60deg, rgba(0, 0, 0, 0.2) 25%, transparent 25.5%, transparent 75%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.2)), linear-gradient(60deg, rgba(0, 0, 0, 0.2) 25%, transparent 25.5%, transparent 75%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.2));
  background-size: 18px 32px;
  background-position: 0 0, 0 0, 9px 16px, 9px 16px, 0 0, 9px 16px;
  box-shadow: 1px 1px 4px var(--gray-400);
  border: 5px solid var(--gray-100);
  border-radius: 6px;
}
#app-explorer .playing-card.spades,
#app-explorer .playing-card.clubs,
#app-explorer .playing-card.joker {
  color: var(--gray-900);
}
#app-explorer .playing-card.hearts,
#app-explorer .playing-card.diamonds,
#app-explorer .playing-card.joker.rank3 {
  color: var(--danger);
}
#app-explorer .playing-card.joker.rank1:before,
#app-explorer .playing-card.joker.rank2:before,
#app-explorer .playing-card.joker.rank3:before,
#app-explorer .playing-card.joker.rank1:after,
#app-explorer .playing-card.joker.rank2:after,
#app-explorer .playing-card.joker.rank3:after {
  content: "J\aO\aK\a E\aR";
  letter-spacing: 0;
  font-size: 0.4rem;
  line-height: 0.4rem;
  padding: 0.15rem 0.05rem;
  width: 0.5rem;
}
#app-explorer .playing-card.rank1:before,
#app-explorer .playing-card.rank1:after {
  content: "A";
}
#app-explorer .playing-card.rank2:before,
#app-explorer .playing-card.rank2:after {
  content: "2";
}
#app-explorer .playing-card.rank3:before,
#app-explorer .playing-card.rank3:after {
  content: "3";
}
#app-explorer .playing-card.rank4:before,
#app-explorer .playing-card.rank4:after {
  content: "4";
}
#app-explorer .playing-card.rank5:before,
#app-explorer .playing-card.rank5:after {
  content: "5";
}
#app-explorer .playing-card.rank6:before,
#app-explorer .playing-card.rank6:after {
  content: "6";
}
#app-explorer .playing-card.rank7:before,
#app-explorer .playing-card.rank7:after {
  content: "7";
}
#app-explorer .playing-card.rank8:before,
#app-explorer .playing-card.rank8:after {
  content: "8";
}
#app-explorer .playing-card.rank9:before,
#app-explorer .playing-card.rank9:after {
  content: "9";
}
#app-explorer .playing-card.rank10:before,
#app-explorer .playing-card.rank10:after {
  content: "10";
}
#app-explorer .playing-card.rank11:before,
#app-explorer .playing-card.rank11:after {
  content: "J";
}
#app-explorer .playing-card.rank12:before,
#app-explorer .playing-card.rank12:after {
  content: "Q";
}
#app-explorer .playing-card.rank13:before,
#app-explorer .playing-card.rank13:after {
  content: "K";
}
#app-explorer .playing-card.spades.rank1 .face {
  background-image: url(fonts/0_1.svg);
}
#app-explorer .playing-card.spades.rank2 .face {
  background-image: url(fonts/0_2.svg);
}
#app-explorer .playing-card.spades.rank3 .face {
  background-image: url(fonts/0_3.svg);
}
#app-explorer .playing-card.spades.rank4 .face {
  background-image: url(fonts/0_4.svg);
}
#app-explorer .playing-card.spades.rank5 .face {
  background-image: url(fonts/0_5.svg);
}
#app-explorer .playing-card.spades.rank6 .face {
  background-image: url(fonts/0_6.svg);
}
#app-explorer .playing-card.spades.rank7 .face {
  background-image: url(fonts/0_7.svg);
}
#app-explorer .playing-card.spades.rank8 .face {
  background-image: url(fonts/0_8.svg);
}
#app-explorer .playing-card.spades.rank9 .face {
  background-image: url(fonts/0_9.svg);
}
#app-explorer .playing-card.spades.rank10 .face {
  background-image: url(fonts/0_10.svg);
}
#app-explorer .playing-card.spades.rank11 .face {
  background-image: url(fonts/0_11.svg);
}
#app-explorer .playing-card.spades.rank12 .face {
  background-image: url(fonts/0_12.svg);
}
#app-explorer .playing-card.spades.rank13 .face {
  background-image: url(fonts/0_13.svg);
}
#app-explorer .playing-card.hearts.rank1 .face {
  background-image: url(fonts/1_1.svg);
}
#app-explorer .playing-card.hearts.rank2 .face {
  background-image: url(fonts/1_2.svg);
}
#app-explorer .playing-card.hearts.rank3 .face {
  background-image: url(fonts/1_3.svg);
}
#app-explorer .playing-card.hearts.rank4 .face {
  background-image: url(fonts/1_4.svg);
}
#app-explorer .playing-card.hearts.rank5 .face {
  background-image: url(fonts/1_5.svg);
}
#app-explorer .playing-card.hearts.rank6 .face {
  background-image: url(fonts/1_6.svg);
}
#app-explorer .playing-card.hearts.rank7 .face {
  background-image: url(fonts/1_7.svg);
}
#app-explorer .playing-card.hearts.rank8 .face {
  background-image: url(fonts/1_8.svg);
}
#app-explorer .playing-card.hearts.rank9 .face {
  background-image: url(fonts/1_9.svg);
}
#app-explorer .playing-card.hearts.rank10 .face {
  background-image: url(fonts/1_10.svg);
}
#app-explorer .playing-card.hearts.rank11 .face {
  background-image: url(fonts/1_11.svg);
}
#app-explorer .playing-card.hearts.rank12 .face {
  background-image: url(fonts/1_12.svg);
}
#app-explorer .playing-card.hearts.rank13 .face {
  background-image: url(fonts/1_13.svg);
}
#app-explorer .playing-card.clubs.rank1 .face {
  background-image: url(fonts/2_1.svg);
}
#app-explorer .playing-card.clubs.rank2 .face {
  background-image: url(fonts/2_2.svg);
}
#app-explorer .playing-card.clubs.rank3 .face {
  background-image: url(fonts/2_3.svg);
}
#app-explorer .playing-card.clubs.rank4 .face {
  background-image: url(fonts/2_4.svg);
}
#app-explorer .playing-card.clubs.rank5 .face {
  background-image: url(fonts/2_5.svg);
}
#app-explorer .playing-card.clubs.rank6 .face {
  background-image: url(fonts/2_6.svg);
}
#app-explorer .playing-card.clubs.rank7 .face {
  background-image: url(fonts/2_7.svg);
}
#app-explorer .playing-card.clubs.rank8 .face {
  background-image: url(fonts/2_8.svg);
}
#app-explorer .playing-card.clubs.rank9 .face {
  background-image: url(fonts/2_9.svg);
}
#app-explorer .playing-card.clubs.rank10 .face {
  background-image: url(fonts/2_10.svg);
}
#app-explorer .playing-card.clubs.rank11 .face {
  background-image: url(fonts/2_11.svg);
}
#app-explorer .playing-card.clubs.rank12 .face {
  background-image: url(fonts/2_12.svg);
}
#app-explorer .playing-card.clubs.rank13 .face {
  background-image: url(fonts/2_13.svg);
}
#app-explorer .playing-card.diamonds.rank1 .face {
  background-image: url(fonts/3_1.svg);
}
#app-explorer .playing-card.diamonds.rank2 .face {
  background-image: url(fonts/3_2.svg);
}
#app-explorer .playing-card.diamonds.rank3 .face {
  background-image: url(fonts/3_3.svg);
}
#app-explorer .playing-card.diamonds.rank4 .face {
  background-image: url(fonts/3_4.svg);
}
#app-explorer .playing-card.diamonds.rank5 .face {
  background-image: url(fonts/3_5.svg);
}
#app-explorer .playing-card.diamonds.rank6 .face {
  background-image: url(fonts/3_6.svg);
}
#app-explorer .playing-card.diamonds.rank7 .face {
  background-image: url(fonts/3_7.svg);
}
#app-explorer .playing-card.diamonds.rank8 .face {
  background-image: url(fonts/3_8.svg);
}
#app-explorer .playing-card.diamonds.rank9 .face {
  background-image: url(fonts/3_9.svg);
}
#app-explorer .playing-card.diamonds.rank10 .face {
  background-image: url(fonts/3_10.svg);
}
#app-explorer .playing-card.diamonds.rank11 .face {
  background-image: url(fonts/3_11.svg);
}
#app-explorer .playing-card.diamonds.rank12 .face {
  background-image: url(fonts/3_12.svg);
}
#app-explorer .playing-card.diamonds.rank13 .face {
  background-image: url(fonts/3_13.svg);
}
#app-explorer .playing-card.joker.rank1 .face {
  background-image: url(fonts/4_1.svg);
}
#app-explorer .playing-card.joker.rank2 .face {
  background-image: url(fonts/4_2.svg);
}
#app-explorer .playing-card.joker.rank3 .face {
  background-image: url(fonts/4_3.svg);
}
#app-explorer .chart__no-data,
#app-explorer .chart__no-cards {
  text-align: center;
}
#app-explorer .chart__no-data_image {
  width: 40%;
}
#app-explorer .chart__no-data {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  right: 0;
  border: 0;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#app-explorer .chart__no-cards#chart__no-cards {
  position: absolute;
  display: flex;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  min-height: 330px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#app-explorer .chart__no-cards .chart__no-cards_image {
  width: 450px;
  height: 290px;
}
#app-explorer .cards-list {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
#app-explorer .card__turnaround {
  width: 100%;
  height: 100%;
  min-height: 180px;
  position: relative;
  border-radius: var(--button-border-radius);
}
#app-explorer .card__turnaround:hover .card__front, #app-explorer .card__turnaround:hover .card__back {
  box-shadow: var(--button-drop-shadow--hover);
}
#app-explorer .card__front,
#app-explorer .card__back {
  display: flex;
  justify-content: center;
  align-items: center;
}
#app-explorer .card__front .card__content {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
#app-explorer .card-item {
  cursor: pointer;
  overflow: visible;
  position: relative;
  aspect-ratio: 1/1;
  padding: var(--button-padding);
  border-radius: var(--button-border-radius);
}
#app-explorer .card-item .card__front,
#app-explorer .card-item .card__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: var(--button-padding);
  border-radius: var(--button-border-radius);
  border: var(--button-border);
  box-shadow: var(--button-drop-shadow);
}
#app-explorer .card-item .card__front {
  color: var(--card-front-color, var(--button-text));
  background-color: var(--card-front-bg, var(--button-background));
}
#app-explorer .card-item .card__back {
  color: var(--card-back-color, var(--button-text));
  background-color: var(--card-back-bg, var(--button-background));
}
#app-explorer .card-item img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#app-explorer .card-item.card-item--full-width {
  width: 100%;
}
#app-explorer .card-item.card-item--flip .card__front {
  box-shadow: var(--button-drop-shadow--hover);
}
#app-explorer .card-item.card-item--flip .card__back {
  box-shadow: var(--button-drop-shadow--hover);
}
#app-explorer .card__content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 10;
  padding: var(--space-lg);
  overflow: auto;
}
#app-explorer .card__content p {
  margin: 0;
  line-height: var(--text-xl);
}

#extension-body {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  --hotspot-modal-color: var(--black);
  --hotspot-modal-bg: var(--gray-200);
  --hotspot-modal-img-bg: var(--gray-100);
  --hotspot-close-color: var(--button-background);
  --hotspot-close-bg: var(--button-text);
}
#extension-body .ReactModalPortal {
  pointer-events: none;
  z-index: var(--zindex-modal);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate(0px, 50px);
  position: fixed;
  overflow: hidden;
}
#extension-body .ReactModalPortal.ReactModalPortal--closed {
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate(0px, 50px);
  position: fixed;
  overflow: hidden;
}
#extension-body .ReactModalPortal.ReactModalPortal--open {
  opacity: 1;
  visibility: visible;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate(0px, 0px);
}
#extension-body .ReactModalPortal .ReactModal__Overlay {
  position: absolute;
  color: var(--hotspot-modal-color);
  background-color: var(--hotspot-modal-bg);
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#extension-body .ReactModalPortal .ReactModal__Overlay .overlay {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 0;
  opacity: 0;
  top: 0;
  left: 0;
  overflow: hidden;
  padding: var(--space-lg);
  padding-top: var(--space-md);
}
#extension-body .ReactModalPortal .ReactModal__Overlay .overlay__visible {
  top: 0;
  opacity: 1;
  height: 100%;
  pointer-events: all;
}
#extension-body .ReactModalPortal .ReactModal__Overlay .overlay__close {
  display: flex;
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  cursor: pointer;
  color: var(--hotspot-close-color);
  background: var(--hotspot-close-bg);
}
#extension-body .ReactModalPortal .ReactModal__Overlay .overlay__title {
  height: calc(4rem * var(--text-multiplier));
  margin: 0;
  display: flex;
  align-items: center;
}
#extension-body .ReactModalPortal .ReactModal__Overlay .overlay__body {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  height: calc(100% - 4rem * var(--text-multiplier));
  overflow: auto;
}
#extension-body .ReactModalPortal .ReactModal__Overlay .overlay__body .overlay__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#extension-body .ReactModalPortal .ReactModal__Overlay .overlay__body .overlay__richText > :first-child {
  margin-top: 0;
}
#extension-body .ReactModalPortal .ReactModal__Overlay .overlay__left {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
  padding: var(--space-sm);
  border-radius: var(--button-border-radius);
  box-shadow: var(--button-drop-shadow);
  background: var(--hotspot-modal-img-bg);
  overflow: hidden;
}
#extension-body .ReactModalPortal .ReactModal__Overlay .overlay__right {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  padding: var(--space-lg);
  padding-left: var(--space-xl);
}
#extension-body .ReactModalPortal .ReactModal__Overlay .overlay__text1 {
  display: flex;
}
#extension-body .ReactModalPortal .ReactModal__Overlay .overlay__text1 > :first-child {
  margin-top: 0;
}
#extension-body .ReactModalPortal .ReactModal__Overlay .overlay__text2 {
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  background: var(--hotspot-modal-img-bg);
  font-size: var(--text-sm);
}
#extension-body .ReactModalPortal .ReactModal__Overlay .overlay__text2 p {
  margin: 0;
  padding: var(--space-sm);
}

#app-responsive-hotspots-backend header.chart__header,
#app-responsive-hotspots header.chart__header {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  order: -2;
  padding: var(--chart-content-padding);
}
#app-responsive-hotspots-backend .chart__body,
#app-responsive-hotspots-backend .ext__body,
#app-responsive-hotspots .chart__body,
#app-responsive-hotspots .ext__body {
  padding: 0;
  min-height: auto;
  height: auto;
}
#app-responsive-hotspots-backend .chart__body .ext__interaction,
#app-responsive-hotspots-backend .ext__body .ext__interaction,
#app-responsive-hotspots .chart__body .ext__interaction,
#app-responsive-hotspots .ext__body .ext__interaction {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
}
#app-responsive-hotspots-backend .chart__background,
#app-responsive-hotspots .chart__background {
  position: relative;
}
#app-responsive-hotspots-backend .chart__background #chart-bg-id,
#app-responsive-hotspots .chart__background #chart-bg-id {
  display: block;
}
#app-responsive-hotspots-backend .entity,
#app-responsive-hotspots .entity {
  position: absolute;
  display: inline-block;
}
#app-responsive-hotspots-backend .entity.entity__area-overlay,
#app-responsive-hotspots .entity.entity__area-overlay {
  cursor: pointer;
  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, transform 0.2s ease;
}
#app-responsive-hotspots-backend .entity.entity__area-overlay:hover, #app-responsive-hotspots-backend .entity.entity__area-overlay:focus, #app-responsive-hotspots-backend .entity.entity__area-overlay:focus-visible,
#app-responsive-hotspots .entity.entity__area-overlay:hover,
#app-responsive-hotspots .entity.entity__area-overlay:focus,
#app-responsive-hotspots .entity.entity__area-overlay:focus-visible {
  transform: scale(1.04);
  outline: var(--focus-outline);
  box-shadow: 0 0 0 6px var(--focus-dropshadow);
  transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  z-index: 99999;
}
#app-responsive-hotspots-backend .entity.entity__area-overlay .area__content,
#app-responsive-hotspots .entity.entity__area-overlay .area__content {
  cursor: pointer;
  pointer-events: all;
}
#app-responsive-hotspots-backend .entity.entity__area,
#app-responsive-hotspots .entity.entity__area {
  position: absolute;
  display: flex;
  min-height: auto;
  min-width: auto;
  top: var(--area-top);
  left: var(--area-left);
  opacity: var(--area-opacity);
  z-index: var(--area-z-index);
  width: var(--area-width, initial);
  height: var(--area-height, initial);
}
#app-responsive-hotspots-backend .entity.entity__area .area__content,
#app-responsive-hotspots .entity.entity__area .area__content {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: var(--space-md);
  color: var(--area-color, var(--text-color));
  background-color: var(--area-bg, var(--white));
  border-radius: var(--button-border-radius);
}
#app-responsive-hotspots-backend .entity.entity__area .area__content .area__header,
#app-responsive-hotspots .entity.entity__area .area__content .area__header {
  z-index: 5;
  position: relative;
}
#app-responsive-hotspots-backend .entity.entity__area .area__content .area__background,
#app-responsive-hotspots .entity.entity__area .area__content .area__background {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#app-responsive-hotspots-backend .entity.entity__area .area__content .area__background .area__background-image,
#app-responsive-hotspots .entity.entity__area .area__content .area__background .area__background-image {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  -o-object-position: center;
     object-position: center;
}
#app-responsive-hotspots-backend .entity.entity__agenda,
#app-responsive-hotspots .entity.entity__agenda {
  top: var(--bullet-top);
  left: var(--bullet-left);
  opacity: var(--bullet-opacity);
  z-index: var(--bullet-z-index);
}
#app-responsive-hotspots-backend .entity.entity__agenda.clicked .agenda__label,
#app-responsive-hotspots .entity.entity__agenda.clicked .agenda__label {
  opacity: 1;
  display: block;
  position: relative;
  padding: var(--space-md);
  left: calc(var(--bullet-width) * -1);
  margin-left: calc(var(--bullet-width) + 1ch);
  border-radius: 4px;
  font-size: 80%;
  color: var(--black);
  background-color: rgba(var(--gray-100-rgb), 50%);
  text-shadow: 1px 1px 1px rgba(var(--gray-200-rgb), 54%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#app-responsive-hotspots-backend .entity.entity__hotspot,
#app-responsive-hotspots .entity.entity__hotspot {
  top: var(--bullet-top);
  left: var(--bullet-left);
  opacity: var(--bullet-opacity);
  z-index: var(--bullet-z-index);
}
#app-responsive-hotspots-backend .entity.entity__hotspot.clicked .hotspot__label,
#app-responsive-hotspots .entity.entity__hotspot.clicked .hotspot__label {
  opacity: 1;
  display: block;
  position: relative;
  padding: var(--space-md);
  left: calc(var(--bullet-width) * -1);
  margin-left: calc(var(--bullet-width) + 1ch);
  border-radius: 4px;
  font-size: 90%;
  color: var(--black);
  background-color: rgba(var(--gray-100-rgb), 50%);
  text-shadow: 1px 1px 1px rgba(var(--gray-200-rgb), 54%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#app-responsive-hotspots-backend .entity .agenda__flex,
#app-responsive-hotspots-backend .entity .hotspot__flex,
#app-responsive-hotspots .entity .agenda__flex,
#app-responsive-hotspots .entity .hotspot__flex {
  position: relative;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 3000px;
  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;
}
#app-responsive-hotspots-backend .entity .agenda__flex:focus, #app-responsive-hotspots-backend .entity .agenda__flex:focus-visible,
#app-responsive-hotspots-backend .entity .hotspot__flex:focus,
#app-responsive-hotspots-backend .entity .hotspot__flex:focus-visible,
#app-responsive-hotspots .entity .agenda__flex:focus,
#app-responsive-hotspots .entity .agenda__flex:focus-visible,
#app-responsive-hotspots .entity .hotspot__flex:focus,
#app-responsive-hotspots .entity .hotspot__flex: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;
}
#app-responsive-hotspots-backend .entity .agenda__flex .agenda__label,
#app-responsive-hotspots-backend .entity .agenda__flex .hotspot__label,
#app-responsive-hotspots-backend .entity .hotspot__flex .agenda__label,
#app-responsive-hotspots-backend .entity .hotspot__flex .hotspot__label,
#app-responsive-hotspots .entity .agenda__flex .agenda__label,
#app-responsive-hotspots .entity .agenda__flex .hotspot__label,
#app-responsive-hotspots .entity .hotspot__flex .agenda__label,
#app-responsive-hotspots .entity .hotspot__flex .hotspot__label {
  padding: 0 var(--space-md);
  opacity: 0;
  pointer-events: none;
  display: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#app-responsive-hotspots-backend .entity .agenda__bullet,
#app-responsive-hotspots-backend .entity .hotspot__bullet,
#app-responsive-hotspots .entity .agenda__bullet,
#app-responsive-hotspots .entity .hotspot__bullet {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bullet-color, var(--white));
  background: var(--bullet-bg, var(--primary-color));
  width: var(--bullet-width, 35px);
  height: var(--bullet-height, 35px);
  min-width: var(--bullet-width, 35px);
  min-height: var(--bullet-height, 35px);
  border-radius: 3000px;
}
#app-responsive-hotspots-backend .entity .agenda__bullet .hotspot__icon,
#app-responsive-hotspots-backend .entity .hotspot__bullet .hotspot__icon,
#app-responsive-hotspots .entity .agenda__bullet .hotspot__icon,
#app-responsive-hotspots .entity .hotspot__bullet .hotspot__icon {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
#app-responsive-hotspots-backend .entity.entity__agenda .agenda__content,
#app-responsive-hotspots .entity.entity__agenda .agenda__content {
  position: relative;
  width: var(--content-width, 200px);
  height: auto;
  overflow: auto;
  top: calc(var(--bullet-height) / 4 * -1);
  background: var(--white);
  padding: var(--space-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  border-radius: var(--button-border-radius);
}
#app-responsive-hotspots-backend .entity.entity__agenda .agenda__content .bullet__track,
#app-responsive-hotspots .entity.entity__agenda .agenda__content .bullet__track {
  position: absolute;
  top: 0;
  left: 0;
  height: 5px;
  width: var(--content-width);
  background-color: var(--gray-200);
  overflow: hidden;
  border-radius: 3000px;
}
#app-responsive-hotspots-backend .entity.entity__agenda .agenda__content .bullet__track .bullet__track-progress,
#app-responsive-hotspots .entity.entity__agenda .agenda__content .bullet__track .bullet__track-progress {
  height: 100%;
  background-color: var(--primary-color);
}
#app-responsive-hotspots-backend .entity.entity__agenda .agenda__content .bullet__text,
#app-responsive-hotspots .entity.entity__agenda .agenda__content .bullet__text {
  height: auto;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#app-responsive-hotspots-backend .entity.entity__agenda .agenda__content .bullet__text.bullet__open,
#app-responsive-hotspots .entity.entity__agenda .agenda__content .bullet__text.bullet__open {
  height: 100%;
  opacity: 1;
  visibility: visible;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#app-responsive-hotspots-backend .entity.entity__agenda .agenda__content .bullet__text > :first-child,
#app-responsive-hotspots .entity.entity__agenda .agenda__content .bullet__text > :first-child {
  margin-top: 0;
}
#app-responsive-hotspots-backend .entity.entity__agenda.bullet__open .agenda__content,
#app-responsive-hotspots .entity.entity__agenda.bullet__open .agenda__content {
  width: var(--content-width, 200px);
  height: auto;
  opacity: 1;
  display: block;
  visibility: visible;
  pointer-events: all;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  top: calc(var(--bullet-height) / 4 * -1);
}
#app-responsive-hotspots-backend .entity.entity__agenda.bullet__open .agenda__content .bullet__text,
#app-responsive-hotspots .entity.entity__agenda.bullet__open .agenda__content .bullet__text {
  height: auto;
  opacity: 1;
  visibility: visible;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--bullet-color-rgb, var(--primary-color-rgb)), 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(var(--bullet-color-rgb, var(--primary-color-rgb)), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--bullet-color-rgb, var(--primary-color-rgb)), 0);
  }
}
/* Selecting UI in HotSpot Backend*/
#app-responsive-hotspots-backend .stage__hotspots {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 100px 100px;
  background-position: center center;
}
#app-responsive-hotspots-backend .entity.entity__hotspot, #app-responsive-hotspots-backend .entity .entity__agenda {
  opacity: calc(var(--bullet-opacity) + 0.2);
}
#app-responsive-hotspots-backend .entity.entity__area {
  opacity: calc(var(--area-opacity) + 0.2);
}
#app-responsive-hotspots-backend .entity:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #9a9a9a 1px, transparent 1px) 0 0, linear-gradient(to right, #9a9a9a 1px, transparent 1px) 0 100%, linear-gradient(to left, #9a9a9a 1px, transparent 1px) 100% 0, linear-gradient(to left, #9a9a9a 1px, transparent 1px) 100% 100%, linear-gradient(to bottom, #9a9a9a 1px, transparent 1px) 0 0, linear-gradient(to bottom, #9a9a9a 1px, transparent 1px) 100% 0, linear-gradient(to top, #9a9a9a 1px, transparent 1px) 0 100%, linear-gradient(to top, #9a9a9a 1px, transparent 1px) 100% 100%;
  background-repeat: no-repeat;
  background-size: 5px 5px;
  transition: 0.1s ease all;
}
#app-responsive-hotspots-backend .entity.selected:after {
  background: linear-gradient(to right, #f6a117 2px, transparent 2px) 0 0, linear-gradient(to right, #f6a117 2px, transparent 2px) 0 100%, linear-gradient(to left, #f6a117 2px, transparent 2px) 100% 0, linear-gradient(to left, #f6a117 2px, transparent 2px) 100% 100%, linear-gradient(to bottom, #f6a117 2px, transparent 2px) 0 0, linear-gradient(to bottom, #f6a117 2px, transparent 2px) 100% 0, linear-gradient(to top, #f6a117 2px, transparent 2px) 0 100%, linear-gradient(to top, #f6a117 2px, transparent 2px) 100% 100%;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  transition: 0.1s ease all;
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

.social-app {
  position: absolute;
  color: var(--overlay-panel-text);
  -webkit-backdrop-filter: var(--overlay-panel-blur);
          backdrop-filter: var(--overlay-panel-blur);
  top: var(--social-position);
  height: var(--social-height);
  left: auto;
  right: 0;
  width: 100%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
  opacity: 0;
  display: none;
  background: var(--social-modal-background);
  border-radius: var(--radius-zero);
  z-index: var(--social-z-index);
  pointer-events: none;
}
.social-app.visible {
  opacity: 1;
  transform: translate(0, 0);
  pointer-events: inherit;
}
.social-app .close-btn {
  display: var(--menu-close-display);
  position: absolute;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--menu-close-size);
  height: var(--menu-close-size);
  line-height: 1;
  right: var(--menu-close-position-right);
  left: var(--menu-close-position-left);
  top: 0.5em;
  box-shadow: 2px 2px 0.4em rgba(0, 0, 0, 0.1);
  line-height: 34px;
  padding: 0;
  opacity: 1;
  border: 0;
  border-radius: var(--menu-close-radius);
  color: var(--menu-close-color);
  background: var(--menu-close-bg);
  outline: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-app .close-btn:hover, .social-app .close-btn:focus {
  color: var(--menu-close-color--hover);
  background: var(--menu-close-bg--hover);
}
.social-app:after {
  right: 0;
  border-top-color: var(--gray-500);
  border-left-color: var(--gray-500);
}
.social-app .close-btn {
  display: flex;
  right: var(--social-close-position-right);
  left: var(--social-close-position-left);
  z-index: 3;
  border-radius: var(--social-close-radius);
  box-shadow: -2px 2px 0.4em rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-app .close-btn:hover, .social-app .close-btn:focus {
  right: auto;
}

.social-app-title {
  font-size: var(--text-xl);
  font-weight: 600;
  padding: 0.5ch 0.5ch;
}

.social-app > div {
  position: absolute;
  display: flex;
  flex-direction: column;
  height: 100%;
  right: 0;
}

.social-app-wrapper {
  width: var(--social-width);
  right: calc(var(--social-width) * -1);
  pointer-events: all;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: var(--space-xs) solid transparent;
}

.social-app.social-app-enter {
  opacity: 0;
  right: 0;
  width: 100%;
}
.social-app.social-app-enter .social-app-wrapper {
  opacity: 0;
  right: calc(var(--social-width) * -1);
}

.social-app.social-app-enter-active,
.social-app.social-app-enter-done {
  opacity: 1;
  right: 0;
  width: 100%;
}
.social-app.social-app-enter-active .social-app-wrapper,
.social-app.social-app-enter-done .social-app-wrapper {
  opacity: 1;
  right: 0;
}

.social-app.social-app-exit {
  opacity: 1;
  right: 0;
  width: 100%;
}

.social-app.social-app-exit-active,
.social-app.social-app-exit-done {
  opacity: 0;
  right: 0;
  width: 100%;
}
.social-app.social-app-exit-active .social-app-wrapper,
.social-app.social-app-exit-done .social-app-wrapper {
  opacity: 0;
  right: calc(var(--social-width) * -1);
}

.social-app-body {
  position: relative;
  overflow: hidden;
  opacity: 1;
  height: 100%;
  color: var(--text-color);
  z-index: 100;
  background: var(--social-body);
  border-bottom-right-radius: var(--cbook-social-radius);
  border-bottom-left-radius: var(--cbook-social-radius);
  display: flex;
  flex-direction: column;
  border: var(--cbook-social-border);
  border-top: none;
}
.social-app-body .social-app-options {
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  border-bottom: var(--social-tools-border);
  box-shadow: var(--social-tools-shadow);
  background: var(--social-tools);
}
.social-app-body .social-app-filter {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}
.social-app-body .social-app-filter button {
  position: absolute;
  right: 0;
  border: none;
  outline: none;
  box-shadow: none;
  background: none;
  z-index: 100000;
}

.social-app-body__wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.social-app__signed-out {
  padding: 25px;
}

.social-app__disclaimer {
  height: 100%;
  overflow: auto;
  padding: 25px;
}

.social-app-footer {
  height: auto;
  bottom: 0;
  width: 100%;
  display: flex;
  position: absolute;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.social-app-footer .social-app-footer__button {
  margin: var(--space-lg) var(--space-md);
}

.social-app-saving {
  position: absolute;
  width: auto;
  height: auto;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-app-saving div {
  border-top-color: var(--primary-color);
}

/**
 * Social App Components
 */
/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
[class^=scp-],
[class*=" scp-"] {
  color: #66ad1f;
}

.scp-a {
  color: #8db753;
}

.scp-b {
  color: #9abd6d;
}

.scp-c {
  color: #7db986;
}

.scp-d {
  color: #5cb69d;
}

.scp-e {
  color: #2fb1b3;
}

.scp-f {
  color: #3fa1ce;
}

.scp-g {
  color: #4c8dc5;
}

.scp-h {
  color: #527ab7;
}

.scp-i {
  color: #5f71af;
}

.scp-j {
  color: #6c67a9;
}

.scp-k {
  color: #7868a7;
}

.scp-l {
  color: #986aa8;
}

.scp-m {
  color: #98629c;
}

.scp-n {
  color: #995b8e;
}

.scp-o {
  color: #a65b93;
}

.scp-p, .scp-q {
  color: #b25a96;
}

.scp-r {
  color: #cb589d;
}

.scp-s {
  color: #d9558e;
}

.scp-t {
  color: #da6286;
}

.scp-u {
  color: #de7281;
}

.scp-v {
  color: #dc5c5d;
}

.scp-w {
  color: #db6d52;
}

.scp-x, .scp-y, .scp-z {
  color: #df804a;
}

.scp-plus {
  color: #e19340;
}

.scp-hash {
  color: #7db337;
}

.scp-extra {
  color: #e2a21a;
}

.scp-extra2 {
  color: #e1bf39;
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.social-breadcrumb {
  list-style: none;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
  width: 100%;
}
.social-breadcrumb__separator {
  margin: 0 var(--space-md);
}

.ui-toggle-button {
  font-size: var(--text-xxs);
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-appearance: inherit;
     -moz-appearance: inherit;
          appearance: inherit;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  padding: var(--toggle-button-padding);
  margin: var(--toggle-button-margin);
  color: var(--toggle-button-text);
  background: var(--toggle-button-bg);
  border: var(--toggle-button-border);
  border-radius: var(--toggle-button-border-radius);
  box-shadow: var(--toggle-button-box-shadow);
}
.ui-toggle-button:focus-within, .ui-toggle-button:hover {
  color: var(--toggle-button-text--hover);
  background: var(--toggle-button-bg--hover);
  box-shadow: var(--toggle-button-box-shadow--hover);
}

.ui-toggle-button.pressed {
  color: var(--toggle-button--pressed-text);
  background: var(--toggle-button--pressed-bg);
  box-shadow: var(--toggle-button--pressed-box-shadow);
}
.ui-toggle-button.pressed:focus-within, .ui-toggle-button.pressed:hover {
  color: var(--toggle-button-text--hover);
  background: var(--toggle-button-bg--hover);
}

.social-breadcrumb__item {
  position: relative;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}
.social-breadcrumb__item:last-child {
  padding-right: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 75%;
  display: inline-block;
}
.social-breadcrumb__item:last-child:after {
  content: "";
}

.social-breadcrumb__link {
  cursor: pointer;
  font-family: var(--font-paragraph);
  font-weight: 200;
  margin: 1ch 1ch;
  padding: 1ch 1ch;
  border-radius: 100%;
  background: var(--white);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
.social-breadcrumb__link:hover, .social-breadcrumb__link:focus {
  color: var(--primary-color);
}
.social-breadcrumb__link .social-member-bubble {
  font-size: var(--text-xxs);
  margin-right: 0;
}
.social-breadcrumb__link:before {
  font-size: var(--text-xl);
  vertical-align: text-bottom;
}

.social-app-options_title {
  white-space: nowrap;
  display: block;
  color: var(--gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}

.social-app-options__btn {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-app-options__btn:hover {
  color: var(--button-text--hover);
  background: var(--button-background--hover);
}

.social-app__search-btn {
  position: absolute;
  right: 0.5ch;
  padding: 0;
  margin: 0;
  box-shadow: none;
  background: none;
  border-radius: var(--button-border-radius);
}

.social-app__search-form {
  position: relative;
  display: flex;
  margin: 0;
  justify-content: space-between;
  align-items: center;
}

.social-app-options__btn--we {
  margin: 0 10px;
}

.social-app-options__btn--secondary {
  color: var(--button-secondary-text);
  background: var(--button-secondary-background);
  border: var(--button-secondary-border);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-app-options__btn--secondary:hover {
  color: var(--button-secondary-text--hover);
  background: var(--button-secondary-background--hover);
}

.social-app-options__btn--icon {
  border: none;
}
.social-app-options__btn--icon.icon-info::before {
  font-size: var(--text-md);
}
.social-app-options__btn--icon::before {
  position: relative;
  top: -2px;
  margin-right: 0;
}
.social-app-options__btn--icon.social-app-options__btn--aligned-right {
  margin-left: auto;
}

.social-app-options__btn--delete-note .ui-te__context {
  background: transparent;
  border: none;
  box-shadow: none;
  top: 13px;
  right: 12px;
}

.social-app-options__form-control {
  position: relative;
  display: flex;
  align-items: center;
}
.social-app-options__form-control .cbi-community.cbi-s {
  color: var(--button-text);
  padding: var(--button-padding);
  margin: var(--button-margin);
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 9999999;
}

.social-app-options__form-control + .social-app-options__form-control {
  margin-left: 10px;
  width: 210px;
}

.social-app-options__input {
  padding-left: var(--space-xl);
}

.social-app-options__form-control--full-width {
  width: 100%;
}

.social-app-options__form-control--prepend:before {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  padding: 12px 10px 0 10px;
}
.social-app-options__form-control--prepend .social-app-options__input {
  padding-left: 26px;
}

.social-app-no-communication {
  padding: 15px;
  margin: 0;
  text-align: center;
}

.social-app-options__extra {
  float: right;
  transition: 0.3s;
}
.social-app-options__extra .ui-te__btn {
  position: relative;
  height: 36px;
  width: 36px;
  overflow: hidden;
  line-height: 36px;
  font-size: var(--text-xl);
  text-indent: -999999px;
}
.social-app-options__extra .ui-te__btn:before {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -17px 0 0 -10px;
  line-height: 36px;
  text-indent: 0;
}
.social-app-options__extra .ui-checkbox {
  display: block;
}
.social-app-options__extra .ui-te__context {
  padding: 0 0 0 8px;
  line-height: 2;
}
.social-app-options__extra.ui-te--active {
  height: 39px;
}
.social-app-options__extra.ui-te--active .ui-te__btn {
  height: 39px;
  z-index: 3;
}

.social-app-options__title {
  font-size: var(--text-md);
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multi-select__link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  color: inherit;
  background: inherit;
  margin: 0;
  font-size: var(--text-xs);
  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;
}
.multi-select__link:focus, .multi-select__link: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;
}
.multi-select__link--disabled {
  pointer-events: none;
  cursor: default;
}

.multi-select__label {
  max-width: 350px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.multi-select__indicator {
  right: var(--space-md);
  position: absolute;
}

.multi-select__indicator--selected {
  color: var(--success);
}
.multi-select__indicator--selected:before {
  color: var(--text-color-inverse);
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.social-member-bubble__indicator {
  font-size: var(--text-xxxs);
  left: calc(var(--space-lg) * -1);
  top: calc(var(--space-md) * -1);
}

.no-borderradius .social-member-bubble {
  font-size: var(--text-md);
  position: absolute;
  top: 0.8ch;
  left: 0.8ch;
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.social-app-header {
  position: relative;
  color: var(--text-color);
  background: var(--social-hero);
  border-top-right-radius: var(--cbook-social-radius);
  border-top-left-radius: var(--cbook-social-radius);
  font-family: var(--font-paragraph);
  font-weight: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--space-md);
  border: var(--cbook-social-border);
  border-bottom: none;
}
.social-app-header .ui-select {
  font-family: var(--font-paragraph);
  font-size: var(--text-xs);
}

.social-app__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.social-app-header__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-paragraph);
  width: 100%;
}
.social-app-header__content > div {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  word-break: break-all;
}

.social-app-header__button {
  position: absolute;
  cursor: pointer;
  outline: 0;
  border: 0;
  background: none;
  top: 0;
  left: 0;
  height: 100%;
  padding: 0 1em;
  color: var(--grey-lighter);
  border-right: 1px solid var(--grey);
  transition: 0.3s;
}
.social-app-header__button:hover, .social-app-header__button:focus {
  background: var(--grey-light);
  color: var(--grey);
}
.social-app-header__button:active {
  box-shadow: -1px 0 1px rgba(0, 0, 0, 0.15) inset;
}

.social-app-header__button--right {
  left: auto;
  right: 0;
  border-right: 0;
  border-left: 1px solid var(--grey);
}
.social-app-header__button--right:active {
  box-shadow: 1px 0 1px rgba(0, 0, 0, 0.15) inset;
}

.social-app-header__button--danger,
.social-app-footer__button--danger {
  color: var(--danger);
  background: var(--danger-bg);
  outline: 1px solid var(--danger);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-app-header__button--danger:hover,
.social-app-footer__button--danger:hover {
  color: var(--danger-color--hover);
  background: var(--danger-bg--hover);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-app-header__button--danger:focus, .social-app-header__button--danger:focus-visible,
.social-app-footer__button--danger:focus,
.social-app-footer__button--danger: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;
}

.social-app-header__button--success,
.social-app-footer__button--success {
  color: var(--success);
  background: var(--success-bg);
  outline: 1px solid var(--success);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-app-header__button--success:hover,
.social-app-footer__button--success:hover {
  color: var(--success-color--hover);
  background: var(--success-bg--hover);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-app-header__button--success:focus, .social-app-header__button--success:focus-visible,
.social-app-footer__button--success:focus,
.social-app-footer__button--success: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;
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.social-app-modal {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  margin: 0;
  z-index: 1000;
  background: var(--modal-bg);
  border-radius: var(--cbook-social-radius);
  overflow: hidden;
  border: var(--cbook-social-border);
}
.social-app-modal > div {
  height: auto;
  max-height: calc(100% - 2ch - 60px);
  overflow: auto;
  background: var(--social-msg-reply-bg);
  margin: var(--space-md);
  padding: var(--space-md);
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}
.social-app-modal .social-app-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.social-app-modal .social-app-filter > button {
  position: absolute;
  right: 0;
  box-shadow: none;
  background: none;
  border: none;
  outline: none;
  z-index: 1000;
}
.social-app-modal .social-app-options {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*------------------------------------*\
#SOCIAL-TOPICS-COMPONENT-SECTION
\*------------------------------------*/
/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.social-topics {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-bottom: 3px;
  height: 410px;
  width: 100%;
  overflow: auto;
  transition: 0.3s;
}

.social-topics--short {
  height: 345px;
}

.social-topics__item {
  padding: 0;
  margin: 0 0 1ch 0;
  width: 100%;
  box-shadow: var(--social-list-box-shadow);
  background: var(--social-list-bg);
  border-radius: var(--social-list-border-radius);
  opacity: var(--social-list-opacity);
}
.social-topics__item:hover, .social-topics__item:focus, .social-topics__item:focus-within {
  background: var(--social-list-bg--hover);
  color: var(--social-list-text);
  box-shadow: var(--social-list-box-shadow--hover);
  opacity: var(--social-list-opacity--hover);
}

.social-topics__link {
  display: block;
  position: relative;
  text-decoration: none;
  color: var(--social-list-text);
  background: var(--social-list-bg);
  border-radius: var(--social-list-border-radius);
  transition: 0.3s;
  padding: 0.8ch;
  margin: 0;
  width: 100%;
}
.social-topics__link .social-member-bubble {
  position: absolute;
  top: 0.8ch;
  left: 0.8ch;
}

.social-app--notes .social-activity-editor__title {
  color: var(--rl-black);
  background: var(--notes-input-bg-color);
  border: var(--border-off);
}
.social-app--notes .social-activity-editor__file,
.social-app--notes button.rte-tools__btn {
  color: var(--rl-black);
}
.social-app--notes .social-activity-editor__wrapper .ProseMirror {
  color: var(--rl-black);
  background: var(--notes-input-bg-color);
}
.social-app--notes .social_topics__topic-title {
  color: var(--rl-black);
}
.social-app--notes .social-topics__link,
.social-app--notes .social-topics__item {
  color: var(--rl-black);
  background: var(--social-list-notes-bg);
}
.social-app--notes .social-topics__link:hover, .social-app--notes .social-topics__link:focus, .social-app--notes .social-topics__link:focus-within,
.social-app--notes .social-topics__item:hover,
.social-app--notes .social-topics__item:focus,
.social-app--notes .social-topics__item:focus-within {
  opacity: 1;
  background: var(--notes-bg-color);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}

.social-app--notes .social-app-modal > div {
  color: var(--rl-black);
  background: var(--notes-bg-color);
}
.social-app--notes .social-topic {
  color: var(--rl-black);
  background: var(--notes-bg-color);
}

.social_topics__activity {
  float: left;
  display: block;
  margin: 16px 1em 45px;
  box-shadow: -2px 0 0 var(--gray-700);
}

.social_topics__topic-meta,
.social_topics__topic-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0.9ch;
  font-size: var(--text-xxs);
  color: var(--social-list-meta-color);
}

.social_topics__topic-teaser {
  padding: 2ch 0.5ch;
  text-align: left;
}

.social_topics__topic-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--social-list-title-color);
  flex-shrink: 10;
  margin-left: 2.5rem;
}

.social-topics__topic-user {
  flex-grow: 0;
  flex-shrink: 1;
  text-align: right;
}

.social_topics__topic-attachments {
  display: flex;
  align-items: center;
}
.social_topics__topic-attachments:before {
  margin-right: 0.25em;
}

/*------------------------------------*\
  #SOCIAL-TOPIC-COMPONENT-SECTION
\*------------------------------------*/
/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

.social-topic {
  height: auto;
  overflow: auto;
  background: var(--social-msg-bg);
  margin: 0.8ch 2ch;
  padding: 2ch;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}
.social-topic.scroller {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset;
}

.social-topic__header {
  margin: 0;
  font-size: var(--text-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.social-topic__header-text {
  font-weight: 700;
}

.social-topic__meta {
  display: flex;
  font-size: var(--text-xs);
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-topic__meta .social-member-bubble {
  display: none;
  visibility: hidden;
}

.social-topic__description {
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--gray-300);
  padding: 5px 0;
}

.social_topic__activities {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  height: 283px;
}

.social-topic__send {
  display: block;
  width: 145px;
  border: 0;
  background: var(--primary-color);
  height: 38px;
  margin: 0 -25px;
  color: var(--white);
  transition: 0.3s;
}
.social-topic__send[disabled] {
  background: none;
  color: magenta;
}
.social-topic__send:hover, .social-topic__send:focus {
  background: var(--primary-color);
  opacity: 0.8;
}

.social-topic__editor {
  position: relative;
  margin: -2px 0 0 -8px;
  background: var(--white);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15);
}

.social-topic__editor-btns {
  font-size: var(--text-xs);
  text-align: right;
}

.social-topic__attachments {
  padding: 0;
  position: relative;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

/*------------------------------------*\
#SOCIAL-SPHERE-SELECTOR-COMPONENT-SECTION
\*------------------------------------*/
/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.sphere-selector {
  min-height: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-md);
}

.sphere-hidden {
  width: 100%;
  background: rgba(211, 211, 211, 0.3);
}
.sphere-hidden .sphere-hidden__button {
  width: 100%;
  padding: 1ch;
  margin: 0;
  border-radius: 0;
  background: transparent;
  font-weight: bold;
  opacity: 0.8;
  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;
}
.sphere-hidden .sphere-hidden__button:focus {
  outline: none;
  border: none;
  box-shadow: inset 0 0 0 2px ar(--focus-color), inset 0 0 0 4px var(--focus-dropshadow);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.sphere-selector__label {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 1ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sphere-selector__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  max-height: 100%;
  height: 100%;
  width: 100%;
}

.sphere-selector__item {
  position: relative;
  width: 100%;
  transition: 0.3s;
  margin-top: 3px;
  border-radius: var(--radius-xs);
}
.sphere-selector__item:hover, .sphere-selector__item:focus {
  background: var(--social-list-bg--hover);
}

.sphere-selector__item--hidden {
  opacity: 0.65;
}
.sphere-selector__item--hidden .numeral-indicator {
  background: var(--gray-500);
  border-color: var(--gray-600);
}
.sphere-selector__item--hidden .social-member-bubble {
  color: var(--gray-500);
}
.sphere-selector__item--hidden:hover, .sphere-selector__item--hidden:focus {
  background: var(--social-list-bg-hidden--hover);
}

.sphere-selector__sphere {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sphere-selector__sphere-actions button {
  border-radius: 100%;
  background: transparent;
  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;
}
.sphere-selector__sphere-actions button:hover {
  background: var(--white);
  color: var(--primary-color);
  outline: var(--focus-outline);
  box-shadow: 0 0 0 6px var(--focus-dropshadow);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.sphere-selector__sphere-name {
  width: calc(100% - 130px);
}

.social-app--notes .sphere-selector__sphere-name {
  width: calc(100% - 70px);
}

.sphere-selector__sphere-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 150px;
}

.sphere-selector__action-btn .social-app-options__btn--text {
  display: none;
}
.sphere-selector__msg {
  padding: var(--space-md);
  font-size: var(--text-xs);
  color: var(--gray-500);
  line-height: 1.55;
  width: 100%;
  text-align: center;
  background: var(--social-sphere-hover-bg);
}
.sphere-selector__msg button {
  display: none;
}
.sphere-selector__msg a {
  color: var(--gray-500);
}

.sphere-selector__swipebtn {
  overflow: hidden;
  width: 100px;
  height: 56px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--primary);
  color: var(--white);
}
.sphere-selector__swipebtn span {
  position: absolute;
  left: -99999px;
  opacity: 0;
  height: 0;
}
.sphere-selector__swipebtn:before {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -0.5em 0 0 -0.5em;
}

.sphere-selector__swipebtn--info {
  background: var(--info);
}

.sphere-selector__swipebtn--danger {
  background: var(--danger);
}

/*------------------------------------*\
#SOCIAL-SPHERE-EdITOR-COMPONENT-SECTION
\*------------------------------------*/
.sphere-editor__body {
  position: relative;
}

.sphere-editor__user-list {
  list-style: none;
  padding: 0 var(--space-md);
  overflow: auto;
}

.sphere-editor__user-item {
  position: relative;
  width: 100%;
  cursor: pointer;
  color: var(--social-list-text);
  background-color: var(--social-list-bg);
  margin: var(--space-md) 0;
  border-radius: var(--radius-xs);
}
.sphere-editor__user-item:hover {
  color: var(--social-list-text--hover);
  background-color: var(--social-list-bg--hover);
}

.sphere-editor__user-item--inactive {
  opacity: 0.5;
}
.sphere-editor__user-item--inactive .multi-select__label {
  color: var(--gray-500);
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

.social-activities {
  list-style: none;
  padding: 1ch;
  margin: 0;
}

.social-activity {
  padding: 2ch;
  margin: 2ch 0;
  border-radius: 5px;
  border-left: 5px solid var(--social-msg-grp-highlight);
  border-width: var(--social-msg-grp-border);
  transition: 0.3s;
  color: var(--social-msg-grp-text);
  background: var(--social-msg-grp-bg);
}

.social-activity__signature {
  margin-top: 1.5em;
}

a.social-activity__mention {
  display: inline;
  align-items: center;
  text-decoration: none;
  color: var(--slide-link-color);
  background: var(--slide-link-background);
  padding: var(--slide-link-padding);
  margin: var(--slide-link-margin);
  border: var(--slide-border);
  border-radius: var(--slide-border-radius);
}

a.social-activity__mention .cbi-slide-link {
  color: var(--slide-link-color);
  margin: var(--slide-link__icon-margin);
  --slide-link__icon-margin: 0 1ch 0 0;
}

.social-activity--own {
  border-left: none;
  border-right: 5px solid var(--social-msg-own-highlight);
  border-width: var(--social-msg-own-border);
  color: var(--social-msg-own-text);
  background: var(--social-msg-own-bg);
}
.social-activity--own .social-activity__meta {
  display: flex;
  flex-direction: row-reverse;
}
.social-activity--own .social-activity__user {
  color: var(--social-msg-own-user);
}

.social-activity__meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xxs);
  color: var(--gray-500);
  padding: 0 0 2ch 0;
}

.social-activity__user {
  overflow: hidden;
  font-weight: bold;
  color: var(--social-msg-grp-user);
}
.social-activity__user .social-member-bubble {
  display: none;
  visibility: hidden;
}

.social-activity__user--inactive {
  opacity: 0.5;
  color: var(--gray-500);
}

.social-activity__updated {
  white-space: nowrap;
}

.social-activity__body {
  font-size: var(--text-sm);
}
.social-activity__body.teaser:after {
  display: inline-block;
  content: " [...]";
  font-size: var(--text-xxs);
  color: rgb(0, 177, 185);
  margin-left: 5px;
  cursor: pointer;
}

.social-activity__attachments {
  padding-left: 0;
  position: relative;
  list-style: none;
  font-size: var(--text-xs);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 5px;
  justify-items: stretch;
  align-items: stretch;
}
.social-activity__attachments .attachment--with-preview {
  width: 100%;
}
.social-activity__attachments:before {
  position: absolute;
  left: 0;
  display: inline-block;
  padding: 0.25em 0;
}

.social-activity__attachment--compact {
  padding-left: 17px;
  margin-top: 8px;
}

.attachment {
  display: block;
  color: var(--gray-500);
}

.attachment--with-preview {
  text-align: center;
  text-decoration: none;
  height: 100px;
  width: 33.3333%;
  border: 5px solid transparent;
  border-left-width: 0;
  border-top-width: 0;
  overflow: hidden;
}
.attachment--with-preview:nth-child(3n) {
  border: 0;
}
.attachment--with-preview .attachment__type {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.75;
}

.attachment__link {
  display: grid;
  height: 100%;
  color: var(--gray-500);
  text-decoration: none;
  overflow: hidden;
  transition: 0.3s;
  position: relative;
  border: 1px solid var(--gray-500);
  background: var(--gray-200) center center no-repeat;
  background-size: cover;
  align-items: center;
  justify-items: center;
  border-radius: var(--radius-xs);
}
.attachment__link:before {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.2);
  left: 0;
  top: 0;
  transition: 0.3s;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.attachment__link:hover, .attachment__link:focus {
  color: var(--gray-800);
  text-decoration: underline;
}
.attachment__link:hover:before, .attachment__link:focus:before {
  opacity: 1;
}
.attachment__link:hover .attachment__type, .attachment__link:focus .attachment__type {
  color: var(--gray-600);
}

.attachment__type {
  display: inline-block;
  background: var(--gray-100);
  margin-right: 0.5em;
  font-size: var(--text-xxs);
  transition: 0.3s;
  min-width: 36px;
  height: 36px;
  line-height: 36px;
  padding: 0 4px;
  text-align: center;
  vertical-align: middle;
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.social-activity-editor {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  overflow: visible;
}

.social-activity-editor > div {
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}

.social-activity-editor__title {
  width: 100%;
  color: var(--input-text);
  background: rgba(var(--gray-200-rgb), 20%);
  font-weight: 700;
  font-size: var(--text-md);
  padding: 1ch;
  margin: 0;
  height: auto;
  box-sizing: border-box;
}

.social-activity-editor__wrapper {
  flex: 1 1 auto;
  position: relative;
  margin-top: 1em;
  display: flex;
  flex-direction: column;
  min-height: 55%;
}
.social-activity-editor__wrapper .ProseMirror {
  color: var(--input-text);
  background: rgba(var(--gray-200-rgb), 20%);
}
.social-activity-editor__wrapper .ProseMirror:focus, .social-activity-editor__wrapper .ProseMirror:focus-visible {
  outline: var(--focus-outline) !important;
}

.social-activity-editor__file {
  position: relative;
  display: inline-block;
  cursor: pointer !important;
}

.social-activity-editor__file--attached {
  display: none;
  cursor: pointer;
  color: var(--gray-300);
}

.social-activity-editor__upload {
  display: none;
}

.social-activity-editor__btn-label {
  font-size: var(--text-xs);
  margin-left: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.social-activity-editor__assets {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: var(--space-md);
}

.social-activity-editor__asset {
  height: 100px;
  width: calc(33.3333% - 10px);
  position: relative;
  padding: 0;
  background: var(--cbook-grey);
  background: no-repeat center center;
  background-size: cover;
  color: var(--danger);
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  font-size: var(--text-xxxs);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  background: no-repeat center center;
  background-size: cover;
  color: var(--text-color);
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  font-size: var(--text-xxxs);
}
.social-activity-editor__asset .cbi {
  color: var(--danger);
}
.social-activity-editor__asset:nth-child(3n) {
  margin-right: 0;
}
.social-activity-editor__asset:before {
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  left: 0;
  top: 0;
  line-height: 100px;
  font-size: var(--text-lg);
  text-align: center;
  color: var(--text-color-inverse);
  width: 100%;
  height: 100%;
  opacity: 0.2;
  transition: 0.3s;
}
.social-activity-editor__asset:hover:before, .social-activity-editor__asset:focus:before {
  opacity: 1;
}
.social-activity-editor__asset--need-upload {
  opacity: 0.7;
}
.social-activity-editor__asset--need-upload:after {
  content: " ";
  border: 10px transparent solid;
  border-top-color: var(--warning);
  border-left-color: var(--warning);
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
}
.social-activity-editor__asset--uploading:after {
  content: " ";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}
.social-activity-editor__asset__progress {
  stroke: #e9eaeb;
  stroke-width: 6px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}
.social-activity-editor__asset__progress-fill {
  stroke: rgb(0, 177, 185);
  stroke-width: 6px;
}
.social-activity-editor__asset__svg {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -20px;
}

.social-activity-editor__asset--will-be-deleted {
  opacity: 0.6;
  color: var(--danger);
  box-shadow: inset 0 0 15px 5px var(--danger);
}
.social-activity-editor__asset--will-be-deleted:before {
  opacity: 0.8;
}

.social-activity-editor__errors {
  border: 1px solid #f0b9b8;
  background: #f4cecd;
  color: #a02622;
  padding: 0;
  margin: 1.5em;
  font-size: var(--text-xs);
  list-style: none;
}

.social-activity-editor__error {
  padding: 0.6em 1.5em 0.65em;
  border-bottom: 1px solid #f0b9b8;
}
.social-activity-editor__error:last-child {
  border-bottom: 0;
}

.rte {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.rte__tools {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.rte__tools .cbi {
  color: var(--rl-black);
}

.social-activity-editor__file,
.rte-tools__btn {
  overflow: hidden;
  margin: 0;
  transition: 0.3s;
  color: var(--black);
  cursor: pointer;
  display: flex;
  display: block;
  align-items: center;
  justify-content: center;
}
.social-activity-editor__file:hover,
.rte-tools__btn:hover {
  opacity: 0.5;
}

.rte-tools__btn--active {
  color: rgb(0, 177, 185);
}

.rte__wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0.35em 0;
}
.rte__wrapper > [class^=draftJsMentionPlugin] {
  max-height: 250px;
  overflow: scroll;
  display: block !important;
}

.ProseMirror {
  border-radius: 5px;
  padding: 0.5ch;
  border: var(--border-off);
}

.DraftEditor-root {
  flex: 1 1 auto;
  background: #fff;
  padding: 0.5em 20px;
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.social-topics,
.sphere-selector__list,
.bonus-material__list {
  height: 100%;
  overflow: auto;
  margin: 0;
  padding: var(--space-lg);
  list-style: none;
  position: relative;
}

.material-item {
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-md);
  margin: var(--space-xs) var(--space-zero);
  border-radius: 5px;
  background: var(--social-list-bg);
}
.material-item:focus-within {
  outline: var(--focus-outline);
  box-shadow: 0 0 0 6px var(--focus-dropshadow);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}
.material-item .sphere-selector__item {
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: var(--space-xs) var(--space-md);
  margin: var(--space-xs) var(--space-zero);
  border-radius: var(--radius-xs);
  width: 100%;
  position: relative;
  display: inline-block;
}
.material-item:focus {
  background: var(--social-list-bg--hover);
}

.material-item__data {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

a.material-item__indicator {
  padding: var(--space-md) var(--space-md);
  margin: var(--space-md) var(--space-md);
  color: var(--button-text);
  border: none;
  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;
  border-radius: 100%;
  background: var(--gray-250);
}
a.material-item__indicator:hover {
  background: var(--white);
  color: var(--primary-color);
  outline: var(--focus-outline);
  box-shadow: 0 0 0 6px var(--focus-dropshadow);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}
a.material-item__indicator:focus, a.material-item__indicator:focus-visible {
  background: var(--gray-100);
  border: none;
  box-shadow: none;
  outline: none;
}

.material-item__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 100%;
}
.material-item__icon img {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.material-item__alt {
  font-size: var(--text-xxs);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.material-item__name {
  font-size: var(--text-sm);
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
}

.material-item__rating {
  margin: 0.4em 0;
}

.material-item__rating-count {
  display: inline-block;
  margin: 0 0.4em 0;
  vertical-align: top;
  font-size: var(--text-sm);
}

@keyframes quickChartNavBounceIn {
  0% {
    display: flex;
    opacity: 0;
    height: 0;
    bottom: var(--space-zero);
  }
  100% {
    height: 60px;
    opacity: 1;
    bottom: calc(var(--footer) + var(--space-md));
  }
}
@keyframes quickChartNavBounceOut {
  1% {
    display: flex;
    opacity: 1;
    height: 60px;
    opacity: 1;
    bottom: calc(var(--footer) + var(--space-md));
  }
  100% {
    height: 0;
    opacity: 0;
    bottom: var(--space-zero);
  }
}
.chart-quick-nav-is-visible .chart-progress__popup {
  display: flex;
  align-items: center;
  justify-content: center;
  animation-name: quickChartNavBounceIn;
  animation-timing-function: cubic-bezier(0.655, -0.26, 0.1, 1.445);
  animation-fill-mode: forwards;
  animation-duration: 0.3s;
  pointer-events: auto;
}

.chart-progress__popup {
  animation: quickChartNavBounceOut 400ms forwards;
}

.chart-progress__popup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  position: absolute;
  bottom: calc(var(--footer) + var(--space-md));
  left: var(--space-md);
  width: 500px;
  height: 60px;
  color: var(--text-color);
  background: var(--footer-bg);
  padding: 0 var(--space-lg);
  z-index: 4;
  border-radius: var(--radius-sm);
  pointer-events: none;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.chart-progress__popup label {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 2;
}
.chart-progress__popup .input-range__label {
  font-family: var(--font-paragraph);
}
.chart-progress__popup .input-range__label--value {
  top: -1.8rem;
  display: none;
  color: var(--primary-color);
}
.chart-progress__popup .input-range__label--min, .chart-progress__popup .input-range__label--max {
  display: none;
}
.chart-progress__popup:hover .input-range__label--value {
  display: block;
}
.chart-progress__popup .input-range {
  height: 100%;
  max-width: 277px;
}
.chart-progress__popup .input-range__slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--primary-color);
  border: 2px solid var(--primary-color);
}
.chart-progress__popup .input-range__track--background {
  background: var(--gray-350);
}
.chart-progress__popup .input-range__track--active {
  background: var(--primary-color);
}
.chart-progress__popup .chart-progress__range {
  margin-right: 10px;
}
.chart-progress__popup .chart-progress__number {
  border: 0;
  border-bottom: 2px solid var(--gray-200);
  width: 4ch;
  padding: 0 var(--space-md);
  background: none;
  text-align: right;
  background-color: var(--gray-200);
}
.chart-progress__popup .chart-progress__number:focus {
  border-bottom-color: var(--primary-color);
}
.chart-progress__popup .chart-progress__number-invalid {
  background-color: var(--danger-bg--hover);
  color: #d9534f;
  border-bottom-color: var(--danger);
}

.quick-favourites {
  width: var(--stage-width);
  height: var(--stage-height);
  bottom: var(--footer);
  margin: 0;
  z-index: 10;
  display: none;
  pointer-events: none;
  position: absolute;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  transform: scale(1);
  opacity: 0;
  background: var(--modal-screen);
  padding-top: calc(50% + var(--footer));
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.quick-favourites * {
  pointer-events: none;
}
.quick-favourites.quick-favourites-enter {
  opacity: 1;
  transform: scale(1);
  padding-top: calc(0% + var(--footer));
}
.quick-favourites.quick-favourites-enter-active {
  opacity: 1;
  transform: scale(1);
  padding-top: calc(0% + var(--footer));
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.quick-favourites.quick-favourites-enter-done {
  opacity: 1;
  transform: scale(1);
  padding-top: calc(0% + var(--footer));
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  pointer-events: all;
}
.quick-favourites.quick-favourites-enter-done * {
  display: flex;
  pointer-events: all;
}
.quick-favourites.quick-favourites-exit-active {
  opacity: 0;
  transform: scale(1);
  padding-top: calc(50% + var(--footer));
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.quick-favourites.quick-favourites-exit {
  opacity: 0;
  transform: scale(1);
  padding-top: calc(50% + var(--footer));
}
.quick-favourites.quick-favourites-exit-done {
  opacity: 0;
  transform: scale(1);
  padding-top: calc(50% + var(--footer));
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: none;
  pointer-events: none;
}
.quick-favourites.quick-favourites-exit-done * {
  display: none;
  pointer-events: none;
}
.quick-favourites .close-btn__container {
  z-index: 5;
  width: var(--modal-quick-fav-width);
}
.quick-favourites .close-btn__container .close-btn {
  cursor: pointer;
  padding: var(--space-md);
  margin: 0;
  width: 100%;
  border-radius: 0;
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
}
.quick-favourites .quick-favourites__body {
  width: var(--modal-quick-fav-width);
  padding: var(--space-lg);
  pointer-events: all;
  overflow: auto;
  min-height: 60%;
  border-radius: 0;
  margin-bottom: 0;
  background: var(--white);
  box-shadow: var(--cbook-shadow-container);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/*  Accessibility Focus Indicators @_accessiblity.scss */
/* Core Player */
/* Icons */
/* Interface  */
/* Book Mode Switch */
/* Social Color Palette */
/* Grid breakpoints */
/* cBook  containers */
/* Interface  */
/* Menu */
/* Social App */
.chart-error {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 25px 30px;
}
.chart-error__disclaimer {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.chart-error__disclaimer-text {
  flex: 1 1 auto;
  overflow: auto;
  margin: 15px 0;
}
.chart-error__content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.chart-error__header {
  color: #d9534f;
  font-weight: bold;
  font-size: 1.35em;
}
.chart-error__body {
  flex: 1 1 auto;
  max-width: 44em;
}

/*  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;
}