@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
  url(/font/material-icons/material-icons.woff2) format('woff2'),
  url(/font/material-icons/material-icons.woff) format('woff');
}

@media (prefers-color-scheme: light) {
  :root {
    --background-color: white;
    --box-shadow-color: rgba(0,0,0,0.2);
    --box-shadow-hover-color: gray;
    --bred-crumb-background-color: lightGray;
    --button-background-color: #0e1581;
    --button-border-color: darkGray;
    --button-caution-background-color: #990000;
    --button-caution-border-color: darkGray;
    --button-caution-text-color: white;
    --button-disabled-background-color: #6699CC;
    --button-disabled-border-color: darkGray;
    --button-disabled-text-color: white;
    --button-text-color:var(--navbar-a-color, white);
    --five-days-due-icon-color:yellow;
    --input-background-color: white;
    --input-border-color: gray;
    --input-disabled-background-color: lightGray;
    --input-focus-background-color: white;
    --input-focus-border-color: black;
    --input-text-color: black;
    --markdown-editor-active-line-background-color: rgba(0, 170, 170, 0.1);
    --markdown-editor-active-line-gutter-background-color: var(--markdown-editor-active-line-background-color);
    --markdown-editor-caret-color: black;
    --markdown-editor-gutter-background-color: lightGray;
    --markdown-editor-gutter-border-color: gray;
    --markdown-editor-gutter-color: black;
    --navbar-a-color:white;
    --navbar-background-color:#141eb8;
    --navbar-dropdown-background-color:#f9f9f9;
    --navbar-dropdown-box-shadow:black;
    --navbar-dropdown-button-color:white;
    --navbar-dropdown-color:black;
    --navbar-hover-background-color:blue;
    --navebar-dropdown-hover-background-color: #ddd;
    --not-due-icon-color:green;
    --over-due-icon-color: red;
    --save-status-failed-icon-color:red;
    --save-status-pending-icon-color:blue;
    --save-status-saved-icon-color:black;
    --save-status-saving-icon-color:blue;
    --table-border-color: black;
    --task-status-icon-color:blue;
    --text-color: black;
    --text-link-color: blue;
    --text-link-hover-color: darkBlue;
    --text-link-hover-visited-color:  #450045;
    --text-link-visited-color: purple;
    --today-due-icon-color:red;
    --checkbox-background-color:lightGray;
    --checkbox-color:black;
    --checkbox-checked-background-color:--black;
    --checkbox-checked-color:lightGray;
    --divider-bar-color:black;
    --highlight-color:yellow;
    --comment-color:gray;
    --hover-mask-color:rgba(0, 0, 0, 0.1);
    --alert-background-color:#f44336;
    --success-background-color:#04AA6D;
    --info-background-color:#2196F3;
    --warning-background-color:#ff9800;
    --error-background-color:#f44336;
    --alert-text-color:white;
    --success-text-color:white;
    --info-text-color:white;
    --warning-text-color:white;
    --error-text-color:white;

  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --black: #000000;
    --red: #AA0000;
    --green: #00AA00;
    --orange: #AA5500;
    --blue: #0000AA;
    --violet: #AA00AA;
    --teal: #00AAAA;
    --gray: #555555;
    --yellow: #FFFF55;
    --white: #FFFFFF;
    --light-gray: #AAAAAA;
    --dark-gray: #222222;
    --dark-red: #680000;
    --dark-blue: #000068;
    --light-red: #FF5555;
    --light-green: #55FF55;
    --light-blue: #5555FF;
    --light-violet: #FF55FF;
    --light-teal: #55FFFF;

    --background-color: #000000;
    --text-color: #00a900;
    --border-color: #545454;

    --text-link-color: #62BED4;
    --text-link-visited-color: #B771D4;
    --text-link-hover-color: #00d4d4;
    --text-link-hover-visited-color: #b200fe;

    --button-background-color: #2a2a2a;
    --button-border-color: var(--border-color);
    --button-text-color: var(--text-color);
    --button-caution-background-color: #500e16;
    --button-caution-border-color: var(--button-border-color);
    --button-caution-text-color: var(--button-text-color);
    --button-disabled-background-color: #0e3050;
    --button-disabled-border-color: var(--button-border-color);
    --button-disabled-text-color: var(--button-text-color);


    --box-shadow-color: rgba(0,170,0,0.5);
    --box-shadow-hover-color: rgba(35, 173, 278, 1);
    --bred-crumb-background-color: var(--dark-gray);
    --five-days-due-icon-color:var(--yellow);
    --input-background-color: var(--dark-gray);
    --input-border-color: var(--gray);
    --input-disabled-background-color: var(--gray);
    --input-focus-background-color: var(--dark-gray);
    --input-focus-border-color: var(--light-green);
    --input-text-color: var(--green);
    --markdown-editor-active-line-background-color: rgba(0, 170, 170, 0.25);
    --markdown-editor-active-line-gutter-background-color: var(--markdown-editor-active-line-background-color);
    --markdown-editor-caret-color: var(--white);
    --markdown-editor-gutter-background-color: var(--background-color);
    --markdown-editor-gutter-border-color: var(--input-border-color);
    --markdown-editor-gutter-color: var(--text-color);
    --navbar-a-color: var(--green);
    --navbar-background-color: var(--dark-gray);
    --navbar-dropdown-background-color: var(--gray);
    --navbar-dropdown-box-shadow: var(--black);
    --navbar-dropdown-button-color: var(--green);
    --navbar-dropdown-color: var(--green);
    --navbar-hover-background-color: var(--gray);
    --navebar-dropdown-hover-background-color: var(--dark-gray);
    --not-due-icon-color:var(--green);
    --over-due-icon-color: var(--red);
    --save-status-failed-icon-color:var(--light-red);
    --save-status-pending-icon-color:var(--light-blue);
    --save-status-saved-icon-color:var(--green);
    --save-status-saving-icon-color:var(--light-blue);
    --table-border-color: var(--gray);
    --task-status-icon-color:var(--blue);
    --today-due-icon-color:var(--orange);
    --checkbox-background-color:var(--dark-gray);
    --checkbox-color:var(--green);
    --checkbox-checked-background-color:var(--green);
    --checkbox-checked-color:var(--dark-gray);
    --divider-bar-color:var(--green);
    --highlight-color:var(--dark-red);
    --comment-color:var(--gray);
    --hover-mask-color:rgba(255, 255, 255, 0.25);
    --alert-background-color:var(--yellow);
    --success-background-color:var(--green);
    --info-background-color:var(--gray);
    --warning-background-color:var(--orange);
    --error-background-color:var(--red);
    --alert-text-color:var(--black);
    --success-text-color:var(--black);
    --info-text-color:var(--white);
    --warning-text-color:var(--white);
    --error-text-color:var(--white);
  }
}

:root {
  --icon-font-size: 16px;
}

main {
  margin: 8px;
}

body {
  font-size: 14px;
  font-weight: 600;
  font-family: "Courier New", Courier, monospace;
  margin:0;
  background-color: var(--background-color, white);
  color: var(--text-color, black);
}


table, th, td {
  border: 1px solid var(--table-border-color, black);
  border-spacing: 0;
}
th, td {
  padding: 5px;
}

.center {
  text-align: center;
}

/* temp colors for old code */

a {
  color: #00B7FF;
}
a:link {
  color: red;
}
a:visited {
  color: green;
}
a:hover {
  color: hotpink;
}
a:active {
  color: blue;
}
input {
  padding: 5px 8px;
  margin: 4px 2px;
  box-sizing: border-box;
  background-color: var(--input-background-color, white);
  border: 2px solid var(--input-border-color, gray);
  color: var(--input-text-color, black);
}

input:focus {
  border: 2px solid var(--input-focus-border-color, black);
  outline: none;
}
input[disabled] {
  background-color: var(--input-disabled-background-color, gray);
}

input[type="button"] {
  color: var(--button-text-color);
  background-color: var(--button-background-color);
  border-color: var(--button-border-color);
}