html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: var(--md-sys-color-background);
}

@media print {

  html,
  body {
    height: auto;
  }
}

:root {
  color: var(--md-sys-color-on-surface);
  /* Web Awesome color token overrides.
     default.css (loaded in index.html) defines --wa-* tokens inside @layer wa-theme,
     so these unlayered declarations win without !important. The --md-sys-color-*
     values on the right are set dynamically by applyColors() in theme.js. */
  --wa-color-surface-raised: var(--md-sys-color-surface-container-high);
  --wa-color-surface-default: var(--md-sys-color-surface);
  --wa-color-surface-border: var(--md-sys-color-outline-variant);
  --wa-color-neutral-fill-normal: var(--md-sys-color-surface-container);
  --wa-color-brand-fill-loud: var(--md-sys-color-primary);
  --wa-color-text-normal: var(--md-sys-color-on-surface);
  --wa-color-focus: var(--md-sys-color-primary);
  --wa-form-control-border-color: var(--md-sys-color-outline);
  /* End Web Awesome overrides */
  --md-fab-secondary-container-color: var(--mdc-theme-secondary);
  --color-boy: #64b5f6;
  --color-girl: #ef9a9a;
  --color-unknown: #b0bec5;
  --color-other: #ce93d8;
  --mdc-theme-primary: var(--md-sys-color-primary);
  --mdc-theme-on-primary: var(--md-sys-color-on-primary);
  --mdc-theme-secondary: var(--md-sys-color-secondary);
  --mdc-theme-on-secondary: rgba(255, 255, 255, 0.95);
  --mdc-theme-background: var(--md-sys-color-background);
  --mdc-theme-surface: var(--md-sys-color-surface);
  --mdc-theme-on-surface: var(--md-sys-color-on-surface);
  --mdc-theme-text-primary-on-light: var(--md-sys-color-on-surface);
  --mdc-theme-text-secondary-on-light: var(--grampsjs-body-font-color);
  --mdc-theme-text-hint-on-light: var(--grampsjs-body-font-color);
  --mdc-theme-text-disabled-on-light: var(--grampsjs-body-font-color);
  --mdc-theme-text-icon-on-light: var(--grampsjs-body-font-color);
  --mdc-theme-text-primary-on-background: var(--grampsjs-body-font-color);
  --mdc-theme-text-secondary-on-background: var(--grampsjs-body-font-color-45);
  --grampsjs-face-rect-border-color: rgba(255, 255, 255, 0.6);
  --grampsjs-face-rect-border-shadow-color: rgba(0, 0, 0, 0.4);
  --grampsjs-face-rect-label-background-color: rgba(1, 1, 1, 0.25);
  --grampsjs-face-rect-label-color: #fff;
  --grampsjs-lightbox-background-color: #000;
  --grampsjs-lightbox-font-color: #fff;
  --grampsjs-lightbox-nav-color: #aaa;
  --grampsjs-lightbox-nav-hover-color: #fff;
  --grampsjs-alert-background-color: color-mix(in srgb,
      var(--md-sys-color-primary) 15%,
      transparent);
  --grampsjs-alert-border-color: color-mix(in srgb,
      var(--md-sys-color-primary) 70%,
      transparent);
  --grampsjs-alert-error-background-color: color-mix(in srgb,
      var(--md-sys-color-error) 20%,
      transparent);
  --grampsjs-alert-error-border-color: color-mix(in srgb,
      var(--md-sys-color-error) 70%,
      transparent);
  --grampsjs-alert-error-font-color: var(--md-sys-color-error);
  --grampsjs-map-marker-color: #ea4335;
  --grampsjs-map-filter-badge-color: #ba1b1b;
  --grampsjs-logout-font-color: #c62828;
  --grampsjs-alert-warn-background-color: rgba(251, 192, 45, 0.2);
  --grampsjs-alert-warn-border-color: rgba(251, 192, 45, 0.7);
  --grampsjs-alert-warn-font-color: #f9a825;
  --grampsjs-alert-success-font-color: #41ad49;
  --grampsjs-task-open: #007bff;
  --grampsjs-task-progress: #ff9800;
  --grampsjs-task-done: rgba(65, 173, 73, 0.4);
  --grampsjs-editable-title-hover-background-color: color-mix(in srgb,
      var(--mdc-theme-secondary) 20%,
      transparent);
  --grampsjs-delete-all-filter-chip-color: color-mix(in srgb,
      var(--md-sys-color-primary) 32%,
      transparent);
  --grampsjs-connection-chart-border-color: color-mix(in srgb,
      var(--md-sys-color-primary) 40%,
      transparent);
  --grampsjs-connection-chart-person-box: #e6e6e6;
  --grampsjs-editable-list-hover-background-color: color-mix(in srgb,
      var(--mdc-theme-secondary) 10%,
      transparent);
  --grampsjs-editable-list-active-background-color: color-mix(in srgb,
      var(--mdc-theme-secondary) 20%,
      transparent);
  --grampsjs-editable-list-selected-active-background-color: color-mix(in srgb,
      var(--mdc-theme-secondary) 30%,
      transparent);
  --grampsjs-editable-list-selected-hover-background-color: color-mix(in srgb,
      var(--mdc-theme-secondary) 40%,
      transparent);
  --grampsjs-editable-list-selected-background-color: color-mix(in srgb,
      var(--mdc-theme-secondary) 50%,
      transparent);
  --grampsjs-mobile-table-sort-menu-color: color-mix(in srgb,
      var(--md-sys-color-primary) 30%,
      transparent);
  --grampsjs-color-link-font: var(--mdc-theme-secondary);
  --grampsjs-color-link-hover: color-mix(in srgb,
      var(--mdc-theme-secondary) 80%,
      black);
  --grampsjs-color-page-loading-progress: var(--mdc-theme-secondary);
}

