/**
 * CSS custom properties (aka variables).
 */
:root {
  --color-white: #fff;
  --color-grey-50: #111;
  --color-grey-100: #262626;
  --color-grey-200: #333;
  --color-grey-300: #444;
  --color-grey-325: #555;
  --color-grey-350: #565d64;
  --color-grey-400: #666;
  --color-grey-500: #777;
  --color-grey-600: #999;
  --color-grey-700: #cbcbcb;
  --color-grey-750: #ddd;
  --color-grey-800: #e0e0e0;
  --color-grey-850: #eee;
  --color-grey-900: #f2f2f2;
  --color-black: #000;
  --color-dark-red: #a00;
  --color-light-red: #dd0000;
  --color-cdio-blue: #1a73e8;
  --color-background-page: var(--color-white);
  --color-background-gradient-first: #5ad8f7;
  --color-background-gradient-second: #2f50af;
  --color-background-gradient-third: #9150bf;
  --color-background: var(--color-white);
  --color-text: var(--color-grey-200);
  --color-link: #1b98f8;
  --color-menu-accent: #ed5900;
  --color-background-code: var(--color-grey-850);
  --color-error: var(--color-dark-red);
  --color-error-input: #ffebeb;
  --color-error-list: var(--color-light-red);
  --color-table-background: var(--color-background);
  --color-table-stripe: var(--color-grey-900);
  --color-text-tab: var(--color-white);
  --color-background-tab: rgba(255, 255, 255, 0.2);
  --color-background-tab-hover: rgba(255, 255, 255, 0.5);
  --color-text-tab-active: #222;
  --color-api-key: #0078e7;
  --color-background-button-primary: #0078e7;
  --color-background-button-green: #42dd53;
  --color-background-button-red: #dd4242;
  --color-background-button-success: rgb(28, 184, 65);
  --color-background-button-error: rgb(202, 60, 60);
  --color-text-button-error: var(--color-white);
  --color-background-button-warning: rgb(202, 60, 60);
  --color-text-button-warning: var(--color-white);
  --color-background-button-secondary: rgb(66, 184, 221);
  --color-background-button-cancel: rgb(200, 200, 200);
  --color-text-button: var(--color-white);
  --color-background-button-tag: rgb(99, 99, 99);
  --color-background-snapshot-age: #dfdfdf;
  --color-error-text-snapshot-age: var(--color-white);
  --color-error-background-snapshot-age: #ff0000;
  --color-background-button-tag-active: #9c9c9c;
  --color-text-messages: var(--color-white);
  --color-background-messages-message: rgba(255, 255, 255, .2);
  --color-background-messages-error: rgba(255, 1, 1, .5);
  --color-background-messages-notice: rgba(255, 255, 255, .5);
  --color-border-notification: #ccc;
  --color-background-checkbox-operations: rgba(0, 0, 0, 0.05);
  --color-warning: #ff3300;
  --color-border-warning: var(--color-warning);
  --color-text-legend: var(--color-white);
  --color-link-new-version: #e07171;
  --color-last-checked: #bbb;
  --color-text-footer: #444;
  --color-border-watch-table-cell: #eee;
  --color-text-watch-tag-list: #e70069;
  --color-background-new-watch-form: rgba(0, 0, 0, 0.05);
  --color-background-new-watch-input: var(--color-white);
  --color-text-new-watch-input: var(--color-text);
  --color-border-input: var(--color-grey-500);
  --color-shadow-input: var(--color-grey-400);
  --color-background-input: var(--color-white);
  --color-text-input: var(--color-text);
  --color-text-input-description: var(--color-grey-500);
  --color-text-input-placeholder: var(--color-grey-600);
  --color-background-table-thead: var(--color-grey-800);
  --color-border-table-cell: var(--color-grey-700);
  --color-text-menu-heading: var(--color-grey-350);
  --color-text-menu-link: var(--color-grey-500);
  --color-background-menu-link-hover: var(--color-grey-850);
  --color-text-menu-link-hover: var(--color-grey-300);
  --color-shadow-jump: var(--color-grey-500);
  --color-icon-github: var(--color-black);
  --color-icon-github-hover: var(--color-grey-300);
  --color-watch-table-error: var(--color-dark-red);
  --color-watch-table-row-text: var(--color-grey-100);
}

