:root {

  --rixel-blue: #001850;
  --rixel-blue-dark: #000C28;
  --rixel-blue-light: #0030A0;
  --rixel-blue-king: #40A0E0;
  --rixel-yellow-light: #FFE000;
  --rixel-yellow-dark: #FFA000;
  --rixel-gray-ultra-light: #E0E0E0;
  --rixel-gray-light: #D0D0D0;
  --rixel-gray-dark: #C0C0C0;

  --app-highcontrast-light: #ffff00;

  --app-black: #000000;
  --app-blue: #0d6efd;
  --app-indigo: #6610f2;
  --app-purple: #6f42c1;
  --app-pink: #d63384;
  --app-red: #dc3545;
  --app-orange: #fd7e14;
  --app-yellow: #ffc107;
  --app-green: #198754;
  --app-teal: #20c997;
  --app-cyan: #0dcaf0;
  --app-white: #ffffff;
  --app-gray: #6c757d;
  --app-gray-dark: #343a40;
  --app-gray-light: #adb5bd;
  --app-gray-ultra-light: #e8e8e8;
  --app-gray-extra-light: #f0f0f0;
  --app-light: #f8f9fa;
  --app-dark: #212529;

  --app-green-50: #e3f1ea;
  --app-green-100: #badbcc;
  --app-green-200: #8cc3aa;
  --app-green-300: #5eab87;
  --app-green-400: #3c996e;
  --app-green-500: #198754;
  --app-green-600: #167f4d;
  --app-green-700: #127443;
  --app-green-800: #0e6a3a;
  --app-green-900: #085729;
  --app-green-A100: #8bffb5;
  --app-green-A200: #58ff94;
  --app-green-A400: #25ff74;
  --app-green-A700: #0bff63;

  --app-black-T25: #00000040;
  --app-black-T50: #00000080;
  --app-black-T75: #000000c0;

  --primary: #1c2347;
  --secondary: #007bfe;
  --tertiary: #25baf9;
  --quaternary: #707070;
  --quinary: #e9e8e8;
  --senary: #e0dede;
  --septenary: #e8b00f;

  --primary-50: #e4e5e9;
  --primary-100: #bbbdc8;
  --primary-200: #8e91a3;
  --primary-300: #60657e;
  --primary-400: #3e4463;
  --primary-500: #1c2347;
  --primary-600: #191f40;
  --primary-700: #141a37;
  --primary-800: #11152f;
  --primary-900: #090c20;
  --primary-A100: #5f69ff;
  --primary-A200: #2c39ff;
  --primary-A400: #0010f8;
  --primary-A700: #000edf;

  --secondary-50: #e0efff;
  --secondary-100: #b3d7ff;
  --secondary-200: #80bdff;
  --secondary-300: #4da3fe;
  --secondary-400: #268ffe;
  --secondary-500: #007bfe;
  --secondary-600: #0073fe;
  --secondary-700: #0068fe;
  --secondary-800: #005efe;
  --secondary-900: #004bfd;
  --secondary-A100: #ffffff;
  --secondary-A200: #f1f4ff;
  --secondary-A400: #becdff;
  --secondary-A700: #a4b9ff;

  --tertiary-50: #e5f7fe;
  --tertiary-100: #beeafd;
  --tertiary-200: #92ddfc;
  --tertiary-300: #66cffb;
  --tertiary-400: #46c4fa;
  --tertiary-500: #25baf9;
  --tertiary-600: #21b3f8;
  --tertiary-700: #1babf7;
  --tertiary-800: #16a3f6;
  --tertiary-900: #0d94f5;
  --tertiary-A100: #ffffff;
  --tertiary-A200: #ecf7ff;
  --tertiary-A400: #b9dfff;
  --tertiary-A700: #a0d4ff;

  --quaternary-50: #eeeeee;
  --quaternary-100: #d4d4d4;
  --quaternary-200: #b8b8b8;
  --quaternary-300: #9b9b9b;
  --quaternary-400: #858585;
  --quaternary-500: #707070;
  --quaternary-600: #686868;
  --quaternary-700: #5d5d5d;
  --quaternary-800: #535353;
  --quaternary-900: #414141;
  --quaternary-A100: #f5a9a9;
  --quaternary-A200: #f07b7b;
  --quaternary-A400: #ff3a3a;
  --quaternary-A700: #ff2020;

  --quinary-50: #fcfcfc;
  --quinary-100: #f8f8f8;
  --quinary-200: #f4f4f4;
  --quinary-300: #f0efef;
  --quinary-400: #ecebeb;
  --quinary-500: #e9e8e8;
  --quinary-600: #e6e5e5;
  --quinary-700: #e3e2e2;
  --quinary-800: #dfdede;
  --quinary-900: #d9d8d8;
  --quinary-A100: #ffffff;
  --quinary-A200: #ffffff;
  --quinary-A400: #ffffff;
  --quinary-A700: #ffffff;

  --senary-50: #fbfbfb;
  --senary-100: #f6f5f5;
  --senary-200: #f0efef;
  --senary-300: #e9e8e8;
  --senary-400: #e5e3e3;
  --senary-500: #e0dede;
  --senary-600: #dcdada;
  --senary-700: #d8d5d5;
  --senary-800: #d3d1d1;
  --senary-900: #cbc8c8;
  --senary-A100: #ffffff;
  --senary-A200: #ffffff;
  --senary-A400: #ffffff;
  --senary-A700: #ffffff;

  --septenary-50: #fcf6e2;
  --septenary-100: #f8e7b7;
  --septenary-200: #f4d887;
  --septenary-300: #efc857;
  --septenary-400: #ebbc33;
  --septenary-500: #e8b00f;
  --septenary-600: #e5a90d;
  --septenary-700: #e2a00b;
  --septenary-800: #de9708;
  --septenary-900: #d88704;
  --septenary-A100: #ffffff;
  --septenary-A200: #ffeacd;
  --septenary-A400: #ffd49a;
  --septenary-A700: #ffc980;

  --font-default-size: 1vw;
  --font-normal: 1.2rem;

  --default-transition: all 0.1s linear;

  --font-scale-factor: 1.0;

  /*
   * ########
   * # NAVY #
   * ########
   */

  --navy-navy-blue: #022a3a;
  --navy-blue: #0076a9;
  --navy-gray: #C6CCD0;
  --navy-yellow: #e8b00f;
  --navy-white: #fffef9;

  --navy-navy-blue-50: #e1e5e7;
  --navy-navy-blue-100: #b3bfc4;
  --navy-navy-blue-200: #81959d;
  --navy-navy-blue-300: #4e6a75;
  --navy-navy-blue-400: #284a58;
  --navy-navy-blue-500: #022a3a;
  --navy-navy-blue-600: #022534;
  --navy-navy-blue-700: #011f2c;
  --navy-navy-blue-800: #011925;
  --navy-navy-blue-900:  #010f18;
  --navy-navy-blue-A100: #58a5ff;
  --navy-navy-blue-A200: #2589ff;
  --navy-navy-blue-A400: #006ff1;
  --navy-navy-blue-A700: #0063d7;

  --navy-blue-50: #e0eff5;
  --navy-blue-100: #b3d6e5;
  --navy-blue-200: #80bbd4;
  --navy-blue-300: #4d9fc3;
  --navy-blue-400: #268bb6;
  --navy-blue-500: #0076a9;
  --navy-blue-600: #006ea2;
  --navy-blue-700: #006398;
  --navy-blue-800: #00598f;
  --navy-blue-900: #00467e;
  --navy-blue-A100: #acd4ff;
  --navy-blue-A200: #79b9ff;
  --navy-blue-A400: #469fff;
  --navy-blue-A700: #2c92ff;

  --navy-gray-50: #f8f9f9;
  --navy-gray-100: #eef0f1;
  --navy-gray-200: #e3e6e8;
  --navy-gray-300: #d7dbde;
  --navy-gray-400: #cfd4d7;
  --navy-gray-500: #c6ccd0;
  --navy-gray-600: #c0c7cb;
  --navy-gray-700: #b9c0c4;
  --navy-gray-800: #b1b9be;
  --navy-gray-900: #a4adb3;
  --navy-gray-A100: #ffffff;
  --navy-gray-A200: #ffffff;
  --navy-gray-A400: #f8fcff;
  --navy-gray-A700: #dff3ff;

  --navy-yellow-50: #fcf6e2;
  --navy-yellow-100: #f8e7b7;
  --navy-yellow-200: #f4d887;
  --navy-yellow-300: #efc857;
  --navy-yellow-400: #ebbc33;
  --navy-yellow-500: #e8b00f;
  --navy-yellow-600: #e5a90d;
  --navy-yellow-700: #e2a00b;
  --navy-yellow-800: #de9708;
  --navy-yellow-900: #d88704;
  --navy-yellow-A100: #ffffff;
  --navy-yellow-A200: #ffeacd;
  --navy-yellow-A400: #ffd49a;
  --navy-yellow-A700: #ffc980;

  /*
   * ##########
   * # MARINE #
   * ##########
   */

  --marine-blue: #000066;
  --marine-red: #CC0000;
  --marine-silver: #999999;
  --marine-gold: #CC9900;

  --marine-blue-50: #e0e0ed;
  --marine-blue-100: #b3b3d1;
  --marine-blue-200: #8080b3;
  --marine-blue-300: #4d4d94;
  --marine-blue-400: #26267d;
  --marine-blue-500: #000066;
  --marine-blue-600: #00005e;
  --marine-blue-700: #000053;
  --marine-blue-800: #000049;
  --marine-blue-900: #000038;
  --marine-blue-A100: #6e6eff;
  --marine-blue-A200: #3b3bff;
  --marine-blue-A400: #0808ff;
  --marine-blue-A700: #0000ee;

  --marine-red-50: #f9e0e0;
  --marine-red-100: #f0b3b3;
  --marine-red-200: #e68080;
  --marine-red-300: #db4d4d;
  --marine-red-400: #d42626;
  --marine-red-500: #cc0000;
  --marine-red-600: #c70000;
  --marine-red-700: #c00000;
  --marine-red-800: #b90000;
  --marine-red-900: #ad0000;
  --marine-red-A100: #ffd7d7;
  --marine-red-A200: #ffa4a4;
  --marine-red-A400: #ff7171;
  --marine-red-A700: #ff5858;

  --marine-silver-50: #f3f3f3;
  --marine-silver-100: #e0e0e0;
  --marine-silver-200: #cccccc;
  --marine-silver-300: #b8b8b8;
  --marine-silver-400: #a8a8a8;
  --marine-silver-500: #999999;
  --marine-silver-600: #919191;
  --marine-silver-700: #868686;
  --marine-silver-800: #7c7c7c;
  --marine-silver-900: #6b6b6b;
  --marine-silver-A100: #fdeaea;
  --marine-silver-A200: #f8bcbc;
  --marine-silver-A400: #ff8181;
  --marine-silver-A700: #ff6868;

  --marine-gold-50: #f9f3e0;
  --marine-gold-100: #f0e0b3;
  --marine-gold-200: #e6cc80;
  --marine-gold-300: #dbb84d;
  --marine-gold-400: #d4a826;
  --marine-gold-500: #cc9900;
  --marine-gold-600: #c79100;
  --marine-gold-700: #c08600;
  --marine-gold-800: #b97c00;
  --marine-gold-900: #ad6b00;
  --marine-gold-A100: #ffedd7;
  --marine-gold-A200: #ffd7a4;
  --marine-gold-A400: #ffc071;
  --marine-gold-A700: #ffb558;

  /*
   * #######
   * # DoD #
   * #######
   */

  --dod-blue: #355e93;
  --dod-black: #141414;
  --dod-blue-hazy: #ebeff5;
  --dod-blue-steel: #aebfd4;
  --dod-blue-cabet: #728fb4;
  --dod-blue-ocean: #254267;
  --dod-blue-space: #15263b;
  --dod-gray-harbor: #ebebeb;
  --dod-gray-smoke: #adadad;
  --dod-gray-anchor: #717171;

  /*
   * #########
   * # EAGLE #
   * #########
   */

  --eagle-gray-silver: #9EA2A2;
  --eagle-steel: #7C878E;
  --eagle-brown: #603D20;
  --eagle-straw-burnised: #996017;
  --eagle-brown-spice: #73381D;
  --eagle-yellow-golden: #FFCD00;
  --eagle-yellow-lemon: #FBDD40;
  --eagle-gold: #85714D;


  /*
  * ############
  * # DEFAULTS #
  * ############
  */

  --olive: #4E5B31;
  --olive-green-mosstone: #7A9A01;
  --olive-brown-spice: #73381D;
  --olive-brown: #603D20;
  --olive-army-green: #284734;
  --olive-eggshell: #DDCBA4;

  /*
  * ############
  * # DEFAULTS #
  * ############
  */

  --color-answer: var(--app-black);
  --color-answer-hover: var(--quinary-900);
  --color-answer-selected: var(--primary);
  --color-answer-selected-hover: var(--quinary-900);
  --color-body: var(--app-black);
  --color-box: var(--app-black);
  --color-box-highlighted: var(--primary);
  --color-box-featured: var(--app-black);
  --color-btn-backgroundless: var(--quinary);
  --color-btn-backgroundless-hover: var(--secondary);
  --color-btn-backgroundless-dark: var(--quinary-900);
  --color-btn-backgroundless-dark-hover: var(--secondary);
  --color-btn-featured: var(--quaternary-900);
  --color-btn-featured-hover: var(--septenary);
  --color-btn-inverse: var(--septenary);
  --color-btn-inverse-hover: var(--quaternary-900);
  --color-btn-normal: var(--quaternary-900);
  --color-btn-normal-hover: var(--quinary-900);
  --color-input: var(--primary-900);
  --color-input-focus: var(--septenary);
  --color-header: var(--quinary-900);
  --color-header-unimportant: var(--quinary);
  --color-link-certlink: var(--septenary);
  --color-link-certlink-hover: var(--quinary);
  --color-link-default: var(--app-black);
  --color-link-default-hover: var(--app-black);
  --color-menu: var(--app-white);
  --color-menu-hover: var(--septenary);
  --color-question: var(--primary);
  --color-results-page: var(--quinary-900);
  --color-results-page-external-link: var(--quinary);
  --color-results-page-external-link-hover: var(--secondary);
  --color-results-page-highlighted: var(--septenary);
  --color-results-topics: var(--quinary-900);
  --color-results-topics-highlighted: var(--septenary);
  --color-reveal-password: var(--primary);
  --color-reveal-password-hover: var(--secondary);
  --color-spinner-circle: var(--primary);
  --color-spinner-circle-highlighted: var(--primary);
  --color-spinner-circle-selected: var(--primary);
  --color-terminal: var(--app-black);
  --color-toast: var(--primary);

  --background-answer: var(--quinary-900);
  --background-answer-hover: var(--primary);
  --background-answer-selected: var(--septenary);
  --background-answer-selected-hover: var(--secondary);
  --background-body: var(--primary);
  --background-box: var(--quinary-900);
  --background-btn-featured: var(--septenary);
  --background-btn-featured-hover:var(--quaternary-900);
  --background-btn-inverse: var(--quaternary-900);
  --background-btn-inverse-hover: var(--septenary);
  --background-btn-normal: var(--quaternary-200);
  --background-btn-normal-hover: var(--quaternary-900);
  --background-competency: var(--primary-900);
  --background-input: var(--quaternary);
  --background-input-focus: var(--quaternary-700);
  --background-header: var(--primary);
  --background-login: var(--primary-900);
  --background-menu: var(--primary);
  --background-results-page: var(--primary);
  --background-results-topics: var(--primary);
  --background-spinner-circle: var(--quinary-900);
  --background-spinner-circle-highlighted: var(--secondary);
  --background-spinner-circle-selected: var(--septenary);
  --background-terminal: var(--app-black);
  --background-toast: var(--septenary);
  --background-welcome-content: var(--quinary-900);
  --background-welcome-graph: var(--quaternary-200);

  --border-competency: var(--septenary);
  --border-spinner: var(--primary);

  --graph-edge: var(--septenary);
  --graph-edge-hover: var(--septenary-300);
  --graph-edge-selected: var(--secondary);
  --graph-font: var(--quinary-900);
  --graph-font-user: var(--primary);
  --graph-node-border: var(--septenary);
  --graph-node-border-hover: var(--septenary-300);
  --graph-node-border-selected: var(--secondary);
  --graph-node-level-1-background: var(--primary);
  --graph-node-level-1-background-hover: var(--primary-700);
  --graph-node-level-2-background: var(--primary);
  --graph-node-level-2-background-hover: var(--primary-700);
  --graph-node-level-3-background: var(--primary);
  --graph-node-level-3-background-hover: var(--primary-700);
  --graph-node-level-4-background: var(--primary);
  --graph-node-level-4-background-hover: var(--primary-700);
  --graph-node-level-5-background: var(--primary);
  --graph-node-level-5-background-hover: var(--primary-700);
  --graph-node-selected-background: var(--secondary);
  --graph-node-user-background: var(--septenary);
  --graph-node-user-background-hover: var(--septenary-300);

  /*

  --prezi-blue-light: #8faadc;
  --prezi-blue: #046b99;
  --prezi-blue-dark: #1c304a;
  --prezi-gray-light: #dce4ef;

  --background-competency: #f2f4f6;
  --border-competency: #f2f4f6;;

  --graph-edge: var(--prezi-blue);
  --graph-edge-hover: var(--prezi-blue);
  --graph-edge-selected: var(--prezi-blue);
  --graph-font: var(--prezi-gray-light);
  --graph-font-user: var(--prezi-blue-dark);
  --graph-node-border: var(--prezi-blue);
  --graph-node-border-hover: var(--septenary-300);
  --graph-node-border-selected: var(--secondary);
  --graph-node-level-1-background: var(--prezi-blue-dark);
  --graph-node-level-1-background-hover: var(--primary-700);
  --graph-node-level-2-background: var(--prezi-blue-dark);
  --graph-node-level-2-background-hover: var(--primary-700);
  --graph-node-level-3-background: var(--prezi-blue-dark);
  --graph-node-level-3-background-hover: var(--primary-700);
  --graph-node-level-4-background: var(--prezi-blue-dark);
  --graph-node-level-4-background-hover: var(--primary-700);
  --graph-node-level-5-background: var(--prezi-blue-dark);
  --graph-node-level-5-background-hover: var(--primary-700);
  --graph-node-selected-background: var(--secondary);
  --graph-node-user-background: var(--prezi-blue-light);
  --graph-node-user-background-hover: var(--septenary-300);

  */

  --pause-warning-from: var(--quinary-900);
  --pause-warning-to: var(--septenary);

 /*
  * #############
  * # BOOTSTRAP #
  * #############
  */

  --bs-dropdown-color: #ff0000;

 /*
  * ############
  * # DEFAULTS #
  * ############
  */

  --spinner-border: 0.5vh solid var(--border-spinner);
  --spinner-border-inner: 0.25vh solid var(--border-spinner);
  --spinner-font-size: calc(0.25 * var(--spinner-size));
  --spinner-size: 20vw;
  --spinner-transition: all 0.1s linear;

}

