:root {
    --config-width: 910px;
    --config-width-xxl: 1000px;
    --config-width-xl: 910px;
    --config-width-large: 700px;
    --config-width-medium: 550px;
    --config-width-small: 320px;
    --config-color-link: #1e849e;
    --config-color-background: #eceff1;
    --config-color-background-dark: #dfe2e4;
    --config-color-background-fade: #ffffff;
    --config-color-background-fade-super: #fdfdfd;
    --config-color-background-focus: #f5f5f5;
    --config-color-background-input: #ffffff;
    --config-color-placeholder: #868686;
    --config-color-tooltip-text: #dce8f5;
    --config-color-tooltip-background: #333333;
    --config-color-focus: #f02e65;
    --config-color-focus-fade: #fef8fa;
    --config-color-focus-hover: #ff729b;
    --config-color-focus-glow: #fce5ec;
    --config-color-focus-dark: #c52653;
    --config-color-normal: #40404c;
    --config-color-dark: #313131;
    --config-color-fade: #8f8f8f;
    --config-color-fade-light: #e2e2e2;
    --config-color-fade-super: #f1f3f5;
    --config-color-danger: #f53d3d;
    --config-color-success: #1bbf61;
    --config-color-warning: #fffbdd;
    --config-color-info: #386fd2;
    --config-border-color: #f3f3f3;
    --config-border-fade: #e0e3e4;
    --config-border-radius: 10px;
    --config-prism-background: #373738;
    --config-prism-numbers: #39393c;
    --config-note-background: #f1fbff;
    --config-note-border: #5bceff;
    --config-warning-background: #fdf7d9;
    --config-warning-border: #f8e380;
    --config-social-twitter: #1da1f2;
    --config-social-github: #000000;
    --config-social-discord: #7189dc;
    --config-social-facebook: #4070b4;
    --config-language-bash: #2b2626;
    --config-language-bash-contrast: #fff;
    --config-language-javascript: #fff054;
    --config-language-javascript-contrast: #333232;
    --config-language-web: #fff054;
    --config-language-web-contrast: #333232;
    --config-language-html: #ff895b;
    --config-language-html-contrast: #ffffff;
    --config-language-yaml: #ca3333;
    --config-language-yaml-contrast: #ffffff;
    --config-language-php: #6182bb;
    --config-language-php-contrast: #ffffff;
    --config-language-nodejs: #8cc500;
    --config-language-nodejs-contrast: #ffffff;
    --config-language-ruby: #fc3f48;
    --config-language-ruby-contrast: #ffffff;
    --config-language-python: #3873a2;
    --config-language-python-contrast: #ffffff;
    --config-language-go: #00add8;
    --config-language-go-contrast: #ffffff;
    --config-language-dart: #035698;
    --config-language-dart-contrast: #ffffff;
    --config-language-flutter: #035698;
    --config-language-flutter-contrast: #ffffff;
    --config-modal-note-background: #f5fbff;
    --config-modal-note-border: #eaf2f7;
    --config-modal-note-color: #3b5d73;
    --config-switch-background: #e2e2e2;
  
    // Console
    --config-console-background: #eceff1;
    --config-console-nav-start: #143650;
    --config-console-nav-end: #302839;
    --config-console-nav-border: #2a253a;
    --config-console-nav-switch-background: #ececec;
    --config-console-nav-switch-color: #868686;
    --config-console-nav-switch-arrow: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23868686' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
  
    .theme-dark {
        --config-color-background: #061F2F;
        --config-color-background-dark: #262d50;
        --config-color-background-fade: #1c223a;
        --config-color-background-fade-super: #1a1f35;
        --config-color-background-focus: #1a1f35;
        --config-color-background-input: #dce8f5;
        --config-color-tooltip-text: #061F2F;
        --config-color-tooltip-background: #dce8f5;
        --config-color-link: #4caedb;
        --config-color-placeholder: #9ea1af;
        --config-color-focus: #c7d8eb;
        --config-color-focus-fade: #1e233e;
        --config-color-focus-hover: #d3deea;
        --config-color-focus-glow: #d3deea;
        --config-color-focus-dark: #657586;
        --config-color-normal: #c7d8eb;
        --config-color-dark: #c7d8eb;
        --config-color-fade: #bec3e0;
        --config-color-fade-light: #181818;
        --config-color-fade-super: #262D50;
        --config-color-danger: #d84a4a;
        --config-color-success: #34b86d;
        --config-color-warning: #e0d56d;
        --config-color-info: #386fd2;
        --config-border-color: #262D50;
        --config-border-fade: #19203a;
        --config-prism-background: #1F253F;
        --config-prism-numbers: #1F253F;
        --config-note-background: #171e33;
        --config-note-border: #262D50;
        --config-warning-background: #1F253F;
        --config-warning-border: #262D50;
        --config-social-twitter: var(--config-color-normal);
        --config-social-github: var(--config-color-normal);
        --config-social-discord: var(--config-color-normal);
        --config-social-facebook: var(--config-color-normal);
        --config-language-bash: var(--config-color-normal);
        --config-language-bash-contrast: var(--config-color-background);
        --config-language-javascript: var(--config-color-normal);
        --config-language-javascript-contrast: var(--config-color-background);
        --config-language-web: var(--config-color-normal);
        --config-language-web-contrast: var(--config-color-background);
        --config-language-yaml: var(--config-color-normal);
        --config-language-yaml-contrast: var(--config-color-background);
        --config-language-html: var(--config-color-normal);
        --config-language-html-contrast: var(--config-color-background);
        --config-language-php: var(--config-color-normal);
        --config-language-php-contrast: var(--config-color-background);
        --config-language-nodejs: var(--config-color-normal);
        --config-language-nodejs-contrast: var(--config-color-background);
        --config-language-ruby: var(--config-color-normal);
        --config-language-ruby-contrast: var(--config-color-background);
        --config-language-python: var(--config-color-normal);
        --config-language-python-contrast: var(--config-color-background);
        --config-language-go: var(--config-color-normal);
        --config-language-go-contrast: var(--config-color-background);
        --config-language-dart: var(--config-color-normal);
        --config-language-dart-contrast: var(--config-color-background);
        --config-language-flutter: var(--config-color-normal);
        --config-language-flutter-contrast: var(--config-color-background);
        --config-modal-note-background: #15192b;
        --config-modal-note-border: #161b31;
        --config-modal-note-color: var(--config-color-normal);
        --config-switch-background: var(--config-color-normal);
        
        // Console
        --config-console-background: #20263f;
        --config-console-nav-start: #1c2139;
        --config-console-nav-end: #151929;
        --config-console-nav-border: #171b30;
        --config-console-nav-switch-background: var(--config-color-focus);
        --config-console-nav-switch-color: var(--config-color-background);
        --config-console-nav-switch-arrow: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%231C2138' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    }
  }
  
  .theme-light {
    .force-light {
      display: block!important;
    }
  }
  
  .theme-dark {
    .force-dark {
      display: block!important;
    }
  }
  
  .force-dark {
    display: none!important;
  }
  
  .force-light {
    display: none!important;
  }