@font-face {
  font-family: "Google Sans Flex";
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/google-sans-flex-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Google Sans Flex";
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/google-sans-flex-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bs-body-font-family: "Google Sans Flex", system-ui, sans-serif;
  --topbar-height: 3.5rem;
}

/* Inline code and links in running text take the text color, as on the website. Inline code sits on a light chip. */
:root {
  --bs-code-color: var(--bs-emphasis-color);
  --bs-link-color-rgb: var(--bs-emphasis-color-rgb);
  --bs-link-hover-color-rgb: var(--bs-emphasis-color-rgb);
}
:not(pre) > code {
  padding: 0.125em 0.375em;
  border-radius: 0.375rem;
  background: var(--bs-secondary-bg);
}

/* Table pages' links and current page take the text color too. */
.pagination {
  --bs-pagination-color: var(--bs-body-color);
  --bs-pagination-hover-color: var(--bs-body-color);
  --bs-pagination-focus-color: var(--bs-body-color);
  --bs-pagination-active-bg: var(--bs-emphasis-color);
  --bs-pagination-active-border-color: var(--bs-emphasis-color);
}

/* Checked boxes and radios take the text color, like the dark primary buttons beside them. */
.form-check-input:checked {
  background-color: var(--bs-emphasis-color);
  border-color: var(--bs-emphasis-color);
}

/* Secondary buttons look like a card: its border, body text, and a light fill when hovered or checked. */
.btn-outline-secondary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-border-color-translucent);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--bs-light);
  --bs-btn-hover-border-color: var(--bs-border-color-translucent);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--bs-light);
  --bs-btn-active-border-color: var(--bs-border-color-translucent);
  --bs-btn-disabled-color: var(--bs-secondary-color);
  --bs-btn-disabled-border-color: var(--bs-border-color-translucent);
}

.topbar {
  height: var(--topbar-height);
}

/* On phones the sidebar is an offcanvas drawer; from md up it stays beside the page, below the top bar. */
.sidebar {
  --bs-offcanvas-width: 18rem;
}
@media (min-width: 768px) {
  .sidebar {
    position: sticky;
    top: var(--topbar-height);
    flex: 0 0 16rem;
    height: calc(100vh - var(--topbar-height));
    overflow-y: auto;
  }
}

/* Utilities Bootstrap 5.3 lacks, named in its style. */
.min-w-0 {
  min-width: 0 !important;
}
.mw-72rem {
  max-width: 72rem !important;
}
@media (min-width: 576px) {
  .mw-sm-12rem {
    max-width: 12rem !important;
  }
}
.border-last-0 > :last-child > * {
  border-bottom-width: 0 !important;
}
/* A default .btn's height, so a title row sits the same with or without a button. */
.min-h-btn {
  min-height: calc(1.5em + .75rem + calc(var(--bs-border-width) * 2)) !important;
}
.hover-bg-tertiary:hover {
  background-color: var(--bs-tertiary-bg) !important;
}
.border-inset {
  box-shadow: inset 0 0 0 var(--bs-border-width) var(--bs-border-color);
}
.border-inset:focus-visible {
  box-shadow: inset 0 0 0 var(--bs-border-width) var(--bs-border-color), var(--bs-btn-focus-box-shadow);
}
[aria-expanded="true"] > .rotate-expanded {
  transform: rotate(180deg);
}

.usage-chart {
  height: 14rem;
}

/* A form with server and browser choices shows .server-only and .browser-only parts for the checked one. */
form:has([name="type"][value="server"]:checked) .browser-only,
form:has([name="type"][value="browser"]:checked) .server-only {
  display: none;
}

/* The new key form's server and browser choice marks the checked one with a dark border too. */
#new-key .btn-check:checked + .btn {
  border-color: var(--bs-emphasis-color);
}

/* The buy credits amount fits 100,000,000 between its − and + buttons. */
.input-group > .credits-input {
  width: 9rem;
  flex: none;
}

/* A wide table scrolls sideways under its last column, which stays in place and fades what passes under it. A row's
   open menu sits above the rows below. */
.table-sticky-end > * > tr > :last-child {
  position: sticky;
  right: 0;
  width: 1%;
  padding-left: 3rem;
  background: linear-gradient(to right, rgba(var(--bs-body-bg-rgb), 0), var(--bs-body-bg) 3rem);
}
.table-sticky-end > * > tr > :last-child:has(.show) {
  z-index: 1;
}