[rixel-theme="airforce"] { /* light, default */

  --color-answer: var(--app-black);
  --color-answer-hover: var(--quinary-900);
  --color-answer-selected: var(--primary);
  --color-answer-selected-hover: var(--quinary-900);
  --color-body: var(--app-black);
  --color-box: var(--app-black);
  --color-box-highlighted: var(--primary);
  --color-box-featured: var(--app-black);
  --color-btn-backgroundless: var(--quinary);
  --color-btn-backgroundless-hover: var(--secondary);
  --color-btn-backgroundless-dark: var(--quinary-900);
  --color-btn-backgroundless-dark-hover: var(--secondary);
  --color-btn-featured: var(--quaternary-900);
  --color-btn-featured-hover: var(--septenary);
  --color-btn-inverse: var(--septenary);
  --color-btn-inverse-hover: var(--quaternary-900);
  --color-btn-normal: var(--quaternary-900);
  --color-btn-normal-hover: var(--quinary-900);
  --color-input: var(--primary-900);
  --color-input-focus: var(--septenary);
  --color-header: var(--quinary-900);
  --color-header-unimportant: var(--quinary);
  --color-link-default: var(--app-black);
  --color-link-default-hover: var(--app-black);
  --color-menu: var(--app-white);
  --color-menu-hover: var(--septenary);
  --color-question: var(--primary);
  --color-reveal-password: var(--primary);
  --color-reveal-password-hover: var(--secondary);
  --color-terminal: var(--app-black);

  --background-answer: var(--quinary-900);
  --background-answer-hover: var(--primary);
  --background-answer-selected: var(--septenary);
  --background-answer-selected-hover: var(--secondary);
  --background-body: var(--primary);
  --background-box: var(--quinary-900);
  --background-btn-featured: var(--septenary);
  --background-btn-featured-hover:var(--quaternary-900);
  --background-btn-inverse: var(--quaternary-900);
  --background-btn-inverse-hover: var(--septenary);
  --background-btn-normal: var(--quaternary-200);
  --background-btn-normal-hover: var(--quaternary-900);
  --background-input: var(--quaternary);
  --background-input-focus: var(--quaternary-700);
  --background-header: var(--primary);
  --background-login: var(--primary-900);
  --background-menu: var(--primary);
  --background-terminal: var(--app-black);
  --background-welcome-content: var(--quinary-900);

  --pause-warning-from: var(--quinary-900);
  --pause-warning-to: var(--septenary);

}

