:root {
    /* master color */
    --submitty-logo-blue: #316498;

    /* might wanna change blue borders/hover text/sidebar text to submitty blue */

    /* buttons, primarily but also can be used for notifications/anything
    that requires this color scheme */
    --danger-red: #dc3545;
    --focus-danger-red: #ff5555;
    --hover-active-danger-red: #ff6661;
    --disabled-danger-red: #ad3937;
    --warning-brown: #945600;
    --focus-warning-brown: #ad7c37;
    --hover-warning-brown: #9c5b00;
    --active-warning-brown: #b58a4e;
    --good-green: #5fb760;
    --hover-good-green: #66cc77;
    --disabled-good-green: #5cb85c;
    --actionable-blue: #006398;
    --focus-actionable-blue: #368aae;
    --hover-actionable-blue: #00729e;
    --hover-light-border-actionable-blue: #2e6da4;
    --hover-border-actionable-blue: #204d74;
    --hover-dark-border-actionable-blue: #122b40;
    --hover-notification: #eaeaea;
    --standard-lightskyblue: #87cefa;
    --standard-mediumorchid: #ba55d3;
    --info-blue: #5bc0de;
    --hover-focus-info-blue: #31b0d5;
    --hover-active-all-info-blue: #269abc;
    --default-white: #ffffff;
    --default-black: #000000;
    --always-default-white: #ffffff;
    --badge-backgroud-red: #ff0000;
    --dark-badge-background-red: #ad3937;
    --error-alert-dark-red: #cc0000;
    --gray-red: #b94a48;
    --alert-background-bronze: #fcf8e3;
    --alert-border-bronze: #fbeed5;
    --alert-bronze: #c09853;
    --alert-success-green: #468847;
    --alert-background-success-green: #dff0d8;
    --alert-border-success-green: #d6e9c6;
    --alert-danger-red: #8b0000;
    --alert-border-danger-red: #f2dede;
    --alert-background-danger-red: #eed3d7;
    --alert-info-blue: #3a87ad;
    --alert-background-blue: #d9edf7;
    --alert-border-blue: #bce8f1;
    --alert-warning-yellow: #d09404;
    --alert-background-warning-yellow: #fff3cd;
    --alert-border-yellow: #f2e3b5;
    --alert-invalid-entry-pink: #ffdddd;
    --standard-pale-blue-gray: #e8f0f7;
    --btn-standard-pale-blue-gray: #e8f0f7;
    --btn-default-active: #e8f0f7;
    --btn-default-white: #ffffff;
    --btn-default-hover: #f5f5f5;
    --standard-light-blue-gray: #ddddff;
    --standard-pale-gray: #f5f5f5;
    --standard-hover-light-gray: #e5e5e5;
    --standard-light-gray: #d3d3d3;
    --standard-light-medium-gray: #bbbbbb;
    --standard-medium-gray: #888888;
    --standard-medium-dark-gray: #666666;
    --standard-dark-gray: #555555;
    --standard-deep-dark-gray: #2e2e2e;
    --standard-gray-black: #111111;
    --solution-text-background: #cccccc;
    --standard-pale-blue: #d8eef6;
    --standard-focus-cornflower-blue: #6495ed;
    --standard-medium-blue: #337ab7;
    --standard-medium-vibrant-blue: #1e90ff;
    --standard-aqua: #00b3fa;
    --standard-dark-blue: #23527c;
    --standard-medium-dark-blue: #286090;
    --standard-deep-blue: #0000ff;
    --standard-gray-blue: #0088bf;
    --standard-vibrant-red: #ff0000;
    --standard-light-red: #d9534f;
    --standard-medium-red: #c9302c;
    --standard-medium-dark-red: #962e2e;
    --standard-red-orange: #f62817;
    --standard-light-orange: #f0ad4e;
    --standard-medium-orange: #ec971f;
    --standard-vibrant-orange: #ffa500;
    --standard-creamsicle-orange: #ff8040;
    --standard-peachpuff: #ffdab9;
    --standard-vibrant-yellow: #ffff00;
    --standard-plum-purple: #72518a;
    --standard-vibrant-pink: #fd4472;
    --standard-vibrant-pink-red: #c40233;
    --standard-vibrant-green: #33cc33;
    --standard-medium-green: #449d44;
    --standard-dark-green: #008000;
    --standard-deep-dark-green: #006600;
    --standard-mint-green: #00e08e;
    --standard-dark-mint-green: #00a368;
    --standard-medium-dark-lime-green: #7dfa78;
    --standard-vibrant-dark-blue: #006699;
    --standard-bronze: #856404;
    --standard-pastel-pink: #f2dede;
    --standard-light-pink: #ff9999;
    --standard-tangerine-yellow: #ffcc00;
    --standard-pale-yellow: #ffff99;
    --standard-light-yellow: #ffff66;
    --standard-light-yellow-brown: #eac73d;
    --standard-beige: #f5f5dc;
    --standard-light-green: #99ff99;
    --standard-pastel-blue: #d9edf7;
    --standard-light-blue: #99ccff;
    --standard-light-seafoam: #a4dad5;

    /* the look of the webpage itself */
    --background-blue: #f6fbfe;
    --main-body-white: #ffffff;
    --subheading-underscore-grey: #888888;
    --subtle-grey-background: #cccccc;

    /* dropdown buttons */
    --focus-dropdown: #f5f5f5;

    /* text and fonts */
    --text-black: #000000; /* use only on white/background-blue */
    --text-white: #ffffff; /* use on all colors */
    --btn-text-white: #ffffff;
    --btn-text-black: #000000;
    --btn-default-text: #2e2e2e;

    /* discussion forum */
    --deleted-and-unviewed-thread: #acc0d7;
    --deleted-discussion-post-grey: #dcdcdc;
    --important-post: #ffd700; /* is also for star color */
    --attachment-box-color: #f5f5f5;
    --file-upload-table-hover: #d1d1d1;
    --upduck-yellow: #f5bd41;

    /* notebook builder */
    --notebook-builder-form-options-orange: #f7d8ba;
    --notebook-builder-itempool-green: #caf1de;

    /* these differ from the colors on the posts for some reason?
        so I will put them here for reference
        green-message: #008800
        blue-message: #0a6496
        red-message99: #af0000
        yellow-message: #ff9900
        black-message: #000000 */

    /* links */
    --external-link-blue: #2627ee;
    --external-link-hover: #131399;
    --external-link-active: #991313;

    /* sidebar */
    --selected-nav-sidebar: #d9e1e2;
    --nav-sidebar-text: #006398;
    --sidebar-hover-text: #002334;

    /* tables */
    --table-info: #d9edf7;

    /* datepicker background colors */
    --date-picker-green: #87db88;
    --date-picker-yellow: #ffeb54;
    --date-picker-red: #f76c6c;

    /* simple gradeables */
    --simple-full-credit-dark-blue: #149bdf;
    --simple-half-credit-light-blue: #88d0f4;
    --simple-save-error-red: #da4f49;

    /* peer feedback */
    --peer-feedback-red: #804040;
    --peer-feedback-red-translucent: #800000b0;
    --peer-feedback-green: #008000;

    /* For categorizing objects */
    --category-color-1: #f44336;
    --category-color-2: #ff9800;
    --category-color-3: #4caf50;
    --category-color-4: #4fc3f7;
    --category-color-5: #7986cb;
    --category-color-6: #b39ddb;
    --category-color-7: #f8bbd0;
    --category-color-8: #ce93d8;
    --category-color-9: #8ac78e;
    --category-color-10: #b39b61;
    --category-color-11: #6eb9aa;
    --category-color-12: #b4be79;
    --category-color-13: #94a2cc;
    --category-color-14: #80be79;
    --category-color-15: #b48b64;
    --category-color-16: #b9b26e;
    --category-color-17: #83a0c3;
    --category-color-18: #ada5d4;
    --category-color-19: #e57fcf;
    --category-color-20: #c0c246;

    /* rainbow */
    --rainbow-gradient: linear-gradient(
        135deg,
        rgb(255 0 0 / 30%),
        rgb(255 255 0 / 30%),
        rgb(0 255 0 / 30%),
        rgb(0 255 155 / 30%),
        rgb(0 0 255 / 30%),
        rgb(255 0 255 / 30%),
        rgb(255 0 0 / 30%)
    );

    /* poll histogram colors */
    --histogram-default: var(--standard-vibrant-dark-blue);
    --histogram-correct: var(--standard-deep-dark-green);

    /* other */
    --box-shadow-very-transparent: #00000020;
    --box-shadow-slightly-transparent: #00000030;
    --black-moderately-transparent: #00000080;
    --white-moderately-transparent: #ffffff80;
    --no-image-available: #595959;
    --standard-input-background: #ffffff;
    --checkbox-black: #000000;
    --overall-comment: #e9efef;
    --grading-note: #777777;
    --file-browser-blue: #2627ee;
    --extra-credit-blue: #0a6495;
    --viewed-content: #e8f0f7;
    --code-box-background-light-gray: #fafafa;
    --code-box-font-color-dark-gray: #343a42;
    --invisible: #00000000;

    /* autograding results */
    --diff-char: var(--default-black);
    --diff-background-all: var(--default-white);
    --diff-background-actual: #fceae9;
    --diff-background-expected: #defae1;
    --diff-char-background-actual: #fbc1c0;
    --diff-char-background-expected: #a8edb0;
}

