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

:root {
  color: var(--md-sys-color-on-surface);
  --color-boy: #64b5f6;
  --color-girl: #ef9a9a;
  --mdc-theme-primary: var(--md-sys-color-primary);
  --mdc-theme-on-primary: var(--md-sys-color-on-primary);
  --mdc-theme-secondary: #0277bd;
  --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: rgba(109, 76, 65, 0.15);
  --grampsjs-alert-border-color: rgba(109, 76, 65, 0.7);
  --grampsjs-alert-error-background-color: rgba(191, 54, 12, 0.2);
  --grampsjs-alert-error-border-color: rgba(191, 54, 12, 0.7);
  --grampsjs-alert-error-font-color: #bf360c;
  --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: rgba(2, 119, 189, 0.2);
  --grampsjs-delete-all-filter-chip-color: rgba(109, 76, 65, 0.32);
  --grampsjs-connection-chart-border-color: rgba(137, 107, 94, 0.4);
  --grampsjs-connection-chart-person-box: #e6e6e6;
  --grampsjs-editable-list-hover-background-color: rgba(2, 119, 189, 0.1);
  --grampsjs-editable-list-active-background-color: rgba(2, 119, 189, 0.2);
  --grampsjs-editable-list-selected-active-background-color: rgba(2, 119, 189, 0.3);
  --grampsjs-editable-list-selected-hover-background-color: rgba(2, 119, 189, 0.4);
  --grampsjs-editable-list-selected-background-color: rgba(2, 119, 189, 0.5);
  --grampsjs-mobile-table-sort-menu-color: rgba(109, 76, 65, 0.3);
}

: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-mwc-dialog-background-color: var(--md-sys-color-surface);
  --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-link-font: #0d47a1;
  --grampsjs-color-link-hover: #1976d2;
  --grampsjs-color-page-loading-progress: #4fc3f7;
  --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-primary: rgb(109, 76, 65);
  --md-sys-color-surface-tint: rgb(109, 76, 65);
  --md-sys-color-on-primary: rgb(255, 255, 255);
  --md-sys-color-primary-container: rgb(255, 219, 207);
  --md-sys-color-on-primary-container: rgb(57, 12, 0);
  --md-sys-color-secondary: rgb(49, 98, 141);
  --md-sys-color-on-secondary: rgb(255, 255, 255);
  --md-sys-color-secondary-container: rgb(207, 229, 255);
  --md-sys-color-on-secondary-container: rgb(0, 29, 52);
  --md-sys-color-tertiary: rgb(106, 94, 47);
  --md-sys-color-on-tertiary: rgb(255, 255, 255);
  --md-sys-color-tertiary-container: rgb(243, 226, 167);
  --md-sys-color-on-tertiary-container: rgb(34, 27, 0);
  --md-sys-color-error: rgb(186, 26, 26);
  --md-sys-color-on-error: rgb(255, 255, 255);
  --md-sys-color-error-container: rgb(255, 218, 214);
  --md-sys-color-on-error-container: rgb(65, 0, 2);
  --md-sys-color-background: #fff;;
  --md-sys-color-on-background: var(--grampsjs-body-font-color);
  --md-sys-color-surface: #fff;
  --md-sys-color-on-surface: var(--grampsjs-body-font-color);
  --md-sys-color-surface-variant: rgb(245, 222, 215);
  --md-sys-color-on-surface-variant: rgb(83, 67, 63);
  --md-sys-color-outline: rgb(133, 115, 110);
  --md-sys-color-outline-variant: rgb(200, 200, 200);
  --md-sys-color-shadow: rgb(0, 0, 0);
  --md-sys-color-scrim: rgb(0, 0, 0);
  --md-sys-color-inverse-surface: rgb(57, 46, 43);
  --md-sys-color-inverse-on-surface: rgb(255, 237, 232);
  --md-sys-color-inverse-primary: rgb(255, 181, 156);
  --md-sys-color-primary-fixed: rgb(255, 219, 207);
  --md-sys-color-on-primary-fixed: rgb(57, 12, 0);
  --md-sys-color-primary-fixed-dim: rgb(255, 181, 156);
  --md-sys-color-on-primary-fixed-variant: rgb(114, 53, 32);
  --md-sys-color-secondary-fixed: rgb(207, 229, 255);
  --md-sys-color-on-secondary-fixed: rgb(0, 29, 52);
  --md-sys-color-secondary-fixed-dim: rgb(157, 203, 251);
  --md-sys-color-on-secondary-fixed-variant: rgb(18, 74, 115);
  --md-sys-color-tertiary-fixed: rgb(243, 226, 167);
  --md-sys-color-on-tertiary-fixed: rgb(34, 27, 0);
  --md-sys-color-tertiary-fixed-dim: rgb(214, 198, 141);
  --md-sys-color-on-tertiary-fixed-variant: rgb(81, 70, 26);
  --md-sys-color-surface-dim: rgb(232, 214, 209);
  --md-sys-color-surface-bright: rgb(255, 248, 246);
  --md-sys-color-surface-container-lowest: rgb(255, 255, 255);
  --md-sys-color-surface-container-low: rgb(240, 240, 240);
  --md-sys-color-surface-container: #fff;
  --md-sys-color-surface-container-high: #fff;
  --md-sys-color-surface-container-highest: whitesmoke;
}

