@charset "UTF-8";
/***************** Theme Version 0.1.83 *****************/
:root {
  /******************************************** COLORS *******************************+++++**********/
  /************************** Theme base colors **************************/
  --primary: hsl(221.54, 11.3%, 22.55%);
  --primary-h: 221.54;
  --primary-s: 11.3%;
  --primary-l: 22.55%;
  --secondary: hsl(169, 91%, 35%);
  --secondary-h: 169;
  --secondary-s: 91%;
  --secondary-l: 35%;
  --tertiary: hsl(34, 70%, 60%);
  --tertiary-h: 34;
  --tertiary-s: 70%;
  --tertiary-l: 60%;
  --success: hsl(145, 63%, 47%);
  --success-h: 145;
  --success-s: 63%;
  --success-l: 47%;
  --info: hsl(197, 84%, 38%);
  --info-h: 197;
  --info-s: 84%;
  --info-l: 38%;
  --warning: hsl(34, 70%, 60%);
  --warning-h: 34;
  --warning-s: 70%;
  --warning-l: 60%;
  --error: hsl(5.93, 90%, 35.29%);
  --error-h: 5.93;
  --error-s: 90%;
  --error-l: 35.29%;
  --text: hsl(0, 0%, 0%);
  --text-inverse: hsl(0, 0%, 100%);
  --white: hsl(0, 0%, 100%);
  --background: hsl(0, 0%, 100%);
  --background-inverse: hsl(0, 0%, 0%);
  --highlight: var(--secondary);
  --focus-color: var(--secondary);
  --focus-outline: 2px solid var(--focus-color);
  --focus-outline-off: 0px solid var(--focus-color);
  --focus-dropshadow: var(--focus-color) 0 0 0 3px;
  --focus-dropshadow-off: var(--focus-color) 0 0 0 0;
  --search-highlight: hsl(60, 100%, 50%);
  --search-highlight-color: var(--black);
  /************************** Shade variations **************************/
  --primary-900: hsl(calc(var(--primary-h) * 0.975), calc(var(--primary-s) * 0.799), calc(var(--primary-l) * 0.551));
  --primary-800: hsl(calc(var(--primary-h) * 0.995), calc(var(--primary-s) * 0.872), calc(var(--primary-l) * 0.757));
  --primary-700: hsl(calc(var(--primary-h) * 0.999), calc(var(--primary-s) * 0.907), calc(var(--primary-l) * 0.874));
  --primary-600: hsl(calc(var(--primary-h) * 1.004), calc(var(--primary-s) * 0.968), calc(var(--primary-l) * 0.985));
  --primary-500: var(--primary);
  --primary-400: hsl(calc(var(--primary-h) * 1.002), calc(var(--primary-s) * 0.667), calc(var(--primary-l) * 1.323));
  --primary-300: hsl(calc(var(--primary-h) * 1), calc(var(--primary-s) * 0.601), calc(var(--primary-l) * 1.568));
  --primary-200: hsl(calc(var(--primary-h) * 0.995), calc(var(--primary-s) * 0.595), calc(var(--primary-l) * 1.905));
  --primary-100: hsl(calc(var(--primary-h) * 0.99), calc(var(--primary-s) * 0.586), calc(var(--primary-l) * 2.242));
  --primary-50: hsl(calc(var(--primary-h) * 0.99), calc(var(--primary-s) * 0.592), calc(var(--primary-l) * 2.562));
  --secondary-900: hsl(calc(var(--secondary-h) * 0.975), calc(var(--secondary-s) * 0.799), calc(var(--secondary-l) * 0.551));
  --secondary-800: hsl(calc(var(--secondary-h) * 0.995), calc(var(--secondary-s) * 0.872), calc(var(--secondary-l) * 0.757));
  --secondary-700: hsl(calc(var(--secondary-h) * 0.999), calc(var(--secondary-s) * 0.907), calc(var(--secondary-l) * 0.874));
  --secondary-600: hsl(calc(var(--secondary-h) * 1.004), calc(var(--secondary-s) * 0.968), calc(var(--secondary-l) * 0.985));
  --secondary-500: var(--secondary);
  --secondary-400: hsl(calc(var(--secondary-h) * 1.002), calc(var(--secondary-s) * 0.667), calc(var(--secondary-l) * 1.323));
  --secondary-300: hsl(calc(var(--secondary-h) * 1), calc(var(--secondary-s) * 0.601), calc(var(--secondary-l) * 1.568));
  --secondary-200: hsl(calc(var(--secondary-h) * 0.995), calc(var(--secondary-s) * 0.595), calc(var(--secondary-l) * 1.905));
  --secondary-100: hsl(calc(var(--secondary-h) * 0.99), calc(var(--secondary-s) * 0.586), calc(var(--secondary-l) * 2.242));
  --secondary-50: hsl(calc(var(--secondary-h) * 0.99), calc(var(--secondary-s) * 0.592), calc(var(--secondary-l) * 2.562));
  --tertiary-900: hsl(calc(var(--tertiary-h) * 0.975), calc(var(--tertiary-s) * 0.799), calc(var(--tertiary-l) * 0.551));
  --tertiary-800: hsl(calc(var(--tertiary-h) * 0.995), calc(var(--tertiary-s) * 0.872), calc(var(--tertiary-l) * 0.757));
  --tertiary-700: hsl(calc(var(--tertiary-h) * 0.999), calc(var(--tertiary-s) * 0.907), calc(var(--tertiary-l) * 0.874));
  --tertiary-600: hsl(calc(var(--tertiary-h) * 1.004), calc(var(--tertiary-s) * 0.968), calc(var(--tertiary-l) * 0.985));
  --tertiary-500: var(--tertiary);
  --tertiary-400: hsl(calc(var(--tertiary-h) * 1.002), calc(var(--tertiary-s) * 0.667), calc(var(--tertiary-l) * 1.323));
  --tertiary-300: hsl(calc(var(--tertiary-h) * 1), calc(var(--tertiary-s) * 0.601), calc(var(--tertiary-l) * 1.568));
  --tertiary-200: hsl(calc(var(--tertiary-h) * 0.995), calc(var(--tertiary-s) * 0.595), calc(var(--tertiary-l) * 1.905));
  --tertiary-100: hsl(calc(var(--tertiary-h) * 0.99), calc(var(--tertiary-s) * 0.586), calc(var(--tertiary-l) * 2.242));
  --tertiary-50: hsl(calc(var(--tertiary-h) * 0.99), calc(var(--tertiary-s) * 0.592), calc(var(--tertiary-l) * 2.562));
  --success-900: hsl(calc(var(--success-h) * 0.975), calc(var(--success-s) * 0.799), calc(var(--success-l) * 0.551));
  --success-800: hsl(calc(var(--success-h) * 0.995), calc(var(--success-s) * 0.872), calc(var(--success-l) * 0.757));
  --success-700: hsl(calc(var(--success-h) * 0.999), calc(var(--success-s) * 0.907), calc(var(--success-l) * 0.874));
  --success-600: hsl(calc(var(--success-h) * 1.004), calc(var(--success-s) * 0.968), calc(var(--success-l) * 0.985));
  --success-500: var(--success);
  --success-400: hsl(calc(var(--success-h) * 1.002), calc(var(--success-s) * 0.667), calc(var(--success-l) * 1.323));
  --success-300: hsl(calc(var(--success-h) * 1), calc(var(--success-s) * 0.601), calc(var(--success-l) * 1.568));
  --success-200: hsl(calc(var(--success-h) * 0.995), calc(var(--success-s) * 0.595), calc(var(--success-l) * 1.905));
  --success-100: hsl(calc(var(--success-h) * 0.99), calc(var(--success-s) * 0.586), calc(var(--success-l) * 2.242));
  --success-50: hsl(calc(var(--success-h) * 0.99), calc(var(--success-s) * 0.592), calc(var(--success-l) * 2.562));
  --info-900: hsl(calc(var(--info-h) * 0.975), calc(var(--info-s) * 0.799), calc(var(--info-l) * 0.551));
  --info-800: hsl(calc(var(--info-h) * 0.995), calc(var(--info-s) * 0.872), calc(var(--info-l) * 0.757));
  --info-700: hsl(calc(var(--info-h) * 0.999), calc(var(--info-s) * 0.907), calc(var(--info-l) * 0.874));
  --info-600: hsl(calc(var(--info-h) * 1.004), calc(var(--info-s) * 0.968), calc(var(--info-l) * 0.985));
  --info-500: var(--info);
  --info-400: hsl(calc(var(--info-h) * 1.002), calc(var(--info-s) * 0.667), calc(var(--info-l) * 1.323));
  --info-300: hsl(calc(var(--info-h) * 1), calc(var(--info-s) * 0.601), calc(var(--info-l) * 1.568));
  --info-200: hsl(calc(var(--info-h) * 0.995), calc(var(--info-s) * 0.595), calc(var(--info-l) * 1.905));
  --info-100: hsl(calc(var(--info-h) * 0.99), calc(var(--info-s) * 0.586), calc(var(--info-l) * 2.242));
  --info-50: hsl(calc(var(--info-h) * 0.99), calc(var(--info-s) * 0.592), calc(var(--info-l) * 2.562));
  --warning-900: hsl(calc(var(--warning-h) * 0.975), calc(var(--warning-s) * 0.799), calc(var(--warning-l) * 0.551));
  --warning-800: hsl(calc(var(--warning-h) * 0.995), calc(var(--warning-s) * 0.872), calc(var(--warning-l) * 0.757));
  --warning-700: hsl(calc(var(--warning-h) * 0.999), calc(var(--warning-s) * 0.907), calc(var(--warning-l) * 0.874));
  --warning-600: hsl(calc(var(--warning-h) * 1.004), calc(var(--warning-s) * 0.968), calc(var(--warning-l) * 0.985));
  --warning-500: var(--warning);
  --warning-400: hsl(calc(var(--warning-h) * 1.002), calc(var(--warning-s) * 0.667), calc(var(--warning-l) * 1.323));
  --warning-300: hsl(calc(var(--warning-h) * 1), calc(var(--warning-s) * 0.601), calc(var(--warning-l) * 1.568));
  --warning-200: hsl(calc(var(--warning-h) * 0.995), calc(var(--warning-s) * 0.595), calc(var(--warning-l) * 1.905));
  --warning-100: hsl(calc(var(--warning-h) * 0.99), calc(var(--warning-s) * 0.586), calc(var(--warning-l) * 2.242));
  --warning-50: hsl(calc(var(--warning-h) * 0.99), calc(var(--warning-s) * 0.592), calc(var(--warning-l) * 2.562));
  --error-900: hsl(calc(var(--error-h) * 0.975), calc(var(--error-s) * 0.799), calc(var(--error-l) * 0.551));
  --error-800: hsl(calc(var(--error-h) * 0.995), calc(var(--error-s) * 0.872), calc(var(--error-l) * 0.757));
  --error-700: hsl(calc(var(--error-h) * 0.999), calc(var(--error-s) * 0.907), calc(var(--error-l) * 0.874));
  --error-600: hsl(calc(var(--error-h) * 1.004), calc(var(--error-s) * 0.968), calc(var(--error-l) * 0.985));
  --error-500: var(--error);
  --error-400: hsl(calc(var(--error-h) * 1.002), calc(var(--error-s) * 0.667), calc(var(--error-l) * 1.323));
  --error-300: hsl(calc(var(--error-h) * 1), calc(var(--error-s) * 0.601), calc(var(--error-l) * 1.568));
  --error-200: hsl(calc(var(--error-h) * 0.995), calc(var(--error-s) * 0.595), calc(var(--error-l) * 1.905));
  --error-100: hsl(calc(var(--error-h) * 0.99), calc(var(--error-s) * 0.586), calc(var(--error-l) * 2.242));
  --error-50: hsl(calc(var(--error-h) * 0.99), calc(var(--error-s) * 0.592), calc(var(--error-l) * 2.562));
  --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-850: hsl(var(--gray-hue), var(--gray-sat), 16%);
  --gray-800: hsl(var(--gray-hue), var(--gray-sat), 21%);
  --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-250: hsl(var(--gray-hue), var(--gray-sat), 89%);
  --gray-100: hsl(var(--gray-hue), var(--gray-sat), 95%);
  --gray-150: hsl(var(--gray-hue), var(--gray-sat), 96%);
  --white: hsl(var(--gray-hue), var(--gray-sat), 100%);
  /************************** Opacity variations **************************/
  --primary-500_100: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 1);
  --primary-500_90: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.9);
  --primary-500_80: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.8);
  --primary-500_70: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.7);
  --primary-500_60: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.6);
  --primary-500_50: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
  --primary-500_40: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.4);
  --primary-500_30: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.3);
  --primary-500_20: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2);
  --primary-500_10: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);
  --primary-500_00: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0);
  --secondary-500_100: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 1);
  --secondary-500_90: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.9);
  --secondary-500_80: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.8);
  --secondary-500_70: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.7);
  --secondary-500_60: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.6);
  --secondary-500_50: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.5);
  --secondary-500_40: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.4);
  --secondary-500_30: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.3);
  --secondary-500_20: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.2);
  --secondary-500_10: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.1);
  --secondary-500_00: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0);
  --tertiary-500_100: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 1);
  --tertiary-500_90: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.9);
  --tertiary-500_80: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.8);
  --tertiary-500_70: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.7);
  --tertiary-500_60: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.6);
  --tertiary-500_50: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.5);
  --tertiary-500_40: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.4);
  --tertiary-500_30: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.3);
  --tertiary-500_20: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.2);
  --tertiary-500_10: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.1);
  --tertiary-500_00: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0);
  --success-500_100: hsla(var(--success-h), var(--success-s), var(--success-l), 1);
  --success-500_90: hsla(var(--success-h), var(--success-s), var(--success-l), 0.9);
  --success-500_80: hsla(var(--success-h), var(--success-s), var(--success-l), 0.8);
  --success-500_70: hsla(var(--success-h), var(--success-s), var(--success-l), 0.7);
  --success-500_60: hsla(var(--success-h), var(--success-s), var(--success-l), 0.6);
  --success-500_50: hsla(var(--success-h), var(--success-s), var(--success-l), 0.5);
  --success-500_40: hsla(var(--success-h), var(--success-s), var(--success-l), 0.4);
  --success-500_30: hsla(var(--success-h), var(--success-s), var(--success-l), 0.3);
  --success-500_20: hsla(var(--success-h), var(--success-s), var(--success-l), 0.2);
  --success-500_10: hsla(var(--success-h), var(--success-s), var(--success-l), 0.1);
  --success-500_00: hsla(var(--success-h), var(--success-s), var(--success-l), 0);
  --info-500_100: hsla(var(--info-h), var(--info-s), var(--info-l), 1);
  --info-500_90: hsla(var(--info-h), var(--info-s), var(--info-l), 0.9);
  --info-500_80: hsla(var(--info-h), var(--info-s), var(--info-l), 0.8);
  --info-500_70: hsla(var(--info-h), var(--info-s), var(--info-l), 0.7);
  --info-500_60: hsla(var(--info-h), var(--info-s), var(--info-l), 0.6);
  --info-500_50: hsla(var(--info-h), var(--info-s), var(--info-l), 0.5);
  --info-500_40: hsla(var(--info-h), var(--info-s), var(--info-l), 0.4);
  --info-500_30: hsla(var(--info-h), var(--info-s), var(--info-l), 0.3);
  --info-500_20: hsla(var(--info-h), var(--info-s), var(--info-l), 0.2);
  --info-500_10: hsla(var(--info-h), var(--info-s), var(--info-l), 0.1);
  --info-500_00: hsla(var(--info-h), var(--info-s), var(--info-l), 0);
  --warning-500_100: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 1);
  --warning-500_90: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.9);
  --warning-500_80: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.8);
  --warning-500_70: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.7);
  --warning-500_60: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.6);
  --warning-500_50: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.5);
  --warning-500_40: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.4);
  --warning-500_30: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.3);
  --warning-500_20: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.2);
  --warning-500_10: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.1);
  --warning-500_00: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0);
  --error-500_100: hsla(var(--error-h), var(--error-s), var(--error-l), 1);
  --error-500_90: hsla(var(--error-h), var(--error-s), var(--error-l), 0.9);
  --error-500_80: hsla(var(--error-h), var(--error-s), var(--error-l), 0.8);
  --error-500_70: hsla(var(--error-h), var(--error-s), var(--error-l), 0.7);
  --error-500_60: hsla(var(--error-h), var(--error-s), var(--error-l), 0.6);
  --error-500_50: hsla(var(--error-h), var(--error-s), var(--error-l), 0.5);
  --error-500_40: hsla(var(--error-h), var(--error-s), var(--error-l), 0.4);
  --error-500_30: hsla(var(--error-h), var(--error-s), var(--error-l), 0.3);
  --error-500_20: hsla(var(--error-h), var(--error-s), var(--error-l), 0.2);
  --error-500_10: hsla(var(--error-h), var(--error-s), var(--error-l), 0.1);
  --error-500_00: hsla(var(--error-h), var(--error-s), var(--error-l), 0);
  --white_100: hsla(var(--white-h), var(--white-s), var(--white-l), 1);
  --white_90: hsla(var(--white-h), var(--white-s), var(--white-l), 0.9);
  --white_80: hsla(var(--white-h), var(--white-s), var(--white-l), 0.8);
  --white_70: hsla(var(--white-h), var(--white-s), var(--white-l), 0.7);
  --white_60: hsla(var(--white-h), var(--white-s), var(--white-l), 0.6);
  --white_50: hsla(var(--white-h), var(--white-s), var(--white-l), 0.5);
  --white_40: hsla(var(--white-h), var(--white-s), var(--white-l), 0.4);
  --white_30: hsla(var(--white-h), var(--white-s), var(--white-l), 0.3);
  --white_20: hsla(var(--white-h), var(--white-s), var(--white-l), 0.2);
  --white_10: hsla(var(--white-h), var(--white-s), var(--white-l), 0.1);
  --white_00: hsla(var(--white-h), var(--white-s), var(--white-l), 0);
  /* Contrast Colors for Accessibility Menu*/
  --contrast-yellow: hsl(60, 100%, 50%);
  --contrast-blue: hsl(240, 100%, 50%);
  --contrast-black: hsl(0, 0%, 0%);
  --contrast-white: hsl(0, 0%, 100%);
  --contrast-green: hsl(120, 100%, 25%);
  --contrast-red: hsl(0, 100%, 27%);
  --contrast-cyan: hsl(180, 100%, 50%);
  --icon-color: inherit;
  --icon-color--hover: inherit;
  /******************************************** TYPOGRAPHY **********************************************/
  --text-multiplier: 1;
  --line-space-multiplier: 1.3;
  --font-size-xx-small: calc(0.65rem * var(--text-multiplier));
  --font-size-x-small: calc(0.75rem * var(--text-multiplier));
  --font-size-small: calc(0.875rem * var(--text-multiplier));
  --font-size-medium: calc(1rem * var(--text-multiplier));
  --font-size-large: calc(1.125rem * var(--text-multiplier));
  --font-size-x-large: calc(1.25rem * var(--text-multiplier));
  --font-size-xx-large: calc(1.5rem * var(--text-multiplier));
  --font-size-xxx-large: calc(2rem * var(--text-multiplier));
  --font-paragraph: Helvetica, Segoe UI, Arial, sans-serif;
  --font-heading: Helvetica, Segoe UI, Arial, sans-serif;
  --font-overline: var(--font-paragraph);
  --font-caption: var(--font-paragraph);
  --font-label: monospace;
  --font-icon: "";
  /***************************************** SPACING **********************************************/
  --space-zero: 0;
  --space-xx-small: 0.25rem;
  --space-x-small: 0.5rem;
  --space-small: 0.75rem;
  --space-medium: 1rem;
  --space-large: 1.5rem;
  --space-x-large: 2rem;
  --space-xx-large: 3rem;
  /***************************************** BORDER RADIUS ********************************************/
  --border-radius-zero: 0;
  --border-radius-small: 0.25rem;
  --border-radius-medium: 0.5rem;
  --border-radius-large: 1rem;
  --border-radius-full: 9999px;
  /***************************************** SHADOWS ********************************************/
  --shadow-small: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --shadow-medium: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --shadow-large: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --shadow-x-large: 0px 3px 6px -2px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
  --shadow-xx-large: 0px 8px 24px -4px rgba(0, 0, 0, 0.35), 0px 16px 32px -4px rgba(0, 0, 0, 0.18), 0px 24px 48px -6px rgba(0, 0, 0, 0.12);
  --shadow-modal: rgba(0, 0, 0, 0.4) 0px 30px 90px;
  /***************** Z-INDEX *****************/
  --z-index-accessibility: 1800;
  --z-index-tooltip: 1700;
  --z-index-popover: 1600;
  --z-index-modal: 1500;
  --z-index-modal-backdrop: 1400;
  --z-index-fixed: 1300;
  --z-index-cbook-menus: 1350;
  --z-index-cbook-ui: 1250;
  --z-index-sticky: 1200;
  --z-index-dropdown: 1000;
  /***************************************** UI SIZES ********************************************/
  --cbook-width: 100%;
  --cbook-height: 100%;
  --stage-padding-x: 0px;
  --stage-padding-y: 0px;
  --header-height: 50px;
  --footer-height: 50px;
  --stage-width: 100%;
  --stage-height: calc(var(--cbook-height) - var(--header-height) - var(--footer-height) - (2 * var(--stage-padding-y)));
  /******************************************** UI ELEMENT COLORS ********************************************/
  --header-color: var(--text-inverse);
  --header-bg: var(--primary-700);
  --footer-color: var(--text-inverse);
  --footer-bg: var(--primary-700);
  --card-back-color: var(--gray-900);
  --card-back-bg: var(--gray-100);
  --card-front-color: var(--gray-900);
  --card-front-bg: var(--gray-100);
  /******************** Button Colors ********************/
  --button-text: var(--text-inverse);
  --button-text--hover: var(--text-inverse);
  --button-background: var(--background-inverse);
  --button-background--hover: var(--highlight);
  /******************** Slide Link Colors ********************/
  --slide-link-color: var(--text-inverse);
  --slide-link-background: var(--highlight);
  --slide-link-background-hover: var(--primary-500);
  /******************** Toggle Button Colors ********************/
  --toggle-button-text: var(--gray-800);
  --toggle-button-bg: var(--gray-100);
  --toggle-button-text--hover: var(--primary);
  --toggle-button-bg--hover: var(--gray-150);
  --toggle-button--pressed-text: var(--gray-800);
  --toggle-button--pressed-bg: var(--gray-100);
  --toggle-button--pressed-text--hover: var(--primary);
  --toggle-button--pressed-bg--hover: var(--gray-150);
  /******************** Input Colors ********************/
  --input-text: var(--text);
  --input-bg: var(--background);
  --input-border: 1px solid var(--gray-700);
  /******************** Menu Colors ********************/
  --modal-bg: var(--white);
  --menu-color: var(--text);
  --menu-bg: inherit;
  --menu-panel-bg: linear-gradient(to top, var(--gray-200) 0%, var(--gray-250) 100%);
  --menu-modal-background: var(--modal-screen-bg);
  --menu-text: var(--text);
  --menu-sm-head: var(--primary);
  --menu-search-box-bg: var(--gray-100);
  --menu-color--hover: var(--primary);
  --menu-bg--hover: inherit;
  --menu-search-text: var(--white);
  --menu-search-bg: var(--white);
  --menu-search-btn-bg: var(--error);
  --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);
  --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);
  --menu-close-color: var(--white);
  --menu-close-bg: var(--black);
  --menu-close-color--hover: var(--white);
  --menu-close-bg--hover: var(--primary);
  --menu-fav: var(--gray-700);
  /******************** Social App Colors ********************/
  --social-body-bg: linear-gradient(to top, var(--gray-200) 0%, var(--gray-250) 100%);
  --social-hero-bg: var(--social-body-bg);
  --social-modal-background: var(--modal-screen-bg);
  --social-list-bg: var(--gray-150);
  --social-list-text: var(--black);
  --social-list-notes-bg: var(--white);
  --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-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-msg-bg: var(--white);
  --social-msg-reply-bg: var(--white);
  --social-msg-own-highlight: var(--secondary);
  --social-msg-own-bg: var(--primary-500_10);
  --social-msg-own-text: var(--text);
  --social-msg-own-user: var(--social-msg-own-highlight);
  --social-msg-grp-highlight: var(--primary);
  --social-msg-grp-bg: var(--secondary-500_10);
  --social-msg-grp-text: var(--text);
  --social-msg-grp-user: var(--social-msg-grp-highlight);
  --social-notes-bg: transparentize(#ececc1, 0.3);
  /******************************************** SLIDE LINKS ********************************************/
  --slide-link-padding: var(--space-xx-small) var(--space-small);
  --slide-link-margin: 0;
  --slide-link-border: none;
  --slide-link-border-radius: var(--border-radius-medium);
  --slide-link__icon-margin: 0 1ch 0 0;
  /******************************************** BUTTONS ********************************************/
  --button-padding: var(--space-small) var(--space-medium);
  --button-margin: 0;
  --button-border-radius: var(--border-radius-small);
  --button-border: none;
  --button-drop-shadow: none;
  --toggle-button-box-shadow: var(--shadow-small);
  --toggle-button-padding: var(--space-x-small) var(--space-medium);
  --toggle-button-margin: var(--space-x-smalls) var(--space-medium);
  --toggle-button-border-radius: var(--border-radius-small);
  --toggle-button-border: 0;
  --toggle-button-box-shadow--hover: var(--shadow-small);
  --toggle-button--pressed-box-shadow: var(--shadow-small);
  /************************************************ MODAL ********************************************/
  --modal-bg-blur: backdrop-filter(5px);
  --modal-box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
  --modal-border: 4px solid transparent;
  --modal-screen-bg: rgba(0, 0, 0, 0.7);
  --modal-width: min(100%, 700px);
  --modal-quick-fav-width: min(100%, 700px);
  /***************************************** INPUT ********************************************/
  --input-height: 1.5rem;
  --input-width: 100%;
  --input-padding: var(--space-small) var(--space-x-small);
  --input-margin: 0;
  --input-border-radius: var(--border-radius-small);
  /***************************************** ICONS ********************************************/
  --icon-padding: 0;
  --icon-margin: 0;
  --icon-size-s: 16px;
  --icon-size-m: 24px;
  --icon-size-l: 32px;
  --icon-size-xl: 48px;
  /***************************************** FOOTER ********************************************/
  --footer-book-story-switch: flex;
  /***************************************** APP MENU ********************************************/
  --app-menu-width: 480px;
  --menu-border-radius: var(--border-radius-full);
  --menu-search-form-border: var(--input-border);
  --menu-close-display: flex;
  --menu-close-size: 34px;
  --menu-close-position-left: inital;
  --menu-close-position-right: calc(var(--menu-close-size) * -1);
  --menu-close-radius: var(--border-radius-zero) var(--border-radius-zero) var(--border-radius-zero) var(--border-radius-zero);
  /*****************************************  SOCIAL APP *****************************************/
  --social-app-width: 50%;
  --social-position-top: 0;
  --social-height: var(--cbook-height);
  --social-close-position-left: calc(var(--menu-close-size) * -1 + 12px);
  --social-close-position-right: initial;
  --social-close-radius: var(--border-radius-zero) var(--border-radius-zero) var(--border-radius-zero) var(--border-radius-zero);
  --social-tools-shadow: rgb(0 0 0 / 20%) 0px 15px 20px -20px;
  --social-list-border-radius: var(--border-radius-small) var(--border-radius-small) var(--border-radius-small) var(--border-radius-small);
  --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-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-icon-border-radius: var(--border-radius-full);
  --social-msg-own-border: 5px;
  --social-msg-grp-border: 5px;
  --social-z-index: var(--z-index-cbook-menus);
  /*****************************************  PAGE BUILDER  *****************************************/
  --pb-editor-gap: 10px;
}