[data-black_mode="black"][data-theme="dark"] {
    --default-white: #000000;
    --background-blue: #000000;
    --default-black: #ffffff;

    /* poll histogram colors */
    --histogram-default: var(--standard-light-blue);
    --histogram-correct: var(--standard-medium-dark-lime-green);

    /* autograding results */
    --diff-background-all: var(--default-white);
    --diff-background-actual: #2c1c21;
    --diff-background-expected: #122816;
    --diff-char-background-actual: #f26b6c;
    --diff-char-background-expected: #47c73b;
}

[data-theme="dark"] {
    /* might wanna change blue borders/hover text/sidebar text to submitty blue
      buttons, primarily but also can be used for notifications/anything
      that requires this color scheme */
    --standard-lightskyblue: #0975b9;
    --standard-mediumorchid: #b240ce;
    --default-white: #36393f;
    --default-black: #ffffff;
    --always-default-white: #ffffff;
    --badge-backgroud-red: #ff0000;
    --error-alert-dark-red: #ff7a7a;
    --solution-text-background: #696969;
    --alert-border-bronze: #514123;
    --alert-background-blue: #687379;
    --alert-border-blue: #2b5e68;
    --standard-pale-blue-gray: #2a2224;
    --btn-default-active: #6d6d6d;
    --btn-default-white: #515151;
    --btn-default-hover: #595959;
    --hover-notification: #283e57;
    --standard-hover-light-gray: #2b2b2b;
    --standard-light-gray: #757575;
    --standard-medium-gray: #a3a3a3;
    --standard-medium-dark-gray: #b1b1b1;
    --standard-focus-cornflower-blue: #2a3e64;
    --standard-deep-blue: #9e9eff;
    --standard-peachpuff: #99704c;
    --standard-vibrant-yellow: #757500;
    --standard-dark-green: #00bd00;
    --standard-bronze: #e6ac00;
    --standard-light-yellow-brown: #8e7306;
    --standard-beige: #77776a;
    --standard-light-green: #427742;
    --standard-pastel-blue: #2f6580;

    /* the look of the webpage itself */
    --background-blue: #202225;
    --main-body-white: #ffffff;
    --subheading-underscore-grey: #888888;
    --subtle-grey-background: #555555;

    /* dropdown buttons */
    --focus-dropdown: #f5f5f5;

    /* text and fonts */
    --text-black: #ffffff; /* use only on white/background-blue */
    --text-white: #000000; /* use on all colors */
    --btn-text-white: #ffffff;
    --btn-text-black: #000000;
    --btn-default-text: #ffffff;

    /* discussion forum */
    --attachment-box-color: #4a4a4a;
    --file-upload-table-hover: #4a4a4a;
    --deleted-discussion-post-grey: #283e57;
    --deleted-and-unviewed-thread: #3e5f7a;

    /* these differ from the colors on the posts for some reason?
          so I will put them here for reference
          green-message: #008800
          blue-message: #0a6496
          red-message99: #af0000
          yellow-message: #ff9900
          black-message: #000000 */

    /* links */
    --external-link-blue: #9b9bf3;
    --external-link-hover: #a1a1ec;

    /* sidebar */
    --selected-nav-sidebar: #535353;
    --nav-sidebar-text: #c8c8c8;
    --sidebar-hover-text: #ffffff;

    /* tables */
    --table-info: #566268;

    /* datepicker background colors */
    --date-picker-green: #446f44;
    --date-picker-yellow: #9d9131;
    --date-picker-red: #953d3d;

    /* notebook builder */
    --notebook-builder-form-options-orange: #7b6148;
    --notebook-builder-itempool-green: #50826a;

    /* other */
    --box-shadow-very-transparent: #00000000;
    --box-shadow-slightly-transparent: #00000000;
    --white-moderately-transparent: #00000000;
    --no-image-available: #adadad;
    --standard-input-background: #4a4a4a;
    --checkbox-black: #5296db;
    --overall-comment: #4e5353;
    --grading-note: #a8a8a8;
    --file-browser-blue: #ffffff;
    --extra-credit-blue: #2dacf0;
    --viewed-content: #50535a;
    --code-box-background-light-gray: #282c34;
    --code-box-font-color-dark-gray: #abb2bf;

    /* poll histogram colors */
    --histogram-default: var(--standard-light-blue);
    --histogram-correct: var(--standard-medium-dark-lime-green);

    /* autograding results */
    --diff-char: var(--always-default-white);
    --diff-background-all: #181c24;
    --diff-background-actual: #2e1b20;
    --diff-background-expected: #16261e;
    --diff-char-background-actual: #7a3133;
    --diff-char-background-expected: #29562d;
}

/* Dark Theme Versions of Colors */
:root[data-theme="dark"] {
    /* For categorizing objects */
    --category-color-1: #b71c1c;
    --category-color-2: #bf360c;
    --category-color-3: #1b5e20;
    --category-color-4: #1565c0;
    --category-color-5: #1a237e;
    --category-color-6: #673ab7;
    --category-color-7: #d81b60;
    --category-color-8: #9c27b0;
    --category-color-9: #8ac78e;
    --category-color-10: #b39b61;
    --category-color-11: #6eb9aa;
    --category-color-12: #b4be79;
    --category-color-13: #94a2cc;
    --category-color-14: #80be79;
    --category-color-15: #b48b64;
    --category-color-16: #b9b26e;
    --category-color-17: #83a0c3;
    --category-color-18: #ada5d4;
    --category-color-19: #e57fcf;
    --category-color-20: #c0c246;
}