:root {
  --design-url-favicon-ico: url("/roles/web-app-dashboard/latest/img/design/favicon.ico");
  --design-url-apple-touch-icon-png: url("/roles/web-app-dashboard/latest/img/design/apple-touch-icon.png");
  --design-url-apple-touch-icon-svg: url("/roles/web-app-dashboard/latest/img/design/apple-touch-icon.svg");
  --design-url-banner-png: url("/roles/web-app-dashboard/latest/img/design/banner.png");
  --design-url-banner-svg: url("/roles/web-app-dashboard/latest/img/design/banner.svg");
  --design-url-header-png: url("/roles/web-app-dashboard/latest/img/design/header.png");
  --design-url-header-svg: url("/roles/web-app-dashboard/latest/img/design/header.svg");
  --design-url-icon-png: url("/roles/web-app-dashboard/latest/img/design/icon.png");
  --design-url-icon-svg: url("/roles/web-app-dashboard/latest/img/design/icon.svg");
  --design-url-logo-png: url("/roles/web-app-dashboard/latest/img/design/logo.png");
  --design-url-logo-svg: url("/roles/web-app-dashboard/latest/img/design/logo.svg");
  --design-url-wordmark-png: url("/roles/web-app-dashboard/latest/img/design/wordmark.png");
  --design-url-wordmark-svg: url("/roles/web-app-dashboard/latest/img/design/wordmark.svg");
  --design-slot-apple-touch-icon-width: 180px;
  --design-slot-apple-touch-icon-height: 180px;
  --design-slot-banner-width: 960px;
  --design-slot-banner-height: 160px;
  --design-slot-header-width: 320px;
  --design-slot-header-height: 64px;
  --design-slot-icon-width: 512px;
  --design-slot-icon-height: 512px;
  --design-slot-logo-width: 512px;
  --design-slot-logo-height: 512px;
  --design-slot-wordmark-width: 320px;
  --design-slot-wordmark-height: 64px;
}
a {
    color: var(--design-link);
}

.navbar,
.card {
    background-color: var(--design-surface-2);
    border-color: var(--design-border);
    color: var(--design-text) !important;
}

.navbar {
    border-radius: var(--design-radius);
    box-shadow: var(--design-shadow-1);
}

main,
header,
footer {
    box-shadow: none;
}

.card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
    filter: none;
    border-color: var(--design-primary);
    box-shadow: var(--design-shadow-3);
}

/* Simple Icons load as <img>, which CSS color cannot reach: brightness(0) plus the mode inversion renders them in the text tone. */
.card-img-top img[src*='//icon.'] {
    filter: brightness(0) invert(var(--design-invert));
}

.navbar-toggler {
    background-color: var(--design-surface-3);
    border-color: var(--design-border-strong);
}

#scroll-thumb {
    background-color: var(--design-neutral-400);
}

/* port-ui pins top and bottom of a submenu inline, which collapses its box to the padding. */
.dropdown-submenu > .dropdown-menu {
    height: max-content;
}