/*****************************************  EXTENSIONS *****************************************/
/*************** ANIMATIONS PRESETS FOR PAGE BUILDER ***************/
/* ----------------------------------------------
 * Generated by Animista on 2025-2-24 10:55:7
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@keyframes rotate-center {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation scale-out-center
 * ----------------------------------------
 */
@keyframes scale-out-center {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation fade-out
 * ----------------------------------------
 */
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/**
 * ----------------------------------------
 * animation puff-in-center
 * ----------------------------------------
 */
@keyframes puff-in-center {
  0% {
    transform: scale(2);
    filter: blur(4px);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    filter: blur(0px);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation puff-out-center
 * ----------------------------------------
 */
@keyframes puff-out-center {
  0% {
    transform: scale(1);
    filter: blur(0px);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    filter: blur(4px);
    opacity: 0;
  }
}
/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */
@keyframes slide-in-top {
  0% {
    transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation slide-out-top
 * ----------------------------------------
 */
@keyframes slide-out-top {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-1000px);
    opacity: 0;
  }
}
/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@keyframes slide-in-left {
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation slide-out-left
 * ----------------------------------------
 */
@keyframes slide-out-left {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-1000px);
    opacity: 0;
  }
}
/**
 * ----------------------------------------
 * animation slide-in-right
 * ----------------------------------------
 */
@keyframes slide-in-right {
  0% {
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation slide-out-right
 * ----------------------------------------
 */
@keyframes slide-out-right {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(1000px);
    opacity: 0;
  }
}
/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@keyframes slide-in-bottom {
  0% {
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation slide-out-bottom
 * ----------------------------------------
 */
@keyframes slide-out-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(1000px);
    opacity: 0;
  }
}
/**
 * ----------------------------------------
 * animation scale-in-br
 * ----------------------------------------
 */
@keyframes scale-in-br {
  0% {
    transform: scale(0);
    transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    transform: scale(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@keyframes text-focus-in {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation pulse with primary color
 * ----------------------------------------
 */
/* animations - START */
@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px var(--primary-500_10);
  }
  100% {
    box-shadow: 0 0 10px 10px var(--primary-100);
  }
}
/* pulse white */
@keyframes pulse-animation-white {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.8);
  }
  100% {
    box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0);
  }
}
/* FONT HELVETICA */
@font-face {
  font-family: "Helvetica";
  src: url("./assets/fonts/helvetica/HelveticaNeueLTPro-Lt.woff") format("woff"), url("./assets/fonts/helvetica/HelveticaNeueLTPro-Lt.woff2") format("woff2");
  /* Modern Browsers */
  font-style: normal;
  font-weight: 300;
  /* Light */
}
@font-face {
  font-family: "Helvetica";
  src: url("./assets/fonts/helvetica/HelveticaNeueLTPro-Md.woff") format("woff"), url("./assets/fonts/helvetica/HelveticaNeueLTPro-Md.woff2") format("woff2");
  /* Modern Browsers */
  font-style: normal;
  font-weight: 500;
  /* Medium */
}
@font-face {
  font-family: "Helvetica";
  src: url("./assets/fonts/helvetica/HelveticaNeueLTPro-Bd.woff") format("woff"), url("./assets/fonts/helvetica/HelveticaNeueLTPro-Bd.woff2") format("woff2");
  /* Modern Browsers */
  font-style: normal;
  font-weight: bold;
  /* Medium */
}
@font-face {
  font-family: "Helvetica";
  src: url("./assets/fonts/helvetica/HelveticaNeueLTPro-Roman.woff") format("woff"), url("./assets/fonts/helvetica/HelveticaNeueLTPro-Roman.woff2") format("woff2");
  /* Modern Browsers */
  font-style: normal;
  font-weight: 400;
  /* Regular */
}
/* FONT OPENSANS */
@font-face {
  font-family: "OpenSans";
  src: url("./assets/fonts/opensans/OpenSans.woff") format("woff"), url("./assets/fonts/opensans/OpenSans.woff2") format("woff2");
  /* Modern Browsers */
  font-style: normal;
  font-weight: 400;
  /* Regular */
}
@font-face {
  font-family: "OpenSans";
  src: url("./assets/fonts/opensans/OpenSans-Bold.woff") format("woff"), url("./assets/fonts/opensans/OpenSans-Bold.woff2") format("woff2");
  /* Modern Browsers */
  font-style: normal;
  font-weight: 700;
  /* Bold */
}
@font-face {
  font-family: "OpenSans";
  src: url("./assets/fonts/opensans/OpenSans-Light.woff") format("woff"), url("./assets/fonts/opensans/OpenSans-Light.woff2") format("woff2");
  /* Modern Browsers */
  font-style: normal;
  font-weight: 300;
  /* Light */
}
@font-face {
  font-family: "OpenSans";
  src: url("./assets/fonts/opensans/OpenSans-Semibold.woff") format("woff"), url("./assets/fonts/opensans/OpenSans-Semibold.woff2") format("woff2");
  /* Modern Browsers */
  font-style: normal;
  font-weight: 600;
  /* SemiBold */
}
/* FONT ROBOTO */
@font-face {
  font-family: "Roboto";
  src: url("./assets/fonts/roboto/Roboto-Regular.woff") format("woff"), url("./assets/fonts/roboto/Roboto-Regular.woff2") format("woff2");
  /* Modern Browsers */
  font-style: normal;
  font-weight: 400;
  /* Regular */
}
@font-face {
  font-family: "Roboto";
  src: url("./assets/fonts/roboto/Roboto-SemiBold.woff") format("woff"), url("./assets/fonts/roboto/Roboto-SemiBold.woff2") format("woff2");
  /* Modern Browsers */
  font-style: normal;
  font-weight: 600;
  /* SemiBold */
}
@font-face {
  font-family: "Roboto";
  src: url("./assets/fonts/roboto/Roboto-Bold.woff") format("woff"), url("./assets/fonts/roboto/Roboto-Bold.woff2") format("woff2");
  /* Modern Browsers */
  font-style: normal;
  font-weight: 700;
  /* Bold */
}
@font-face {
  font-family: "Roboto";
  src: url("./assets/fonts/roboto/Roboto-Medium.woff") format("woff"), url("./assets/fonts/roboto/Roboto-Medium.woff2") format("woff2");
  /* Modern Browsers */
  font-style: normal;
  font-weight: 500;
  /* Medium */
}
@font-face {
  font-family: "Roboto";
  src: url("./assets/fonts/roboto/Roboto-Light.woff") format("woff"), url("./assets/fonts/roboto/Roboto-Light.woff2") format("woff2");
  /* Modern Browsers */
  font-style: normal;
  font-weight: 300;
  /* Light */
}
@font-face {
  font-family: "Roboto";
  src: url("./assets/fonts/roboto/Roboto-Thin.woff") format("woff"), url("./assets/fonts/roboto/Roboto-Thin.woff2") format("woff2");
  /* Modern Browsers */
  font-style: normal;
  font-weight: 100;
  /* Thin */
}
/* FONT AWESOME */
@font-face {
  font-family: "FontAwesomeBrands";
  src: url("./assets/fonts/fontawesome/fa-brands-400.woff2") format("woff2"), url("./assets/fonts/fontawesome/fa-brands-400.woff") format("woff");
  /* Modern Browsers */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FontAwesomeRegular";
  src: url("./assets/fonts/fontawesome/fa-regular-400.woff2") format("woff2"), url("./assets/fonts/fontawesome/fa-regular-400.woff") format("woff");
  /* Modern Browsers */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FontAwesomeSolid";
  src: url("./assets/fonts/fontawesome/fa-solid-900.woff2") format("woff2"), url("./assets/fonts/fontawesome/fa-solid-900.woff") format("woff");
  /* Modern Browsers */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FontAwesomeV4";
  src: url("./assets/fonts/fontawesome/fa-v4compatibility.woff2") format("woff2"), url("./assets/fonts/fontawesome/fa-v4compatibility.woff") format("woff");
  /* Modern Browsers */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/***************** Basic Styles *****************/
#cbook-body,
#cbook-html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

#cbook-root.cbook-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-50);
  color: var(--text);
  font-family: var(--font-paragraph);
}

.cbook-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  width: var(--cbook-width);
  height: var(--cbook-height);
}
.cbook-container button {
  cursor: pointer;
  border: none;
}

.book-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: visible;
  width: 100%;
  height: 100%;
  transition: 0.6s opacity;
}
.book-wrapper--is-loading {
  opacity: 0;
}

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

.transitioner {
  height: var(--stage-height);
  width: var(--stage-width);
  background-color: transparent;
  position: relative;
  z-index: 0;
}

.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: rotate-center 0.6s linear infinite;
  box-sizing: border-box;
}
.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;
  box-sizing: border-box;
}

.cbook-container *,
.cbook-container *:before,
.cbook-container *:after {
  -webit-box-sizing: border-box;
  box-sizing: border-box;
}

/*********************************************
 * cBook icons
 *********************************************/
.cbi {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
}

.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);
}

/*********************************************
 * Chart Error Display
 *********************************************/
.chart-error {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.chart-error__disclaimer {
  padding: 25px 30px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.chart-error__disclaimer .btn {
  color: var(--button-text);
}
.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: var(--error-500);
  font-weight: bold;
  font-size: 1.35em;
}
.chart-error__body {
  flex: 1 1 auto;
  max-width: 44em;
}

.chart-quick-nav-is-visible .chart-progress__popup {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: slide-in-bottom 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  pointer-events: auto;
}

.chart-progress__popup {
  animation: slide-out-bottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: var(--space-x-small);
  position: fixed;
  bottom: calc(var(--footer-height) + var(--space-medium));
  left: var(--space-medium);
  min-width: 400px;
  color: var(--text-inverse);
  background: var(--footer-bg);
  padding: 0 var(--space-large);
  z-index: 4;
  pointer-events: none;
  border-radius: var(--border-radius-small, 0);
  width: 400px;
  height: 60px;
  font-size: var(--font-size-medium);
  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: auto;
  bottom: 0.7rem;
  display: none;
  color: var(--highlight);
}
.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(--secondary);
  border: 2px solid var(--secondary);
}
.chart-progress__popup .input-range__track--background {
  background: var(--gray-350);
}
.chart-progress__popup .input-range__track--active {
  background: var(--secondary);
}
.chart-progress__popup .chart-progress__range {
  margin-right: 10px;
}
.chart-progress__popup .chart-progress__number {
  border: 0;
  border-bottom: 2px solid var(--gray-200);
  padding: var(--space-xx-small) var(--space-x-small);
  background: none;
  text-align: right;
  background-color: var(--gray-200);
  border-radius: var(--border-radius-small, 0);
  width: 4ch;
  font-size: var(--font-size-medium);
}
.chart-progress__popup .chart-progress__number:focus {
  border-bottom-color: var(--primary);
}
.chart-progress__popup .chart-progress__number-invalid {
  background-color: var(--error-500_20);
  color: inherit;
  border-bottom-color: var(--error);
}

/*****************************************************************************************
 * App Chart Navigation
 *****************************************************************************************/
.app-chart-nav {
  position: absolute;
  width: 100%;
  height: auto;
  top: var(--nav-top-position, calc(50% - var(--nav-height, 4rem) / 2));
  left: 0;
  z-index: 5;
}
.app-chart-nav .chart-nav {
  display: flex;
  position: absolute;
  cursor: pointer;
  align-items: center;
  color: var(--button-text);
  background: var(--button-background, var(--primary));
  border: var(--button-border, 1px solid var(--primary-500));
  border-radius: 0 var(--border-radius-small, 0) var(--border-radius-small, 0) 0;
  z-index: 5;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: var(--nav-width, 2rem);
  height: var(--nav-height, 4rem);
  padding: var(--nav-padding, var(--space-x-small));
  margin: 0;
}
.app-chart-nav .chart-nav.next {
  right: 0;
  left: auto;
  border-radius: var(--border-radius-small, 0) 0 0 var(--border-radius-small, 0);
}
.app-chart-nav .chart-nav.back {
  top: var(--nav-back-position, -4.5rem);
  right: auto;
  left: 0;
}
.app-chart-nav .chart-nav--back {
  top: -4rem;
}
.app-chart-nav .chart-nav:hover, .app-chart-nav .chart-nav:focus {
  opacity: 1;
  background: var(--button-background--hover);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.app-chart-nav .chart-nav:not(.next) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

/****************************************
 * App Menu
 ****************************************/
.app-menu {
  position: absolute;
  color: var(--overlay-panel-text);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  top: 0;
  height: 100%;
  left: 0;
  opacity: 0;
  z-index: var(--z-index-modal);
  width: 100%;
  margin-left: 0;
  color: var(--black);
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.app-menu.visible {
  opacity: 1;
  transform: translate(0, 0);
  pointer-events: inherit;
}
.app-menu .close-btn {
  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);
  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.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.app-menu .close-btn:hover, .app-menu .close-btn:focus {
  color: var(--menu-close-color--hover);
  background: var(--menu-close-bg--hover);
}
.app-menu .progress-display__background {
  stroke: var(--secondary-500_20);
}

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

.app-menu__wrapper {
  width: var(--app-menu-width);
  color: var(--black);
  background-color: var(--white);
  left: calc(var(--app-menu-width) * -1);
  pointer-events: all;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: var(--space-x-small) solid transparent;
  border-bottom: none;
}

.app-menu.app-menu-enter {
  opacity: 0;
  left: 0;
  width: 100%;
}
.app-menu.app-menu-enter .app-menu__wrapper {
  opacity: 0;
  left: calc(var(--app-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(--app-menu-width, 400px) * -1);
}

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

.app-menu__header {
  flex: 0 0 auto;
  font-size: var(--font-size-large);
  font-weight: bold;
  padding: var(--space-large) var(--space-medium);
  margin: 0;
  line-height: 1;
  background: var(--secondary-500-20);
  border-bottom: none;
}

.app-menu__results {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: auto;
  background: var(--white);
  border-top: none;
}
.app-menu__results nav {
  height: 100%;
  width: 100%;
  position: relative;
  padding: 0;
}
.app-menu__results .app-menu__chapters {
  padding: 0 var(--space-medium) 1px;
}

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

.app-menu__search {
  padding-right: var(--space-xx-large);
}

.app-menu__search-wrapper {
  flex: 0 0 auto;
  gap: var(--space-medium);
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-medium);
  background: var(--white);
  border-bottom: rgba(0, 0, 0, 0.12);
  border-top: none;
}
.app-menu__search-wrapper .app-menu__favorites-only {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--button-text);
  background: var(--button-background);
  margin: 0;
  border-radius: var(--button-border-radius);
  border: var(--button-border);
  box-shadow: var(--button-drop-shadow);
  height: 100%;
}
.app-menu__search-wrapper .app-menu__favorites-only label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-size-small);
  height: 100%;
  padding: var(--space-medium);
}
.app-menu__search-wrapper .app-menu__favorites-only label .cbi {
  margin-left: var(--space-medium);
}
.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-medium);
}

.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;
  height: 100%;
}
.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(--font-size-x-large);
  background: none;
  padding-right: 0;
}
.app-menu__fav-btn .ui-checkbox {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: var(--font-size-xx-small);
  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(--secondary-600);
}

.app-menu__search-close {
  position: absolute;
  height: 24px;
  width: 24px;
  right: var(--space-medium);
  padding: 0;
  margin: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-menu__search-close.hide {
  display: none;
}

/*********************************************
 * App Menu Chapter
 *********************************************/
.app-menu__chapter {
  list-style: none;
  padding: 0;
  margin: var(--space-medium) 0;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: rgba(0, 0, 0, 0) 0 0 0, rgba(0, 0, 0, 0) 0 0 0;
}
.app-menu__chapter .title {
  display: flex;
  width: 100%;
  color: var(--black);
  background: var(--primary-500_10);
  position: relative;
  padding: var(--space-medium);
  margin: 0;
  cursor: pointer;
  font-size: var(--font-size-small);
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1.15;
  border: var(--menu-chapter-border);
}
.app-menu__chapter .title .title-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: var(--space-large);
}
.app-menu__chapter .title .title-super {
  display: block;
  text-transform: uppercase;
  font-size: var(--font-size-x-small);
  font-weight: 400;
}
.app-menu__chapter .title:hover {
  background: var(--primary-500_20);
  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.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.app-menu__chapter .title:focus-visible {
  background: var(--primary-500_20);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.app-menu__chapter .title.open {
  margin-bottom: var(--space-medium);
  color: var(--primary-700);
  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.3s 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;
  color: var(--primary-700);
}

.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: 0;
  border-radius: var(--button-border-radius);
  margin: 0;
}
.chart-menu__item:hover, .chart-menu__item:focus {
  background: var(--primary-500_20);
}
.chart-menu__item .chart-menu__fav-btn {
  color: var(--menu-fav);
  margin: 0;
}
.chart-menu__item .chart-menu__fav-btn:hover, .chart-menu__item .chart-menu__fav-btn:focus {
  color: var(--primary-500);
}
.chart-menu__item .chart-menu__fav-btn--active {
  color: var(--highlight);
}
.chart-menu__item .chart-menu__fav-btn--active:hover, .chart-menu__item .chart-menu__fav-btn--active:focus {
  opacity: 0.5;
}

.chart-menu__link {
  display: flex;
  height: 30px;
  max-width: 70%;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  box-sizing: content-box;
  color: var(--black);
  text-decoration: none;
  font-size: var(--font-size-small);
  border-radius: 3px;
  margin: 0 var(--space-medium);
  border-left: 5px solid transparent;
}
.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: -moz-fit-content;
  width: fit-content;
  padding: 0 var(--space-medium);
  opacity: 0.7;
}

.chart-status__visited .chart-menu__link {
  color: var(--primary-700);
}

.chart-status__not-visited .chart-menu__link {
  color: var(--gray-700);
}

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

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

.chart-menu__link--disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.chart-menu__visited {
  color: var(--gray-900);
  padding: 0.25ch;
  margin: 0.5ch;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-menu__visited--active {
  color: var(--highlight);
}

/*********************************************
 * App Modal
 *********************************************/
.app-modal {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  opacity: 0;
  cursor: pointer;
  transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  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;
}

/* -- Animation end -- */
.app-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: none;
  color: #fff;
  text-shadow: 0 0 3px #000;
  font-size: var(--font-size-x-large);
  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;
}

.cbook-container,
.chart {
  /* clears the ‘X’ from Chrome */
  /* clears the ‘X’ from Internet Explorer */
}
.cbook-container select,
.cbook-container input,
.chart select,
.chart 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;
}
.cbook-container input[type=search]::-webkit-search-decoration,
.cbook-container input[type=search]::-webkit-search-cancel-button,
.cbook-container input[type=search]::-webkit-search-results-button,
.cbook-container input[type=search]::-webkit-search-results-decoration,
.chart input[type=search]::-webkit-search-decoration,
.chart input[type=search]::-webkit-search-cancel-button,
.chart input[type=search]::-webkit-search-results-button,
.chart input[type=search]::-webkit-search-results-decoration {
  display: none;
}
.cbook-container input[type=search]::-ms-clear,
.chart input[type=search]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}
.cbook-container input[type=search]::-ms-reveal,
.chart input[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
.cbook-container button,
.chart 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);
}
.cbook-container button:hover, .cbook-container button:focus,
.chart button:hover,
.chart button:focus {
  background-color: var(--slide-link-background-hover);
}
.cbook-container figure,
.chart figure {
  margin: 0;
}
.cbook-container figure img,
.cbook-container figure caption,
.chart figure img,
.chart figure caption {
  display: inline-block;
  width: 100%;
}
.cbook-container figure caption,
.chart figure caption {
  color: var(--gray-600);
  font-size: var(--font-size-xx-small);
  font-style: italic;
  text-align: center;
  padding: var(--space-small);
}
.cbook-container figure caption:empty,
.chart figure caption:empty {
  display: none;
}

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

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

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

.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-inverse);
}
.btn--primary:hover, .btn--primary:focus {
  background: var(--gray-850);
}

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

.btn--text {
  background: none;
  color: var(--primary);
}
.btn--text:hover, .btn--text:focus {
  background: none;
  color: var(--primary);
  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(--error);
  margin-left: 0.3em;
}

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

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

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

.search-highlight {
  background-color: var(--search-highlight);
  color: var(--search-highlight-color);
  padding: 4px 0;
  border-radius: 2px;
}

/*********************************************
 * Footer
 *********************************************/