[rixel-theme="highcontrast"] {

  --color-answer: var(--app-highcontrast-light);
  --color-answer-hover: var(--app-highcontrast-light);
  --color-answer-selected: var(--app-black);
  --color-answer-selected-hover: var(--app-black);
  --color-body: var(--app-highcontrast-light);
  --color-box: var(--app-highcontrast-light);
  --color-box-highlighted: var(--app-highcontrast-light);
  --color-box-featured: var(--app-black);
  --color-btn-backgroundless: var(--app-highcontrast-light);
  --color-btn-backgroundless-hover: var(--app-highcontrast-light);
  --color-btn-backgroundless-dark: var(--app-highcontrast-light);
  --color-btn-backgroundless-dark-hover: var(--app-highcontrast-light);
  --color-btn-featured: var(--app-black);
  --color-btn-featured-hover: var(--app-black);
  --color-btn-inverse: var(--app-black);
  --color-btn-inverse-hover: var(--app-black);
  --color-btn-normal: var(--app-highcontrast-light);
  --color-btn-normal-hover: var(--app-highcontrast-light);
  --color-input: var(--app-black);
  --color-input-focus: var(--app-highcontrast-light);
  --color-header: var(--app-highcontrast-light);
  --color-header-unimportant: var(--app-highcontrast-light);
  --color-link-certlink: var(--app-highcontrast-light);
  --color-link-certlink-hover: var(--app-highcontrast-light);
  --color-link-default: var(--app-black);
  --color-link-default-hover: var(--app-black);
  --color-menu: var(--app-highcontrast-light);
  --color-menu-hover: var(--app-highcontrast-light);
  --color-question: var(--app-highcontrast-light);
  --color-results-page: var(--app-highcontrast-light);
  --color-results-page-external-link: var(--app-highcontrast-light);
  --color-results-page-external-link-hover: var(--app-highcontrast-light);
  --color-results-page-highlighted: var(--app-highcontrast-light);
  --color-results-topics: var(--app-highcontrast-light);
  --color-results-topics-highlighted: var(--app-highcontrast-light);
  --color-reveal-password: var(--app-highcontrast-light);
  --color-reveal-password-hover: var(--app-highcontrast-light);
  --color-spinner-circle: var(--app-highcontrast-light);
  --color-spinner-circle-highlighted: var(--app-black);
  --color-spinner-circle-selected: var(--app-highcontrast-light);
  --color-terminal: var(--app-black);
  --color-toast: var(--app-black);

  --background-answer: var(--app-black);
  --background-answer-hover: var(--app-black);
  --background-answer-selected: var(--app-highcontrast-light);
  --background-answer-selected-hover: var(--app-highcontrast-light);
  --background-body: var(--app-black);
  --background-box: var(--app-black);
  --background-btn-featured: var(--app-highcontrast-light);
  --background-btn-featured-hover:var(--app-highcontrast-light);
  --background-btn-inverse: var(--app-highcontrast-light);
  --background-btn-inverse-hover: var(--app-highcontrast-light);
  --background-btn-normal: var(--app-black);
  --background-btn-normal-hover: var(--app-black);
  --background-competency: var(--app-black);
  --background-input: var(--app-highcontrast-light);
  --background-input-focus: var(--app-black);
  --background-header: var(--app-black);
  --background-login: var(--app-black);
  --background-menu: var(--app-black);
  --background-results-page: var(--app-black);
  --background-results-topics: var(--app-black);
  --background-spinner-circle: var(--app-black);
  --background-spinner-circle-highlighted: var(--app-highcontrast-light);
  --background-spinner-circle-selected: var(--app-black);
  --background-terminal: var(--app-black);
  --background-toast: var(--app-highcontrast-light);
  --background-welcome-content: var(--app-black);
  --background-welcome-graph: var(--app-black);

  --border-competency: var(--app-highcontrast-light);
  --border-spinner: var(--app-highcontrast-light);

  --graph-edge: var(--app-highcontrast-light);
  --graph-edge-hover: var(--app-highcontrast-light);
  --graph-edge-selected: var(--app-highcontrast-light);
  --graph-font: var(--app-highcontrast-light);
  --graph-font-user: var(--app-black);
  --graph-node-border: var(--app-highcontrast-light);
  --graph-node-border-hover: var(--app-highcontrast-light);
  --graph-node-border-selected: var(--app-highcontrast-light);
  --graph-node-level-1-background: var(--app-black);
  --graph-node-level-1-background-hover: var(--app-black);
  --graph-node-level-2-background: var(--app-black);
  --graph-node-level-2-background-hover: var(--app-black);
  --graph-node-level-3-background: var(--app-black);
  --graph-node-level-3-background-hover: var(--app-black);
  --graph-node-level-4-background: var(--app-black);
  --graph-node-level-4-background-hover: var(--app-black);
  --graph-node-level-5-background: var(--app-black);
  --graph-node-level-5-background-hover: var(--app-black);
  --graph-node-selected-background: var(--app-black);
  --graph-node-user-background: var(--app-highcontrast-light);
  --graph-node-user-background-hover: var(--app-highcontrast-light);

  --pause-warning-from: var(--app-highcontrast-light);
  --pause-warning-to: var(--app-black);

/*
 * #############
 * # BOOTSTRAP #
 * #############
 */

 --bs-dropdown-color: #ff0000;

/*
 * ############
 * # DEFAULTS #
 * ############
 */

 --spinner-border: 0.5vh solid var(--border-spinner);
 --spinner-border-inner: 0.25vh solid var(--border-spinner);
 --spinner-font-size: calc(0.25 * var(--spinner-size));
 --spinner-size: 20vw;
 --spinner-transition: all 0.1s linear;

}