: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-mwc-dialog-background-color: var(--md-sys-color-surface-container-high);
  --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-link-font: #5193f6;
  --grampsjs-color-link-hover: #62adf8;
  --grampsjs-color-page-loading-progress: #42a6d2;
  --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-primary: #8d7168;
  --md-sys-color-surface-tint: rgb(233, 189, 174);
  --md-sys-color-on-primary: rgba(0, 0, 0, 0.8);
  --md-sys-color-primary-container: rgb(109, 76, 65);
  --md-sys-color-on-primary-container: rgb(235, 190, 176);
  --md-sys-color-secondary: rgb(156, 203, 251);
  --md-sys-color-on-secondary: rgb(0, 51, 84);
  --md-sys-color-secondary-container: rgb(49, 98, 141);
  --md-sys-color-on-secondary-container: rgb(189, 220, 255);
  --md-sys-color-tertiary: rgb(214, 198, 141);
  --md-sys-color-on-tertiary: rgb(57, 48, 5);
  --md-sys-color-tertiary-container: rgb(106, 94, 47);
  --md-sys-color-on-tertiary-container: rgb(233, 216, 158);
  --md-sys-color-error: rgb(255, 180, 171);
  --md-sys-color-on-error: rgb(105, 0, 4);
  --md-sys-color-error-container: rgb(186, 26, 26);
  --md-sys-color-on-error-container: rgb(255, 205, 199);
  --md-sys-color-background: rgb(22, 19, 18);
  --md-sys-color-on-background: rgb(233, 225, 222);
  --md-sys-color-surface: rgb(20, 19, 19);
  --md-sys-color-on-surface: rgb(229, 226, 225);
  --md-sys-color-surface-variant: rgb(68, 71, 72);
  --md-sys-color-on-surface-variant: rgb(196, 199, 200);
  --md-sys-color-outline: rgb(142, 145, 146);
  --md-sys-color-outline-variant: rgb(68, 71, 72);
  --md-sys-color-shadow: rgb(0, 0, 0);
  --md-sys-color-scrim: rgb(0, 0, 0);
  --md-sys-color-inverse-surface: rgb(229, 226, 225);
  --md-sys-color-inverse-on-surface: rgb(49, 48, 48);
  --md-sys-color-inverse-primary: rgb(121, 86, 75);
  --md-sys-color-primary-fixed: rgb(255, 219, 207);
  --md-sys-color-on-primary-fixed: rgb(45, 21, 13);
  --md-sys-color-primary-fixed-dim: rgb(233, 189, 174);
  --md-sys-color-on-primary-fixed-variant: rgb(94, 63, 53);
  --md-sys-color-secondary-fixed: rgb(207, 229, 255);
  --md-sys-color-on-secondary-fixed: rgb(0, 29, 51);
  --md-sys-color-secondary-fixed-dim: rgb(156, 203, 251);
  --md-sys-color-on-secondary-fixed-variant: rgb(17, 74, 115);
  --md-sys-color-tertiary-fixed: rgb(243, 226, 167);
  --md-sys-color-on-tertiary-fixed: rgb(34, 27, 0);
  --md-sys-color-tertiary-fixed-dim: rgb(214, 198, 141);
  --md-sys-color-on-tertiary-fixed-variant: rgb(81, 70, 26);
  --md-sys-color-surface-dim: rgb(20, 19, 19);
  --md-sys-color-surface-bright: rgb(58, 57, 57);
  --md-sys-color-surface-container-lowest: rgb(14, 14, 14);
  --md-sys-color-surface-container-low: rgb(28, 27, 27);
  --md-sys-color-surface-container: rgb(32, 31, 31);
  --md-sys-color-surface-container-high: rgb(42, 42, 42);
  --md-sys-color-surface-container-highest: rgb(53, 52, 52);
  --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-dialog-heading-ink-color: var(--grampsjs-body-font-color);
  --mdc-dialog-content-ink-color: var(--grampsjs-body-font-color-60);
  --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);
}