.app-footer {
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xx-small);
  color: var(--footer-color, #fff);
  background: var(--footer-bg, var(--primary-700));
  height: var(--footer-height);
  padding: 0 var(--space-xx-small);
}
@media only screen and (min-width: 768px) {
  .app-footer {
    padding: 0 var(--space-small);
  }
}
.app-footer .actions-menu__link {
  padding: var(--space-xx-small) var(--space-x-small);
  color: var(--footer-color, #fff);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  border-radius: var(--border-radius-small);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  gap: var(--space-x-small);
}
.app-footer .actions-menu__link:hover, .app-footer .actions-menu__link:focus {
  color: var(--primary-900, #fff);
  background: var(--gray-250);
}
.app-footer .actions-menu__link-text {
  padding: 0;
  display: none;
}
@media only screen and (min-width: 992px) {
  .app-footer .actions-menu__link-text {
    display: block;
  }
}
.app-footer .chart-progress {
  display: none;
  align-items: center;
  justify-self: center;
  height: 100%;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .app-footer .chart-progress {
    display: flex;
  }
}
.app-footer .chart-progress__label {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
  box-shadow: none;
  padding: var(--space-xx-small) var(--space-x-small);
  color: var(--footer-color, #fff);
  white-space: nowrap;
  border-radius: var(--border-radius-small);
  height: 46px;
}
.app-footer .chart-progress__label:hover, .app-footer .chart-progress__label:focus {
  /*color: var(--highlight);*/
  color: var(--primary-900, #fff);
  background: var(--gray-250);
}

.progress-display {
  display: block;
  cursor: pointer;
  position: relative;
  border-radius: 100%;
  padding: var(--space-x-small);
}

.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: auto;
  height: 100%;
  justify-content: center;
  align-items: center;
  gap: var(--space-xx-small);
}
@media only screen and (min-width: 768px) {
  .app-footer__options {
    gap: var(--space-small);
  }
}

.switch-label {
  font-family: var(--font-paragraph);
  display: inline-block;
  font-size: var(--font-size-x-small);
  line-height: var(--font-size-x-small);
  text-align: center;
  text-transform: uppercase;
  vertical-align: top;
  margin: 0;
  font-weight: 400;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media only screen and (min-width: 768px) {
  .switch-label {
    font-size: var(--font-size-x-small);
    line-height: var(--font-size-x-small);
  }
}

.actions-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-xx-small);
}
@media only screen and (min-width: 768px) {
  .actions-menu {
    gap: var(--space-small);
  }
}
@media only screen and (min-width: 992px) {
  .actions-menu {
    gap: var(--space-large);
  }
}

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

.numeral-indicator {
  padding: var(--space-x-small);
  position: absolute;
  background: var(--highlight);
  top: -1rem;
  left: -1rem;
  aspect-ratio: 1;
  width: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  font-size: var(--font-size-x-small);
  border-radius: var(--border-radius-full);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
}

/*********************************************
 * Header
 *********************************************/
.app-header {
  height: var(--header-height, 40px);
  display: flex;
  flex-direction: row;
  z-index: var(--z-index-cbook-ui, 10);
  color: var(--header-color, var(--white));
  background: var(--header-bg, var(--primary-700));
  padding: 0 var(--space-x-small);
  gap: 0;
}
.app-header .header-chart-title,
.app-header button {
  background-color: inherit;
  color: inherit;
  align-self: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.app-header .header-chart-title:hover, .app-header .header-chart-title:focus,
.app-header button:hover,
.app-header button:focus {
  color: var(--primary-900, inherit);
}
.app-header button {
  margin: 0;
}
.app-header .header-chart-title {
  padding: 0 var(--space-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;
}
.app-header .logo {
  margin-left: auto;
  max-height: 80%;
  align-self: center;
}
@media only screen and (min-width: 576px) {
  .app-header {
    gap: var(--space-small);
    padding: 0 var(--space-small);
  }
}

.notification-dialog {
  left: 4rem;
  bottom: calc(var(--footer-height) + var(--space-medium));
  z-index: var(--z-index-popover);
}

/*********************************************
 * Media Controls
 *********************************************/
.media-player__controls,
.sequence__controls {
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-large);
}
.media-player__controls .controls__btn,
.sequence__controls .controls__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  pointer-events: all;
  color: var(--media-player-color, var(--button-text));
  background: transparent;
  padding: var(--button-mp-padding, var(--button-padding));
  margin: var(--button-margin);
  border-radius: var(--button-border-radius);
  border: var(--button-border);
  box-shadow: var(--button-drop-shadow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.media-player__controls .controls__btn:hover, .media-player__controls .controls__btn:focus,
.sequence__controls .controls__btn:hover,
.sequence__controls .controls__btn:focus {
  color: var(--media-player-color-hover, var(--button-text--hover));
  background: var(--media-player-bg-hover, --button-background--hover);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/******** Volume Controls ********/
.controls__volume-area {
  display: flex;
  align-items: center;
  gap: var(--space-x-small);
}

.controls__volume-panel {
  height: auto;
  width: 4rem;
}

.controls__volume-slider {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 0.5ch;
  background: var(--primary-100);
  outline: none;
  opacity: 0.8;
  transition: opacity 0.2s;
  accent-color: var(--highlight);
}
.controls__volume-slider:hover {
  opacity: 1;
}
.controls__volume-slider .controls__volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 3000px;
  background: var(--primary-500);
  cursor: pointer;
}
.controls__volume-slider .controls__volume-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 3000px;
  background: var(--primary-500);
  cursor: pointer;
}

/******** Progress Controls ********/
.controls__progress {
  display: block;
  position: relative;
  z-index: 1;
  border-radius: var(--border-radius-small);
  overflow: hidden;
  cursor: pointer;
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;
  height: 0.5rem;
}
.controls__progress:hover .controls__progress-tooltip {
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.controls__progress .controls__progress-elapsed {
  background-color: var(--secondary-500);
  position: relative;
  height: 0.5rem;
}

.controls__progress-bg {
  width: 100%;
  height: 0.5rem;
  position: absolute;
  background-color: var(--primary-100);
}

.controls__progress__bar {
  min-width: 0;
  height: 0.5rem;
  background: var(--primary-500);
  position: absolute;
  left: 0;
}

.controls__progress-tooltip {
  position: fixed;
  transform: translate(-50%, -140%);
  font-size: var(--font-size-x-small);
  line-height: var(--font-size-x-small);
  color: var(--black);
  background: var(--white);
  padding: var(--space-xx-small) var(--space-medium);
  border-radius: 3000px;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.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;
}

.controls__progress-indicator {
  display: flex;
  flex-direction: row;
  gap: 0;
}
.controls__progress-indicator .controls__duration {
  font-size: var(--font-size-x-small);
  line-height: var(--font-size-x-small);
  width: 5ch;
  display: flex;
}
.controls__progress-indicator .controls__elapsed-time {
  margin-right: 0.5ch;
  font-weight: bold;
  font-size: var(--font-size-x-small);
  line-height: var(--font-size-x-small);
  width: auto;
  display: flex;
}
.controls__progress-indicator .controls__elapsed-time:after {
  content: " /";
  font-weight: normal;
  display: inline;
  padding: 0 0.25ch;
}

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

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

.subtitle-selector-popup.subtitle-selector-popup--open {
  top: auto;
  bottom: calc(var(--footer-height) / 1.4);
  right: -2rem;
  /* bottom: calc(var(--sequence-player-bar-height, 24px) + var(--space-x-small));*/
  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: -moz-max-content;
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-small) var(--space-medium);
}
.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(--white);
  font-size: var(--font-size-small);
}
.subtitle-selector-popup__item input {
  width: var(--icon-size-s);
  height: var(--icon-size-s);
  margin-right: 1ch;
}

.controls__pos {
  display: none;
}

.ui-modal-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1600;
}

.ui-modal {
  border-radius: var(--border-radius-medium);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  opacity: 1;
  border-width: 1px;
  border-style: solid;
  border-color: var(--gray-300);
  box-shadow: var(--shadow-modal);
  position: relative;
}
.ui-modal__focus {
  display: flex;
  align-self: center;
}
.ui-modal__bg {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  transition: all 0.3s;
}
.ui-modal__content {
  color: var(--text);
  width: auto;
  max-height: 85vh;
  padding: var(--space-large);
  position: relative;
  background-color: var(--gray-100);
  border-radius: var(--border-radius-medium);
  border: var(--modal-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--font-paragraph);
  overflow-y: auto;
}
.ui-modal__content * {
  -webkit-hyphens: auto;
          hyphens: auto;
  word-break: break-all;
}
.ui-modal__content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: var(--space-medium);
}
.ui-modal__wrapper {
  display: flex;
  flex-direction: column;
  max-width: 70vw;
  width: 1000px;
}
.ui-modal .ui-modal__close {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  padding: var(--space-x-small);
  border-width: 2px;
  border-style: solid;
  pointer-events: all;
  background-color: transparent;
  color: var(--black);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ui-modal .ui-modal__close:hover {
  background-color: var(--gray-300);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ui-modal .ui-modal__close span {
  font-size: var(--font-size-x-large);
  color: var(--gray-600);
}

/*********************************************
 * CBook Progress Circle Display
 *********************************************/
.progress-display {
  transform: rotate(45deg);
}
.progress-display .perc-val {
  color: var(--footer-color, #fff);
}

.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(--font-size-small);
  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(--secondary-500);
  stroke-width: 6px;
}

/*********************************************
 * Story/Book Mode Toggle
 *********************************************/
.ui-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  min-width: 40px;
  height: 20px;
  background: var(--gray-300);
  border-radius: var(--border-radius-full);
  vertical-align: sub;
  cursor: pointer;
  outline: 0;
  border: 1px solid var(--gray-500);
  box-sizing: content-box;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ui-switch.on {
  background: var(--secondary-400);
  border: 1px solid var(--secondary-400);
}
.ui-switch.on:hover, .ui-switch.on:focus {
  background: var(--secondary-600);
}
.ui-switch:hover, .ui-switch:focus {
  background: var(--secondary-100);
}
.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(--gray-100);
  border-radius: var(--border-radius-full);
  top: 0;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-favourites {
  width: var(--stage-width);
  height: var(--stage-height);
  bottom: var(--footer-height);
  margin: 0;
  z-index: 10;
  display: none;
  pointer-events: none;
  position: absolute;
  flex-direction: column;
  justify-content: flex-end;
  align-items: normal;
  transform: scale(1);
  opacity: 0;
  background: var(--modal-screen-bg);
  padding-top: calc(50% + var(--footer-height));
  transition: all 0.3s 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-height));
}
.quick-favourites.quick-favourites-enter-active {
  opacity: 1;
  transform: scale(1);
  padding-top: calc(0% + var(--footer-height));
  transition: all 0.3s 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-height));
  transition: all 0.3s 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-height));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.quick-favourites.quick-favourites-exit {
  opacity: 0;
  transform: scale(1);
  padding-top: calc(50% + var(--footer-height));
}
.quick-favourites.quick-favourites-exit-done {
  opacity: 0;
  transform: scale(1);
  padding-top: calc(50% + var(--footer-height-height));
  transition: all 0.3s 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: auto;
}
.quick-favourites .close-btn__container .close-btn {
  cursor: pointer;
  padding: var(--space-medium);
  margin: 0;
  width: 100%;
  border-radius: 0;
  border-top-left-radius: var(--border-radius-small);
  border-top-right-radius: var(--border-radius-small);
}
.quick-favourites .quick-favourites__body {
  width: var(--modal-quick-fav-width);
  padding: var(--space-large);
  pointer-events: all;
  overflow: auto;
  min-height: 70%;
  border-radius: 0;
  margin-bottom: 0;
  background: var(--white);
  box-shadow: var(--modal-box-shadow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-direction: column;
}
.quick-favourites .quick-favourites__body p {
  margin: var(--space-xx-small) 0;
}

.chart {
  width: 100%;
  height: 100%;
  overflow: auto;
  color: var(--text);
  background-color: var(--chart-bg-color, var(--white));
  background-size: cover;
}
.chart iframe {
  -webkit-overflow-scrolling: touch !important;
}
.chart h1 {
  font-size: var(--font-size-xxx-large);
  font-weight: 700;
  margin: var(--space-large) 0;
  color: var(--primary-700);
  -webkit-hyphens: auto;
          hyphens: auto;
}
.chart h2 {
  font-size: var(--font-size-xx-large);
  font-weight: 700;
  margin: var(--space-large) 0;
  color: var(--primary-700);
}
.chart h3 {
  font-size: var(--font-size-x-large);
  font-weight: 700;
  margin: var(--space-medium) 0;
  color: var(--text);
}
.chart h4 {
  font-size: var(--font-size-large);
  font-weight: 700;
  margin: var(--space-medium) 0;
  color: var(--text);
}
.chart h5 {
  font-size: var(--font-size-medium);
  font-weight: 700;
  margin: var(--space-small) 0;
  color: var(--text);
}
.chart h6 {
  font-size: var(--font-size-medium);
  font-weight: 700;
  margin: var(--space-small) 0;
  color: var(--text);
}
.chart p {
  font-size: var(--font-size-medium);
  color: var(--text);
  line-height: 1.3;
}

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

.mce-content-body {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  padding: var(--chart-content-padding, var(--space-x-large));
}

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

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

.chart__interaction {
  z-index: 1;
  position: relative;
}

.chart__buttonbar {
  margin-top: var(--space-large);
  position: sticky;
  bottom: var(--space-xx-small);
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-small);
  z-index: 10;
  width: calc(100% - 10rem);
}

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

.chart__btn {
  padding: var(--space-x-small) var(--space-small);
  margin: 0;
  color: var(--button-chart-text, var(--primary-700));
  background: var(--button-chart-background, var(--primary-100));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border-radius: var(--border-radius-medium);
  border: none;
}
.chart__btn:focus, .chart__btn:hover {
  color: var(--button-chart-text--hover, var(--primary-900));
  background: var(--button-chart-background--hover, var(--primary-200));
}
.chart__btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.subtitle-selector-popup__item .chart__btn[disabled]:hover {
  color: var(--button-chart-text, var(--primary-700));
  background: var(--button-chart-background, var(--primary-100));
}
.chart__btn-reset {
  margin-right: var(--space-x-small);
}

.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-large);
}

.chart__legend-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 var(--space-medium);
}
.chart__legend-item .cbi {
  margin-right: var(--space-x-small);
}
.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;
}
header.chart__header .heading__overline {
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  font-weight: bold;
}
header.chart__header .heading__display {
  font-family: var(--font-heading);
  font-size: var(--font-size-xx-large);
  color: var(--primary);
  margin-top: 0.25rem;
  margin-bottom: 0.85rem;
}
header.chart__header .heading__caption {
  font-size: var(--font-size-x-small);
  font-weight: bold;
  font-style: italic;
  margin-bottom: 2rem;
  opacity: 0.6;
}
header.chart__header .heading__description {
  font-size: var(--font-size-medium);
}

.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__droparea {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding: 1ch;
  margin: 0;
  margin-bottom: 2ch;
  width: var(--droparea-width, auto);
  color: var(--text);
  background: var(--droparea-bg, transparent);
  border: var(--droparea-border, 2px dashed var(--highlight));
  border-radius: var(--droparea-border-radius, var(--border-radius-small));
}

.dnd__dropgroup.dnd__dropgroup--manual .dnd__droparea {
  margin: 0;
}

.dnd__droparea-name {
  width: 100%;
  text-align: center;
  padding: 0.5ch;
  display: var(--droparea-name, none);
  background-color: var(--droparea-name-bg);
  color: var(--droparea-name-color);
}

.dnd__dropgroup.dnd__dropgroup--manual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dnd__dropgroup.dnd__dropgroup--manual .dnd__droparea {
  position: absolute;
}

.dnd__dropgroup.dnd__dropgroup--automatic {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  flex-wrap: wrap;
  background: none;
  gap: var(--space-medium);
}

.dnd__draggables {
  z-index: 5;
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 3;
}

/* Automatic  */
.dnd--automatic.dnd--bottom {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.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-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--bottom-stacked .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-stacked .dnd__droparea-dropables .ui-draggable.dnd__draggable {
  position: relative;
}
.dnd--automatic.dnd--bottom-stacked .dnd__draggable[tabindex="0"] {
  z-index: 5;
}
.dnd--automatic.dnd--bottom-stacked .dnd__draggable:nth-child(even) {
  margin-right: -5px;
  transform: rotate(2deg);
}
.dnd--automatic.dnd--bottom-stacked .dnd__draggable:nth-child(odd) {
  margin-right: 5px;
  transform: rotate(-2deg);
}
.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__draggables {
  pointer-events: none;
}
.dnd--manual .ui-draggable {
  pointer-events: all;
}
.dnd--manual.dnd--bottom-stacked {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dnd--manual.dnd--bottom-stacked .dnd__draggables--bottom-stacked {
  bottom: calc(var(--footer-height) + var(--space-large));
  position: absolute;
  width: 100%;
  margin: 0 auto;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dnd--manual.dnd--bottom-stacked .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-stacked .dnd__droparea-dropables .ui-draggable.dnd__draggable {
  position: relative;
}
.dnd--manual.dnd--bottom-stacked .dnd__draggable[tabindex="0"] {
  z-index: 5;
}
.dnd--manual.dnd--bottom-stacked .dnd__draggable:nth-child(even) {
  margin-right: -5px;
  transform: rotate(2deg);
}
.dnd--manual.dnd--bottom-stacked .dnd__draggable:nth-child(odd) {
  margin-right: 5px;
  transform: rotate(-2deg);
}
.dnd--manual.dnd--bottom {
  flex-direction: column-reverse;
}
.dnd--manual.dnd--bottom .dnd__draggables--bottom {
  position: absolute;
  bottom: calc(var(--footer-height) + var(--space-large));
  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-large);
}
.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-large);
}
.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;
}

.dnd__droparea-dropables {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ui-draggable.dnd__draggable {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  color: var(--gray-900);
  width: auto;
  max-width: 300px;
  position: relative;
  padding: var(--space-x-small);
  margin: var(--space-small);
  border-radius: var(--border-radius-medium);
  min-height: initial;
  border: 2px solid var(--highlight);
  cursor: move;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ui-draggable.dnd__draggable .cbi {
  margin-right: var(--space-medium);
}
.ui-draggable.dnd__draggable:hover {
  background: var(--highlight);
  color: var(--gray-100);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.chart--dnd .chart__body {
  padding: var(--chart-content-padding, var(--space-medium) 4rem);
}
@media only screen and (min-width: 768px) {
  .chart--dnd .chart__body {
    padding: var(--chart-content-padding, var(--space-medium) 4rem);
  }
}
@media only screen and (min-width: 992px) {
  .chart--dnd .chart__body {
    padding: var(--chart-content-padding, var(--space-large) 4rem);
  }
}
.chart--dnd.dnd--layout_1 .dnd__droparea {
  border: 1px dotted var(--gray-800);
  background: hsla(var(--gray-hue), var(--gray-sat), 95%, 90%);
  border-radius: var(--border-radius-small);
}
.chart--dnd.dnd--layout_1 .dnd__droparea .dnd__droparea-name {
  display: block;
  font-weight: bold;
  color: var(--gray-900);
  background: hsla(var(--gray-hue), var(--gray-sat), 95%, 30%);
  text-transform: uppercase;
  border-radius: var(--border-radius-small);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.chart--dnd.dnd--layout_2 .dnd__droparea {
  border: 1px solid var(--gray-800);
  background: hsla(var(--gray-hue), var(--gray-sat), 95%, 20%);
  border-radius: var(--border-radius-small);
  -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: hsla(var(--gray-hue), var(--gray-sat), 95%, 30%);
  text-transform: uppercase;
  border-radius: var(--border-radius-small);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.chart--dnd.dnd--layout_3 .dnd__droparea {
  border: 1px solid var(--black);
  background: hsla(var(--gray-hue), var(--gray-sat), 12%, 20%);
  color: var(--gray-100);
  border-radius: var(--border-radius-small);
}
.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(--border-radius-small);
  -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(--border-radius-small);
}
.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(--border-radius-small);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.chart--dnd.dnd--layout_5 .dnd__droparea {
  border: 1px solid var(--primary);
  background: var(--primary-500_20);
  border-radius: var(--border-radius-small);
}
.chart--dnd.dnd--layout_5 .dnd__droparea .dnd__droparea-name {
  display: block;
  font-weight: bold;
  color: var(--gray-900);
  background: hsla(var(--gray-hue), var(--gray-sat), 95%, 30%);
  text-transform: uppercase;
  border-radius: var(--border-radius-small);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

/*********************************************
 * Essay Core Slide
 *********************************************/
.chart--essay .chart__header {
  pointer-events: all;
}
.chart--essay .chart__body {
  padding: var(--chart-content-padding, var(--space-medium) 4rem);
}
@media only screen and (min-width: 768px) {
  .chart--essay .chart__body {
    padding: var(--chart-content-padding, var(--space-medium) 4rem);
  }
}
@media only screen and (min-width: 992px) {
  .chart--essay .chart__body {
    padding: var(--chart-content-padding, var(--space-large) 4rem);
  }
}
.chart--essay .chart__body .chart__interaction {
  margin-top: var(--space-xx-large);
}
.chart--essay .rte {
  min-height: calc(25vh * var(--text-multiplier));
}
.chart--essay .rte-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-medium);
  width: -moz-fit-content;
  width: fit-content;
}
.chart--essay .rte-container button {
  display: flex;
  margin: 0 5px 0 0;
  padding: 8px;
  height: 100%;
  line-height: 22px;
  box-sizing: border-box;
  /*
  background: none #fdfdfd;
  border: 1px solid #999;
  border-radius: 2px;
  color: #333;*/
  background: none var(--gray-100);
  border: 1px solid var(--gray-500);
  border-radius: 2px;
  color: var(--gray-800);
  text-decoration: none;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.chart--essay .rte-container button:hover {
  background: var(--gray-200);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.chart--essay .rte-container__info span {
  font-size: var(--font-size-small);
}
.chart--essay .rte-container__footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  font-size: var(--font-size-small);
}
.chart--essay .rte-container__footer span {
  font-size: inherit;
}
.chart--essay .rte-container__footer .rte-container__noOfCharsWritten--error {
  color: var(--error, darkred);
}
.chart--essay button[class*=IconButton] + div[class*=InputPopover] {
  width: -moz-fit-content;
  width: fit-content;
}
.chart--essay button[class*=IconButton] + div[class*=InputPopover] input {
  width: -moz-fit-content;
  width: fit-content;
}
.chart--essay div[class*=checkOption] {
  display: flex;
}
.chart--essay div[class*=checkOption] label {
  display: flex;
  align-items: center;
}

.DraftEditor-root {
  padding: 0;
  font-family: var(--font-paragraph);
}

.notification {
  display: none;
}

/* EDITOR <style> */
.Dropdown__root___3ALmx select {
  height: 100% !important;
}

.Dropdown__root___3ALmx select option {
  background: var(--input-bg) !important;
}

.Dropdown__root___3ALmx select option:hover,
.Dropdown__root___3ALmx select option:hover span {
  color: var(--input-bg) !important;
  background: var(--input-text) !important;
}

.RichTextEditor__root___2QXK- {
  background: var(--white) !important;
  border: 1px solid var(--black) !important;
}

.DraftEditor-root {
  background: var(--white) !important;
}

.IconButton__icon___3YgOS {
  width: var(--font-size-large) !important;
  height: var(--font-size-large) !important;
  background-size: var(--font-size-large) !important;
}

body#cbook-body:not(.contrast--normal) .IconButton__icon___3YgOS {
  filter: invert(11%) sepia(100%) saturate(3509%) hue-rotate(239deg) brightness(117%) contrast(152%);
}

/************ END ESSAY CORE SLIDE ************/
/*********************************************
 * Exam
 *********************************************/
.chart.chart--exam {
  padding: var(--chart-content-padding, var(--space-medium) 4rem);
}
@media only screen and (min-width: 768px) {
  .chart.chart--exam {
    padding: var(--chart-content-padding, var(--space-medium) 4rem);
  }
}
@media only screen and (min-width: 992px) {
  .chart.chart--exam {
    padding: var(--chart-content-padding, var(--space-large) 4rem);
  }
}

.exam-button {
  padding: var(--button-padding);
  margin: 0;
  color: var(--button-text);
  background: var(--button-background);
  border-radius: var(--button-border-radius, var(--border-radius-medium));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.exam-button:focus, .exam-button:hover {
  color: var(--button-text--hover);
  background: var(--button-background--hover);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.result-details__item--success {
  color: var(--success-800);
}
.result-details__item--failed {
  color: var(--error-600);
}

.test-score {
  font-size: var(--font-size-xx-large);
  font-weight: bold;
}
.test-score--failed {
  color: var(--error-600);
}
.test-score--passed {
  color: var(--success-800);
}

.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;
}

.chart--external-content .chart__iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.chart.chart--external-content {
  overflow: hidden;
}

/*********************************************
 * Hotspots Core Slide
 *********************************************/
.chart--hotspots header.chart__header {
  position: absolute;
  pointer-events: all;
  z-index: 1;
  order: -2;
  padding: var(--chart-content-padding, var(--space-medium) 4rem);
}
@media only screen and (min-width: 768px) {
  .chart--hotspots header.chart__header {
    padding: var(--chart-content-padding, var(--space-medium) 4rem);
  }
}
@media only screen and (min-width: 992px) {
  .chart--hotspots header.chart__header {
    padding: var(--chart-content-padding, var(--space-large) 4rem);
  }
}
.chart--hotspots .chart__body {
  padding: 0;
  height: 100%;
}
.chart--hotspots .chart__body .chart__interaction {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
}
.chart--hotspots .chart__background {
  position: relative;
  z-index: 0;
}
.chart--hotspots .chart__background #chart-bg-id {
  display: block;
}
.chart--hotspots .hotspots-modal {
  position: sticky;
  padding-top: 0;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.chart--hotspots .hotspots-modal .media-player.overlay__media {
  width: 100%;
  height: auto;
}
.chart--hotspots .hotspots-modal--fullscreen {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.chart--hotspots .hotspots-modal--fullscreen .ui-modal__focus {
  height: 100%;
  width: 100%;
}
.chart--hotspots .hotspots-modal--fullscreen .ui-modal {
  height: 100%;
  width: 100%;
}
.chart--hotspots .hotspots-modal--fullscreen .ui-modal__wrapper {
  width: 100%;
  max-width: none;
}
.chart--hotspots .hotspots-modal--fullscreen .ui-modal__content {
  height: 100%;
  width: 100%;
  overflow-y: auto;
}
.chart--hotspots .hotspots-modal .ui-modal__close {
  margin: 0;
}
.chart--hotspots .hotspots-modal .ui-modal__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-medium);
  overflow-y: auto;
  overflow-x: hidden;
}
.chart--hotspots .hotspots-modal .ui-modal__content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0;
  pointer-events: visible;
  gap: var(--space-large);
}
.chart--hotspots .hotspots-modal .ui-modal__content-header--btn-only {
  justify-content: flex-end;
}
.chart--hotspots .hotspots-modal .ui-modal__content-header h2 {
  margin: 0;
}
.chart--hotspots .hotspots-modal .ui-modal .overlay__body .media-player.overlay__media video {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.chart--hotspots .hotspots-modal .ui-modal .overlay__body .media-player.overlay__media .controls__progress-indicator {
  color: var(--white);
}
.chart--hotspots .hotspots-modal .ui-modal .overlay__body--1-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-medium);
}
.chart--hotspots .hotspots-modal .ui-modal .overlay__body--2-cols {
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  gap: var(--space-medium);
}
@media only screen and (max-width: 768px) {
  .chart--hotspots .hotspots-modal .ui-modal .overlay__body--2-cols {
    flex-direction: column;
    gap: var(--space-large);
  }
}
.chart--hotspots .hotspots-modal .overlay__body {
  width: 100%;
  display: flex;
  gap: var(--space-large);
}
.chart--hotspots .hotspots-modal .overlay__left, .chart--hotspots .hotspots-modal .overlay__right {
  width: 50%;
}
@media only screen and (max-width: 768px) {
  .chart--hotspots .hotspots-modal .overlay__left, .chart--hotspots .hotspots-modal .overlay__right {
    width: 100%;
  }
}
.chart--hotspots .hotspots-modal .overlay__image {
  width: 100%;
  height: auto;
}
.chart--hotspots .hotspots-modal .overlay__richText *:first-child {
  margin-top: 0;
}
.chart--hotspots .hotspots-modal .overlay__richText *:last-child {
  margin-bottom: 0;
}
.chart--hotspots .ui-popover__container {
  position: absolute;
  min-width: 11.5rem;
  max-width: 15rem;
  z-index: 5;
}
.chart--hotspots .ui-popover__wrapper {
  position: relative;
  top: 4px;
  padding: var(--space-small);
  border: 1px solid var(--gray-250);
  box-shadow: var(--shadow-large);
  background-color: var(--white);
  border-radius: var(--border-radius-medium);
}
.chart--hotspots .ui-popover .bullet__text *:first-child {
  margin-top: 0;
}
.chart--hotspots .ui-popover .bullet__text *:last-child {
  margin-bottom: 0;
}
.chart--hotspots .media-player {
  /* General styles for media player on hotspots core slide*/
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--space-medium);
  /* Styles for hotspot with audio media player */
}
.chart--hotspots .media-player.hotspot__audio {
  position: relative;
  padding: 0;
  background: none;
  z-index: 6;
}
.chart--hotspots .media-player.hotspot__audio video {
  display: none;
}
.chart--hotspots .media-player.hotspot__audio--subtitles video {
  display: none;
}
.chart--hotspots .media-player.hotspot__audio .controls__play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: var(--highlight);
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  border-radius: 9999px;
  padding: 0;
  position: relative;
}
.chart--hotspots .media-player.hotspot__audio .controls__play-btn i.cbi {
  width: var(--icon-size-s, 16px);
  height: var(--icon-size-s, 16px);
}
.chart--hotspots .media-player.hotspot__audio .media-player__controls.controls {
  width: 100%;
  height: 100%;
  background: transparent;
  padding: 0;
  position: unset;
  gap: var(--space-medium);
}
.chart--hotspots .media-player.hotspot__audio .media-player__controls.controls .controls__volume-area,
.chart--hotspots .media-player.hotspot__audio .media-player__controls.controls .controls__progress,
.chart--hotspots .media-player.hotspot__audio .media-player__controls.controls .controls__progress-indicator,
.chart--hotspots .media-player.hotspot__audio .media-player__controls.controls .controls__subtitle,
.chart--hotspots .media-player.hotspot__audio .media-player__controls.controls .controls__pos {
  display: none;
}
.chart--hotspots .media-player.hotspot__audio--active {
  padding: 0;
}
.chart--hotspots .media-player.hotspot__audio--active.hotspot__audio--subtitles video {
  height: calc(100vh - var(--header-height) - var(--footer-height));
  display: block;
  width: 100vw;
  position: fixed;
  top: var(--header-height);
  left: 0;
  z-index: -1;
}
.chart--hotspots .media-player.hotspot__audio--active .media-player__controls.controls {
  width: -moz-fit-content;
  width: fit-content;
  height: 100%;
  background-color: var(--primary);
  gap: var(--space-small);
  padding-right: var(--space-large);
  border-radius: var(--border-radius-full);
}
.chart--hotspots .media-player.hotspot__audio--active .media-player__controls.controls .controls__play-btn {
  position: absolute;
}
.chart--hotspots .media-player.hotspot__audio--active .media-player__controls.controls .controls__volume-area,
.chart--hotspots .media-player.hotspot__audio--active .media-player__controls.controls .controls__progress,
.chart--hotspots .media-player.hotspot__audio--active .media-player__controls.controls .controls__progress-indicator,
.chart--hotspots .media-player.hotspot__audio--active .media-player__controls.controls .controls__subtitle {
  display: flex;
  position: relative;
}
.chart--hotspots .media-player.hotspot__audio--active .media-player__controls.controls .controls__volume-area {
  height: 100%;
  width: -moz-fit-content;
  width: fit-content;
  gap: 0;
  inset: 0;
  margin-left: 2.5rem;
}
.chart--hotspots .media-player.hotspot__audio--active .media-player__controls.controls .controls__volume-slider {
  padding: 0;
}
.chart--hotspots .media-player.hotspot__audio--active .media-player__controls.controls .controls__btn.controls__vol-btn,
.chart--hotspots .media-player.hotspot__audio--active .media-player__controls.controls .controls__btn.controls__cc-btn {
  height: 100%;
  padding: 0.5rem;
}
.chart--hotspots .media-player.hotspot__audio--active .media-player__controls.controls .controls__progress {
  width: 4rem;
  inset: 0;
}
.chart--hotspots .media-player.hotspot__audio--active .media-player__controls.controls .controls__progress-indicator {
  width: -moz-fit-content;
  width: fit-content;
  color: var(--white);
  gap: var(--space-zero);
  align-items: center;
  padding: 0;
}
.chart--hotspots .media-player.hotspot__audio--active .media-player__controls.controls .controls__progress-indicator .controls__elapsed-time {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
}
.chart--hotspots .media-player.hotspot__audio--active .media-player__controls.controls .controls__progress-indicator .controls__elapsed-time:after {
  display: none;
}
.chart--hotspots .media-player.hotspot__audio--active .media-player__controls.controls .controls__progress-indicator .controls__duration {
  width: -moz-fit-content;
  width: fit-content;
}
.chart--hotspots .media-player.hotspot__audio--active .media-player__controls.controls .controls__progress-indicator .controls__duration:before {
  content: "/";
  font-weight: normal;
  display: inline;
  padding: 0 var(--space-x-small);
}
.chart--hotspots .media-player.hotspot__audio--active .media-player__controls.controls .controls__subtitle {
  height: 100%;
  width: -moz-fit-content;
  width: fit-content;
  flex-direction: column;
}
.chart--hotspots .media-player.hotspot__audio--active .media-player__controls.controls .controls__subtitle .subtitle-selector-popup.subtitle-selector-popup--open {
  bottom: auto;
  top: 1.5rem;
  left: 0;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
}
.chart--hotspots .entity {
  position: absolute;
  display: inline-block;
}
.chart--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;
}
.chart--hotspots .entity.entity__area-overlay:hover, .chart--hotspots .entity.entity__area-overlay:focus, .chart--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;
}
.chart--hotspots .entity.entity__area-overlay .area__content {
  cursor: pointer;
  pointer-events: all;
}
.chart--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);
  aspect-ratio: var(--area-aspect-ratio, "auto");
}
.chart--hotspots .entity.entity__area .area__content {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: var(--space-medium);
  color: var(--area-color, var(--text));
  background-color: var(--area-bg, var(--white));
  border-radius: var(--button-border-radius);
}
.chart--hotspots .entity.entity__area .area__content .area__header {
  z-index: 5;
  position: relative;
}
.chart--hotspots .entity.entity__area .area__content .area__background {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.chart--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;
}
.chart--hotspots .entity.entity__hotspot {
  top: var(--bullet-top);
  left: var(--bullet-left);
  opacity: var(--bullet-opacity);
  z-index: var(--bullet-z-index);
  width: var(--bullet-width, 35px);
  height: var(--bullet-height, 35px);
  aspect-ratio: var(--bullet-aspect-ratio, "auto");
}
.chart--hotspots .entity.entity__hotspot.clicked .hotspot__label {
  opacity: 1;
  width: -moz-max-content;
  width: max-content;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.chart--hotspots .entity.entity__hotspot .hotspot__label {
  opacity: 0;
  width: 0;
  display: block;
  position: absolute;
  padding: var(--space-small) var(--space-medium);
  font-size: var(--font-size-small);
  color: var(--black);
  background-color: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius-full);
  z-index: -1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.chart--hotspots .entity.entity__hotspot.entity--isMediaPlayer.bullet__open {
  width: var(--bullet-width);
}
.chart--hotspots .entity.entity__hotspot .hotspot__flex {
  width: 100%;
  height: 100%;
}
.chart--hotspots .entity.entity__hotspot .hotspot__flex .hotspot__bullet {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}
.chart--hotspots .entity.entity__hotspot .hotspot__flex .hotspot__bullet > .cbi {
  margin: 0;
}
.chart--hotspots .entity.entity--hidden {
  display: none;
}
.chart--hotspots .entity.entity--disabled {
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.chart--hotspots .entity.entity--isMediaPlayer .ui-popover__container {
  position: relative;
}
.chart--hotspots .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;
}
.chart--hotspots .hotspot__flex:focus, .chart--hotspots .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;
}
.chart--hotspots .hotspot__flex .hotspot__label {
  padding: 0 var(--space-medium);
  opacity: 0;
  pointer-events: none;
  display: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.chart--hotspots .hotspot__bullet {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: var(--highlight);
  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;
}
.chart--hotspots .hotspot__bullet .hotspot__icon {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart--hotspots #hotspots__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--grid-rows, 1), minmax(0, 1fr));
  width: 100%;
  height: 100%;
  align-items: center;
  justify-items: center;
  gap: var(--space-large);
}
.chart--hotspots #hotspots__grid .entity.entity__hotspot.entity--grid,
.chart--hotspots #hotspots__grid .entity.entity__area.entity--grid {
  position: unset;
}
.chart--hotspots #hotspots__grid .entity.entity__size--percentage-unit.entity__hotspot.entity--grid {
  width: calc(var(--bullet-width) * var(--grid-columns));
  height: calc(var(--bullet-height) * var(--grid-rows));
}
.chart--hotspots #hotspots__grid .entity.entity__size--percentage-unit.entity__area.entity--grid {
  width: calc(var(--area-width) * var(--grid-columns));
  height: calc(var(--area-height) * var(--grid-rows));
}