[rixel-theme="navy"] {

  --color-answer: var(--app-black);
  --color-answer-hover: var(--navy-white);
  --color-answer-selected: var(--navy-navy-blue);
  --color-answer-selected-hover: var(--navy-white);
  --color-body: var(--app-black);
  --color-box: var(--app-black);
  --color-box-highlighted: var(--navy-blue-900);
  --color-box-featured: var(--app-black);
  --color-btn-backgroundless: var(--navy-navy-blue);
  --color-btn-backgroundless-hover: var(--navy-white);
  --color-btn-backgroundless-dark: var(--navy-white);
  --color-btn-backgroundless-dark-hover: var(--navy-yellow);
  --color-btn-featured: var(--navy-navy-blue);
  --color-btn-featured-hover: var(--navy-yellow);
  --color-btn-inverse: var(--navy-yellow);
  --color-btn-inverse-hover: var(--navy-blue-900);
  --color-btn-normal: var(--navy-navy-blue);
  --color-btn-normal-hover: var(--navy-navy-blue);
  --color-input: var(--navy-navy-blue);
  --color-input-focus: var(--navy-navy-blue);
  --color-header: var(--navy-white);
  --color-header-unimportant: var(--navy-white);
  --color-link-default: var(--app-black);
  --color-link-default-hover: var(--app-black);
  --color-menu: var(--navy-white);
  --color-menu-hover: var(--navy-yellow);
  --color-question: var(--navy-blue-900);
  --color-reveal-password: var(--navy-navy-blue);
  --color-reveal-password-hover: var(--navy-blue);
  --color-terminal: var(--app-black);

  --background-answer: var(--navy-gray);
  --background-answer-hover: var(--navy-blue-900);
  --background-answer-selected: var(--navy-yellow);
  --background-answer-selected-hover: var(--navy-blue);
  --background-body: var(--navy-navy-blue);
  --background-box: var(--navy-gray);
  --background-btn-featured: var(--navy-yellow);
  --background-btn-featured-hover:var(--navy-navy-blue);
  --background-btn-inverse: var(--navy-blue-900);
  --background-btn-inverse-hover: var(--navy-yellow);
  --background-btn-normal: var(--navy-gray-900);
  --background-btn-normal-hover: var(--navy-blue-200);
  --background-input: var(--navy-gray-200);
  --background-input-focus: var(--navy-blue-100);
  --background-header: var(--navy-navy-blue);
  --background-login: var(--navy-blue);
  --background-menu: var(--navy-navy-blue);
  --background-terminal: var(--app-black);
  --background-welcome-content: var(--navy-blue);

  --pause-warning-from: var(--navy-blue);
  --pause-warning-to: var(--navy-yellow);

}

[rixel-theme="marine"] {

  --color-answer: var(--app-black);
  --color-answer-hover: var(--app-white);
  --color-answer-selected: var(--app-black);
  --color-answer-selected-hover: var(--app-white);
  --color-body: var(--app-black);
  --color-box: var(--app-black);
  --color-box-highlighted: var(--marine-blue);
  --color-box-featured: var(--app-black);
  --color-btn-backgroundless: var(--marine-blue);
  --color-btn-backgroundless-hover: var(--marine-gold);
  --color-btn-backgroundless-dark: var(--app-white);
  --color-btn-backgroundless-dark-hover: var(--marine-gold);
  --color-btn-featured: var(--app-white);
  --color-btn-featured-hover: var(--app-white);
  --color-btn-inverse: var(--septenary);
  --color-btn-inverse-hover: var(--quaternary-900);
  --color-btn-normal: var(--marine-red-900);
  --color-btn-normal-hover: var(--marine-red-900);
  --color-input: var(--app-white);
  --color-input-focus: var(--app-white);
  --color-header: var(--app-white);
  --color-header-unimportant: var(--app-white);
  --color-link-default: var(--app-black);
  --color-link-default-hover: var(--app-black);
  --color-menu: var(--app-white);
  --color-menu-hover: var(--marine-gold);
  --color-question: var(--marine-blue);
  --color-reveal-password: var(--marine-blue);
  --color-reveal-password-hover: var(--marine-blue-200);
  --color-terminal: var(--app-black);

  --background-answer: var(--app-white);
  --background-answer-hover: var(--marine-blue);
  --background-answer-selected: var(--marine-gold);
  --background-answer-selected-hover: var(--marine-red);
  --background-body: var(--primary);
  --background-box: var(--app-white);
  --background-btn-featured: var(--marine-red);
  --background-btn-featured-hover:var(--marine-blue);
  --background-btn-inverse: var(--quaternary-900);
  --background-btn-inverse-hover: var(--septenary);
  --background-btn-normal: var(--marine-silver-300);
  --background-btn-normal-hover: var(--marine-silver);
  --background-input: var(--marine-red-700);
  --background-input-focus: var(--marine-red-900);
  --background-header: var(--marine-red);
  --background-login: var(--marine-silver-900);
  --background-menu: var(--marine-red);
  --background-terminal: var(--app-black);
  --background-welcome-content: var(--marine-silver);

  --pause-warning-from: var(--marinbe-gold);
  --pause-warning-to: var(--marine-blue);

}

[rixel-theme="dodlight"] {


  --color-answer: var(--app-black);
  --color-answer-hover: var(--app-white);
  --color-answer-selected: var(--app-black);
  --color-answer-selected-hover: var(--app-white);
  --color-body: var(--app-black);
  --color-box: var(--app-black);
  --color-box-highlighted: var(--marine-blue);
  --color-box-featured: var(--app-black);
  --color-btn-backgroundless: var(--dod-blue-ocean);
  --color-btn-backgroundless-hover: var(--marine-gold);
  --color-btn-backgroundless-dark: var(--app-white);
  --color-btn-backgroundless-dark-hover: var(--marine-gold);
  --color-btn-featured: var(--app-white);
  --color-btn-featured-hover: var(--app-white);
  --color-btn-inverse: var(--septenary);
  --color-btn-inverse-hover: var(--quaternary-900);
  --color-btn-normal: var(--marine-red-900);
  --color-btn-normal-hover: var(--marine-red-900);
  --color-input: var(--app-white);
  --color-input-focus: var(--app-white);
  --color-header: var(--app-white);
  --color-header-unimportant: var(--app-white);
  --color-link-default: var(--app-black);
  --color-link-default-hover: var(--app-black);
  --color-menu: var(--app-white);
  --color-menu-hover: var(--marine-gold);
  --color-question: var(--marine-blue);
  --color-reveal-password: var(--marine-blue);
  --color-reveal-password-hover: var(--marine-blue-200);
  --color-terminal: var(--app-black);

  --background-answer: var(--app-white);
  --background-answer-hover: var(--marine-blue);
  --background-answer-selected: var(--marine-gold);
  --background-answer-selected-hover: var(--dod-blue-cabet);
  --background-body: var(--primary);
  --background-box: var(--app-white);
  --background-btn-featured: var(--dod-blue-cabet);
  --background-btn-featured-hover:var(--marine-blue);
  --background-btn-inverse: var(--quaternary-900);
  --background-btn-inverse-hover: var(--septenary);
  --background-btn-normal: var(--marine-silver-300);
  --background-btn-normal-hover: var(--marine-silver);
  --background-input: var(--marine-red-700);
  --background-input-focus: var(--marine-red-900);
  --background-header: var(--dod-blue-cabet);
  --background-login: var(--marine-silver-900);
  --background-menu: var(--dod-blue-cabet);
  --background-terminal: var(--app-black);
  --background-welcome-content: var(--dod-blue-steel);
  --background-welcome-graph: var(--dod-blue-hazy);

  --pause-warning-from: var(--marinbe-gold);
  --pause-warning-to: var(--marine-blue);

}

