/*
    overrides DJANGO Admin styles in base.css
    make this the last stylesheet in the list
    please comment any changes
*/

/* VARIABLE DEFINITIONS */
:root {
  --primary: #79aec8;
  --primary: #221786;
  --primary: #2227a6;
  --secondary: #417690;
  --secondary: #417690;
  --accent: #f5dd5d;
  --primary-fg: #fff;

  --body-fg: #333;
  --body-bg: #fff;
  --body-quiet-color: #666;
  --body-loud-color: #000;

  --header-color: #ffc;
  --header-branding-color: var(--accent);
  --header-bg: var(--secondary);
  --header-bg: var(--primary);
  --header-link-color: var(--primary-fg);

  --breadcrumbs-fg: #c4dce8;
  --breadcrumbs-link-fg: var(--body-bg);
  --breadcrumbs-bg: var(--primary);

  --link-fg: #447e9b;
  --link-fg: #245eab;
  --link-hover-color: #036;
  --link-hover-color: #447e9b;
  --link-selected-fg: #5b80b2;

  --hairline-color: #e8e8e8;
  --border-color: #ccc;

  --error-fg: #ba2121;

  --message-success-bg: #dfd;
  --message-warning-bg: #ffc;
  --message-error-bg: #ffefef;

  --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
  --selected-bg: #e4e4e4; /* E.g. selected table cells */
  --selected-row: #ffc;

  --button-fg: #fff;
  --button-bg: var(--primary);
  --button-bg: #555555;
  --button-hover-bg: #609ab6;
  --button-hover-bg: #5588ff;
  --default-button-bg: var(--secondary);
  --default-button-bg: #555588;
  --default-button-hover-bg: #205067;
  --default-button-hover-bg: #222288;
  --close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
  --close-button-hover-bg: #747474;
  --delete-button-bg: #ba2121;
  --delete-button-hover-bg: #a41515;

  --object-tools-fg: var(--button-fg);
  --object-tools-bg: var(--close-button-bg);
  --object-tools-hover-bg: var(--close-button-hover-bg);

/* Home page box colours and padding */

  --ptop-bg: 0.1rem;
  --pleft-bg: 1.0rem;
  --pright-bg: 1.0rem;
  --pbottom-bg: 0.2rem;
  --mtop-bg: 1.2rem;
  --mbottom-bg: 1.2rem;

  --bradius-bg: 10px;

  --product-bg: #ddf;
  --consultant-bg: #fba;
  --search-bg: #edc;
  --support-bg: #ffb;
  --rawmaterial-bg: #cff;
  --notsure-bg: #bfb;
  --notsure-bg: #ffb;
  --notsure-bg: #eeb;
  --about-bg: #fcf;
  --status-bg: #9df;
  --import-bg: #fd9;
  --faq-bg: #ddd;
  --sample-bg: #dfd;
  --disable: #888;


/* if any of the above are changed please comment them /
/* below are used in chemintro.css and darker.css */

    /* bg-color
    --topheader-bg: #9fcfff;
    --footer-bg:#6090a7;
    --lowerlinks-bg:#406677;
    */

    --topheader-bg: var(--primary);
    --topfooter-bg: var(--topheader-bg);
    --footer-bg: var(secondary);
    --lowerlinks-bg:  var(--primary);

    /* font-color */
    --body-font: var(--body-fg);
    --required-field-font: var(--body-loud-color);
    --links-color: #333333;
    --links-visited-color: #0030f0;
    --hover: #888;
    --reverse: #eeeeee;
    --error-red: var(--error-fg);
    --field-label: #444;
    --help-red: #732;
    --help-pink: #a65;
    --help-blue: #237;

    /* color for darker.css */
    --branding: #f5dd5d;
    --footer-bg: #85bfdc;
    --help-red: #732;
    --help-blue: #237;
    --error-red: #ff1111;
    --field-label: #444;
    --hr-gray: #aaa;
}

}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #264b5d;
    --primary-fg: #eee;

    --body-fg: #eeeeee;
    --body-bg: #121212;
    --body-quiet-color: #e0e0e0;
    --body-loud-color: #ffffff;

    --breadcrumbs-link-fg: #e0e0e0;
    --breadcrumbs-bg: var(--primary);

    --link-fg: #81d4fa;
    --link-hover-color: #4ac1f7;
    --link-selected-fg: #6f94c6;

    --hairline-color: #272727;
    --border-color: #353535;

    --error-fg: #e35f5f;
    --message-success-bg: #006b1b;
    --message-warning-bg: #583305;
    --message-error-bg: #570808;

    --darkened-bg: #212121;
    --selected-bg: #1b1b1b;
    --selected-row: #00363a;

    --close-button-bg: #333333;
    --close-button-hover-bg: #666666;
  }
}