/*********************************************
 * Media Slide
 *********************************************/
.chart--media {
  padding: 0;
  text-align: center;
}
.chart--media .controls__progress-indicator {
  color: var(--media-player-color, var(--white));
}
.chart--media .media-player__controls {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: var(--footer-bg, var(--black));
}
.chart--media .media-description__wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 48px);
  background: var(--black);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chart--media .media-description__content {
  padding: var(--space-large);
  background: var(--white);
  border-radius: var(--border-radius-medium);
}
.chart--media .media-description__content h1,
.chart--media .media-description__content h2,
.chart--media .media-description__content h3,
.chart--media .media-description__content h4,
.chart--media .media-description__content h5,
.chart--media .media-description__content h6,
.chart--media .media-description__content p {
  color: var(--black);
}
.chart--media .media-description__content *:first-child {
  margin-top: 0;
}
.chart--media .media-description__content *:last-child {
  margin-bottom: 0;
}

.media-player {
  background-color: #000;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}
.media-player video {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.media-player .video-pip {
  position: absolute;
  bottom: calc(var(--footer-height) + var(--space-small));
  right: var(--space-small);
  width: 360px;
  height: auto;
}
.media-player button.media-play__hero {
  position: absolute;
  top: calc(50% - var(--icon-size-xl, 40px) / 2);
  left: calc(50% - var(--icon-size-xl, 40px) / 2);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-full);
  opacity: 0.7;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.media-player button.media-play__hero:hover {
  opacity: 1;
}

.media-image {
  height: 100%;
}

.media-element {
  height: 100%;
}

.chart.chart--multiple .chart__body {
  display: flex;
  flex-direction: column;
  padding: var(--chart-content-padding, var(--space-medium) 4rem);
}
@media only screen and (min-width: 768px) {
  .chart.chart--multiple .chart__body {
    padding: var(--chart-content-padding, var(--space-medium) 4rem);
  }
}
@media only screen and (min-width: 992px) {
  .chart.chart--multiple .chart__body {
    padding: var(--chart-content-padding, var(--space-large) 4rem);
  }
}
.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: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.chart.chart--multiple .multiple__item input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--mc-answer-width, 70%);
  height: 100%;
  z-index: 1;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}
.chart.chart--multiple .single__answers .multiple__item .multiple__answer,
.chart.chart--multiple .multiple__answers .multiple__item .multiple__answer {
  display: flex;
  align-items: center;
  position: relative;
  padding: var(--space-medium);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 10;
  width: 100%;
  height: 100%;
  color: var(--button-text);
  border: var(--button-border);
  border-radius: var(--button-border-radius);
  background: var(--button-background);
  box-shadow: var(--button-drop-shadow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media only screen and (min-width: 768px) {
  .chart.chart--multiple .single__answers .multiple__item .multiple__answer,
  .chart.chart--multiple .multiple__answers .multiple__item .multiple__answer {
    width: var(--mc-answer-width, 70%);
    padding: var(--space-large);
  }
}
.chart.chart--multiple .single__answers .multiple__item .multiple__answer:hover,
.chart.chart--multiple .multiple__answers .multiple__item .multiple__answer:hover {
  color: var(--button-text--hover);
  background: var(--button-background--hover);
  border-radius: var(--button-border-radius);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.chart.chart--multiple .single__answers .multiple__item .multiple__answer:before,
.chart.chart--multiple .multiple__answers .multiple__item .multiple__answer:before {
  /*content: "\2B58";*/
  margin: 0 1ch 0 0.25ch;
  font-size: var(--font-size-xx-large);
  content: " ";
  width: 1em;
  min-width: 1em;
  aspect-ratio: 1/1;
  border-radius: var(--border-radius-full);
  border: 2px solid var(--white);
  box-sizing: content-box;
}
.chart.chart--multiple .single__answers .multiple__item .multiple__answer:before:hover:before,
.chart.chart--multiple .multiple__answers .multiple__item .multiple__answer:before:hover:before {
  /*content: "\29BF";*/
}
.chart.chart--multiple .single__answers .multiple__item .multiple__answer--selected,
.chart.chart--multiple .multiple__answers .multiple__item .multiple__answer--selected {
  color: var(--button-text--hover);
  background: var(--button-background--hover);
  border-radius: var(--button-border-radius);
  box-shadow: var(--button-drop-shadow);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.chart.chart--multiple .single__answers .multiple__item .multiple__answer--selected:before,
.chart.chart--multiple .multiple__answers .multiple__item .multiple__answer--selected:before {
  /*content: "\29BF";*/
  content: " ";
  background: var(--white);
}
.chart.chart--multiple .single__answers .multiple__item .multiple__answer__feedback,
.chart.chart--multiple .multiple__answers .multiple__item .multiple__answer__feedback {
  margin: 0 1rem;
  align-self: center;
  width: 0px;
  opacity: 0;
  overflow: hidden;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.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-bg);
  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__bg {
  background-color: transparent;
}
.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: var(--white);
  border-radius: var(--border-radius-large);
  padding: var(--space-x-small);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  box-shadow: var(--shadow-modal);
}
.chart.chart--multiple .multiple__feedback .chart__text-feedback {
  width: var(--modal-width);
  background: var(--white);
  padding: var(--space-x-large);
  box-shadow: var(--cbook-shadow-container);
  border-radius: var(--border-radius-small);
}
.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 .single__answers,
.chart.chart--multiple .multiple__answers {
  width: 100%;
  margin: 0;
  padding: 0 var(--space-x-large);
  list-style: none;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.chart.chart--multiple.chart--multiple--evaluated .single__answers, .chart.chart--multiple.chart--multiple--evaluated .multiple__answers {
  width: 100%;
  margin: 0;
  padding: 0 var(--space-x-large);
  list-style: none;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.chart.chart--multiple.chart--multiple--evaluated .single__answers .multiple__item .multiple__answer__feedback, .chart.chart--multiple.chart--multiple--evaluated .multiple__answers .multiple__item .multiple__answer__feedback {
  animation: 1.3s forwards fade-in;
  margin: 0 1rem;
  align-self: center;
  width: 30%;
  opacity: 1;
}
.chart.chart--multiple.chart--multiple--evaluated .single__answers .multiple__item .multiple__answer__feedback .multiple__answer__feedback-text, .chart.chart--multiple.chart--multiple--evaluated .multiple__answers .multiple__item .multiple__answer__feedback .multiple__answer__feedback-text {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  padding: 1ch;
  display: flex;
  border-radius: 10px;
  font-style: italic;
  font-weight: 100;
  font-size: var(--font-size-xx-small);
}
.chart.chart--multiple.chart--multiple--evaluated .multiple__answer {
  pointer-events: none;
}
.chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--incorrect {
  box-shadow: none;
  background: var(--error-100);
  color: var(--error-700);
  border: 1px solid var(--error-700);
}
.chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--incorrect:before {
  background: var(--error-100);
  border-color: var(--error-700);
}
.chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--missed {
  box-shadow: none;
  background: var(--success-100);
  color: var(--success-700);
  border: 1px solid var(--success-700);
}
.chart.chart--multiple.chart--multiple--evaluated .multiple__answer.multiple__answer--missed:before {
  background: var(--success-100);
  border-color: var(--success-700);
}

/*********************************************
 * Page Builder Core Slide
 *********************************************/
.chart--page-builder {
  overflow: hidden;
}
.chart--page-builder #chart-container > div > div[data-element-type=gjs-flex-layout-widget],
.chart--page-builder #chart-container .grid-container {
  padding: var(--chart-content-padding, var(--space-large) 4rem);
}
.chart--page-builder #chart-container .grid-container {
  overflow: auto;
}
.chart--page-builder details {
  border: 1px solid var(--gray-300);
}
.chart--page-builder summary {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.chart--page-builder summary:hover {
  background: var(--primary-50);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.chart--page-builder .card-item {
  cursor: pointer;
}
.chart--page-builder button {
  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-link-border);
  border-radius: var(--slide-link-border-radius);
  transition: all 0.5s;
}

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

.sequence__chart .media-player.media-element {
  background-color: transparent;
  height: auto;
  position: absolute;
  bottom: 0;
}

.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;
  height: -webkit-fill-available;
  padding: var(--space-large);
}

.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% - 0.5rem);
}

.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;
}

.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;
}

/*********************************************
 * Single Choice / Right or Wrong
 *********************************************/
.chart--single {
  position: relative;
}
.chart--single .chart__body {
  display: flex;
  flex-direction: column;
  padding: var(--space-medium) 4rem;
}
@media only screen and (min-width: 768px) {
  .chart--single .chart__body {
    padding: var(--space-medium) 4rem;
  }
}
@media only screen and (min-width: 992px) {
  .chart--single .chart__body {
    padding: var(--space-large) 4rem;
  }
}
.chart--single .chart__interaction {
  align-self: center;
}

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

.single__answer {
  display: inline-block;
  width: 320px;
  height: 280px;
  float: left;
  margin: 35px 50px;
  cursor: pointer;
  transition: 0.3s;
}
.single__answer:first-child {
  margin-right: 100px;
}
.single__answer:hover, .single__answer:focus {
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.3);
}

.single__answer--selected {
  transform: scale(1.04);
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.3);
}

.single__answer--incorrect,
.single__answer--correct {
  cursor: default;
}
.single__answer--incorrect:hover, .single__answer--incorrect:focus,
.single__answer--correct:hover,
.single__answer--correct:focus {
  box-shadow: none;
}

.single__answer--incorrect {
  opacity: 0.4;
}

.single__image {
  width: 320px;
  height: 240px;
}

.single__txt {
  background: var(--gray-750);
  color: var(--white);
  padding: 7px 10px;
  margin-top: 3px;
  font-size: var(--font-size-small);
  line-height: 1;
  text-align: center;
}

#html-community-voting {
  overflow-x: hidden;
}

#app-community-voting {
  /* BALKEN */
  /* SLIDER */
  /* RADAR */
}
#app-community-voting img.chart__background-image:not([src]),
#app-community-voting img.chart__background-image[src=""] {
  display: none;
}
#app-community-voting .chart__legend-item .chart__legend-color-box {
  width: 20px;
  height: 20px;
  margin: 5px;
  border-radius: 3px;
}
#app-community-voting .chart__legend-item.diagram-user-label .chart__legend-color-box {
  background-color: var(--diagram-primary, var(--primary, rgb(0, 177, 185))) !important;
}
#app-community-voting .chart__legend-item.diagram-community-label .chart__legend-color-box {
  background-color: var(--diagram-community, var(--secondary, rgb(35, 123, 161))) !important;
}
#app-community-voting .chart__legend-item.diagram-study-label .chart__legend-color-box {
  background-color: var(--diagramstudy, var(--primary-300, rgb(16, 112, 37))) !important;
}
#app-community-voting .voting-chart-container {
  margin: 0 var(--space-x-large);
}
#app-community-voting .choice__legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#app-community-voting .choice__legend.diagram-user-label div {
  background-color: var(--diagram-primary, var(--primary, rgb(0, 177, 185))) !important;
}
#app-community-voting .choice__legend.diagram-community-label div {
  background-color: var(--diagram-community, var(--secondary, rgb(35, 123, 161))) !important;
}
#app-community-voting .choice__legend.diagram-study-label div {
  background-color: var(--diagramstudy, var(--primary-300, rgb(16, 112, 37))) !important;
}
#app-community-voting .choice__legend > div {
  width: 100%;
}
#app-community-voting .text-left {
  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-medium);
}
#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(--voting-balken-button-bg, var(--button-background));
  padding: var(--button-padding);
  margin: var(--button-margin);
  border-radius: var(--voting-balken-button-radius, var(--button-border-radius));
  border: var(--button-border);
  box-shadow: var(--button-drop-shadow);
  min-height: -moz-fit-content;
  min-height: fit-content;
  height: auto;
}
#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-color: var(--diagram-primary, var(--primary, rgb(0, 177, 185)));
  outline: var(--focus-outline);
  box-shadow: 0 0 0 6px var(--focus-dropshadow);
  transition: border 0.2s ease, box-shadow 0.2s ease;
  border: var(--button-border-hover, 2px solid var(--primary));
}
#app-community-voting .chart-balken__bar.voted.selected {
  outline: none;
  box-shadow: var(--button-drop-shadow);
  transition: none;
}
#app-community-voting .chart-balken__bar:hover {
  border: 5px solid var(--secondary-500);
  background: var(--primary-500_50);
}
#app-community-voting .chart-balken__bar.selected {
  background: var(--primary);
  border: 3px solid var(--secondary-500);
}
#app-community-voting .chart-balken__bar.voted.selected {
  border: 3px solid var(--secondary-500);
  background: var(--primary);
}
#app-community-voting .chart-balken__bar.voted:not(.selected) {
  opacity: 1;
  background: var(--primary-500_30);
}
#app-community-voting .chart-balken__eval-bar {
  width: 55%;
  height: 100%;
  margin-left: var(--space-medium);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
#app-community-voting .chart-balken__field {
  background: var(--gray-250);
  border-radius: var(--border-radius-voting, var(--border-radius-full));
  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.chart-balken__study div, #app-community-voting .chart-balken__field.chart-balken__study div span {
  background-color: var(--diagram-study, var(--primary-300, rgb(16, 112, 37)));
}
#app-community-voting .chart-balken__field.chart-balken__community div, #app-community-voting .chart-balken__field.chart-balken__community div span {
  background-color: var(--diagram-community, var(--secondary, rgb(35, 123, 161)));
}
#app-community-voting .chart-balken__field div {
  background: var(--gray-900);
  border-radius: var(--border-radius-voting, var(--border-radius-full));
  height: 100%;
  display: flex;
  align-items: center;
}
#app-community-voting .chart-balken__field div span {
  padding: 0 var(--space-medium);
  color: var(--black);
  border-radius: var(--border-radius-voting, var(--border-radius-full));
  /*background: var(--white);*/
  font-size: var(--font-size-x-small);
  line-height: var(--font-size-x-small);
}
#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-medium);
  margin-bottom: var(--space-x-large);
}
#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(--diagram-primary, var(--primary));
  background-color: var(--diagram-primary, var(--primary));
  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: auto;
  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 .diagram-user-line {
  stroke: var(--diagram-primary, var(--primary));
  fill: var(--diagram-primary, var(--primary));
  fill-opacity: 0.15;
}
#app-community-voting .diagram-community-line {
  stroke: var(--diagram-community, var(--secondary));
  fill: var(--diagram-community, var(--secondary));
  fill-opacity: 0.15;
}
#app-community-voting .chart-balken__community .chart-balken__selected {
  background-color: var(--diagram-community, var(--secondary));
}
#app-community-voting .communitySlider .voter--selected,
#app-community-voting .communitySlider .voter--active {
  border-color: var(--diagram-community, var(--secondary));
  background-color: var(--diagram-community, var(--secondary));
}
#app-community-voting .chart-balken__study .chart-balken__selected {
  background-color: var(--diagram-study, var(--primary-300));
}
#app-community-voting .studySlider .voter--selected,
#app-community-voting .studySlider .voter--active {
  border-color: var(--diagram-study, var(--primary-300));
  background-color: var(--diagram-study, var(--primary-300));
}
#app-community-voting .diagram-study-line {
  stroke: var(--diagram-study, var(--primary-300));
  fill: var(--diagram-study, var(--primary-300));
  fill-opacity: 0.15;
}
#app-community-voting .chart-einschatzung {
  display: flex;
  align-items: center;
}
#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: auto;
  /*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 .chart--hotspots header.chart__header {
  z-index: 2;
}
#app-community-voting .voting-chart-container:has(.chart-balken) {
  margin: 0;
}
#app-community-voting .balken-item {
  margin-left: 0;
}
#app-community-voting.evaluated .chart-balken__bar {
  pointer-events: none;
}
#app-community-voting .chart-balken__field {
  background: var(--gray-500);
}
#app-community-voting .chart__body.ext__body {
  width: calc(100vw - 2 * var(--chart-content-padding-inline, 8rem));
}

html:has(#app-pinnwand) {
  overflow: hidden;
}

#app-pinnwand {
  width: 100%;
  height: 100%;
  overflow: auto !important;
  padding: var(--chart-content-padding, var(--space-medium) 4rem);
}
@media only screen and (min-width: 768px) {
  #app-pinnwand {
    padding: var(--chart-content-padding, var(--space-medium) 4rem);
  }
}
@media only screen and (min-width: 992px) {
  #app-pinnwand {
    padding: var(--chart-content-padding, var(--space-large) 4rem);
  }
}
#app-pinnwand .masonry .postit-container {
  display: flex;
  flex-wrap: wrap;
}
#app-pinnwand .masonry .postit-container li.chart-subtitle {
  width: 100%;
  background: transparent !important;
  text-align: left;
  color: var(--text) !important;
  display: block;
  min-height: auto;
  padding: 0;
}
#app-pinnwand .masonry .postit-container li.chart-subtitle p {
  margin: 0;
}
#app-pinnwand .masonry .postit-container .postit {
  max-width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#app-pinnwand .chart-title {
  font-family: var(--font-heading, Arial, sans-serif);
  max-width: 100%;
  box-shadow: none;
  min-height: 50px;
  height: auto;
  justify-content: space-between;
  background-color: transparent !important;
}
#app-pinnwand .chart-title h2 {
  padding: 0 0 0 2.5rem;
  position: relative;
  left: 0;
  width: 65%;
  font-family: var(--font-heading);
  font-size: var(--font-size-xx-large);
  color: var(--primary) !important;
  margin-top: 0.25rem;
  margin-bottom: 0.85rem;
}
#app-pinnwand .chart-subtitle {
  font-family: var(--font-paragraph);
  background: var(--secondary) !important;
  border-radius: var(--border-radius-large);
}
#app-pinnwand .postit .chart-subtitle {
  margin: 0 2.5rem 10px;
  padding: 1rem 2rem;
}
#app-pinnwand .container {
  min-height: 100vh !important;
  padding-top: 2rem;
}
#app-pinnwand .container .chart-title .user-controls {
  width: auto;
  max-width: 40%;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-right: 2.5rem;
}
#app-pinnwand .container .chart-body.postit {
  height: auto;
  width: 100%;
}
#app-pinnwand .container .postit-container {
  font-family: var(--font-paragraph);
  padding: 0 2.5rem;
  min-height: 250px;
  -moz-column-gap: 10px;
       column-gap: 10px;
  row-gap: 10px;
  margin-bottom: 1rem;
}
#app-pinnwand .container .postit-container .chart-subtitle {
  display: flex;
  align-items: center;
}
#app-pinnwand .container .postit-container li {
  margin-bottom: 10px;
  padding: 15px 30px 15px;
}
#app-pinnwand .container .postit-container li .postit-content h3 {
  font-size: var(--font-size-large);
  margin: 0.5em 0 1em;
}
#app-pinnwand .container .postit-container li .postit-content p {
  font-size: var(--font-size-medium);
  margin: 0 0 1em;
  line-height: 1.5;
}
#app-pinnwand .show-my-posts {
  width: 30% !important;
  background-color: var(--primary);
  border-radius: var(--button-border-radius);
  padding: 0.5ch 10px;
  height: 44px !important;
}
#app-pinnwand .show-my-posts label {
  font-size: var(--font-size-x-small);
  line-height: var(--font-size-x-small) !important;
  font-weight: 400;
  color: var(--text-inverse) !important;
}
#app-pinnwand .show-my-posts > div {
  align-items: center;
}
#app-pinnwand button {
  background-color: var(--button-background) !important;
  border-radius: var(--button-border-radius) !important;
  cursor: pointer !important;
  min-width: 62px;
}
#app-pinnwand button:hover {
  background-color: var(--button-background--hover) !important;
}
#app-pinnwand .bulkUpload-postits,
#app-pinnwand .print-postits {
  min-width: 56px !important;
  margin: 0 !important;
}
#app-pinnwand .bulkUpload-postits span,
#app-pinnwand .print-postits span {
  display: var(--pinnwand-txt-display, none);
}
#app-pinnwand .add-postit {
  min-width: -moz-fit-content !important;
  min-width: fit-content !important;
  margin: 0 !important;
}
#app-pinnwand .add-postit[disabled] {
  cursor: not-allowed !important;
  pointer-events: none;
  color: var(--gray-300) !important;
  background-color: var(--gray-600);
}
#app-pinnwand .add-postit[disabled] svg {
  color: var(--gray-300) !important;
  fill: var(--gray-300) !important;
}

.print-postits svg,
.add-postit svg,
.bulkUpload-postits svg {
  margin: 0 !important;
}

#app-pinnwand .container .chart-title .user-controls {
  padding-right: 2.5rem;
}

#app-pinnwand .container .postit-container .postit {
  background-color: var(--primary) !important;
  color: var(--text-inverse) !important;
  fill: var(--text-inverse) !important;
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  padding: 10px 15px;
  border-radius: var(--border-radius-large);
}

.container .chart-body.postit .postit-container .postit-header svg,
#app-pinnwand .container .postit-container .postit .edit-post svg {
  fill: var(--text-inverse) !important;
}

#app-pinnwand .container .chart-body.postit .postit-container .postit-header {
  margin: -5px -18px 0px -16px;
  background-color: transparent !important;
}

.dialog_postit-title-textfield,
.dialog_postit-content-textfield {
  font-family: var(--font-paragraph);
}

.dialog-postit .dialog_cancel-button {
  border-radius: var(--button-border-radius) !important;
  margin-right: 10px !important;
  font-family: var(--font-paragraph) !important;
}

.dialog-postit .dialog_cancel-button:hover {
  background-color: var(--button-background--hover) !important;
  color: var(--text-inverse) !important;
}

.dialog-postit .dialog_save-button,
.dialog_postit-file-add-button {
  background-color: var(--button-background) !important;
  border-radius: var(--button-border-radius) !important;
}

.dialog-postit button span {
  text-transform: none !important;
}

.dialog-postit .dialog_save-button:hover,
.dialog_postit-file-add-button:hover {
  background-color: var(--button-background--hover) !important;
}

#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-large);
}
#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-large);
  margin: var(--space-x-small);
  font-size: var(--font-size-xx-small);
}
#app-community-wordcloud .my-tags__item button {
  margin: var(--space-x-small) var(--space-x-small) var(--space-x-small) var(--space-medium);
  padding: var(--space-x-small);
  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-community-wordcloud .wordcloud-label-1 {
  fill: var(--primary);
}
#app-community-wordcloud .wordcloud-label-2 {
  fill: var(--secondary);
}
#app-community-wordcloud .wordcloud-label-3 {
  fill: var(--tertiary);
}
#app-community-wordcloud .wordcloud-label-4 {
  fill: var(--primary-400);
}
#app-community-wordcloud .wordcloud-label-5 {
  fill: var(--secondary-400);
}

#html-wordcloud .chart__background {
  position: fixed;
}

.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

/*********************************************
 * Social App
 *********************************************/