[rixel-theme="doddark"] {

  --color-answer: var(--app-black);
  --color-answer-hover: var(--app-white);
  --color-answer-selected: var(--app-black);
  --color-answer-selected-hover: var(--app-white);
  --color-body: var(--app-black);
  --color-box: var(--app-black);
  --color-box-highlighted: var(--marine-blue);
  --color-box-featured: var(--app-black);
  --color-btn-backgroundless: var(--dod-blue-ocean);
  --color-btn-backgroundless-hover: var(--marine-gold);
  --color-btn-backgroundless-dark: var(--app-white);
  --color-btn-backgroundless-dark-hover: var(--marine-gold);
  --color-btn-featured: var(--app-white);
  --color-btn-featured-hover: var(--app-white);
  --color-btn-inverse: var(--septenary);
  --color-btn-inverse-hover: var(--quaternary-900);
  --color-btn-normal: var(--marine-red-900);
  --color-btn-normal-hover: var(--marine-red-900);
  --color-input: var(--app-white);
  --color-input-focus: var(--app-white);
  --color-header: var(--app-white);
  --color-header-unimportant: var(--app-white);
  --color-link-default: var(--app-black);
  --color-link-default-hover: var(--app-black);
  --color-menu: var(--app-white);
  --color-menu-hover: var(--marine-gold);
  --color-question: var(--marine-blue);
  --color-reveal-password: var(--marine-blue);
  --color-reveal-password-hover: var(--marine-blue-200);
  --color-terminal: var(--app-black);

  --background-answer: var(--app-white);
  --background-answer-hover: var(--marine-blue);
  --background-answer-selected: var(--marine-gold);
  --background-answer-selected-hover: var(--dod-blue);
  --background-body: var(--primary);
  --background-box: var(--app-white);
  --background-btn-featured: var(--dod-blue);
  --background-btn-featured-hover:var(--marine-blue);
  --background-btn-inverse: var(--quaternary-900);
  --background-btn-inverse-hover: var(--septenary);
  --background-btn-normal: var(--marine-silver-300);
  --background-btn-normal-hover: var(--marine-silver);
  --background-input: var(--dod-blue-space);
  --background-input-focus: var(--dod-blue-space);
  --background-header: var(--dod-blue);
  --background-login: var(--marine-silver-900);
  --background-menu: var(--dod-blue-space);
  --background-terminal: var(--app-black);
  --background-welcome-content: var(--dod-blue-steel);
  --background-welcome-graph: var(--dod-blue-cabet);

  --pause-warning-from: var(--marinbe-gold);
  --pause-warning-to: var(--marine-blue);

}

[rixel-theme="eagle"] {

  --color-answer: var(--app-black);
  --color-answer-hover: var(--app-white);
  --color-answer-selected: var(--app-black);
  --color-answer-selected-hover: var(--app-white);
  --color-body: var(--app-black);
  --color-box: var(--app-black);
  --color-box-highlighted: var(--marine-blue);
  --color-box-featured: var(--app-black);
  --color-btn-backgroundless: var(--marine-blue);
  --color-btn-backgroundless-hover: var(--marine-gold);
  --color-btn-backgroundless-dark: var(--app-white);
  --color-btn-backgroundless-dark-hover: var(--marine-gold);
  --color-btn-featured: var(--app-white);
  --color-btn-featured-hover: var(--app-white);
  --color-btn-inverse: var(--septenary);
  --color-btn-inverse-hover: var(--quaternary-900);
  --color-btn-normal: var(--marine-red-900);
  --color-btn-normal-hover: var(--marine-red-900);
  --color-input: var(--app-white);
  --color-input-focus: var(--app-white);
  --color-header: var(--app-white);
  --color-header-unimportant: var(--app-white);
  --color-link-default: var(--app-black);
  --color-link-default-hover: var(--app-black);
  --color-menu: var(--app-white);
  --color-menu-hover: var(--marine-gold);
  --color-question: var(--marine-blue);
  --color-reveal-password: var(--marine-blue);
  --color-reveal-password-hover: var(--marine-blue-200);
  --color-terminal: var(--app-black);

  --background-answer: var(--app-white);
  --background-answer-hover: var(--marine-blue);
  --background-answer-selected: var(--marine-gold);
  --background-answer-selected-hover: var(--marine-red);
  --background-body: var(--primary);
  --background-box: var(--app-white);
  --background-btn-featured: var(--marine-red);
  --background-btn-featured-hover:var(--marine-blue);
  --background-btn-inverse: var(--quaternary-900);
  --background-btn-inverse-hover: var(--septenary);
  --background-btn-normal: var(--marine-silver-300);
  --background-btn-normal-hover: var(--marine-silver);
  --background-input: var(--marine-red-700);
  --background-input-focus: var(--marine-red-900);
  --background-header: var(--marine-red);
  --background-login: var(--marine-silver-900);
  --background-menu: var(--marine-red);
  --background-terminal: var(--app-black);
  --background-welcome-content: var(--marine-silver);
  --background-welcome-graph: var(--dod-blue-cabet);

  --pause-warning-from: var(--marinbe-gold);
  --pause-warning-to: var(--marine-blue);

}

[rixel-theme="olive"] {

  --color-answer: var(--app-black);
  --color-answer-hover: var(--app-white);
  --color-answer-selected: var(--app-black);
  --color-answer-selected-hover: var(--app-white);
  --color-body: var(--app-black);
  --color-box: var(--app-black);
  --color-box-highlighted: var(--marine-blue);
  --color-box-featured: var(--app-black);
  --color-btn-backgroundless: var(--olive);
  --color-btn-backgroundless-hover: var(--marine-gold);
  --color-btn-backgroundless-dark: var(--app-white);
  --color-btn-backgroundless-dark-hover: var(--marine-gold);
  --color-btn-featured: var(--app-white);
  --color-btn-featured-hover: var(--app-white);
  --color-btn-inverse: var(--septenary);
  --color-btn-inverse-hover: var(--quaternary-900);
  --color-btn-normal: var(--marine-red-900);
  --color-btn-normal-hover: var(--marine-red-900);
  --color-input: var(--app-white);
  --color-input-focus: var(--app-white);
  --color-header: var(--app-white);
  --color-header-unimportant: var(--app-white);
  --color-link-default: var(--app-black);
  --color-link-default-hover: var(--app-black);
  --color-menu: var(--olive-eggshell);
  --color-menu-hover: var(--marine-gold);
  --color-question: var(--marine-blue);
  --color-reveal-password: var(--marine-blue);
  --color-reveal-password-hover: var(--marine-blue-200);
  --color-terminal: var(--app-black);

  --background-answer: var(--app-white);
  --background-answer-hover: var(--marine-blue);
  --background-answer-selected: var(--marine-gold);
  --background-answer-selected-hover: var(--marine-red);
  --background-body: var(--primary);
  --background-box: var(--app-white);
  --background-btn-featured: var(--marine-red);
  --background-btn-featured-hover:var(--marine-blue);
  --background-btn-inverse: var(--quaternary-900);
  --background-btn-inverse-hover: var(--septenary);
  --background-btn-normal: var(--marine-silver-300);
  --background-btn-normal-hover: var(--marine-silver);
  --background-input: var(--marine-red-700);
  --background-input-focus: var(--marine-red-900);
  --background-header: var(--marine-red);
  --background-login: var(--marine-silver-900);
  --background-menu: var(--olive);
  --background-terminal: var(--app-black);
  --background-welcome-content: var(--olive-green-mosstone);
  --background-welcome-graph: var(--olive-eggshell);

  --pause-warning-from: var(--marinbe-gold);
  --pause-warning-to: var(--marine-blue);

}

[rixel-theme="camo"] {

  --color-answer: var(--app-black);
  --color-answer-hover: var(--app-white);
  --color-answer-selected: var(--app-black);
  --color-answer-selected-hover: var(--app-white);
  --color-body: var(--app-black);
  --color-box: var(--app-black);
  --color-box-highlighted: var(--marine-blue);
  --color-box-featured: var(--app-black);
  --color-btn-backgroundless: var(--marine-blue);
  --color-btn-backgroundless-hover: var(--marine-gold);
  --color-btn-backgroundless-dark: var(--app-white);
  --color-btn-backgroundless-dark-hover: var(--marine-gold);
  --color-btn-featured: var(--app-white);
  --color-btn-featured-hover: var(--app-white);
  --color-btn-inverse: var(--septenary);
  --color-btn-inverse-hover: var(--quaternary-900);
  --color-btn-normal: var(--marine-red-900);
  --color-btn-normal-hover: var(--marine-red-900);
  --color-input: var(--app-white);
  --color-input-focus: var(--app-white);
  --color-header: var(--app-white);
  --color-header-unimportant: var(--app-white);
  --color-link-default: var(--app-black);
  --color-link-default-hover: var(--app-black);
  --color-menu: var(--app-white);
  --color-menu-hover: var(--marine-gold);
  --color-question: var(--marine-blue);
  --color-reveal-password: var(--marine-blue);
  --color-reveal-password-hover: var(--marine-blue-200);
  --color-terminal: var(--app-black);

  --background-answer: var(--app-white);
  --background-answer-hover: var(--marine-blue);
  --background-answer-selected: var(--marine-gold);
  --background-answer-selected-hover: var(--marine-red);
  --background-body: var(--primary);
  --background-box: var(--app-white);
  --background-btn-featured: var(--marine-red);
  --background-btn-featured-hover:var(--marine-blue);
  --background-btn-inverse: var(--quaternary-900);
  --background-btn-inverse-hover: var(--septenary);
  --background-btn-normal: var(--marine-silver-300);
  --background-btn-normal-hover: var(--marine-silver);
  --background-input: var(--marine-red-700);
  --background-input-focus: var(--marine-red-900);
  --background-header: var(--marine-red);
  --background-login: var(--marine-silver-900);
  --background-menu: var(--marine-red);
  --background-terminal: var(--app-black);
  --background-welcome-content: var(--marine-silver);

  --pause-warning-from: var(--marinbe-gold);
  --pause-warning-to: var(--marine-blue);

}