:root[data-theme='light'] {
  --grampsjs-top-app-bar-background-color: var(--mdc-theme-primary);
  --grampsjs-top-app-bar-font-color: var(--mdc-theme-on-primary);
  --grampsjs-body-font-color: rgba(0, 0, 0, 0.8);
  --grampsjs-body-font-color-0: rgba(0, 0, 0, 0);
  --grampsjs-body-font-color-2: rgba(0, 0, 0, 0.02);
  --grampsjs-body-font-color-5: rgba(0, 0, 0, 0.05);
  --grampsjs-body-font-color-6: rgba(0, 0, 0, 0.06);
  --grampsjs-body-font-color-10: rgba(0, 0, 0, 0.1);
  --grampsjs-body-font-color-15: rgba(0, 0, 0, 0.15);
  --grampsjs-body-font-color-20: rgba(0, 0, 0, 0.2);
  --grampsjs-body-font-color-25: rgba(0, 0, 0, 0.25);
  --grampsjs-body-font-color-30: rgba(0, 0, 0, 0.3);
  --grampsjs-body-font-color-35: rgba(0, 0, 0, 0.35);
  --grampsjs-body-font-color-38: rgba(0, 0, 0, 0.38);
  --grampsjs-body-font-color-40: rgba(0, 0, 0, 0.4);
  --grampsjs-body-font-color-45: rgba(0, 0, 0, 0.45);
  --grampsjs-body-font-color-48: rgba(0, 0, 0, 0.48);
  --grampsjs-body-font-color-50: rgba(0, 0, 0, 0.5);
  --grampsjs-body-font-color-60: rgba(0, 0, 0, 0.6);
  --grampsjs-body-font-color-70: rgba(0, 0, 0, 0.7);
  --grampsjs-body-font-color-75: rgba(0, 0, 0, 0.75);
  --grampsjs-body-font-color-78: rgba(0, 0, 0, 0.78);
  --grampsjs-body-font-color-87: rgba(0, 0, 0, 0.87);
  --grampsjs-body-font-color-90: rgba(0, 0, 0, 0.9);
  --grampsjs-body-font-color-100: rgba(0, 0, 0, 1);
  --grampsjs-color-shade-40: rgb(40, 40, 40);
  --grampsjs-color-shade-120: rgb(120, 120, 120);
  --grampsjs-color-shade-200: rgb(200, 200, 200);
  --grampsjs-color-shade-220: rgb(220, 220, 220);
  --grampsjs-color-shade-230: rgb(230, 230, 230);
  --grampsjs-color-shade-240: rgb(240, 240, 240);
  --grampsjs-color-shade-255: rgb(255, 255, 255);
  --grampsjs-color-monospace: rgba(125, 0, 0, 0.8);
  --grampsjs-color-drawer-text: #444;
  --grampsjs-color-icon-default: #9e9e9e;
  --grampsjs-color-icon-selected: #393939;
  --grampsjs-color-skeleton-background: #eee;
  --grampsjs-color-skeleton-base: #ececec;
  --grampsjs-color-skeleton-shine: #f5f5f5;
  --grampsjs-color-revision-deleted-background-red: #ffebe9;
  --grampsjs-color-revision-added-background-green: #dafbe1;
  --grampsjs-color-revision-moved-background-blue: #ddf4ff;
  --grampsjs-color-revision-moved-font: #888;
  --grampsjs-color-revision-error-background: #f00;
  --grampsjs-color-revision-error-font: #fff;
  --grampsjs-color-icon-background: rgba(0, 0, 0, 0.25);
  --grampsjs-color-icon: #fff;
  --grampsjs-color-ytree-expand-background: #eee;
  --grampsjs-color-ytree-expand-font: #555;
  --grampsjs-color-ytree-default-person-icon-background: #bbb;
  --grampsjs-note-color: #333;
  /* --md-sys-color-* tokens are set dynamically by applyColors() in theme.js */
}