.social-app {
  position: absolute;
  color: var(--overlay-panel-text);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  top: var(--social-position-top);
  height: var(--social-height);
  left: auto;
  right: 0;
  width: 100%;
  transition: all 0.3s 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(--border-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 {
  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);
  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.3s 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(--menu-close-radius);
  box-shadow: -2px 2px 0.4em rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(var(--space-x-small));
}
.social-app .close-btn:hover, .social-app .close-btn:focus {
  right: auto;
}

.social-app-title {
  font-size: var(--font-size-x-large);
  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-app-width);
  right: calc(var(--social-app-width) * -1);
  pointer-events: all;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.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-app-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-app-width) * -1);
}

.social-app-body {
  position: relative;
  overflow: hidden;
  opacity: 1;
  height: 100%;
  color: var(--text);
  z-index: 10;
  background: var(--social-body-bg);
  border-bottom-right-radius: var(--border-radius-zero);
  border-bottom-left-radius: var(--border-radius-zero);
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
  border-top: none;
}
.social-app-body .social-app-options {
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-medium);
  padding: var(--space-small);
  border-bottom: 1px solid var(--gray-700);
  box-shadow: var(--social-tools-shadow);
}
.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;
  color: var(--black);
}

.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-large) var(--space-medium);
}

.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);
}

/**
 * Social App Components
 */
[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;
}

.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-medium);
}

.ui-toggle-button {
  font-size: var(--font-size-x-small);
  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);
}
.social-breadcrumb__link .social-member-bubble {
  font-size: var(--font-size-xx-small);
  margin-right: 0;
}
.social-breadcrumb__link:before {
  font-size: var(--font-size-x-large);
  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.3s 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.3s 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(--font-size-medium);
}
.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,
.social-app-options__form-control .cbi-filter.cbi-s {
  color: var(--black);
  padding: var(--space-small);
  margin: var(--button-margin);
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 9999999;
}

.social-app-options input.social-app-options__input {
  padding-right: var(--space-x-large);
  width: 200px;
}

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

.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(--font-size-x-large);
  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(--font-size-medium);
  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(--font-size-small);
  outline: var(--focus-outline--off);
  box-shadow: 0 0 0 0 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-medium);
  position: absolute;
}

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

.social-member-bubble__indicator {
  font-size: var(--font-size-xx-small);
  left: calc(var(--space-large) * -1);
  top: calc(var(--space-medium) * -1);
  width: 0.5rem;
  min-width: 0.5rem;
  min-height: 0.5rem;
}

.no-borderradius .social-member-bubble {
  font-size: var(--font-size-medium);
  position: absolute;
  top: var(--space-medium);
  left: var(--space-medium);
}

.social-app .social-app-header {
  position: relative;
  color: var(--text);
  background: var(--primary-50);
  border-top-right-radius: var(--border-radius-zero);
  border-top-left-radius: var(--border-radius-zero);
  font-family: var(--font-paragraph);
  font-weight: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-large) var(--space-medium);
  border: none;
  border-bottom: none;
}
.social-app .social-app-header .ui-select {
  font-family: var(--font-paragraph);
  font-size: var(--font-size-x-small);
}
.social-app .social-app-header__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-small);
  font-family: var(--font-paragraph);
  width: 100%;
}
.social-app .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 .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(--gray-600);
  border-right: 1px solid var(--gray);
  transition: 0.3s;
}
.social-app .social-app-header__button:hover, .social-app .social-app-header__button:focus {
  background: var(--gray-200);
  color: var(--gray-700);
}
.social-app .social-app-header__button:active {
  box-shadow: -1px 0 1px rgba(0, 0, 0, 0.15) inset;
}
.social-app .social-app-header__button--right {
  left: auto;
  right: 0;
  border-right: 0;
  border-left: 1px solid var(--gray);
}
.social-app .social-app-header__button--right:active {
  box-shadow: 1px 0 1px rgba(0, 0, 0, 0.15) inset;
}
.social-app .social-app-header__button--danger,
.social-app .social-app-footer__button--danger {
  color: var(--error-700);
  background: var(--error-200);
  outline: 1px solid var(--error-700);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-app .social-app-header__button--danger:hover,
.social-app .social-app-footer__button--danger:hover {
  color: var(--error-800);
  background: var(--error-300);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-app .social-app-header__button--danger:focus, .social-app .social-app-header__button--danger:focus-visible,
.social-app .social-app-footer__button--danger:focus,
.social-app .social-app-footer__button--danger:focus-visible {
  outline: var(--focus-outline);
  box-shadow: 0 0 0 6px var(--focus-color);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}
.social-app .social-app-header__button--success,
.social-app .social-app-footer__button--success {
  color: var(--success-700);
  background: var(--success-200);
  outline: 1px solid var(--success-700);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-app .social-app-header__button--success:hover,
.social-app .social-app-footer__button--success:hover {
  color: var(--success-800);
  background: var(--success-300);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-app .social-app-header__button--success:focus, .social-app .social-app-header__button--success:focus-visible,
.social-app .social-app-footer__button--success:focus,
.social-app .social-app-footer__button--success:focus-visible {
  outline: var(--focus-outline);
  box-shadow: 0 0 0 6px var(--focus-color);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}
.social-app .social-app-footer {
  padding: 0 var(--space-medium);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-medium);
}

.social-app-modal {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  margin: 0;
  z-index: 100;
  background: var(--modal-bg);
  border-radius: none;
  overflow: hidden;
  border: none;
}
.social-app-modal > div {
  height: auto;
  max-height: calc(100% - 2ch - 60px);
  overflow: auto;
  background: var(--social-msg-reply-bg);
  margin: var(--space-medium);
  padding: var(--space-medium);
  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;
  gap: var(--space-medium);
}

/*------------------------------------*\
            SOCIAL TOPICS
\*------------------------------------*/
.social-topics {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-bottom: 3px;
  height: 410px;
  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__item button.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: var(--space-medium);
  margin: 0;
  width: 100%;
}
.social-topics__item button.social-topics__link .social-member-bubble {
  position: absolute;
  top: var(--space-medium);
  left: var(--space-medium);
}

.social-app--notes .social-app-modal > div {
  color: var(--black);
  background: var(--notes-bg-color);
}
.social-app--notes .social-topic {
  color: var(--black);
  background: var(--notes-bg-color);
}
.social-app--notes .social-activity-editor__title {
  color: var(--black);
  background: var(--notes-input-bg-color);
}
.social-app--notes .social-activity-editor__file,
.social-app--notes button.rte-tools__btn {
  color: var(--black);
}
.social-app--notes .social-activity-editor__wrapper .ProseMirror {
  color: var(--black);
  background: var(--notes-input-bg-color);
}
.social-app--notes .social_topics__topic-title {
  color: var(--black);
}
.social-app--notes .social-topics__link,
.social-app--notes .social-topics__item {
  color: var(--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_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(--font-size-x-small);
  color: var(--social-list-meta-color);
}

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

.social_topics__topic-title {
  font-size: var(--font-size-medium);
  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
\*------------------------------------*/
.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) 0 15px 25px, rgba(0, 0, 0, 0.05) 0 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(--font-size-medium);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.social-topic__header-text {
  font-weight: 700;
}

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

.social-topic__description {
  font-size: var(--font-size-small);
  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);
  height: 38px;
  margin: 0 -25px;
  color: var(--white);
  transition: 0.3s;
}
.social-topic__send[disabled] {
  background: none;
  color: var(--gray-300);
}
.social-topic__send:hover, .social-topic__send:focus {
  background: var(--primary);
  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(--font-size-x-small);
  text-align: right;
}

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

/*------------------------------------*\
       SOCIAL SPHERE SELECTOR
\*------------------------------------*/
.sphere-selector {
  min-height: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-medium);
}

.sphere-hidden {
  width: 100%;
}
.sphere-hidden .sphere-hidden__button {
  width: 100%;
  margin: 0;
  border-radius: 0;
  font-weight: bold;
  opacity: 0.8;
  outline: none;
  border: none;
  box-shadow: inset 0 0 0 0px var(--focus-color), 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-hidden .sphere-hidden__button .cbi {
  margin: 0;
}

.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: calc(100% - 2 * var(--space-large));
}

.sphere-selector__item {
  position: relative;
  width: 100%;
  transition: 0.3s;
  margin-top: 3px;
  border-radius: var(--border-radius-small);
}
.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 button.sphere-selector__sphere-name {
  width: calc(100% - 130px);
  background: var(--gray-150);
  color: var(--black);
}

.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;
  color: var(--black);
}
.sphere-selector__sphere-actions button:hover {
  background: var(--white);
  color: var(--primary);
  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--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-medium);
  font-size: var(--font-size-x-small);
  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(--error);
}

/*------------------------------------*\
          SOCIAL SPHERE EDITOR
\*------------------------------------*/
.sphere-editor {
  margin-top: var(--space-x-large);
}

.sphere-editor__body {
  position: relative;
}

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

.sphere-editor__user-item {
  position: relative;
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;
  cursor: pointer;
  color: var(--social-list-text);
  background-color: var(--social-list-bg);
  margin: var(--space-medium) 0;
  border-radius: var(--border-radius-small);
  padding: var(--space-medium);
}
.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);
}

.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-link-border);
  border-radius: var(--slide-link-border-radius);
  transition: all 0.5s;
}
a.social-activity__mention:hover, a.social-activity__mention:focus {
  background-color: var(--slide-link-background-hover);
}

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

.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(--highlight);
}

.social-activity__meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-xx-small);
  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(--font-size-small);
}
.social-activity__body.teaser:after {
  display: inline-block;
  content: " [...]";
  font-size: var(--font-size-xx-small);
  color: var(--highlight);
  margin-left: 5px;
  cursor: pointer;
}

.social-activity__attachments {
  padding-left: 0;
  position: relative;
  list-style: none;
  font-size: var(--font-size-x-small);
  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(--border-radius-small);
}
.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(--font-size-xx-small);
  transition: 0.3s;
  min-width: 36px;
  height: 36px;
  line-height: 36px;
  padding: 0 4px;
  text-align: center;
  vertical-align: middle;
}

.social-activity-editor {
  display: flex;
  flex-direction: column;
  position: relative;
  /*width: 100%;*/
  overflow: visible;
  gap: var(--space-medium);
}

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

.social-activity-editor__title {
  width: -webkit-fill-available;
  width: -moz-available;
  color: var(--input-text);
  background: hsla(var(--gray-hue), var(--gray-sat), 92%, 20%);
  font-weight: 700;
  font-size: var(--font-size-medium);
  padding: 1ch;
  margin: 0;
  height: auto;
  box-sizing: border-box;
}

input.social-activity-editor__wrapper {
  flex: 1 1 auto;
  position: relative;
  margin-top: 1em;
  display: flex;
  flex-direction: column;
  min-height: 55%;
}
input.social-activity-editor__wrapper .ProseMirror {
  color: var(--input-text);
  line-height: 1.8;
  background: hsla(var(--gray-hue), var(--gray-sat), 92%, 20%);
}
input.social-activity-editor__wrapper .ProseMirror:focus, input.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(--font-size-x-small);
  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-medium);
}

.social-activity-editor__asset {
  height: 100px;
  width: calc(33.3333% - 10px);
  position: relative;
  padding: 0;
  background: var(--gray);
  background: no-repeat center center;
  background-size: cover;
  border-radius: var(--border-radius-small);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  font-size: var(--font-size-xx-small);
}
.social-activity-editor__asset .cbi {
  color: var(--error);
}
.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(--font-size-large);
  text-align: center;
  color: var(--text-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: hsla(var(--gray-hue), var(--gray-sat), 92%, 20%);
  stroke-width: 6px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}
.social-activity-editor__asset__progress-fill {
  stroke: var(--highlight);
  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(--error);
  box-shadow: inset 0 0 15px 5px var(--error);
}
.social-activity-editor__asset--will-be-deleted:before {
  opacity: 0.8;
}

.social-activity-editor__errors {
  border: 1px solid var(--error-300);
  background: var(--error-100);
  color: var(--error-700);
  padding: 0;
  margin: 1.5em;
  font-size: var(--font-size-x-small);
  list-style: none;
}

.social-activity-editor__error {
  padding: 0.6em 1.5em 0.65em;
  border-bottom: 1px solid var(--error-300);
}
.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(--black);
}

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

.rte-tools__btn--active {
  color: var(--highlight);
}

.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);
  line-height: 1.8;
}

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

.social-topics,
.sphere-selector__list,
.bonus-material__list {
  height: 100%;
  overflow: auto;
  margin: 0;
  padding: var(--space-large);
  list-style: none;
  position: relative;
}

.material-item {
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-x-small) var(--space-medium);
  margin: var(--space-x-small) 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-x-small) var(--space-medium);
  margin: var(--space-x-small) var(--space-zero);
  border-radius: var(--border-radius-small);
  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-medium) var(--space-medium);
  margin: var(--space-medium) var(--space-medium);
  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);
  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(--font-size-x-small);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.material-item__name {
  font-size: var(--font-size-small);
  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(--font-size-small);
}

.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;
}

.skip-to-content {
  position: absolute;
  top: 0;
  text-align: center;
  z-index: 1000;
  background: var(--black);
  width: initial;
  margin: initial;
  max-width: initial;
  min-width: initial;
  padding-left: initial;
  padding-top: initial;
  padding-bottom: initial;
  border-radius: var(--border-radius-small);
}
.skip-to-content li {
  display: inline;
}
.skip-to-content li a {
  background: var(--black);
  color: var(--white);
  text-decoration: none;
  border-radius: var(--border-radius-small);
  padding: 0;
}
.skip-to-content li a:focus, .skip-to-content li a:active {
  position: static;
  font-size: var(--font-size-medium);
  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;
}

.app-ally-modal__section {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-large);
}

.app-ally-modal__color-modes {
  width: auto;
  padding-left: var(--space-medium);
  display: flex;
  align-items: center;
  justify-items: center;
  gap: var(--space-small);
}

.app-ally-modal__actions {
  width: auto;
  padding-left: var(--space-medium);
  display: grid;
  grid-template-columns: repeat(auto-fit, clamp(40px, 100%, 50px));
  align-items: center;
  justify-items: center;
  gap: var(--space-small);
}
.app-ally-modal__actions button {
  border-radius: 100px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  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;
}
.app-ally-modal__actions button:focus, .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;
}

.app-ally-modal__actions button {
  color: var(--text);
}
.app-ally-modal__actions button.button__contrast--normal {
  color: #000;
  background-color: #fff;
}
.app-ally-modal__actions button.button__contrast--normal.selected {
  border-color: #000;
}
.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);
}

.app-ally-modal__shortcuts {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-x-large);
}
.app-ally-modal__shortcuts table {
  width: auto;
  margin: 0;
  font-size: var(--font-size-x-small);
  color: var(--gray-700);
  line-height: normal;
}
.app-ally-modal__shortcuts tbody {
  display: flex;
  flex-direction: column;
}
.app-ally-modal__shortcuts tbody tr td {
  max-width: initial;
  min-width: 280px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.app-ally-modal__shortcuts tbody tr td kbd {
  border-radius: var(--border-radius-small);
  padding: var(--space-medium);
  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: #000;
  background: #fff;
  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;
}
.app-ally-modal__shortcuts tbody tr td,
.app-ally-modal__shortcuts tbody tr th {
  padding: 0.25ch;
  text-align: left;
  gap: 1ch;
}

.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);
}

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

.app-ally-modal__no-bg,
.app-ally-modal__no-animations {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-medium);
  padding-top: var(--space-medium);
}
.app-ally-modal__no-bg input,
.app-ally-modal__no-animations input {
  aspect-ratio: 1/1;
  width: var(--icon-size-m, 24px);
  height: var(--icon-size-m, 24px);
}

.app-ally-modal__actions button.button__contrast--blackwhite,
.app-ally-modal__actions button.button__contrast--whiteblack,
.app-ally-modal__actions button.button__contrast--yellowblue,
.app-ally-modal__actions button.button__contrast--redcyan,
.app-ally-modal__actions button.button__contrast--greenblack {
  display: var(--all-contrast-options, none);
}

body#cbook-body .app-ally-modal__actions .button__font-size--medium,
body#cbook-body .app-ally-modal__actions .button__font-size--large {
  display: var(--all-font-size-options-options, none);
}

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

body#cbook-body.bg--hidden *:not(.card__front, .card__back) {
  background-image: none;
}

body#cbook-body.animation--hidden .card-item .card__front,
body#cbook-body.animation--hidden .card-item .card__back {
  transition: 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;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