html[data-darkmode=true] {
  --color-link: #59bdfb;
  --color-text: var(--color-white);
  --color-cdio-blue: #3b8eea;
  --color-background-gradient-first: #3f90a5;
  --color-background-gradient-second: #1e316c;
  --color-background-gradient-third: #4d2c64;
  --color-background-new-watch-input: var(--color-grey-100);
  --color-text-new-watch-input: var(--color-text);
  --color-background-table-thead: var(--color-grey-200);
  --color-table-background: var(--color-grey-300);
  --color-table-stripe: var(--color-grey-325);
  --color-background: var(--color-grey-300);
  --color-text-menu-heading: var(--color-grey-850);
  --color-text-menu-link: var(--color-grey-800);
  --color-border-table-cell: var(--color-grey-400);
  --color-text-tab-active: var(--color-text);
  --color-border-input: var(--color-grey-400);
  --color-shadow-input: var(--color-grey-50);
  --color-background-input: var(--color-grey-350);
  --color-text-input-description: var(--color-grey-600);
  --color-text-input-placeholder: var(--color-grey-600);
  --color-text-watch-tag-list: #fa3e92;
  --color-background-code: var(--color-grey-200);
  --color-background-tab: rgba(0, 0, 0, 0.2);
  --color-background-tab-hover: rgba(0, 0, 0, 0.5);
  --color-background-snapshot-age: var(--color-grey-200);
  --color-shadow-jump: var(--color-grey-200);
  --color-icon-github: var(--color-white);
  --color-icon-github-hover: var(--color-grey-700);
  --color-watch-table-error: var(--color-light-red);
  --color-watch-table-row-text: var(--color-grey-800);
}

body {
  color: var(--color-text);
  background: var(--color-background-page);
  font-family: Helvetica Neue, Helvetica, Lucida Grande, Arial, Ubuntu, Cantarell, Fira Sans, sans-serif;
  margin: 8px;
  min-width: 400px;
  font-size: 0.9rem;
}

#logo {
  max-width: 200px;
}

header {
  background: var(--color-cdio-blue);
  color: #fff;
  padding: 0.8rem;
  border-radius: 5px;
  margin-bottom: 1rem;
}

h1 > span#location {
  color: blue;
}

#tag, #include_filter {
  border-radius: 10px;
  border: 1px solid var(--color-grey-600);
  color: var(--color-grey-350);
  padding-left: 1rem;
}

#include-filter-container {
  display: block;
}
#include-filter-container .filter-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#include-filter-container .filter-content #include_filter {
  flex: 1;
}
#include-filter-container .filter-help {
  font-size: 0.75rem;
  color: var(--color-grey-500);
  margin-top: 4px;
  padding-left: 1.3rem;
  font-style: italic;
}

.selector-btn {
  background-color: var(--color-cdio-blue);
  color: white;
  border: none;
  border-radius: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.selector-btn .material-symbols-outlined {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.selector-btn:hover {
  filter: brightness(1.15);
}

body.selector-mode-enabled .selector-btn .material-symbols-outlined {
  opacity: 1;
}

#results {
  text-align: center;
}

main {
  display: grid;
  gap: 0.5rem;
}

.action-btn-container {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  height: 2.5rem;
  gap: 0.2em;
  border: none;
  border-radius: 10px;
}

.action-btn:hover {
  filter: brightness(1.15);
  cursor: pointer;
}

.action-btn:active {
  filter: brightness(1.15);
}

.action-btn.large {
  grid-column: 1/4;
}

.action-btn.watch {
  background-color: #485FC7;
  color: white;
}

.action-btn.clear-settings {
  background-color: #c74848;
  color: white;
}

.action-btn.watch-with-cookies {
  background-color: #488ec7;
  color: white;
}

.error {
  color: var(--color-dark-red);
}

#extra-links {
  text-align: right;
}
#extra-links a, #extra-links a:visited {
  text-decoration: none;
  color: var(--color-cdio-blue);
}
#extra-links a:hover {
  text-decoration: underline;
}

.display-when-unsynced, .display-when-synced {
  display: none;
}

.state-unsynced .display-when-unsynced {
  display: block !important;
}

.state-synced .display-when-synced {
  display: block !important;
}

ul#processor {
  list-style: none;
  padding: 0;
}
ul#processor li:nth-child(even) {
  padding-top: 1rem;
}
ul#processor label {
  font-weight: bold;
}
ul#processor label:hover {
  cursor: pointer;
}

.label-text {
  padding-left: 1.3rem;
  font-size: 0.8rem;
  color: var(--color-grey-325);
  font-weight: lighter;
}

/*# sourceMappingURL=popup.css.map */
