img[src*='#left'] {
    float: left;
}
img[src*='#right'] {
    float: right;
}
img[src*='#center'] {
    display: block;
    margin: auto;
}
[data-md-color-scheme="slate"] {
  --md-hue: 210;
}

.first-column-single-line + * td:first-child {
  white-space: nowrap;
}

.last-column-single-line + * td:last-child {
  white-space: nowrap;
}

:root {
  --card-bg-light: rgba(0, 0, 20, 0.1);
  --card-bg-light-hover: rgba(20, 20, 60, 0.15);
  --card-bg-dark: rgba(255, 255, 255, 0.1);
  --card-bg-dark-hover: rgba(230, 230, 255, 0.2);
}

.grid.cards li {
  border-color: var(--md-default-fg-color--lighter) !important;
  background-color: var(--card-bg);
}
.grid.cards li:hover {
  background-color: var(--card-bg-hover);
}


@media (prefers-color-scheme: dark) {
  body[data-md-color-media="(prefers-color-scheme)"] .grid.cards li {
    --card-bg: var(--card-bg-dark);
    --card-bg-hover: var(--card-bg-dark-hover);
  }
}
@media (prefers-color-scheme: light) {
  body[data-md-color-media="(prefers-color-scheme)"] .grid.cards li {
    --card-bg: var(--card-bg-light);
    --card-bg-hover: var(--card-bg-light-hover);
  }
}

body[data-md-color-media="(prefers-color-scheme: light)"] .grid.cards li {
  --card-bg: var(--card-bg-light);
  --card-bg-hover: var(--card-bg-light-hover);
}

body[data-md-color-media="(prefers-color-scheme: dark)"] .grid.cards li {
  --card-bg: var(--card-bg-dark);
  --card-bg-hover: var(--card-bg-dark-hover);
}