body#cbook-body.contrast--normal,
body#extension-body.contrast--normal {
  --primary: hsl(221.54, 11.3%, 22.55%);
  --primary-h: 221.54;
  --primary-s: 11.3%;
  --primary-l: 22.55%;
  --secondary: hsl(169, 91%, 35%);
  --secondary-h: 169;
  --secondary-s: 91%;
  --secondary-l: 35%;
  --tertiary: hsl(34, 70%, 60%);
  --tertiary-h: 34;
  --tertiary-s: 70%;
  --tertiary-l: 60%;
  --success: hsl(145, 63%, 47%);
  --success-h: 145;
  --success-s: 63%;
  --success-l: 47%;
  --info: hsl(197, 84%, 38%);
  --info-h: 197;
  --info-s: 84%;
  --info-l: 38%;
  --warning: hsl(34, 70%, 60%);
  --warning-h: 34;
  --warning-s: 70%;
  --warning-l: 60%;
  --error: hsl(5.93, 90%, 35.29%);
  --error-h: 5.93;
  --error-s: 90%;
  --error-l: 35.29%;
  --white: hsl(0, 0%, 100%);
  --white-h: 0;
  --white-s: 0%;
  --white-l: 100%;
  --text: hsl(0, 0%, 0%);
  --text-inverse: hsl(0, 0%, 100%);
  --background: hsl(0, 0%, 100%);
  --background-inverse: hsl(0, 0%, 0%);
  --highlight: var(--secondary);
  --focus-color: var(--secondary);
  --focus-outline: 2px solid var(--focus-color);
  --focus-outline-off: 0px solid var(--focus-color);
  --focus-dropshadow: var(--focus-color) 0 0 0 3px;
  --focus-dropshadow-off: var(--focus-color) 0 0 0 0;
  --search-highlight: hsl(60, 100%, 50%);
  --search-highlight-color: var(--black);
  /************************** Shade variations **************************/
  --primary-900: hsl(calc(var(--primary-h) * 0.975), calc(var(--primary-s) * 0.799), calc(var(--primary-l) * 0.551));
  --primary-800: hsl(calc(var(--primary-h) * 0.995), calc(var(--primary-s) * 0.872), calc(var(--primary-l) * 0.757));
  --primary-700: hsl(calc(var(--primary-h) * 0.999), calc(var(--primary-s) * 0.907), calc(var(--primary-l) * 0.874));
  --primary-600: hsl(calc(var(--primary-h) * 1.004), calc(var(--primary-s) * 0.968), calc(var(--primary-l) * 0.985));
  --primary-500: var(--primary);
  --primary-400: hsl(calc(var(--primary-h) * 1.002), calc(var(--primary-s) * 0.667), calc(var(--primary-l) * 1.323));
  --primary-300: hsl(calc(var(--primary-h) * 1), calc(var(--primary-s) * 0.601), calc(var(--primary-l) * 1.568));
  --primary-200: hsl(calc(var(--primary-h) * 0.995), calc(var(--primary-s) * 0.595), calc(var(--primary-l) * 1.905));
  --primary-100: hsl(calc(var(--primary-h) * 0.99), calc(var(--primary-s) * 0.586), calc(var(--primary-l) * 2.242));
  --primary-50: hsl(calc(var(--primary-h) * 0.99), calc(var(--primary-s) * 0.592), calc(var(--primary-l) * 2.562));
  --secondary-900: hsl(calc(var(--secondary-h) * 0.975), calc(var(--secondary-s) * 0.799), calc(var(--secondary-l) * 0.551));
  --secondary-800: hsl(calc(var(--secondary-h) * 0.995), calc(var(--secondary-s) * 0.872), calc(var(--secondary-l) * 0.757));
  --secondary-700: hsl(calc(var(--secondary-h) * 0.999), calc(var(--secondary-s) * 0.907), calc(var(--secondary-l) * 0.874));
  --secondary-600: hsl(calc(var(--secondary-h) * 1.004), calc(var(--secondary-s) * 0.968), calc(var(--secondary-l) * 0.985));
  --secondary-500: var(--secondary);
  --secondary-400: hsl(calc(var(--secondary-h) * 1.002), calc(var(--secondary-s) * 0.667), calc(var(--secondary-l) * 1.323));
  --secondary-300: hsl(calc(var(--secondary-h) * 1), calc(var(--secondary-s) * 0.601), calc(var(--secondary-l) * 1.568));
  --secondary-200: hsl(calc(var(--secondary-h) * 0.995), calc(var(--secondary-s) * 0.595), calc(var(--secondary-l) * 1.905));
  --secondary-100: hsl(calc(var(--secondary-h) * 0.99), calc(var(--secondary-s) * 0.586), calc(var(--secondary-l) * 2.242));
  --secondary-50: hsl(calc(var(--secondary-h) * 0.99), calc(var(--secondary-s) * 0.592), calc(var(--secondary-l) * 2.562));
  --tertiary-900: hsl(calc(var(--tertiary-h) * 0.975), calc(var(--tertiary-s) * 0.799), calc(var(--tertiary-l) * 0.551));
  --tertiary-800: hsl(calc(var(--tertiary-h) * 0.995), calc(var(--tertiary-s) * 0.872), calc(var(--tertiary-l) * 0.757));
  --tertiary-700: hsl(calc(var(--tertiary-h) * 0.999), calc(var(--tertiary-s) * 0.907), calc(var(--tertiary-l) * 0.874));
  --tertiary-600: hsl(calc(var(--tertiary-h) * 1.004), calc(var(--tertiary-s) * 0.968), calc(var(--tertiary-l) * 0.985));
  --tertiary-500: var(--tertiary);
  --tertiary-400: hsl(calc(var(--tertiary-h) * 1.002), calc(var(--tertiary-s) * 0.667), calc(var(--tertiary-l) * 1.323));
  --tertiary-300: hsl(calc(var(--tertiary-h) * 1), calc(var(--tertiary-s) * 0.601), calc(var(--tertiary-l) * 1.568));
  --tertiary-200: hsl(calc(var(--tertiary-h) * 0.995), calc(var(--tertiary-s) * 0.595), calc(var(--tertiary-l) * 1.905));
  --tertiary-100: hsl(calc(var(--tertiary-h) * 0.99), calc(var(--tertiary-s) * 0.586), calc(var(--tertiary-l) * 2.242));
  --tertiary-50: hsl(calc(var(--tertiary-h) * 0.99), calc(var(--tertiary-s) * 0.592), calc(var(--tertiary-l) * 2.562));
  --success-900: hsl(calc(var(--success-h) * 0.975), calc(var(--success-s) * 0.799), calc(var(--success-l) * 0.551));
  --success-800: hsl(calc(var(--success-h) * 0.995), calc(var(--success-s) * 0.872), calc(var(--success-l) * 0.757));
  --success-700: hsl(calc(var(--success-h) * 0.999), calc(var(--success-s) * 0.907), calc(var(--success-l) * 0.874));
  --success-600: hsl(calc(var(--success-h) * 1.004), calc(var(--success-s) * 0.968), calc(var(--success-l) * 0.985));
  --success-500: var(--success);
  --success-400: hsl(calc(var(--success-h) * 1.002), calc(var(--success-s) * 0.667), calc(var(--success-l) * 1.323));
  --success-300: hsl(calc(var(--success-h) * 1), calc(var(--success-s) * 0.601), calc(var(--success-l) * 1.568));
  --success-200: hsl(calc(var(--success-h) * 0.995), calc(var(--success-s) * 0.595), calc(var(--success-l) * 1.905));
  --success-100: hsl(calc(var(--success-h) * 0.99), calc(var(--success-s) * 0.586), calc(var(--success-l) * 2.242));
  --success-50: hsl(calc(var(--success-h) * 0.99), calc(var(--success-s) * 0.592), calc(var(--success-l) * 2.562));
  --info-900: hsl(calc(var(--info-h) * 0.975), calc(var(--info-s) * 0.799), calc(var(--info-l) * 0.551));
  --info-800: hsl(calc(var(--info-h) * 0.995), calc(var(--info-s) * 0.872), calc(var(--info-l) * 0.757));
  --info-700: hsl(calc(var(--info-h) * 0.999), calc(var(--info-s) * 0.907), calc(var(--info-l) * 0.874));
  --info-600: hsl(calc(var(--info-h) * 1.004), calc(var(--info-s) * 0.968), calc(var(--info-l) * 0.985));
  --info-500: var(--info);
  --info-400: hsl(calc(var(--info-h) * 1.002), calc(var(--info-s) * 0.667), calc(var(--info-l) * 1.323));
  --info-300: hsl(calc(var(--info-h) * 1), calc(var(--info-s) * 0.601), calc(var(--info-l) * 1.568));
  --info-200: hsl(calc(var(--info-h) * 0.995), calc(var(--info-s) * 0.595), calc(var(--info-l) * 1.905));
  --info-100: hsl(calc(var(--info-h) * 0.99), calc(var(--info-s) * 0.586), calc(var(--info-l) * 2.242));
  --info-50: hsl(calc(var(--info-h) * 0.99), calc(var(--info-s) * 0.592), calc(var(--info-l) * 2.562));
  --warning-900: hsl(calc(var(--warning-h) * 0.975), calc(var(--warning-s) * 0.799), calc(var(--warning-l) * 0.551));
  --warning-800: hsl(calc(var(--warning-h) * 0.995), calc(var(--warning-s) * 0.872), calc(var(--warning-l) * 0.757));
  --warning-700: hsl(calc(var(--warning-h) * 0.999), calc(var(--warning-s) * 0.907), calc(var(--warning-l) * 0.874));
  --warning-600: hsl(calc(var(--warning-h) * 1.004), calc(var(--warning-s) * 0.968), calc(var(--warning-l) * 0.985));
  --warning-500: var(--warning);
  --warning-400: hsl(calc(var(--warning-h) * 1.002), calc(var(--warning-s) * 0.667), calc(var(--warning-l) * 1.323));
  --warning-300: hsl(calc(var(--warning-h) * 1), calc(var(--warning-s) * 0.601), calc(var(--warning-l) * 1.568));
  --warning-200: hsl(calc(var(--warning-h) * 0.995), calc(var(--warning-s) * 0.595), calc(var(--warning-l) * 1.905));
  --warning-100: hsl(calc(var(--warning-h) * 0.99), calc(var(--warning-s) * 0.586), calc(var(--warning-l) * 2.242));
  --warning-50: hsl(calc(var(--warning-h) * 0.99), calc(var(--warning-s) * 0.592), calc(var(--warning-l) * 2.562));
  --error-900: hsl(calc(var(--error-h) * 0.975), calc(var(--error-s) * 0.799), calc(var(--error-l) * 0.551));
  --error-800: hsl(calc(var(--error-h) * 0.995), calc(var(--error-s) * 0.872), calc(var(--error-l) * 0.757));
  --error-700: hsl(calc(var(--error-h) * 0.999), calc(var(--error-s) * 0.907), calc(var(--error-l) * 0.874));
  --error-600: hsl(calc(var(--error-h) * 1.004), calc(var(--error-s) * 0.968), calc(var(--error-l) * 0.985));
  --error-500: var(--error);
  --error-400: hsl(calc(var(--error-h) * 1.002), calc(var(--error-s) * 0.667), calc(var(--error-l) * 1.323));
  --error-300: hsl(calc(var(--error-h) * 1), calc(var(--error-s) * 0.601), calc(var(--error-l) * 1.568));
  --error-200: hsl(calc(var(--error-h) * 0.995), calc(var(--error-s) * 0.595), calc(var(--error-l) * 1.905));
  --error-100: hsl(calc(var(--error-h) * 0.99), calc(var(--error-s) * 0.586), calc(var(--error-l) * 2.242));
  --error-50: hsl(calc(var(--error-h) * 0.99), calc(var(--error-s) * 0.592), calc(var(--error-l) * 2.562));
  --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-850: hsl(var(--gray-hue), var(--gray-sat), 16%);
  --gray-800: hsl(var(--gray-hue), var(--gray-sat), 21%);
  --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-250: hsl(var(--gray-hue), var(--gray-sat), 89%);
  --gray-100: hsl(var(--gray-hue), var(--gray-sat), 95%);
  --gray-150: hsl(var(--gray-hue), var(--gray-sat), 96%);
  --white: hsl(var(--gray-hue), var(--gray-sat), 100%);
  /************************** Opacity variations **************************/
  --primary-500_100: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 1);
  --primary-500_90: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.9);
  --primary-500_80: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.8);
  --primary-500_70: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.7);
  --primary-500_60: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.6);
  --primary-500_50: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
  --primary-500_40: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.4);
  --primary-500_30: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.3);
  --primary-500_20: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2);
  --primary-500_10: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);
  --primary-500_00: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0);
  --secondary-500_100: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 1);
  --secondary-500_90: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.9);
  --secondary-500_80: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.8);
  --secondary-500_70: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.7);
  --secondary-500_60: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.6);
  --secondary-500_50: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.5);
  --secondary-500_40: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.4);
  --secondary-500_30: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.3);
  --secondary-500_20: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.2);
  --secondary-500_10: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.1);
  --secondary-500_00: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0);
  --tertiary-500_100: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 1);
  --tertiary-500_90: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.9);
  --tertiary-500_80: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.8);
  --tertiary-500_70: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.7);
  --tertiary-500_60: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.6);
  --tertiary-500_50: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.5);
  --tertiary-500_40: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.4);
  --tertiary-500_30: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.3);
  --tertiary-500_20: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.2);
  --tertiary-500_10: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0.1);
  --tertiary-500_00: hsla(var(--tertiary-h), var(--tertiary-s), var(--tertiary-l), 0);
  --success-500_100: hsla(var(--success-h), var(--success-s), var(--success-l), 1);
  --success-500_90: hsla(var(--success-h), var(--success-s), var(--success-l), 0.9);
  --success-500_80: hsla(var(--success-h), var(--success-s), var(--success-l), 0.8);
  --success-500_70: hsla(var(--success-h), var(--success-s), var(--success-l), 0.7);
  --success-500_60: hsla(var(--success-h), var(--success-s), var(--success-l), 0.6);
  --success-500_50: hsla(var(--success-h), var(--success-s), var(--success-l), 0.5);
  --success-500_40: hsla(var(--success-h), var(--success-s), var(--success-l), 0.4);
  --success-500_30: hsla(var(--success-h), var(--success-s), var(--success-l), 0.3);
  --success-500_20: hsla(var(--success-h), var(--success-s), var(--success-l), 0.2);
  --success-500_10: hsla(var(--success-h), var(--success-s), var(--success-l), 0.1);
  --success-500_00: hsla(var(--success-h), var(--success-s), var(--success-l), 0);
  --info-500_100: hsla(var(--info-h), var(--info-s), var(--info-l), 1);
  --info-500_90: hsla(var(--info-h), var(--info-s), var(--info-l), 0.9);
  --info-500_80: hsla(var(--info-h), var(--info-s), var(--info-l), 0.8);
  --info-500_70: hsla(var(--info-h), var(--info-s), var(--info-l), 0.7);
  --info-500_60: hsla(var(--info-h), var(--info-s), var(--info-l), 0.6);
  --info-500_50: hsla(var(--info-h), var(--info-s), var(--info-l), 0.5);
  --info-500_40: hsla(var(--info-h), var(--info-s), var(--info-l), 0.4);
  --info-500_30: hsla(var(--info-h), var(--info-s), var(--info-l), 0.3);
  --info-500_20: hsla(var(--info-h), var(--info-s), var(--info-l), 0.2);
  --info-500_10: hsla(var(--info-h), var(--info-s), var(--info-l), 0.1);
  --info-500_00: hsla(var(--info-h), var(--info-s), var(--info-l), 0);
  --warning-500_100: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 1);
  --warning-500_90: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.9);
  --warning-500_80: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.8);
  --warning-500_70: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.7);
  --warning-500_60: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.6);
  --warning-500_50: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.5);
  --warning-500_40: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.4);
  --warning-500_30: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.3);
  --warning-500_20: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.2);
  --warning-500_10: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0.1);
  --warning-500_00: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 0);
  --error-500_100: hsla(var(--error-h), var(--error-s), var(--error-l), 1);
  --error-500_90: hsla(var(--error-h), var(--error-s), var(--error-l), 0.9);
  --error-500_80: hsla(var(--error-h), var(--error-s), var(--error-l), 0.8);
  --error-500_70: hsla(var(--error-h), var(--error-s), var(--error-l), 0.7);
  --error-500_60: hsla(var(--error-h), var(--error-s), var(--error-l), 0.6);
  --error-500_50: hsla(var(--error-h), var(--error-s), var(--error-l), 0.5);
  --error-500_40: hsla(var(--error-h), var(--error-s), var(--error-l), 0.4);
  --error-500_30: hsla(var(--error-h), var(--error-s), var(--error-l), 0.3);
  --error-500_20: hsla(var(--error-h), var(--error-s), var(--error-l), 0.2);
  --error-500_10: hsla(var(--error-h), var(--error-s), var(--error-l), 0.1);
  --error-500_00: hsla(var(--error-h), var(--error-s), var(--error-l), 0);
  --white_100: hsla(var(--white-h), var(--white-s), var(--white-l), 1);
  --white_90: hsla(var(--white-h), var(--white-s), var(--white-l), 0.9);
  --white_80: hsla(var(--white-h), var(--white-s), var(--white-l), 0.8);
  --white_70: hsla(var(--white-h), var(--white-s), var(--white-l), 0.7);
  --white_60: hsla(var(--white-h), var(--white-s), var(--white-l), 0.6);
  --white_50: hsla(var(--white-h), var(--white-s), var(--white-l), 0.5);
  --white_40: hsla(var(--white-h), var(--white-s), var(--white-l), 0.4);
  --white_30: hsla(var(--white-h), var(--white-s), var(--white-l), 0.3);
  --white_20: hsla(var(--white-h), var(--white-s), var(--white-l), 0.2);
  --white_10: hsla(var(--white-h), var(--white-s), var(--white-l), 0.1);
  --white_00: hsla(var(--white-h), var(--white-s), var(--white-l), 0);
  /******************************************** UI ELEMENT COLORS ********************************************/
  --header-color: var(--text-inverse);
  --header-bg: var(--primary-700);
  --footer-color: var(--text-inverse);
  --footer-bg: var(--primary-700);
  --card-back-color: var(--gray-900);
  --card-back-bg: var(--gray-100);
  --card-front-color: var(--gray-900);
  --card-front-bg: var(--gray-100);
  /******************** Button Colors ********************/
  --button-text: var(--text-inverse);
  --button-text--hover: var(--text-inverse);
  --button-background: var(--background-inverse);
  --button-background--hover: var(--highlight);
  /******************** Slide Link Colors ********************/
  --slide-link-color: var(--text-inverse);
  --slide-link-background: var(--primary-500);
  /******************** Toggle Button Colors ********************/
  --toggle-button-text: var(--gray-800);
  --toggle-button-bg: var(--gray-100);
  --toggle-button-text--hover: var(--primary);
  --toggle-button-bg--hover: var(--gray-150);
  --toggle-button--pressed-text: var(--gray-800);
  --toggle-button--pressed-bg: var(--gray-100);
  --toggle-button--pressed-text--hover: var(--primary);
  --toggle-button--pressed-bg--hover: var(--gray-150);
  /******************** Input Colors ********************/
  --input-text: var(--text);
  --input-bg: var(--background);
  --input-border: 1px solid var(--gray-700);
  /******************** Menu Colors ********************/
  --modal-bg: var(--white);
  --menu-color: var(--text);
  --menu-bg: inherit;
  --menu-panel-bg: linear-gradient(to top, var(--gray-200) 0%, var(--gray-250) 100%);
  --menu-modal-background: var(--modal-screen-bg);
  --menu-text: var(--text);
  --menu-sm-head: var(--primary);
  --menu-search-box-bg: var(--gray-100);
  --menu-color--hover: var(--primary);
  --menu-bg--hover: inherit;
  --menu-search-text: var(--white);
  --menu-search-bg: var(--white);
  --menu-search-btn-bg: var(--error);
  --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);
  --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);
  --menu-close-color: var(--white);
  --menu-close-bg: var(--black);
  --menu-close-color--hover: var(--white);
  --menu-close-bg--hover: var(--primary);
  --menu-fav: var(--gray-700);
  /******************** Social App Colors ********************/
  --social-body-bg: linear-gradient(to top, var(--gray-200) 0%, var(--gray-250) 100%);
  --social-hero-bg: var(--social-body-bg);
  --social-modal-background: var(--modal-screen-bg);
  --social-list-bg: var(--gray-150);
  --social-list-text: var(--black);
  --social-list-notes-bg: var(--white);
  --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-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-msg-bg: var(--white);
  --social-msg-reply-bg: var(--white);
  --social-msg-own-highlight: var(--secondary);
  --social-msg-own-bg: var(--primary-500_10);
  --social-msg-own-text: var(--text);
  --social-msg-own-user: var(--social-msg-own-highlight);
  --social-msg-grp-highlight: var(--primary);
  --social-msg-grp-bg: var(--secondary-500_10);
  --social-msg-grp-text: var(--text);
  --social-msg-grp-user: var(--social-msg-grp-highlight);
  --social-notes-bg: transparentize(#ececc1, 0.3);
}

/************** Color Contrast: Black/White **************/
body#cbook-body.contrast--blackwhite,
body#extension-body.contrast--blackwhite {
  --primary: var(--contrast-black);
  --secondary: var(--contrast-black);
  --tertiary: var(--contrast-black);
  --success: var(--contrast-black);
  --warning: var(--contrast-black);
  --error: var(--contrast-black);
  --info: var(--contrast-black);
  --text: var(--contrast-black);
  --highlight: var(--contrast-black);
  --background-inverse: var(--contrast-black);
  --black: var(--contrast-black);
  --text-inverse: var(--contrast-white);
  --background: var(--contrast-white);
  --white: var(--contrast-white);
  --focus-color: var(--contrast-white);
  --primary-500: var(--contrast-black);
  --primary-600: var(--contrast-black);
  --primary-700: var(--contrast-black);
  --primary-800: var(--contrast-black);
  --primary-900: var(--contrast-black);
  --secondary-500: var(--contrast-black);
  --secondary-600: var(--contrast-black);
  --secondary-700: var(--contrast-black);
  --secondary-800: var(--contrast-black);
  --secondary-900: var(--contrast-black);
  --tertiary-500: var(--contrast-black);
  --tertiary-600: var(--contrast-black);
  --tertiary-700: var(--contrast-black);
  --tertiary-800: var(--contrast-black);
  --tertiary-900: var(--contrast-black);
  --success-500: var(--contrast-black);
  --success-600: var(--contrast-black);
  --success-700: var(--contrast-black);
  --success-800: var(--contrast-black);
  --success-900: var(--contrast-black);
  --warning-500: var(--contrast-black);
  --warning-600: var(--contrast-black);
  --warning-700: var(--contrast-black);
  --warning-800: var(--contrast-black);
  --warning-900: var(--contrast-black);
  --error-500: var(--contrast-black);
  --error-600: var(--contrast-black);
  --error-700: var(--contrast-black);
  --error-800: var(--contrast-black);
  --error-900: var(--contrast-black);
  --info-500: var(--contrast-black);
  --info-600: var(--contrast-black);
  --info-700: var(--contrast-black);
  --info-800: var(--contrast-black);
  --info-900: var(--contrast-black);
  --gray-500: var(--contrast-black);
  --gray-600: var(--contrast-black);
  --gray-700: var(--contrast-black);
  --gray-800: var(--contrast-black);
  --gray-900: var(--contrast-black);
  --gray-950: var(--contrast-black);
  --primary-50: var(--contrast-white);
  --primary-100: var(--contrast-white);
  --primary-200: var(--contrast-white);
  --primary-300: var(--contrast-white);
  --primary-400: var(--contrast-white);
  --secondary-50: var(--contrast-white);
  --secondary-100: var(--contrast-white);
  --secondary-200: var(--contrast-white);
  --secondary-300: var(--contrast-white);
  --secondary-400: var(--contrast-white);
  --tertiary-50: var(--contrast-white);
  --tertiary-100: var(--contrast-white);
  --tertiary-200: var(--contrast-white);
  --tertiary-300: var(--contrast-white);
  --tertiary-400: var(--contrast-white);
  --success-50: var(--contrast-white);
  --success-100: var(--contrast-white);
  --success-200: var(--contrast-white);
  --success-300: var(--contrast-white);
  --success-400: var(--contrast-white);
  --warning-50: var(--contrast-white);
  --warning-100: var(--contrast-white);
  --warning-200: var(--contrast-white);
  --warning-300: var(--contrast-white);
  --warning-400: var(--contrast-white);
  --error-50: var(--contrast-white);
  --error-100: var(--contrast-white);
  --error-200: var(--contrast-white);
  --error-300: var(--contrast-white);
  --error-400: var(--contrast-white);
  --info-50: var(--contrast-white);
  --info-100: var(--contrast-white);
  --info-200: var(--contrast-white);
  --info-300: var(--contrast-white);
  --info-400: var(--contrast-white);
  --gray-50: var(--contrast-white);
  --gray-100: var(--contrast-white);
  --gray-150: var(--contrast-white);
  --gray-200: var(--contrast-white);
  --gray-250: var(--contrast-white);
  --gray-300: var(--contrast-white);
  --gray-350: var(--contrast-white);
  --gray-400: var(--contrast-white);
  --primary-500_10: var(--contrast-white);
  --primary-500_20: var(--contrast-white);
  --primary-500_30: var(--contrast-white);
  --primary-500_40: var(--contrast-white);
  --primary-500_50: var(--contrast-white);
  --primary-500_60: var(--contrast-black);
  --primary-500_70: var(--contrast-black);
  --primary-500_80: var(--contrast-black);
  --primary-500_90: var(--contrast-black);
  --primary-500_100: var(--contrast-black);
  --secondary-500_10: var(--contrast-white);
  --secondary-500_20: var(--contrast-white);
  --secondary-500_30: var(--contrast-white);
  --secondary-500_40: var(--contrast-white);
  --secondary-500_50: var(--contrast-white);
  --secondary-500_60: var(--contrast-black);
  --secondary-500_70: var(--contrast-black);
  --secondary-500_80: var(--contrast-black);
  --secondary-500_90: var(--contrast-black);
  --secondary-500_100: var(--contrast-black);
  --tertiary-500_10: var(--contrast-white);
  --tertiary-500_20: var(--contrast-white);
  --tertiary-500_30: var(--contrast-white);
  --tertiary-500_40: var(--contrast-white);
  --tertiary-500_50: var(--contrast-white);
  --tertiary-500_60: var(--contrast-black);
  --tertiary-500_70: var(--contrast-black);
  --tertiary-500_80: var(--contrast-black);
  --tertiary-500_90: var(--contrast-black);
  --tertiary-500_100: var(--contrast-black);
  --success-500_10: var(--contrast-white);
  --success-500_20: var(--contrast-white);
  --success-500_30: var(--contrast-white);
  --success-500_40: var(--contrast-white);
  --success-500_50: var(--contrast-white);
  --success-500_60: var(--contrast-black);
  --success-500_70: var(--contrast-black);
  --success-500_80: var(--contrast-black);
  --success-500_90: var(--contrast-black);
  --success-500_100: var(--contrast-black);
  --warning-500_10: var(--contrast-white);
  --warning-500_20: var(--contrast-white);
  --warning-500_30: var(--contrast-white);
  --warning-500_40: var(--contrast-white);
  --warning-500_50: var(--contrast-white);
  --warning-500_60: var(--contrast-black);
  --warning-500_70: var(--contrast-black);
  --warning-500_80: var(--contrast-black);
  --warning-500_90: var(--contrast-black);
  --warning-500_100: var(--contrast-black);
  --error-500_10: var(--contrast-white);
  --error-500_20: var(--contrast-white);
  --error-500_30: var(--contrast-white);
  --error-500_40: var(--contrast-white);
  --error-500_50: var(--contrast-white);
  --error-500_60: var(--contrast-black);
  --error-500_70: var(--contrast-black);
  --error-500_80: var(--contrast-black);
  --error-500_90: var(--contrast-black);
  --error-500_100: var(--contrast-black);
  --info-500_10: var(--contrast-white);
  --info-500_20: var(--contrast-white);
  --info-500_30: var(--contrast-white);
  --info-500_40: var(--contrast-white);
  --info-500_50: var(--contrast-white);
  --info-500_60: var(--contrast-black);
  --info-500_70: var(--contrast-black);
  --info-500_80: var(--contrast-black);
  --info-500_90: var(--contrast-black);
  --info-500_100: var(--contrast-black);
  /******************************************** UI ELEMENT COLORS ********************************************/
  --header-bg: var(--contrast-black);
  --header-color: var(--contrast-white);
  --footer-bg: var(--contrast-black);
  --footer-color: 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);
  /******************** Button Colors ********************/
  --button-text: var(--text-inverse);
  --button-text--hover: var(--text-inverse);
  --button-background: var(--background-inverse);
  --button-background--hover: var(--highlight);
  /******************** Slide Link Colors ********************/
  --slide-link-color: var(--text-inverse);
  --slide-link-background: var(--primary-500);
  /******************** Toggle Button Colors ********************/
  --toggle-button-text: var(--gray-800);
  --toggle-button-bg: var(--gray-100);
  --toggle-button-text--hover: var(--primary);
  --toggle-button-bg--hover: var(--gray-150);
  --toggle-button--pressed-text: var(--gray-800);
  --toggle-button--pressed-bg: var(--gray-100);
  --toggle-button--pressed-text--hover: var(--primary);
  --toggle-button--pressed-bg--hover: var(--gray-150);
  /******************** Input Colors ********************/
  --input-text: var(--text);
  --input-bg: var(--background);
  --input-border: 1px solid var(--gray-700);
  /******************** Menu Colors ********************/
  --modal-bg: var(--white);
  --menu-color: var(--text);
  --menu-bg: inherit;
  --menu-panel-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --menu-modal-background: var(--modal-screen-bg);
  --menu-text: var(--text);
  --menu-sm-head: var(--primary);
  --menu-search-box-bg: var(--gray-100);
  --menu-color--hover: var(--primary);
  --menu-bg--hover: inherit;
  --menu-search-text: var(--white);
  --menu-search-bg: var(--white);
  --menu-search-btn-bg: var(--error);
  --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);
  --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);
  --menu-close-color: var(--white);
  --menu-close-bg: var(--black);
  --menu-close-color--hover: var(--white);
  --menu-close-bg--hover: var(--primary);
  --menu-fav: var(--gray-700);
  /******************** Social App Colors ********************/
  --social-body-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --social-hero-bg: var(--social-body-bg);
  --social-modal-background: var(--modal-screen-bg);
  --social-list-bg: var(--gray-150);
  --social-list-text: var(--black);
  --social-list-notes-bg: var(--white);
  --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-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-msg-bg: var(--white);
  --social-msg-reply-bg: var(--white);
  --social-msg-own-highlight: var(--secondary);
  --social-msg-own-bg: var(--primary-500_10);
  --social-msg-own-text: var(--text);
  --social-msg-own-user: var(--social-msg-own-highlight);
  --social-msg-grp-highlight: var(--primary);
  --social-msg-grp-bg: var(--secondary-500_10);
  --social-msg-grp-text: var(--text);
  --social-msg-grp-user: var(--social-msg-grp-highlight);
  --social-notes-bg: transparentize(#ececc1, 0.3);
}