:root[data-theme='dark'] {
  --grampsjs-top-app-bar-background-color: var(--md-sys-color-surface-container);
  --grampsjs-top-app-bar-font-color: var(--md-sys-color-on-surface);
  --grampsjs-body-font-color: rgba(255, 255, 255, 0.8);
  --grampsjs-body-font-color-0: rgba(255, 255, 255, 0);
  --grampsjs-body-font-color-2: rgba(255, 255, 255, 0.05);
  --grampsjs-body-font-color-5: rgba(255, 255, 255, 0.08);
  --grampsjs-body-font-color-6: rgba(255, 255, 255, 0.1);
  --grampsjs-body-font-color-10: rgba(255, 255, 255, 0.12);
  --grampsjs-body-font-color-15: rgba(255, 255, 255, 0.18);
  --grampsjs-body-font-color-20: rgba(255, 255, 255, 0.22);
  --grampsjs-body-font-color-25: rgba(255, 255, 255, 0.27);
  --grampsjs-body-font-color-30: rgba(255, 255, 255, 0.32);
  --grampsjs-body-font-color-35: rgba(255, 255, 255, 0.37);
  --grampsjs-body-font-color-38: rgba(255, 255, 255, 0.4);
  --grampsjs-body-font-color-40: rgba(255, 255, 255, 0.42);
  --grampsjs-body-font-color-45: rgba(255, 255, 255, 0.47);
  --grampsjs-body-font-color-48: rgba(255, 255, 255, 0.5);
  --grampsjs-body-font-color-50: rgba(255, 255, 255, 0.52);
  --grampsjs-body-font-color-60: rgba(255, 255, 255, 0.6);
  --grampsjs-body-font-color-70: rgba(255, 255, 255, 0.7);
  --grampsjs-body-font-color-75: rgba(255, 255, 255, 0.75);
  --grampsjs-body-font-color-78: rgba(255, 255, 255, 0.78);
  --grampsjs-body-font-color-87: rgba(255, 255, 255, 0.87);
  --grampsjs-body-font-color-90: rgba(255, 255, 255, 0.9);
  --grampsjs-body-font-color-100: rgba(255, 255, 255, 1);
  --grampsjs-color-shade-40: rgb(215, 215, 215);
  --grampsjs-color-shade-120: rgb(135, 135, 135);
  --grampsjs-color-shade-200: rgb(55, 55, 55);
  --grampsjs-color-shade-220: rgb(35, 35, 35);
  --grampsjs-color-shade-230: rgb(25, 25, 25);
  --grampsjs-color-shade-240: rgb(15, 15, 15);
  --grampsjs-color-shade-255: rgb(0, 0, 0);
  --grampsjs-color-monospace: rgba(255, 100, 100, 0.85);
  --grampsjs-color-drawer-text: #bbb;
  --grampsjs-color-icon-default: #616161;
  --grampsjs-color-icon-selected: #c6c6c6;
  --grampsjs-color-skeleton-background: #222;
  --grampsjs-color-skeleton-base: #232323;
  --grampsjs-color-skeleton-shine: #1a1a1a;
  --grampsjs-color-revision-deleted-background-red: rgba(248, 81, 73, 0.3);
  --grampsjs-color-revision-added-background-green: rgba(46, 160, 67, 0.15);
  --grampsjs-color-revision-moved-background-blue: rgba(56, 139, 253, 0.1);
  --grampsjs-color-revision-moved-font: #777;
  --grampsjs-color-revision-error-background: #f00;
  --grampsjs-color-revision-error-font: #fff;
  --grampsjs-color-icon-background: rgba(255, 255, 255, 0.15);
  --grampsjs-color-icon: rgba(255, 255, 255, 0.6);
  --grampsjs-color-ytree-expand-background: var(--md-sys-color-surface-container);
  --grampsjs-color-ytree-expand-font: var(--md-sys-color-on-surface);
  --grampsjs-color-ytree-default-person-icon-background: var(--md-sys-color-surface-container);
  --grampsjs-note-color: #ccc;
  --grampsjs-map-marker-color: #bb1f11;
  /* --md-sys-color-* tokens are set dynamically by applyColors() in theme.js */
  --mdc-select-fill-color: var(--md-sys-color-surface-container-highest);
  --mdc-select-ink-color: var(--md-sys-color-on-surface);
  --mdc-select-label-ink-color: rgba(255, 255, 255, 0.5);
  --mdc-select-dropdown-icon-color: var(--grampsjs-body-font-color);
  --mdc-select-idle-line-color: var(--grampsjs-body-font-color);
  --mdc-select-hover-line-color: var(--md-sys-color-on-surface);
  --mdc-select-outlined-idle-border-color: var(--grampsjs-body-font-color);
  --mdc-select-outlined-hover-border-color: var(--md-sys-color-surface-container-high);
  --mdc-select-disabled-fill-color: rgba(229, 226, 225, 0.04);
  --mdc-select-disabled-ink-color: var(--grampsjs-body-font-color-40);
  --mdc-select-disabled-dropdown-icon-color: var(--grampsjs-body-font-color-40);
  --mdc-select-outlined-disabled-border-color: var(--grampsjs-body-font-color-30);
  --mdc-text-field-idle-line-color: var(--grampsjs-body-font-color);
  --mdc-text-field-hover-line-color: var(--md-sys-color-on-surface);
  --mdc-text-field-disabled-line-color: var(--grampsjs-body-font-color);
  --mdc-text-field-outlined-idle-border-color: var(--grampsjs-body-font-color);
  --mdc-text-field-outlined-hover-border-color: var(--md-sys-color-surface-container-high);
  --mdc-text-field-outlined-disabled-border-color: var(--grampsjs-body-font-color);
  --mdc-text-field-fill-color: var(--md-sys-color-surface-container-highest);
  --mdc-text-field-ink-color: var(--md-sys-color-on-surface);
  --mdc-text-field-label-ink-color: var(--grampsjs-body-font-color);
  --mdc-text-field-disabled-fill-color: rgba(229, 226, 225, 0.04);
  --mdc-text-field-disabled-ink-color: var(--grampsjs-body-font-color-40);
  --mdc-text-field-disabled-line-color: var(--grampsjs-body-font-color-40);
  --mdc-linear-progress-buffer-color: var(--md-sys-color-surface-container-highest);
  --mdc-button-outline-color: var(--md-sys-color-outline);
  --mdc-button-disabled-outline-color: rgba(229, 226, 225, 0.12);
  --mdc-button-disabled-fill-color: rgba(229, 226, 225, 0.12);
  --mdc-button-disabled-ink-color: rgba(229, 226, 225, 0.38);
  --mdc-theme-text-icon-on-background: var(--grampsjs-body-font-color-60);
  --mdc-checkbox-unchecked-color: var(--md-sys-color-on-surface-variant);
  --mdc-checkbox-disabled-color: rgba(229, 226, 225, 0.38);
}