[rixel-theme="army"] {

  --color-answer: var(--app-black);
  --color-answer-hover: var(--app-white);
  --color-answer-selected: var(--app-black);
  --color-answer-selected-hover: var(--app-white);
  --color-body: var(--app-black);
  --color-box: var(--app-black);
  --color-box-highlighted: var(--marine-blue);
  --color-box-featured: var(--app-black);
  --color-btn-backgroundless: var(--marine-blue);
  --color-btn-backgroundless-hover: var(--marine-gold);
  --color-btn-backgroundless-dark: var(--app-white);
  --color-btn-backgroundless-dark-hover: var(--marine-gold);
  --color-btn-featured: var(--app-white);
  --color-btn-featured-hover: var(--app-white);
  --color-btn-inverse: var(--septenary);
  --color-btn-inverse-hover: var(--quaternary-900);
  --color-btn-normal: var(--marine-red-900);
  --color-btn-normal-hover: var(--marine-red-900);
  --color-input: var(--app-white);
  --color-input-focus: var(--app-white);
  --color-header: var(--app-white);
  --color-header-unimportant: var(--app-white);
  --color-link-default: var(--app-black);
  --color-link-default-hover: var(--app-black);
  --color-menu: var(--app-white);
  --color-menu-hover: var(--marine-gold);
  --color-question: var(--marine-blue);
  --color-reveal-password: var(--marine-blue);
  --color-reveal-password-hover: var(--marine-blue-200);
  --color-terminal: var(--app-black);

  --background-answer: var(--app-white);
  --background-answer-hover: var(--marine-blue);
  --background-answer-selected: var(--marine-gold);
  --background-answer-selected-hover: var(--marine-red);
  --background-body: var(--primary);
  --background-box: var(--app-white);
  --background-btn-featured: var(--marine-red);
  --background-btn-featured-hover:var(--marine-blue);
  --background-btn-inverse: var(--quaternary-900);
  --background-btn-inverse-hover: var(--septenary);
  --background-btn-normal: var(--marine-silver-300);
  --background-btn-normal-hover: var(--marine-silver);
  --background-input: var(--marine-red-700);
  --background-input-focus: var(--marine-red-900);
  --background-header: var(--marine-red);
  --background-login: var(--marine-silver-900);
  --background-menu: var(--marine-red);
  --background-terminal: var(--app-black);
  --background-welcome-content: var(--marine-silver);

  --pause-warning-from: var(--marinbe-gold);
  --pause-warning-to: var(--marine-blue);

}

/* document.documentElement.setAttribute('rixel-theme', 'dark'); */
[rixel-theme="dark"] {
}

@keyframes pause_warning {
  0% { color: var(--pause-warning-from); }
  50% { color: var(--pause-warning-to); }
  100% { color: var(--pause-warning-from); }
}

a {
  color: var(--color-link-default);
  text-decoration: none;
  transition: var(--default-transition);
}

a:hover {
  color: var(--color-link-default-hover);
}

html {
  font-family: 'Roboto', sans-serif;
  font-size: calc(var(--font-scale-factor) * var(--font-default-size));
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--background-body);
  color: var(--color-body);
  height: 100%;
  max-height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

.content-bigbox {
  padding: 5vmin 20vmin 5vmin 20vmin;
}

.content-bigbox-body {
  max-height: 60vh;
  padding: 0 2vw 0 2vw;
  margin-bottom: 3vh;
  margin-top: 3vh;
  overflow-y: scroll;
}

.content-bigbox-btn {
  padding-bottom: 5vmin;
  text-align: center;
}

.content-bigbox-card {
  background-color: var(--background-box);
  color: var(--color-box);
  overflow: hidden;
  border-radius: 2vmin;
}

.content-bigbox-header {
  background-color: var(--background-header);
  color: var(--color-header);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.2vmin;
  padding-bottom: 1.5vmin;
  padding-top: 1.5vmin;
  text-align: center;
}

.content-bigbox-item-content {

}

.content-bigbox-item-content h1 {
  color: var(--color-box-highlighted);
  font-size: 1.5rem;
  font-weight: 600;
}

.content-bigbox-item-content p {
  font-size: 1.25rem;
}

.content-bigbox-item-content span {
  color: var(--color-box-highlighted);
  font-weight: 600;
}

.content-bigbox-item-icon {
  color: var(--color-box-highlighted);
  font-size: 4rem;
  height: 100%;
  min-height: 100%;
  line-height: 4rem;
  text-align: center;
  vertical-align: middle;
}

.content-bigbox-item-icon span {
  font-size: 4rem;
  font-weight: 200;
}

.content-bigbox-item-row {
  margin-bottom: 2vh;
  margin-top: 2vh;
}

.content-body-column {
  background-color: var(--background-welcome-content);
}

.content-break {
  margin-top: 20vh;
  padding: 5vmin 20vmin 5vmin 20vmin;
}

.content-break-body {
  font-size: 1.25rem;
  max-height: 60vh;
  padding: 5vh 2vw 5vh 2vw;
  margin-bottom: 3vh;
  margin-top: 3vh;
  text-align: center;
}

.content-broken {
  margin-top: 20vh;
  padding: 5vmin 20vmin 5vmin 20vmin;
}

.content-broken-body {
  font-size: 1.25rem;
  max-height: 60vh;
  padding: 5vh 2vw 5vh 2vw;
  margin-bottom: 3vh;
  margin-top: 3vh;
  text-align: center;
}

.content-btn {
  display: inline-block;
  transition: var(--default-transition);
}

.content-btn-colorschemes span {
  color: var(--color-btn-backgroundless);
  transition: var(--default-transition);
}

.content-btn-colorschemes:focus span {
  color: var(--color-btn-backgroundless-hover);
}

.content-btn-colorschemes:hover span {
  color: var(--color-btn-backgroundless-hover);
}

.content-btn-fontsize span {
  color: var(--color-btn-backgroundless);
  transition: var(--default-transition);
}

.content-btn-fontsize:focus span {
  color: var(--color-btn-backgroundless-hover);
}

.content-btn-fontsize:hover span {
  color: var(--color-btn-backgroundless-hover);
}

.content-btn-inverse {
  background-color: var(--background-btn-inverse);
  color: var(--color-btn-inverse);
}

.content-btn-inverse:focus {
  background-color: var(--background-btn-inverse-hover);
  color: var(--color-btn-inverse-hover);
}

.content-btn-inverse:hover {
  background-color: var(--background-btn-inverse-hover);
  color: var(--color-btn-inverse-hover);
}

.content-btn-normal {
  background-color: var(--background-btn-normal);
  color: var(--color-btn-normal);
}

.content-btn-normal:focus {
  background-color: var(--background-btn-normal-hover);
  color: var(--color-btn-normal-hover);
}

.content-btn-normal:hover {
  background-color: var(--background-btn-normal-hover);
  color: var(--color-btn-normal-hover);
}

.content-btn-primary {
  background-color: var(--background-btn-featured);
  color: var(--color-btn-featured);
}

.content-btn-primary:focus {
  background-color: var(--background-btn-featured-hover);
  color: var(--color-btn-featured-hover);
}

.content-btn-primary:hover {
  background-color: var(--background-btn-featured-hover);
  color: var(--color-btn-featured-hover);
}

.content-btn-bigbox-cancel {
  border-radius: 1vmin;
  margin-left: 5vmin;
  padding: 0.5vmin 5vmin 0.5vmin 5vmin;
}

.content-btn-bigbox-ok {
  border-radius: 1vmin;
  margin-right: 5vmin;
  padding: 0.5vmin 5vmin 0.5vmin 5vmin;
}

.content-btn-highcontrast span {
  color: #ffff00;
  transition: var(--default-transition);
}

.content-btn-highcontrast:focus span {
  color: #ffffff;
}

.content-btn-highcontrast:hover span {
  color: #ffffff;
}

.content-btn-login {
  border-radius: 1vmin;
  padding: 0.5vmin 5vmin 0.5vmin 5vmin;
}

.content-btn-results {
  border-radius: 1.5vmin;
  font-size: 1.5rem;
  line-height: 1.5rem;
  padding: 0.5vmin 2.5vmin 0.5vmin 2.5vmin;
}

.content-btn-results span {
  align-self: center;
  display: inline-flex;
  font-size: 1.1rem;
  line-height: 1.1rem;
  margin-right: 0.5vw;
}

.content-btn-test {
  border-radius: 1.5vmin;
  font-size: 1.5rem;
  padding: 0.5vmin 5vmin 0.5vmin 5vmin;
}

.content-btn-test span {
  align-self: center;
  display: inline-flex;
  vertical-align: middle;
}

.content-btn-test-back {
  padding-left: 2vmin;
}

.content-btn-test-back span {
  margin-right: 1.5vmin;
}

.content-btn-test-skip {
  padding-right: 2vmin;
}

.content-btn-test-skip span {
  margin-left: 1.5vmin;
}

.content-engagement {
  margin-top: 20vh;
  padding: 5vmin 20vmin 5vmin 20vmin;
}

.content-engagement-body {
  font-size: 1.25rem;
  max-height: 60vh;
  padding: 5vh 2vw 5vh 2vw;
  margin-bottom: 3vh;
  margin-top: 3vh;
  text-align: center;
}