/************** Color Contrast: White/Black **************/
body#cbook-body.contrast--whiteblack,
body#extension-body.contrast--whiteblack {
  --primary: var(--contrast-white);
  --secondary: var(--contrast-white);
  --tertiary: var(--contrast-white);
  --success: var(--contrast-white);
  --warning: var(--contrast-white);
  --error: var(--contrast-white);
  --info: var(--contrast-white);
  --text: var(--contrast-white);
  --highlight: var(--contrast-white);
  --background-inverse: var(--contrast-white);
  --black: var(--contrast-white);
  --text-inverse: var(--contrast-black);
  --background: var(--contrast-black);
  --white: var(--contrast-black);
  --focus-color: var(--contrast-black);
  --primary-500: var(--contrast-white);
  --primary-600: var(--contrast-white);
  --primary-700: var(--contrast-white);
  --primary-800: var(--contrast-white);
  --primary-900: var(--contrast-white);
  --secondary-500: var(--contrast-white);
  --secondary-600: var(--contrast-white);
  --secondary-700: var(--contrast-white);
  --secondary-800: var(--contrast-white);
  --secondary-900: var(--contrast-white);
  --tertiary-500: var(--contrast-white);
  --tertiary-600: var(--contrast-white);
  --tertiary-700: var(--contrast-white);
  --tertiary-800: var(--contrast-white);
  --tertiary-900: var(--contrast-white);
  --success-500: var(--contrast-white);
  --success-600: var(--contrast-white);
  --success-700: var(--contrast-white);
  --success-800: var(--contrast-white);
  --success-900: var(--contrast-white);
  --warning-500: var(--contrast-white);
  --warning-600: var(--contrast-white);
  --warning-700: var(--contrast-white);
  --warning-800: var(--contrast-white);
  --warning-900: var(--contrast-white);
  --error-500: var(--contrast-white);
  --error-600: var(--contrast-white);
  --error-700: var(--contrast-white);
  --error-800: var(--contrast-white);
  --error-900: var(--contrast-white);
  --info-500: var(--contrast-white);
  --info-600: var(--contrast-white);
  --info-700: var(--contrast-white);
  --info-800: var(--contrast-white);
  --info-900: var(--contrast-white);
  --gray-500: var(--contrast-white);
  --gray-600: var(--contrast-white);
  --gray-700: var(--contrast-white);
  --gray-800: var(--contrast-white);
  --gray-900: var(--contrast-white);
  --gray-950: var(--contrast-white);
  --primary-50: var(--contrast-black);
  --primary-100: var(--contrast-black);
  --primary-200: var(--contrast-black);
  --primary-300: var(--contrast-black);
  --primary-400: var(--contrast-black);
  --secondary-50: var(--contrast-black);
  --secondary-100: var(--contrast-black);
  --secondary-200: var(--contrast-black);
  --secondary-300: var(--contrast-black);
  --secondary-400: var(--contrast-black);
  --tertiary-50: var(--contrast-black);
  --tertiary-100: var(--contrast-black);
  --tertiary-200: var(--contrast-black);
  --tertiary-300: var(--contrast-black);
  --tertiary-400: var(--contrast-black);
  --success-50: var(--contrast-black);
  --success-100: var(--contrast-black);
  --success-200: var(--contrast-black);
  --success-300: var(--contrast-black);
  --success-400: var(--contrast-black);
  --warning-50: var(--contrast-black);
  --warning-100: var(--contrast-black);
  --warning-200: var(--contrast-black);
  --warning-300: var(--contrast-black);
  --warning-400: var(--contrast-black);
  --error-50: var(--contrast-black);
  --error-100: var(--contrast-black);
  --error-200: var(--contrast-black);
  --error-300: var(--contrast-black);
  --error-400: var(--contrast-black);
  --info-50: var(--contrast-black);
  --info-100: var(--contrast-black);
  --info-200: var(--contrast-black);
  --info-300: var(--contrast-black);
  --info-400: var(--contrast-black);
  --gray-50: var(--contrast-black);
  --gray-100: var(--contrast-black);
  --gray-150: var(--contrast-black);
  --gray-200: var(--contrast-black);
  --gray-250: var(--contrast-black);
  --gray-300: var(--contrast-black);
  --gray-350: var(--contrast-black);
  --gray-400: var(--contrast-black);
  --primary-500_10: var(--contrast-black);
  --primary-500_20: var(--contrast-black);
  --primary-500_30: var(--contrast-black);
  --primary-500_40: var(--contrast-black);
  --primary-500_50: var(--contrast-black);
  --primary-500_60: var(--contrast-white);
  --primary-500_70: var(--contrast-white);
  --primary-500_80: var(--contrast-white);
  --primary-500_90: var(--contrast-white);
  --primary-500_100: var(--contrast-white);
  --secondary-500_10: var(--contrast-black);
  --secondary-500_20: var(--contrast-black);
  --secondary-500_30: var(--contrast-black);
  --secondary-500_40: var(--contrast-black);
  --secondary-500_50: var(--contrast-black);
  --secondary-500_60: var(--contrast-white);
  --secondary-500_70: var(--contrast-white);
  --secondary-500_80: var(--contrast-white);
  --secondary-500_90: var(--contrast-white);
  --secondary-500_100: var(--contrast-white);
  --tertiary-500_10: var(--contrast-black);
  --tertiary-500_20: var(--contrast-black);
  --tertiary-500_30: var(--contrast-black);
  --tertiary-500_40: var(--contrast-black);
  --tertiary-500_50: var(--contrast-black);
  --tertiary-500_60: var(--contrast-white);
  --tertiary-500_70: var(--contrast-white);
  --tertiary-500_80: var(--contrast-white);
  --tertiary-500_90: var(--contrast-white);
  --tertiary-500_100: var(--contrast-white);
  --success-500_10: var(--contrast-black);
  --success-500_20: var(--contrast-black);
  --success-500_30: var(--contrast-black);
  --success-500_40: var(--contrast-black);
  --success-500_50: var(--contrast-black);
  --success-500_60: var(--contrast-white);
  --success-500_70: var(--contrast-white);
  --success-500_80: var(--contrast-white);
  --success-500_90: var(--contrast-white);
  --success-500_100: var(--contrast-white);
  --warning-500_10: var(--contrast-black);
  --warning-500_20: var(--contrast-black);
  --warning-500_30: var(--contrast-black);
  --warning-500_40: var(--contrast-black);
  --warning-500_50: var(--contrast-black);
  --warning-500_60: var(--contrast-white);
  --warning-500_70: var(--contrast-white);
  --warning-500_80: var(--contrast-white);
  --warning-500_90: var(--contrast-white);
  --warning-500_100: var(--contrast-white);
  --error-500_10: var(--contrast-black);
  --error-500_20: var(--contrast-black);
  --error-500_30: var(--contrast-black);
  --error-500_40: var(--contrast-black);
  --error-500_50: var(--contrast-black);
  --error-500_60: var(--contrast-white);
  --error-500_70: var(--contrast-white);
  --error-500_80: var(--contrast-white);
  --error-500_90: var(--contrast-white);
  --error-500_100: var(--contrast-white);
  --info-500_10: var(--contrast-black);
  --info-500_20: var(--contrast-black);
  --info-500_30: var(--contrast-black);
  --info-500_40: var(--contrast-black);
  --info-500_50: var(--contrast-black);
  --info-500_60: var(--contrast-white);
  --info-500_70: var(--contrast-white);
  --info-500_80: var(--contrast-white);
  --info-500_90: var(--contrast-white);
  --info-500_100: var(--contrast-white);
  /******************************************** UI ELEMENT COLORS ********************************************/
  --header-bg: var(--contrast-white);
  --header-color: var(--contrast-black);
  --footer-bg: var(--contrast-white);
  --footer-color: 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);
  /******************** Button Colors ********************/
  --button-text: var(--text-inverse);
  --button-text--hover: var(--text-inverse);
  --button-background: var(--background-inverse);
  --button-background--hover: var(--highlight);
  /******************** Slide Link Colors ********************/
  --slide-link-color: var(--text-inverse);
  --slide-link-background: var(--primary-500);
  /******************** Toggle Button Colors ********************/
  --toggle-button-text: var(--gray-800);
  --toggle-button-bg: var(--gray-100);
  --toggle-button-text--hover: var(--primary);
  --toggle-button-bg--hover: var(--gray-150);
  --toggle-button--pressed-text: var(--gray-800);
  --toggle-button--pressed-bg: var(--gray-100);
  --toggle-button--pressed-text--hover: var(--primary);
  --toggle-button--pressed-bg--hover: var(--gray-150);
  /******************** Input Colors ********************/
  --input-text: var(--text);
  --input-bg: var(--background);
  --input-border: 1px solid var(--gray-700);
  /******************** Menu Colors ********************/
  --modal-bg: var(--white);
  --menu-color: var(--text);
  --menu-bg: inherit;
  --menu-panel-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --menu-modal-background: var(--modal-screen-bg);
  --menu-text: var(--text);
  --menu-sm-head: var(--primary);
  --menu-search-box-bg: var(--gray-100);
  --menu-color--hover: var(--primary);
  --menu-bg--hover: inherit;
  --menu-search-text: var(--white);
  --menu-search-bg: var(--white);
  --menu-search-btn-bg: var(--error);
  --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);
  --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);
  --menu-close-color: var(--white);
  --menu-close-bg: var(--black);
  --menu-close-color--hover: var(--white);
  --menu-close-bg--hover: var(--primary);
  --menu-fav: var(--gray-700);
  /******************** Social App Colors ********************/
  --social-body-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --social-hero-bg: var(--social-body-bg);
  --social-modal-background: var(--modal-screen-bg);
  --social-list-bg: var(--gray-150);
  --social-list-text: var(--black);
  --social-list-notes-bg: var(--white);
  --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-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-msg-bg: var(--white);
  --social-msg-reply-bg: var(--white);
  --social-msg-own-highlight: var(--secondary);
  --social-msg-own-bg: var(--primary-500_10);
  --social-msg-own-text: var(--text);
  --social-msg-own-user: var(--social-msg-own-highlight);
  --social-msg-grp-highlight: var(--primary);
  --social-msg-grp-bg: var(--secondary-500_10);
  --social-msg-grp-text: var(--text);
  --social-msg-grp-user: var(--social-msg-grp-highlight);
  --social-notes-bg: transparentize(#ececc1, 0.3);
}

/************** Color Contrast: Green/Black **************/
body#cbook-body.contrast--greenblack,
body#extension-body.contrast--greenblack {
  --primary: var(--contrast-green);
  --secondary: var(--contrast-green);
  --tertiary: var(--contrast-green);
  --success: var(--contrast-green);
  --warning: var(--contrast-green);
  --error: var(--contrast-green);
  --info: var(--contrast-green);
  --text: var(--contrast-green);
  --highlight: var(--contrast-green);
  --background-inverse: var(--contrast-green);
  --black: var(--contrast-green);
  --text-inverse: var(--contrast-black);
  --background: var(--contrast-black);
  --white: var(--contrast-black);
  --focus-color: var(--contrast-black);
  --primary-500: var(--contrast-green);
  --primary-600: var(--contrast-green);
  --primary-700: var(--contrast-green);
  --primary-800: var(--contrast-green);
  --primary-900: var(--contrast-green);
  --secondary-500: var(--contrast-green);
  --secondary-600: var(--contrast-green);
  --secondary-700: var(--contrast-green);
  --secondary-800: var(--contrast-green);
  --secondary-900: var(--contrast-green);
  --tertiary-500: var(--contrast-green);
  --tertiary-600: var(--contrast-green);
  --tertiary-700: var(--contrast-green);
  --tertiary-800: var(--contrast-green);
  --tertiary-900: var(--contrast-green);
  --success-500: var(--contrast-green);
  --success-600: var(--contrast-green);
  --success-700: var(--contrast-green);
  --success-800: var(--contrast-green);
  --success-900: var(--contrast-green);
  --warning-500: var(--contrast-green);
  --warning-600: var(--contrast-green);
  --warning-700: var(--contrast-green);
  --warning-800: var(--contrast-green);
  --warning-900: var(--contrast-green);
  --error-500: var(--contrast-green);
  --error-600: var(--contrast-green);
  --error-700: var(--contrast-green);
  --error-800: var(--contrast-green);
  --error-900: var(--contrast-green);
  --info-500: var(--contrast-green);
  --info-600: var(--contrast-green);
  --info-700: var(--contrast-green);
  --info-800: var(--contrast-green);
  --info-900: var(--contrast-green);
  --gray-500: var(--contrast-green);
  --gray-600: var(--contrast-green);
  --gray-700: var(--contrast-green);
  --gray-800: var(--contrast-green);
  --gray-900: var(--contrast-green);
  --gray-950: var(--contrast-green);
  --primary-50: var(--contrast-black);
  --primary-100: var(--contrast-black);
  --primary-200: var(--contrast-black);
  --primary-300: var(--contrast-black);
  --primary-400: var(--contrast-black);
  --secondary-50: var(--contrast-black);
  --secondary-100: var(--contrast-black);
  --secondary-200: var(--contrast-black);
  --secondary-300: var(--contrast-black);
  --secondary-400: var(--contrast-black);
  --tertiary-50: var(--contrast-black);
  --tertiary-100: var(--contrast-black);
  --tertiary-200: var(--contrast-black);
  --tertiary-300: var(--contrast-black);
  --tertiary-400: var(--contrast-black);
  --success-50: var(--contrast-black);
  --success-100: var(--contrast-black);
  --success-200: var(--contrast-black);
  --success-300: var(--contrast-black);
  --success-400: var(--contrast-black);
  --warning-50: var(--contrast-black);
  --warning-100: var(--contrast-black);
  --warning-200: var(--contrast-black);
  --warning-300: var(--contrast-black);
  --warning-400: var(--contrast-black);
  --error-50: var(--contrast-black);
  --error-100: var(--contrast-black);
  --error-200: var(--contrast-black);
  --error-300: var(--contrast-black);
  --error-400: var(--contrast-black);
  --info-50: var(--contrast-black);
  --info-100: var(--contrast-black);
  --info-200: var(--contrast-black);
  --info-300: var(--contrast-black);
  --info-400: var(--contrast-black);
  --gray-50: var(--contrast-black);
  --gray-100: var(--contrast-black);
  --gray-150: var(--contrast-black);
  --gray-200: var(--contrast-black);
  --gray-250: var(--contrast-black);
  --gray-300: var(--contrast-black);
  --gray-350: var(--contrast-black);
  --gray-400: var(--contrast-black);
  --primary-500_10: var(--contrast-black);
  --primary-500_20: var(--contrast-black);
  --primary-500_30: var(--contrast-black);
  --primary-500_40: var(--contrast-black);
  --primary-500_50: var(--contrast-black);
  --primary-500_60: var(--contrast-green);
  --primary-500_70: var(--contrast-green);
  --primary-500_80: var(--contrast-green);
  --primary-500_90: var(--contrast-green);
  --primary-500_100: var(--contrast-green);
  --secondary-500_10: var(--contrast-black);
  --secondary-500_20: var(--contrast-black);
  --secondary-500_30: var(--contrast-black);
  --secondary-500_40: var(--contrast-black);
  --secondary-500_50: var(--contrast-black);
  --secondary-500_60: var(--contrast-green);
  --secondary-500_70: var(--contrast-green);
  --secondary-500_80: var(--contrast-green);
  --secondary-500_90: var(--contrast-green);
  --secondary-500_100: var(--contrast-green);
  --tertiary-500_10: var(--contrast-black);
  --tertiary-500_20: var(--contrast-black);
  --tertiary-500_30: var(--contrast-black);
  --tertiary-500_40: var(--contrast-black);
  --tertiary-500_50: var(--contrast-black);
  --tertiary-500_60: var(--contrast-green);
  --tertiary-500_70: var(--contrast-green);
  --tertiary-500_80: var(--contrast-green);
  --tertiary-500_90: var(--contrast-green);
  --tertiary-500_100: var(--contrast-green);
  --success-500_10: var(--contrast-black);
  --success-500_20: var(--contrast-black);
  --success-500_30: var(--contrast-black);
  --success-500_40: var(--contrast-black);
  --success-500_50: var(--contrast-black);
  --success-500_60: var(--contrast-green);
  --success-500_70: var(--contrast-green);
  --success-500_80: var(--contrast-green);
  --success-500_90: var(--contrast-green);
  --success-500_100: var(--contrast-green);
  --warning-500_10: var(--contrast-black);
  --warning-500_20: var(--contrast-black);
  --warning-500_30: var(--contrast-black);
  --warning-500_40: var(--contrast-black);
  --warning-500_50: var(--contrast-black);
  --warning-500_60: var(--contrast-green);
  --warning-500_70: var(--contrast-green);
  --warning-500_80: var(--contrast-green);
  --warning-500_90: var(--contrast-green);
  --warning-500_100: var(--contrast-green);
  --error-500_10: var(--contrast-black);
  --error-500_20: var(--contrast-black);
  --error-500_30: var(--contrast-black);
  --error-500_40: var(--contrast-black);
  --error-500_50: var(--contrast-black);
  --error-500_60: var(--contrast-green);
  --error-500_70: var(--contrast-green);
  --error-500_80: var(--contrast-green);
  --error-500_90: var(--contrast-green);
  --error-500_100: var(--contrast-green);
  --info-500_10: var(--contrast-black);
  --info-500_20: var(--contrast-black);
  --info-500_30: var(--contrast-black);
  --info-500_40: var(--contrast-black);
  --info-500_50: var(--contrast-black);
  --info-500_60: var(--contrast-green);
  --info-500_70: var(--contrast-green);
  --info-500_80: var(--contrast-green);
  --info-500_90: var(--contrast-green);
  --info-500_100: var(--contrast-green);
  /******************************************** UI ELEMENT COLORS ********************************************/
  --header-bg: var(--contrast-green);
  --header-color: var(--contrast-black);
  --footer-bg: var(--contrast-green);
  --footer-color: 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);
  /******************** Button Colors ********************/
  --button-text: var(--text-inverse);
  --button-text--hover: var(--text-inverse);
  --button-background: var(--background-inverse);
  --button-background--hover: var(--highlight);
  /******************** Slide Link Colors ********************/
  --slide-link-color: var(--text-inverse);
  --slide-link-background: var(--primary-500);
  /******************** Toggle Button Colors ********************/
  --toggle-button-text: var(--gray-800);
  --toggle-button-bg: var(--gray-100);
  --toggle-button-text--hover: var(--primary);
  --toggle-button-bg--hover: var(--gray-150);
  --toggle-button--pressed-text: var(--gray-800);
  --toggle-button--pressed-bg: var(--gray-100);
  --toggle-button--pressed-text--hover: var(--primary);
  --toggle-button--pressed-bg--hover: var(--gray-150);
  /******************** Input Colors ********************/
  --input-text: var(--text);
  --input-bg: var(--background);
  --input-border: 1px solid var(--gray-700);
  /******************** Menu Colors ********************/
  --modal-bg: var(--white);
  --menu-color: var(--text);
  --menu-bg: inherit;
  --menu-panel-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --menu-modal-background: var(--modal-screen-bg);
  --menu-text: var(--text);
  --menu-sm-head: var(--primary);
  --menu-search-box-bg: var(--gray-100);
  --menu-color--hover: var(--primary);
  --menu-bg--hover: inherit;
  --menu-search-text: var(--white);
  --menu-search-bg: var(--white);
  --menu-search-btn-bg: var(--error);
  --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);
  --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);
  --menu-close-color: var(--white);
  --menu-close-bg: var(--black);
  --menu-close-color--hover: var(--white);
  --menu-close-bg--hover: var(--primary);
  --menu-fav: var(--gray-700);
  /******************** Social App Colors ********************/
  --social-body-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --social-hero-bg: var(--social-body-bg);
  --social-modal-background: var(--modal-screen-bg);
  --social-list-bg: var(--gray-150);
  --social-list-text: var(--black);
  --social-list-notes-bg: var(--white);
  --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-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-msg-bg: var(--white);
  --social-msg-reply-bg: var(--white);
  --social-msg-own-highlight: var(--secondary);
  --social-msg-own-bg: var(--primary-500_10);
  --social-msg-own-text: var(--text);
  --social-msg-own-user: var(--social-msg-own-highlight);
  --social-msg-grp-highlight: var(--primary);
  --social-msg-grp-bg: var(--secondary-500_10);
  --social-msg-grp-text: var(--text);
  --social-msg-grp-user: var(--social-msg-grp-highlight);
  --social-notes-bg: transparentize(#ececc1, 0.3);
}

/************** Color Contrast: Red/Cyan **************/
body#cbook-body.contrast--redcyan,
body#extension-body.contrast--redcyan {
  --primary: var(--contrast-red);
  --secondary: var(--contrast-red);
  --tertiary: var(--contrast-red);
  --success: var(--contrast-red);
  --warning: var(--contrast-red);
  --error: var(--contrast-red);
  --info: var(--contrast-red);
  --text: var(--contrast-red);
  --highlight: var(--contrast-red);
  --background-inverse: var(--contrast-red);
  --black: var(--contrast-red);
  --text-inverse: var(--contrast-cyan);
  --background: var(--contrast-cyan);
  --white: var(--contrast-cyan);
  --focus-color: var(--contrast-cyan);
  --primary-500: var(--contrast-red);
  --primary-600: var(--contrast-red);
  --primary-700: var(--contrast-red);
  --primary-800: var(--contrast-red);
  --primary-900: var(--contrast-red);
  --secondary-500: var(--contrast-red);
  --secondary-600: var(--contrast-red);
  --secondary-700: var(--contrast-red);
  --secondary-800: var(--contrast-red);
  --secondary-900: var(--contrast-red);
  --tertiary-500: var(--contrast-red);
  --tertiary-600: var(--contrast-red);
  --tertiary-700: var(--contrast-red);
  --tertiary-800: var(--contrast-red);
  --tertiary-900: var(--contrast-red);
  --success-500: var(--contrast-red);
  --success-600: var(--contrast-red);
  --success-700: var(--contrast-red);
  --success-800: var(--contrast-red);
  --success-900: var(--contrast-red);
  --warning-500: var(--contrast-red);
  --warning-600: var(--contrast-red);
  --warning-700: var(--contrast-red);
  --warning-800: var(--contrast-red);
  --warning-900: var(--contrast-red);
  --error-500: var(--contrast-red);
  --error-600: var(--contrast-red);
  --error-700: var(--contrast-red);
  --error-800: var(--contrast-red);
  --error-900: var(--contrast-red);
  --info-500: var(--contrast-red);
  --info-600: var(--contrast-red);
  --info-700: var(--contrast-red);
  --info-800: var(--contrast-red);
  --info-900: var(--contrast-red);
  --gray-500: var(--contrast-red);
  --gray-600: var(--contrast-red);
  --gray-700: var(--contrast-red);
  --gray-800: var(--contrast-red);
  --gray-900: var(--contrast-red);
  --gray-950: var(--contrast-red);
  --primary-50: var(--contrast-cyan);
  --primary-100: var(--contrast-cyan);
  --primary-200: var(--contrast-cyan);
  --primary-300: var(--contrast-cyan);
  --primary-400: var(--contrast-cyan);
  --secondary-50: var(--contrast-cyan);
  --secondary-100: var(--contrast-cyan);
  --secondary-200: var(--contrast-cyan);
  --secondary-300: var(--contrast-cyan);
  --secondary-400: var(--contrast-cyan);
  --tertiary-50: var(--contrast-cyan);
  --tertiary-100: var(--contrast-cyan);
  --tertiary-200: var(--contrast-cyan);
  --tertiary-300: var(--contrast-cyan);
  --tertiary-400: var(--contrast-cyan);
  --success-50: var(--contrast-cyan);
  --success-100: var(--contrast-cyan);
  --success-200: var(--contrast-cyan);
  --success-300: var(--contrast-cyan);
  --success-400: var(--contrast-cyan);
  --warning-50: var(--contrast-cyan);
  --warning-100: var(--contrast-cyan);
  --warning-200: var(--contrast-cyan);
  --warning-300: var(--contrast-cyan);
  --warning-400: var(--contrast-cyan);
  --error-50: var(--contrast-cyan);
  --error-100: var(--contrast-cyan);
  --error-200: var(--contrast-cyan);
  --error-300: var(--contrast-cyan);
  --error-400: var(--contrast-cyan);
  --info-50: var(--contrast-cyan);
  --info-100: var(--contrast-cyan);
  --info-200: var(--contrast-cyan);
  --info-300: var(--contrast-cyan);
  --info-400: var(--contrast-cyan);
  --gray-50: var(--contrast-cyan);
  --gray-100: var(--contrast-cyan);
  --gray-150: var(--contrast-cyan);
  --gray-200: var(--contrast-cyan);
  --gray-250: var(--contrast-cyan);
  --gray-300: var(--contrast-cyan);
  --gray-350: var(--contrast-cyan);
  --gray-400: var(--contrast-cyan);
  --primary-500_10: var(--contrast-cyan);
  --primary-500_20: var(--contrast-cyan);
  --primary-500_30: var(--contrast-cyan);
  --primary-500_40: var(--contrast-cyan);
  --primary-500_50: var(--contrast-cyan);
  --primary-500_60: var(--contrast-red);
  --primary-500_70: var(--contrast-red);
  --primary-500_80: var(--contrast-red);
  --primary-500_90: var(--contrast-red);
  --primary-500_100: var(--contrast-red);
  --secondary-500_10: var(--contrast-cyan);
  --secondary-500_20: var(--contrast-cyan);
  --secondary-500_30: var(--contrast-cyan);
  --secondary-500_40: var(--contrast-cyan);
  --secondary-500_50: var(--contrast-cyan);
  --secondary-500_60: var(--contrast-red);
  --secondary-500_70: var(--contrast-red);
  --secondary-500_80: var(--contrast-red);
  --secondary-500_90: var(--contrast-red);
  --secondary-500_100: var(--contrast-red);
  --tertiary-500_10: var(--contrast-cyan);
  --tertiary-500_20: var(--contrast-cyan);
  --tertiary-500_30: var(--contrast-cyan);
  --tertiary-500_40: var(--contrast-cyan);
  --tertiary-500_50: var(--contrast-cyan);
  --tertiary-500_60: var(--contrast-red);
  --tertiary-500_70: var(--contrast-red);
  --tertiary-500_80: var(--contrast-red);
  --tertiary-500_90: var(--contrast-red);
  --tertiary-500_100: var(--contrast-red);
  --success-500_10: var(--contrast-cyan);
  --success-500_20: var(--contrast-cyan);
  --success-500_30: var(--contrast-cyan);
  --success-500_40: var(--contrast-cyan);
  --success-500_50: var(--contrast-cyan);
  --success-500_60: var(--contrast-red);
  --success-500_70: var(--contrast-red);
  --success-500_80: var(--contrast-red);
  --success-500_90: var(--contrast-red);
  --success-500_100: var(--contrast-red);
  --warning-500_10: var(--contrast-cyan);
  --warning-500_20: var(--contrast-cyan);
  --warning-500_30: var(--contrast-cyan);
  --warning-500_40: var(--contrast-cyan);
  --warning-500_50: var(--contrast-cyan);
  --warning-500_60: var(--contrast-red);
  --warning-500_70: var(--contrast-red);
  --warning-500_80: var(--contrast-red);
  --warning-500_90: var(--contrast-red);
  --warning-500_100: var(--contrast-red);
  --error-500_10: var(--contrast-cyan);
  --error-500_20: var(--contrast-cyan);
  --error-500_30: var(--contrast-cyan);
  --error-500_40: var(--contrast-cyan);
  --error-500_50: var(--contrast-cyan);
  --error-500_60: var(--contrast-red);
  --error-500_70: var(--contrast-red);
  --error-500_80: var(--contrast-red);
  --error-500_90: var(--contrast-red);
  --error-500_100: var(--contrast-red);
  --info-500_10: var(--contrast-cyan);
  --info-500_20: var(--contrast-cyan);
  --info-500_30: var(--contrast-cyan);
  --info-500_40: var(--contrast-cyan);
  --info-500_50: var(--contrast-cyan);
  --info-500_60: var(--contrast-red);
  --info-500_70: var(--contrast-red);
  --info-500_80: var(--contrast-red);
  --info-500_90: var(--contrast-red);
  --info-500_100: var(--contrast-red);
  /******************************************** UI ELEMENT COLORS ********************************************/
  --header-bg: var(--contrast-red);
  --header-color: var(--contrast-cyan);
  --footer-bg: var(--contrast-red);
  --footer-color: 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);
  /******************** Button Colors ********************/
  --button-text: var(--text-inverse);
  --button-text--hover: var(--text-inverse);
  --button-background: var(--background-inverse);
  --button-background--hover: var(--highlight);
  /******************** Slide Link Colors ********************/
  --slide-link-color: var(--text-inverse);
  --slide-link-background: var(--primary-500);
  /******************** Toggle Button Colors ********************/
  --toggle-button-text: var(--gray-800);
  --toggle-button-bg: var(--gray-100);
  --toggle-button-text--hover: var(--primary);
  --toggle-button-bg--hover: var(--gray-150);
  --toggle-button--pressed-text: var(--gray-800);
  --toggle-button--pressed-bg: var(--gray-100);
  --toggle-button--pressed-text--hover: var(--primary);
  --toggle-button--pressed-bg--hover: var(--gray-150);
  /******************** Input Colors ********************/
  --input-text: var(--text);
  --input-bg: var(--background);
  --input-border: 1px solid var(--gray-700);
  /******************** Menu Colors ********************/
  --modal-bg: var(--white);
  --menu-color: var(--text);
  --menu-bg: inherit;
  --menu-panel-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --menu-modal-background: var(--modal-screen-bg);
  --menu-text: var(--text);
  --menu-sm-head: var(--primary);
  --menu-search-box-bg: var(--gray-100);
  --menu-color--hover: var(--primary);
  --menu-bg--hover: inherit;
  --menu-search-text: var(--white);
  --menu-search-bg: var(--white);
  --menu-search-btn-bg: var(--error);
  --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);
  --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);
  --menu-close-color: var(--white);
  --menu-close-bg: var(--black);
  --menu-close-color--hover: var(--white);
  --menu-close-bg--hover: var(--primary);
  --menu-fav: var(--gray-700);
  /******************** Social App Colors ********************/
  --social-body-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --social-hero-bg: var(--social-body-bg);
  --social-modal-background: var(--modal-screen-bg);
  --social-list-bg: var(--gray-150);
  --social-list-text: var(--black);
  --social-list-notes-bg: var(--white);
  --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-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-msg-bg: var(--white);
  --social-msg-reply-bg: var(--white);
  --social-msg-own-highlight: var(--secondary);
  --social-msg-own-bg: var(--primary-500_10);
  --social-msg-own-text: var(--text);
  --social-msg-own-user: var(--social-msg-own-highlight);
  --social-msg-grp-highlight: var(--primary);
  --social-msg-grp-bg: var(--secondary-500_10);
  --social-msg-grp-text: var(--text);
  --social-msg-grp-user: var(--social-msg-grp-highlight);
  --social-notes-bg: transparentize(#ececc1, 0.3);
}

