html[data-theme="light"],
:root {
  /* Teals/Greens */
  --teal-darkest: #0a2a2a;
  --teal-dark: #1a4a4a;
  --teal-medium-dark: #008080;
  --teal-medium: #009a9a;
  --teal-medium-light: #5fbfbf;
  --teal-light: #a8dadc;
  --teal-very-light: #f1faee;

  /* Blues */
  --blue-dark: #1d3557;
  --blue-medium: #457b9d;
  --blue-very-light: #f1faee;

  /* Reds/Pinks */
  --red-dark: #a41515;
  --red-medium: #e63946;
  --pink-medium: #f4a2a8;
  --pink-light: #ffe0e0;

  /* Yellows/Oranges */
  --orange-medium: #e76f51;
  --gold-medium: #f4a261;
  --yellow-medium: #f5dd5d;
  --yellow-light: #fffacd;
  --yellow-very-light: #ffffe0;

  /* Grays/Neutrals */
  --gray-black: #000000;
  --gray-dark: #4f4f4f;
  --gray-medium: #a9a9a9;
  --gray-light: #d3d3d3;
  --gray-very-light: #e8e8e8;
  --gray-off-white: #f8f8f8;
  --gray-white: #ffffff;

  --primary: var(--teal-medium-light);
  --secondary: var(--teal-medium-dark);
  --accent: var(--yellow-medium);
  --primary-fg: var(--gray-white);

  --body-fg: #333;
  --body-bg: var(--gray-white);
  --body-quiet-color: #666;
  --body-medium-color: #444;
  --body-loud-color: var(--gray-black);

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

  --breadcrumbs-fg: var(--teal-light);
  --breadcrumbs-link-fg: var(--gray-white);
  --breadcrumbs-bg: var(--teal-dark);

  --link-fg: var(--blue-medium);
  --link-hover-color: var(--blue-dark);
  --link-selected-fg: var(--secondary);

  --hairline-color: var(--gray-very-light);
  --border-color: var(--gray-light);

  --error-fg: var(--red-dark);

  --message-success-bg: var(--teal-very-light);
  --message-warning-bg: var(--yellow-light);
  --message-error-bg: var(--pink-light);

  --darkened-bg: var(--gray-off-white);
  --selected-bg: var(--gray-very-light);
  --selected-row: var(--yellow-light);

  --button-fg: var(--gray-white);
  --button-bg: var(--secondary);
  --button-hover-bg: var(--teal-dark);
  --default-button-bg: var(--teal-dark);
  --default-button-hover-bg: var(--teal-darkest);
  --close-button-bg: var(--gray-medium);
  --close-button-hover-bg: var(--gray-dark);
  --delete-button-bg: var(--red-medium);
  --delete-button-hover-bg: var(--red-dark);

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

  --font-family-primary:
    "Segoe UI",
    system-ui,
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  --font-family-monospace:
    ui-monospace,
    Menlo,
    Monaco,
    "Cascadia Mono",
    "Segoe UI Mono",
    "Roboto Mono",
    "Oxygen Mono",
    "Ubuntu Monospace",
    "Source Code Pro",
    "Fira Mono",
    "Droid Sans Mono",
    "Courier New",
    monospace,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";

  color-scheme: light;
}

#content-main {
  display: flex;
  flex-direction: column;
}

.object-tools {
  margin-top: 0px;
  align-self: flex-end;
}

.object-tools li {
  height: fit-content;
}

.object-tools input.custom-action-button {
  display: block;
  float: left;
  padding: 6px 12px;
  color: var(--object-tools-fg);
  font-weight: 400;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 15px;
  margin: 0;
}

.inline-group {
  overflow: auto;
}