.content-engagement-body span {
  font-weight: 300;
}

.content-finish {
  margin-top: 20vh;
  padding: 5vmin 20vmin 5vmin 20vmin;
}

.content-finish-body {
  font-size: 1.25rem;
  max-height: 60vh;
  padding: 5vh 2vw 5vh 2vw;
  margin-bottom: 3vh;
  margin-top: 3vh;
  text-align: center;
}

.content-finish-body span {
  font-weight: 300;
}

.content-history-answer-selected {
  background-color: var(--background-answer-selected);
  color: var(--color-answer-selected);
}

.content-history-question {
  font-weight: 600;
}

.content-history-question-row {
  padding-top: 2vh;
}

.content-login-btn {
  padding-bottom: 4vmin;
  padding-top: 2vmin;
}

.content-login-card {
  background-color: var(--background-box);
  overflow: hidden;
  border-radius: 2vmin;
}

.content-login-header {
  background-color: var(--background-header);
  color: var(--color-header);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.2vmin;
  margin-bottom: 2vmin;
  padding-bottom: 1.5vmin;
  padding-top: 1.5vmin;
}

.content-login-input {
  padding-left: 5vmin;
  text-align: left;
}

.content-login-input input {
  background-color: var(--background-input);
  border: 0;
  color: var(--color-input);
  font-weight: 600;
  transition: var(--default-transition);
}

.content-login-input input:focus {
  background-color: var(--background-input-focus);
  color: var(--color-input-focus);
}

.content-login-input span {
  color: var(--color-reveal-password);
  display: inline-flex;
  font-size: 1.5rem;
  line-height: 1.5rem;
  margin-left: 1vw;
  transition: var(--default-transition);
  vertical-align: middle;
}

.content-login-input span:hover {
  color: var(--color-reveal-password-hover);
}

.content-login-input-row {
  background-color: var(--background-box);
  padding-bottom: 1vmin;
  padding-top: 1vmin;
  transition: var(--default-transition);
}

.content-login-label {
  padding-right: 5vmin;
  text-align: right;
}

.content-login-logo {
  padding-bottom: 10vh;
}

.content-login-password-row {

}

.content-login-screen {
  background-color: var(--background-login);
  height: 100%;
  max-height: 100%;
  min-height: 100%;
}

.content-menu {
}

.content-menu-column {
  background-color: var(--background-menu);
  color: var(--color-menu);
}

.content-menu-item {
  font-size: 2rem;
  font-weight: 200;
  letter-spacing: 0.5vmin;
  padding-bottom: 4vmin;
  padding-top: 4vmin;
  transition: var(--default-transition);
}

.content-menu-item:hover {
  color: var(--color-menu-hover);
}

.content-menu-item span {
  display: block;
  font-size: 4rem;
  font-weight: 200;
  line-height: 4rem;
}

.content-page-row {
  height: 100vh;
}

.content-question-answer-row {
  background-color: var(--background-answer);
  color: var(--color-answer);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 2vh;
  transition: var(--default-transition);
}

.content-question-answer-row:hover {
  background-color: var(--background-answer-hover);
  color: var(--color-answer-hover);
}

.content-question-answer-row-selected {
  background-color: var(--background-answer-selected);
  color: var(--color-answer-selected);
  transition: var(--default-transition);
}

.content-question-answer-row-selected:hover {
  background-color: var(--background-answer-selected-hover);
  color: var(--color-answer-selected-hover);
}

.content-question-body-row {
  background-color: var(--background-box);
  height: 80%;
}

.content-question-instructions {
  font-size: 2rem;
  text-align: left;
}

.content-question-instructions span {
  font-size: 2rem;
  font-weight: 600;
  line-height: 2rem;
}

.content-question-question-body-container {
  padding: 5vh 5vw 5vh 5vw;
}

.content-question-question-row {
  color: var(--color-question);
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 4vh;
}

.content-results {
  padding: 0;
}

.content-results-all-body {
  font-size: 1.25rem;
  text-align: justify;
}

.content-results-all-body-row {
  padding-bottom: 4vh;
  padding-top: 4vh;
}

.content-results-all-header {
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
}

.content-results-all-header {
  padding-top: 2vh;
}

.content-results-body-row {
  background-color: var(--background-results-page);
  color: var(--color-results-page);
}

.content-results-brief-level {
  color: var(--color-results-page-highlighted);
  font-size: 2rem;
  text-align: center;
  letter-spacing: 0.25vw;
  text-transform: uppercase;
}

.content-results-certlink {
  text-align: center;
}

.content-results-certlink a {
  color: var(--color-link-certlink);
  transition: var(--default-transition);
}

.content-results-certlink a:hover {
  color: var(--color-link-certlink-hover);
}

.content-results-certlink span {

}

.content-results-certlink-row {
  height: 50%;
}

.content-results-close {
  text-align: center;
  transition: var(--color-btn-backgroundless);
}

.content-results-close:hover {
  color: var(--color-btn-backgroundless-hover);
}

.content-results-close-icon {
  display: block;
  font-size: 3rem;
  font-weight: 200;
}

.content-results-close-text {
  display: block;
  font-size: 1rem;
}

.content-results-close-together {
  align-self: center;
}

.content-results-competency-map {
  background-color: var(--background-competency);
  border: 0.01vmin solid var(--border-competency);
  height: 70vh;
  max-height: 70vh;
  max-width: 100%;
  min-height: 70vh;
  min-width: 100%;
  width: 100%;
}

.content-results-content {
  overflow-y: scroll;
  padding-left: 2.5vw;
  padding-right: 5vw;
}

.content-results-content-nest {
  height: 85vh;
  max-height: 85vh;
  min-height: 85vh;
}

.content-results-detailed-item-label {
  text-align: right;
}

.content-results-detailed-item-row {

}

.content-results-detailed-item-value {
  color: var(--color-results-page-highlighted);
  font-weight: 600;
}

.content-results-detailed-subtitle {
  font-weight: 600;
  padding-bottom: 3vh;
  padding-top: 6vh;
  text-align: center;
}

.content-results-export-btn-clipboard {
  text-align: left;
}

.content-results-export-btn-email {
  text-align: right;
}

.content-results-export-btn-pdf {
  text-align: center;
}

.content-results-export-btns-row {
  height: 50%;
}

.content-results-header-export {
}

.content-results-header-label {
  font-size: 2rem;
  text-align: left;
}

.content-results-header-label span {
  align-self: center;
  height: 2rem;
  line-height: 2rem;
}

.content-results-header-logo {
  max-height: 8vh;
  text-align: right;
}

.content-results-header-logo img {
  max-height: 100%;
}

.content-results-header-row {
  background-color: var(--background-results-page);
  color: var(--color-results-page);
  padding-bottom: 2vh;
  padding-top: 2vh;
}

.content-results-recommendation-body {

}

.content-results-recommendation-body-row {

}

.content-results-recommendation-header {

}

.content-results-recommendation-header-row {

}

.content-results-recommendation-item-icon span {
  font-size: 5rem;
  font-weight: 200;
}

.content-results-recommendation-item-label {
  text-align: right;
}

.content-results-recommendation-item-nest-row {
  margin-bottom: 4vh;
}

.content-results-recommendation-item-row {
  margin-bottom: 1vh;
}

.content-results-recommendation-item-value {
  color: var(--color-results-page-highlighted);
}

.content-results-recommendation-item-value a {
  color: var(--color-results-page-external-link);
}

.content-results-recommendation-item-value a:hover {
  color: var(--color-results-page-external-link-hover);
}

.content-results-recommendation-kind {
  font-weight: 600;
}

.content-results-recommendation-kind-row {
  margin-bottom: 2vh;
  margin-top: 2vh;
}

.content-results-spinner-circle {
  background-color: var(--background-spinner-circle);
  border: var(--spinner-border);
  border-radius: calc(0.5 * var(--spinner-size));
  color: var(--color-spinner-circle);
  height: var(--spinner-size);
  margin: 0;
  max-height: var(--spinner-size);
  max-width: var(--spinner-size);
  min-height: var(--spinner-size);
  min-width: var(--spinner-size);
  overflow: hidden;
  padding: 0;
  transition: var(--spinner-transition);
  width: var(--spinner-size);
}

.content-results-spinner-item {
  background-color: var(--background-spinner-circle);
  box-sizing: border-box;
  color: var(--color-spinner-circle);
  display: inline-block;
  height: 100%;
  margin: 0;
  max-height: 100%;
  max-width: 50%;
  min-height: 100%;
  min-width: 50%;
  padding: 0;
  transition: var(--spinner-transition);
  width: 50%;
}

.content-results-spinner-item-highlighted {
  background-color: var(--background-spinner-circle-highlighted);
  color: var(--color-spinner-circle-highlighted);
}

.content-results-spinner-item-label {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  min-height: 100%;
  min-width: 100%;
  padding: 0;
  transition: var(--spinner-transition);
  width: 100%;
}

.content-results-spinner-item-label span {
  font-size: var(--spinner-font-size);
  font-weight: 300;
  transition: var(--spinner-transition);
}