/************** Color Contrast: Yellow/Blue **************/
body#cbook-body.contrast--yellowblue,
body#extension-body.contrast--yellowblue {
  --primary: var(--contrast-yellow);
  --secondary: var(--contrast-yellow);
  --tertiary: var(--contrast-yellow);
  --success: var(--contrast-yellow);
  --warning: var(--contrast-yellow);
  --error: var(--contrast-yellow);
  --info: var(--contrast-yellow);
  --text: var(--contrast-yellow);
  --highlight: var(--contrast-yellow);
  --background-inverse: var(--contrast-yellow);
  --black: var(--contrast-yellow);
  --text-inverse: var(--contrast-blue);
  --background: var(--contrast-blue);
  --white: var(--contrast-blue);
  --focus-color: var(--contrast-blue);
  --primary-500: var(--contrast-yellow);
  --primary-600: var(--contrast-yellow);
  --primary-700: var(--contrast-yellow);
  --primary-800: var(--contrast-yellow);
  --primary-900: var(--contrast-yellow);
  --secondary-500: var(--contrast-yellow);
  --secondary-600: var(--contrast-yellow);
  --secondary-700: var(--contrast-yellow);
  --secondary-800: var(--contrast-yellow);
  --secondary-900: var(--contrast-yellow);
  --tertiary-500: var(--contrast-yellow);
  --tertiary-600: var(--contrast-yellow);
  --tertiary-700: var(--contrast-yellow);
  --tertiary-800: var(--contrast-yellow);
  --tertiary-900: var(--contrast-yellow);
  --success-500: var(--contrast-yellow);
  --success-600: var(--contrast-yellow);
  --success-700: var(--contrast-yellow);
  --success-800: var(--contrast-yellow);
  --success-900: var(--contrast-yellow);
  --warning-500: var(--contrast-yellow);
  --warning-600: var(--contrast-yellow);
  --warning-700: var(--contrast-yellow);
  --warning-800: var(--contrast-yellow);
  --warning-900: var(--contrast-yellow);
  --error-500: var(--contrast-yellow);
  --error-600: var(--contrast-yellow);
  --error-700: var(--contrast-yellow);
  --error-800: var(--contrast-yellow);
  --error-900: var(--contrast-yellow);
  --info-500: var(--contrast-yellow);
  --info-600: var(--contrast-yellow);
  --info-700: var(--contrast-yellow);
  --info-800: var(--contrast-yellow);
  --info-900: var(--contrast-yellow);
  --gray-500: var(--contrast-yellow);
  --gray-600: var(--contrast-yellow);
  --gray-700: var(--contrast-yellow);
  --gray-800: var(--contrast-yellow);
  --gray-900: var(--contrast-yellow);
  --gray-950: var(--contrast-yellow);
  --primary-50: var(--contrast-blue);
  --primary-100: var(--contrast-blue);
  --primary-200: var(--contrast-blue);
  --primary-300: var(--contrast-blue);
  --primary-400: var(--contrast-blue);
  --secondary-50: var(--contrast-blue);
  --secondary-100: var(--contrast-blue);
  --secondary-200: var(--contrast-blue);
  --secondary-300: var(--contrast-blue);
  --secondary-400: var(--contrast-blue);
  --tertiary-50: var(--contrast-blue);
  --tertiary-100: var(--contrast-blue);
  --tertiary-200: var(--contrast-blue);
  --tertiary-300: var(--contrast-blue);
  --tertiary-400: var(--contrast-blue);
  --success-50: var(--contrast-blue);
  --success-100: var(--contrast-blue);
  --success-200: var(--contrast-blue);
  --success-300: var(--contrast-blue);
  --success-400: var(--contrast-blue);
  --warning-50: var(--contrast-blue);
  --warning-100: var(--contrast-blue);
  --warning-200: var(--contrast-blue);
  --warning-300: var(--contrast-blue);
  --warning-400: var(--contrast-blue);
  --error-50: var(--contrast-blue);
  --error-100: var(--contrast-blue);
  --error-200: var(--contrast-blue);
  --error-300: var(--contrast-blue);
  --error-400: var(--contrast-blue);
  --info-50: var(--contrast-blue);
  --info-100: var(--contrast-blue);
  --info-200: var(--contrast-blue);
  --info-300: var(--contrast-blue);
  --info-400: var(--contrast-blue);
  --gray-50: var(--contrast-blue);
  --gray-100: var(--contrast-blue);
  --gray-150: var(--contrast-blue);
  --gray-200: var(--contrast-blue);
  --gray-250: var(--contrast-blue);
  --gray-300: var(--contrast-blue);
  --gray-350: var(--contrast-blue);
  --gray-400: var(--contrast-blue);
  --primary-500_10: var(--contrast-blue);
  --primary-500_20: var(--contrast-blue);
  --primary-500_30: var(--contrast-blue);
  --primary-500_40: var(--contrast-blue);
  --primary-500_50: var(--contrast-blue);
  --primary-500_60: var(--contrast-yellow);
  --primary-500_70: var(--contrast-yellow);
  --primary-500_80: var(--contrast-yellow);
  --primary-500_90: var(--contrast-yellow);
  --primary-500_100: var(--contrast-yellow);
  --secondary-500_10: var(--contrast-blue);
  --secondary-500_20: var(--contrast-blue);
  --secondary-500_30: var(--contrast-blue);
  --secondary-500_40: var(--contrast-blue);
  --secondary-500_50: var(--contrast-blue);
  --secondary-500_60: var(--contrast-yellow);
  --secondary-500_70: var(--contrast-yellow);
  --secondary-500_80: var(--contrast-yellow);
  --secondary-500_90: var(--contrast-yellow);
  --secondary-500_100: var(--contrast-yellow);
  --tertiary-500_10: var(--contrast-blue);
  --tertiary-500_20: var(--contrast-blue);
  --tertiary-500_30: var(--contrast-blue);
  --tertiary-500_40: var(--contrast-blue);
  --tertiary-500_50: var(--contrast-blue);
  --tertiary-500_60: var(--contrast-yellow);
  --tertiary-500_70: var(--contrast-yellow);
  --tertiary-500_80: var(--contrast-yellow);
  --tertiary-500_90: var(--contrast-yellow);
  --tertiary-500_100: var(--contrast-yellow);
  --success-500_10: var(--contrast-blue);
  --success-500_20: var(--contrast-blue);
  --success-500_30: var(--contrast-blue);
  --success-500_40: var(--contrast-blue);
  --success-500_50: var(--contrast-blue);
  --success-500_60: var(--contrast-yellow);
  --success-500_70: var(--contrast-yellow);
  --success-500_80: var(--contrast-yellow);
  --success-500_90: var(--contrast-yellow);
  --success-500_100: var(--contrast-yellow);
  --warning-500_10: var(--contrast-blue);
  --warning-500_20: var(--contrast-blue);
  --warning-500_30: var(--contrast-blue);
  --warning-500_40: var(--contrast-blue);
  --warning-500_50: var(--contrast-blue);
  --warning-500_60: var(--contrast-yellow);
  --warning-500_70: var(--contrast-yellow);
  --warning-500_80: var(--contrast-yellow);
  --warning-500_90: var(--contrast-yellow);
  --warning-500_100: var(--contrast-yellow);
  --error-500_10: var(--contrast-blue);
  --error-500_20: var(--contrast-blue);
  --error-500_30: var(--contrast-blue);
  --error-500_40: var(--contrast-blue);
  --error-500_50: var(--contrast-blue);
  --error-500_60: var(--contrast-yellow);
  --error-500_70: var(--contrast-yellow);
  --error-500_80: var(--contrast-yellow);
  --error-500_90: var(--contrast-yellow);
  --error-500_100: var(--contrast-yellow);
  --info-500_10: var(--contrast-blue);
  --info-500_20: var(--contrast-blue);
  --info-500_30: var(--contrast-blue);
  --info-500_40: var(--contrast-blue);
  --info-500_50: var(--contrast-blue);
  --info-500_60: var(--contrast-yellow);
  --info-500_70: var(--contrast-yellow);
  --info-500_80: var(--contrast-yellow);
  --info-500_90: var(--contrast-yellow);
  --info-500_100: var(--contrast-yellow);
  /******************************************** UI ELEMENT COLORS ********************************************/
  --header-bg: var(--contrast-yellow);
  --header-color: var(--contrast-blue);
  --footer-bg: var(--contrast-yellow);
  --footer-color: 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);
  /******************** Button Colors ********************/
  --button-text: var(--text-inverse);
  --button-text--hover: var(--text-inverse);
  --button-background: var(--background-inverse);
  --button-background--hover: var(--highlight);
  /******************** Slide Link Colors ********************/
  --slide-link-color: var(--text-inverse);
  --slide-link-background: var(--primary-500);
  /******************** Toggle Button Colors ********************/
  --toggle-button-text: var(--gray-800);
  --toggle-button-bg: var(--gray-100);
  --toggle-button-text--hover: var(--primary);
  --toggle-button-bg--hover: var(--gray-150);
  --toggle-button--pressed-text: var(--gray-800);
  --toggle-button--pressed-bg: var(--gray-100);
  --toggle-button--pressed-text--hover: var(--primary);
  --toggle-button--pressed-bg--hover: var(--gray-150);
  /******************** Input Colors ********************/
  --input-text: var(--text);
  --input-bg: var(--background);
  --input-border: 1px solid var(--gray-700);
  /******************** Menu Colors ********************/
  --modal-bg: var(--white);
  --menu-color: var(--text);
  --menu-bg: inherit;
  --menu-panel-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --menu-modal-background: var(--modal-screen-bg);
  --menu-text: var(--text);
  --menu-sm-head: var(--primary);
  --menu-search-box-bg: var(--gray-100);
  --menu-color--hover: var(--primary);
  --menu-bg--hover: inherit;
  --menu-search-text: var(--white);
  --menu-search-bg: var(--white);
  --menu-search-btn-bg: var(--error);
  --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);
  --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);
  --menu-close-color: var(--white);
  --menu-close-bg: var(--black);
  --menu-close-color--hover: var(--white);
  --menu-close-bg--hover: var(--primary);
  --menu-fav: var(--gray-700);
  /******************** Social App Colors ********************/
  --social-body-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --social-hero-bg: var(--social-body-bg);
  --social-modal-background: var(--modal-screen-bg);
  --social-list-bg: var(--gray-150);
  --social-list-text: var(--black);
  --social-list-notes-bg: var(--white);
  --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-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-msg-bg: var(--white);
  --social-msg-reply-bg: var(--white);
  --social-msg-own-highlight: var(--secondary);
  --social-msg-own-bg: var(--primary-500_10);
  --social-msg-own-text: var(--text);
  --social-msg-own-user: var(--social-msg-own-highlight);
  --social-msg-grp-highlight: var(--primary);
  --social-msg-grp-bg: var(--secondary-500_10);
  --social-msg-grp-text: var(--text);
  --social-msg-grp-user: var(--social-msg-grp-highlight);
  --social-notes-bg: transparentize(#ececc1, 0.3);
}

/************** Color Contrast: Blue/Yellow **************/
body#cbook-body.contrast--blueyellow,
body#extension-body.contrast--blueyellow {
  --primary: var(--contrast-blue);
  --secondary: var(--contrast-blue);
  --tertiary: var(--contrast-blue);
  --success: var(--contrast-blue);
  --warning: var(--contrast-blue);
  --error: var(--contrast-blue);
  --info: var(--contrast-blue);
  --text: var(--contrast-blue);
  --highlight: var(--contrast-blue);
  --background-inverse: var(--contrast-blue);
  --black: var(--contrast-blue);
  --text-inverse: var(--contrast-yellow);
  --background: var(--contrast-yellow);
  --white: var(--contrast-yellow);
  --focus-color: var(--contrast-yellow);
  --primary-500: var(--contrast-blue);
  --primary-600: var(--contrast-blue);
  --primary-700: var(--contrast-blue);
  --primary-800: var(--contrast-blue);
  --primary-900: var(--contrast-blue);
  --secondary-500: var(--contrast-blue);
  --secondary-600: var(--contrast-blue);
  --secondary-700: var(--contrast-blue);
  --secondary-800: var(--contrast-blue);
  --secondary-900: var(--contrast-blue);
  --tertiary-500: var(--contrast-blue);
  --tertiary-600: var(--contrast-blue);
  --tertiary-700: var(--contrast-blue);
  --tertiary-800: var(--contrast-blue);
  --tertiary-900: var(--contrast-blue);
  --success-500: var(--contrast-blue);
  --success-600: var(--contrast-blue);
  --success-700: var(--contrast-blue);
  --success-800: var(--contrast-blue);
  --success-900: var(--contrast-blue);
  --warning-500: var(--contrast-blue);
  --warning-600: var(--contrast-blue);
  --warning-700: var(--contrast-blue);
  --warning-800: var(--contrast-blue);
  --warning-900: var(--contrast-blue);
  --error-500: var(--contrast-blue);
  --error-600: var(--contrast-blue);
  --error-700: var(--contrast-blue);
  --error-800: var(--contrast-blue);
  --error-900: var(--contrast-blue);
  --info-500: var(--contrast-blue);
  --info-600: var(--contrast-blue);
  --info-700: var(--contrast-blue);
  --info-800: var(--contrast-blue);
  --info-900: var(--contrast-blue);
  --gray-500: var(--contrast-blue);
  --gray-600: var(--contrast-blue);
  --gray-700: var(--contrast-blue);
  --gray-800: var(--contrast-blue);
  --gray-900: var(--contrast-blue);
  --gray-950: var(--contrast-blue);
  --primary-50: var(--contrast-yellow);
  --primary-100: var(--contrast-yellow);
  --primary-200: var(--contrast-yellow);
  --primary-300: var(--contrast-yellow);
  --primary-400: var(--contrast-yellow);
  --secondary-50: var(--contrast-yellow);
  --secondary-100: var(--contrast-yellow);
  --secondary-200: var(--contrast-yellow);
  --secondary-300: var(--contrast-yellow);
  --secondary-400: var(--contrast-yellow);
  --tertiary-50: var(--contrast-yellow);
  --tertiary-100: var(--contrast-yellow);
  --tertiary-200: var(--contrast-yellow);
  --tertiary-300: var(--contrast-yellow);
  --tertiary-400: var(--contrast-yellow);
  --success-50: var(--contrast-yellow);
  --success-100: var(--contrast-yellow);
  --success-200: var(--contrast-yellow);
  --success-300: var(--contrast-yellow);
  --success-400: var(--contrast-yellow);
  --warning-50: var(--contrast-yellow);
  --warning-100: var(--contrast-yellow);
  --warning-200: var(--contrast-yellow);
  --warning-300: var(--contrast-yellow);
  --warning-400: var(--contrast-yellow);
  --error-50: var(--contrast-yellow);
  --error-100: var(--contrast-yellow);
  --error-200: var(--contrast-yellow);
  --error-300: var(--contrast-yellow);
  --error-400: var(--contrast-yellow);
  --info-50: var(--contrast-yellow);
  --info-100: var(--contrast-yellow);
  --info-200: var(--contrast-yellow);
  --info-300: var(--contrast-yellow);
  --info-400: var(--contrast-yellow);
  --gray-50: var(--contrast-yellow);
  --gray-100: var(--contrast-yellow);
  --gray-150: var(--contrast-yellow);
  --gray-200: var(--contrast-yellow);
  --gray-250: var(--contrast-yellow);
  --gray-300: var(--contrast-yellow);
  --gray-350: var(--contrast-yellow);
  --gray-400: var(--contrast-yellow);
  --primary-500_10: var(--contrast-yellow);
  --primary-500_20: var(--contrast-yellow);
  --primary-500_30: var(--contrast-yellow);
  --primary-500_40: var(--contrast-yellow);
  --primary-500_50: var(--contrast-yellow);
  --primary-500_60: var(--contrast-blue);
  --primary-500_70: var(--contrast-blue);
  --primary-500_80: var(--contrast-blue);
  --primary-500_90: var(--contrast-blue);
  --primary-500_100: var(--contrast-blue);
  --secondary-500_10: var(--contrast-yellow);
  --secondary-500_20: var(--contrast-yellow);
  --secondary-500_30: var(--contrast-yellow);
  --secondary-500_40: var(--contrast-yellow);
  --secondary-500_50: var(--contrast-yellow);
  --secondary-500_60: var(--contrast-blue);
  --secondary-500_70: var(--contrast-blue);
  --secondary-500_80: var(--contrast-blue);
  --secondary-500_90: var(--contrast-blue);
  --secondary-500_100: var(--contrast-blue);
  --tertiary-500_10: var(--contrast-yellow);
  --tertiary-500_20: var(--contrast-yellow);
  --tertiary-500_30: var(--contrast-yellow);
  --tertiary-500_40: var(--contrast-yellow);
  --tertiary-500_50: var(--contrast-yellow);
  --tertiary-500_60: var(--contrast-blue);
  --tertiary-500_70: var(--contrast-blue);
  --tertiary-500_80: var(--contrast-blue);
  --tertiary-500_90: var(--contrast-blue);
  --tertiary-500_100: var(--contrast-blue);
  --success-500_10: var(--contrast-yellow);
  --success-500_20: var(--contrast-yellow);
  --success-500_30: var(--contrast-yellow);
  --success-500_40: var(--contrast-yellow);
  --success-500_50: var(--contrast-yellow);
  --success-500_60: var(--contrast-blue);
  --success-500_70: var(--contrast-blue);
  --success-500_80: var(--contrast-blue);
  --success-500_90: var(--contrast-blue);
  --success-500_100: var(--contrast-blue);
  --warning-500_10: var(--contrast-yellow);
  --warning-500_20: var(--contrast-yellow);
  --warning-500_30: var(--contrast-yellow);
  --warning-500_40: var(--contrast-yellow);
  --warning-500_50: var(--contrast-yellow);
  --warning-500_60: var(--contrast-blue);
  --warning-500_70: var(--contrast-blue);
  --warning-500_80: var(--contrast-blue);
  --warning-500_90: var(--contrast-blue);
  --warning-500_100: var(--contrast-blue);
  --error-500_10: var(--contrast-yellow);
  --error-500_20: var(--contrast-yellow);
  --error-500_30: var(--contrast-yellow);
  --error-500_40: var(--contrast-yellow);
  --error-500_50: var(--contrast-yellow);
  --error-500_60: var(--contrast-blue);
  --error-500_70: var(--contrast-blue);
  --error-500_80: var(--contrast-blue);
  --error-500_90: var(--contrast-blue);
  --error-500_100: var(--contrast-blue);
  --info-500_10: var(--contrast-yellow);
  --info-500_20: var(--contrast-yellow);
  --info-500_30: var(--contrast-yellow);
  --info-500_40: var(--contrast-yellow);
  --info-500_50: var(--contrast-yellow);
  --info-500_60: var(--contrast-blue);
  --info-500_70: var(--contrast-blue);
  --info-500_80: var(--contrast-blue);
  --info-500_90: var(--contrast-blue);
  --info-500_100: var(--contrast-blue);
  /******************************************** UI ELEMENT COLORS ********************************************/
  --header-bg: var(--contrast-blue);
  --header-color: var(--contrast-yellow);
  --footer-bg: var(--contrast-blue);
  --footer-color: 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);
  /******************** Button Colors ********************/
  --button-text: var(--text-inverse);
  --button-text--hover: var(--text-inverse);
  --button-background: var(--background-inverse);
  --button-background--hover: var(--highlight);
  /******************** Slide Link Colors ********************/
  --slide-link-color: var(--text-inverse);
  --slide-link-background: var(--primary-500);
  /******************** Toggle Button Colors ********************/
  --toggle-button-text: var(--gray-800);
  --toggle-button-bg: var(--gray-100);
  --toggle-button-text--hover: var(--primary);
  --toggle-button-bg--hover: var(--gray-150);
  --toggle-button--pressed-text: var(--gray-800);
  --toggle-button--pressed-bg: var(--gray-100);
  --toggle-button--pressed-text--hover: var(--primary);
  --toggle-button--pressed-bg--hover: var(--gray-150);
  /******************** Input Colors ********************/
  --input-text: var(--text);
  --input-bg: var(--background);
  --input-border: 1px solid var(--gray-700);
  /******************** Menu Colors ********************/
  --modal-bg: var(--white);
  --menu-color: var(--text);
  --menu-bg: inherit;
  --menu-panel-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --menu-modal-background: var(--modal-screen-bg);
  --menu-text: var(--text);
  --menu-sm-head: var(--primary);
  --menu-search-box-bg: var(--gray-100);
  --menu-color--hover: var(--primary);
  --menu-bg--hover: inherit;
  --menu-search-text: var(--white);
  --menu-search-bg: var(--white);
  --menu-search-btn-bg: var(--error);
  --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);
  --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);
  --menu-close-color: var(--white);
  --menu-close-bg: var(--black);
  --menu-close-color--hover: var(--white);
  --menu-close-bg--hover: var(--primary);
  --menu-fav: var(--gray-700);
  /******************** Social App Colors ********************/
  --social-body-bg: linear-gradient(
    to top,
    var(--gray-200) 0%,
    var(--gray-250) 100%
  );
  --social-hero-bg: var(--social-body-bg);
  --social-modal-background: var(--modal-screen-bg);
  --social-list-bg: var(--gray-150);
  --social-list-text: var(--black);
  --social-list-notes-bg: var(--white);
  --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-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-msg-bg: var(--white);
  --social-msg-reply-bg: var(--white);
  --social-msg-own-highlight: var(--secondary);
  --social-msg-own-bg: var(--primary-500_10);
  --social-msg-own-text: var(--text);
  --social-msg-own-user: var(--social-msg-own-highlight);
  --social-msg-grp-highlight: var(--primary);
  --social-msg-grp-bg: var(--secondary-500_10);
  --social-msg-grp-text: var(--text);
  --social-msg-grp-user: var(--social-msg-grp-highlight);
  --social-notes-bg: transparentize(#ececc1, 0.3);
}

/* 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);
  --sequence-player-progress-border: 1px solid var(--black);
  --search-highlight: var(--black);
  --search-highlight-color: var(--white);
}
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(--footer-color);
  stroke-width: 2px;
  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);
  font-weight: bold;
  background-color: var(--footer-bg);
}
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;
  --font-size-xx-small: calc(0.65rem * var(--text-multiplier));
  --font-size-x-small: calc(0.75rem * var(--text-multiplier));
  --font-size-small: calc(0.875rem * var(--text-multiplier));
  --font-size-medium: calc(1rem * var(--text-multiplier));
  --font-size-large: calc(1.125rem * var(--text-multiplier));
  --font-size-x-large: calc(1.25rem * var(--text-multiplier));
  --font-size-xx-large: calc(1.5rem * var(--text-multiplier));
  --font-size-xxx-large: calc(2rem * var(--text-multiplier));
  --header-height: 50px;
  --footer-height: 50px;
}

/* 130 % */
body#extension-body.font-size--medium,
body#cbook-body.font-size--medium {
  --text-multiplier: 1.3;
  --font-size-xx-small: calc(0.65rem * var(--text-multiplier));
  --font-size-x-small: calc(0.75rem * var(--text-multiplier));
  --font-size-small: calc(0.875rem * var(--text-multiplier));
  --font-size-medium: calc(1rem * var(--text-multiplier));
  --font-size-large: calc(1.125rem * var(--text-multiplier));
  --font-size-x-large: calc(1.25rem * var(--text-multiplier));
  --font-size-xx-large: calc(1.5rem * var(--text-multiplier));
  --font-size-xxx-large: calc(2rem * var(--text-multiplier));
  --header-height: 60px;
  --footer-height: 60px;
  --stage-height: calc(var(--cbook-height) - var(--header-height) - var(--footer-height));
}

/* 170 % */
body#extension-body.font-size--large,
body#cbook-body.font-size--large {
  --text-multiplier: 1.7;
  --font-size-xx-small: calc(0.65rem * var(--text-multiplier));
  --font-size-x-small: calc(0.75rem * var(--text-multiplier));
  --font-size-small: calc(0.875rem * var(--text-multiplier));
  --font-size-medium: calc(1rem * var(--text-multiplier));
  --font-size-large: calc(1.125rem * var(--text-multiplier));
  --font-size-x-large: calc(1.25rem * var(--text-multiplier));
  --font-size-xx-large: calc(1.5rem * var(--text-multiplier));
  --font-size-xxx-large: calc(2rem * var(--text-multiplier));
  --header-height: 60px;
  --footer-height: 60px;
  --stage-height: calc(var(--cbook-height) - var(--header-height) - var(--footer-height));
}
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-medium);
}
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;
  --font-size-xx-small: calc(0.65rem * var(--text-multiplier));
  --font-size-x-small: calc(0.75rem * var(--text-multiplier));
  --font-size-small: calc(0.875rem * var(--text-multiplier));
  --font-size-medium: calc(1rem * var(--text-multiplier));
  --font-size-large: calc(1.125rem * var(--text-multiplier));
  --font-size-x-large: calc(1.25rem * var(--text-multiplier));
  --font-size-xx-large: calc(1.5rem * var(--text-multiplier));
  --font-size-xxx-large: calc(2rem * var(--text-multiplier));
  --space-x-large: 4ch;
  --space-large: 1ch;
  --space-medium: 0.5ch;
  --space-small: 0.4ch;
  --space-x-small: 0.25ch;
  --space-xx-small: 0.125ch;
  --space-zero: 0;
  --paddings--wide: var(--space-medium);
  --icon-size-s: 24px;
  --icon-size-m: 32px;
  --header-height: 70px;
  --footer-height: 70px;
  --stage-height: calc(var(--cbook-height) - var(--header-height) - var(--footer-height));
  --app-menu-width: 100%;
  --menu-close-position-right: 0;
  --social-app-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-medium);
}

/* 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(--font-size-x-small);
}

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-medium);
}

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

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(--font-size-x-small);
}

body#cbook-body.font-size--x-large .numeral-indicator {
  left: calc(var(--space-medium) * -1);
  top: calc(var(--space-medium) * -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) {
  #cbook-body,
  #extension-body,
  #app-responsive-hotspots-backend,
  #editor-body {
    --app-menu-width: 50%;
    --social-app-width: 45%;
    --font-size-xx-small: 0.75rem;
  }
}
/* Responsive Styling */
@media only screen and (min-width: 0) {
  #cbook-body,
  #extension-body,
  #app-responsive-hotspots-backend,
  #editor-body {
    --app-menu-width: 90%;
    --social-app-width: 90%;
  }
}
@media only screen and (min-width: 576px) {
  #cbook-body,
  #extension-body,
  #app-responsive-hotspots-backend,
  #editor-body {
    --app-menu-width: 70%;
    --social-app-width: 70%;
  }
  .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%;
  }
  .chart__legend-item {
    font-size: var(--font-size-xx-small);
  }
}
@media only screen and (min-width: 768px) {
  #cbook-body,
  #extension-body,
  #app-responsive-hotspots-backend,
  #editor-body {
    --app-menu-width: 70%;
    --social-app-width: 70%;
  }
}
@media only screen and (min-width: 992px) {
  #cbook-body,
  #extension-body,
  #app-responsive-hotspots-backend,
  #editor-body {
    --app-menu-width: 45%;
    --social-app-width: 45%;
  }
}
@media only screen and (min-width: 1600px) and (-webkit-max-device-pixel-ratio: 1) {
  #cbook-body,
  #extension-body,
  #app-responsive-hotspots-backend,
  #editor-body {
    --app-menu-width: 45%;
    --social-app-width: 45%;
  }
}