.content-results-spinner-item-selected {
  background-color: var(--background-spinner-circle-selected);
  color: var(--color-spinner-circle-selected);
}

.content-results-spinner-nest {

}

.content-results-spinner-nest-row {
  padding-top: 5vh;
}

.content-results-spinner-row {
  height: 50%;
  margin: 0;
  max-height: 50%;
  max-width: 100%;
  min-height: 50%;
  min-width: 100%;
  padding: 0;
  width: 100%;
}



.content-results-topics {

}

.content-results-topics-current {

}

.content-results-topics-current-row {

}

.content-results-topics-current-text {
  align-items: flex-end;
  border-bottom: 0.1vh solid var(--color-results-topics);
  border-top: 0.1vh solid var(--color-results-topics);
  display: inline-flex;
  font-size: 1rem;
  justify-content: center;
  line-height: 1rem;
  margin: 5vh auto 5vh auto;
  max-width: 90%;
  min-width: 90%;
  padding: 2vh 0 2vh 0;
  width: 90%;
}

.content-results-topics-current-text span {
  color: var(--color-results-topics-highlighted);
  font-size: 1rem;
  line-height: 1rem;
}

.content-results-topics-info {
  display: flex;
  justify-content: center;
}

.content-results-topics-info span {

}

.content-results-topics-info-row {

}

.content-results-topics-info-text {
  max-width: 90%;
  min-width: 90%;
  text-align: justify;
  width: 90%;
}

.content-settings {
  margin-top: 5vh;
  padding: 5vh 25vw 5vh 25vw;
}

.content-settings-body {
  font-size: 1rem;
  max-height: 60vh;
  margin-bottom: 3vh;
  margin-top: 3vh;
  text-align: center;
}

.content-settings-btn-nest {
  padding-bottom: 4vh;
  padding-top: 2vh;
}

.content-settings-content-copy {
  color: var(--color-reveal-password);
  display: inline-flex;
  font-size: 1.5rem;
  line-height: 1.5rem;
  margin-left: 1vw;
  transition: var(--default-transition);
  vertical-align: middle;
}

.content-settings-content-copy:hover {
  color: var(--color-reveal-password-hover);
}

.content-settings-item-input {
  padding-left: 5vmin;
  text-align: left;
}

.content-settings-item-input input {
  background-color: var(--background-input);
  border: 0;
  color: var(--color-input);
  font-weight: 600;
  transition: var(--default-transition);
}

.content-settings-item-input input:focus {
  background-color: var(--background-input-focus);
  color: var(--color-input-focus);
}

.content-settings-item-input span {
  color: var(--color-reveal-password);
  display: inline-flex;
  font-size: 1.5rem;
  line-height: 1.5rem;
  margin-left: 1vw;
  transition: var(--default-transition);
  vertical-align: middle;
}

.content-settings-item-input span:hover {
  color: var(--color-reveal-password-hover);
}

.content-settings-item-label {
  padding-right: 5vmin;
  text-align: right;
}

.content-settings-item-row {
  background-color: var(--background-box);
  padding-bottom: 1vmin;
  padding-top: 1vmin;
  transition: var(--default-transition);
}

.content-settings-otp-input {
  padding-bottom: 2vh;
  padding-top: 2vh;
  text-align: center;
}

.content-settings-otp-input input {
  background-color: var(--background-input);
  border: 0;
  color: var(--color-input);
  font-weight: 600;
  transition: var(--default-transition);
}

.content-settings-otp-input input:focus {
  background-color: var(--background-input-focus);
  color: var(--color-input-focus);
}

.content-settings-otp-link-span {
  font-size: 0.5rem;
}

.content-settings-section-title {
  color: var(--color-box-highlighted);
  font-weight: 600;
}

.content-settings-section-title-row {
  padding-bottom: 2vh;
}

.content-site-settings-btns {

  font-size: 2rem;
  height: 2rem;
  line-height: 2rem;
  max-height: 2rem;
  min-height: 2rem;
  padding-right: 1vw;
  text-align: right;
}

.content-site-settings-btns div {
  display: inline-block;
  margin-left: 1vw;
}

.content-site-settings-btns span {
  font-size: 2rem;
}

.content-site-settings-btns-nest {
  position: absolute;
  right: 2vw;
  top: 2vh;
  z-index: 450;
}

.content-symbol {
  font-size: 2rem !important;
  font-weight: 300;
  margin-left: 0.25vw;
  margin-right: 0.25vw;
}

.content-test-achievement {

}

.content-test-clock {
  font-size: 2rem;
  text-align: right;
  vertical-align: middle;
}

.content-test-clock span {
  font-size: 2rem;
  font-weight: 200;
  letter-spacing: 0.25vw;
  line-height: 2rem;
}

.content-test-counter {
  font-size: 2rem;
  text-align: center;
}

.content-test-counter span {
  font-size: 2rem;
  font-weight: 200;
  line-height: 2rem;
}

.content-test-footer-row {
  background-color: var(--background-box);
  font-size: 2rem;
  text-align: center;
}

.content-test-footer-row span {
  display: inline-flex;
  font-size: 2rem;
  font-weight: 200;
  line-height: 2rem;
  vertical-align: middle;
}

.content-test-header-row {
  background-color: var(--background-header);
  color: var(--color-header-unimportant);
  padding-bottom: 2vh;
  padding-top: 2vh;
}

.content-test-pause-btn {
  color: var(--color-btn-backgroundless-dark);
  font-size: 3rem;
  line-height: 3rem;
  text-align: center;
}

.content-test-pause-btn span {
  display: inline-flex;
  font-size: 3rem;
  font-weight: 200;
  line-height: 3rem;
  transition: var(--default-transition);
  vertical-align: middle;
}

.content-test-pause-btn span:hover {
  color: var(--color-btn-backgroundless-dark-hover);
}

.content-test-pause-btn-warning {
  animation-name: pause_warning;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.content-testbox {
  height: 100vh;
  overflow: hidden;
  padding: 0;
  text-align: left;
}

.content-toast {
  background-color: var(--background-toast);
  color: var(--color-toast);
}

.content-welcome {
  padding-left: 5vw;
  padding-right: 5vw;
  padding-top: 10vh;
}

.content-welcome-competency-map {
  background-color: var(--background-welcome-graph);
  border: 0.01vmin solid var(--border-competency);
  height: 80vh;
  max-height: 80vh;
  max-width: 100%;
  min-height: 80vh;
  min-width: 100%;
  width: 100%;
}

.rixel-cover {
  background-color: #00000080;
  height: 100%;
  left: 0;
  max-height: 100%;
  min-height: 100%;
  max-width: 100%;
  min-width: 100%;
  overflow: hidden;
  padding: 0;
  position: fixed;
  visibility: hidden;
  width: 100%;
  z-index: 200;
}

.rixel-cursor-default {
  cursor: default;
}

.rixel-default-page-style {
  display: block;
  margin: 0;
  min-height: 100%;
  padding: 0;
  z-index: 100;
}

.rixel-disable-select {
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.rixel-flip-horizontally {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.rixel-flip-vertically {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}

.rixel-full-height {
  height: 100%;
  max-height: 100%;
  min-height: 100%;
}

.rixel-full-width {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
}

.rixel-justify-text {
  text-align: justify;
}

.rixel-no-margin-and-padding {
  margin: 0;
  padding: 0;
}

.rixel-overflow-hidden {
  overflow: hidden;
}

.rixel-toast {
  bottom: 5%;
  cursor: default;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0px);
  z-index: 500;
}

.rixel-toast-body {
  font-size: 1rem;
  font-weight: 600;
}

#msas_spinner_brief {
  border-bottom: var(--spinner-border-inner);
  border-left: var(--spinner-border-inner);
  padding: calc(0.1 * var(--spinner-size)) calc(0.1 * var(--spinner-size)) 0 0;
  transition: var(--spinner-transition);
}

#msas_spinner_competency {
  border-left: var(--spinner-border-inner);
  border-top: var(--spinner-border-inner);
  padding: 0 calc(0.1 * var(--spinner-size)) calc(0.1 * var(--spinner-size)) 0;
  transition: var(--spinner-transition);
}

#msas_spinner_detailed {
  border-bottom: var(--spinner-border-inner);
  border-right: var(--spinner-border-inner);
  padding: calc(0.1 * var(--spinner-size)) 0 0 calc(0.1 * var(--spinner-size));
  transition: var(--spinner-transition);
}

#msas_spinner_recommendation {
  border-right: var(--spinner-border-inner);
  border-top: var(--spinner-border-inner);
  padding: 0 0 calc(0.1 * var(--spinner-size)) calc(0.1 * var(--spinner-size));
  transition: var(--spinner-transition);
}

/** -sm **/
@media (min-width: 576px) {

}

/** -md **/
@media (min-width: 768px) {

  .rixel-md-full-height {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
  }

}

/** -lg **/
@media (min-width: 992px) {

}

/** -xl **/
@media (min-width: 1200px) {

}

/** -xxl **/
@media (min-width: 1440px) {

}