/* GL Files, GL Digital GmbH's SFTPGo at files.gl-digital.net (ADR 0303).

   SFTPGo links this file after its own Bootstrap 5 and Keenthemes bundles
   (the HTTP binding's extra_css, for the web client and the WebAdmin) and
   nothing else about its pages is changed: its templates stay as they are.
   The rules here map SFTPGo's variables and a few of its components onto the
   design system's tokens. Every colour, font and radius is a token from the
   vendored tag; no value is written here, so a new look comes from vendoring
   a newer tag with scripts/vendor-design-system.sh, never from editing this
   file's numbers. scripts/branding-harness.py shows the pages locally.

   The two imports sit in a cascade layer, so the design system's own type
   classes (.h1, .lead, .label and so on) never win over Bootstrap's classes
   of the same name; the custom properties and fonts are not affected by it. */
@import url("vendor/design-system/tokens/tokens.css?v=3.2.0") layer(design-system);
@import url("vendor/design-system/tokens-bs-theme.css?v=3.2.0") layer(design-system);

/* ---------- Variables. One block for both themes: the tokens switch with
   data-bs-theme on <html> (tokens-bs-theme.css), so these follow them. The
   selectors repeat Keenthemes' own, which set the same names per theme. ---------- */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  --bs-font-sans-serif: var(--font-sans);
  --bs-font-monospace: var(--font-mono);
  --bs-body-font-family: var(--font-sans);

  --bs-body-bg: var(--surface);
  --bs-body-color: var(--ink);
  --bs-emphasis-color: var(--ink);
  --bs-heading-color: var(--ink);
  --bs-secondary-color: var(--ink-muted);
  --bs-tertiary-color: var(--ink-muted);
  --bs-secondary-bg: var(--surface-subtle);
  --bs-tertiary-bg: var(--surface-subtle);
  --bs-highlight-bg: var(--blue-soft);
  --bs-highlight-color: var(--ink);

  /* The one blue: the primary action, links, the active navigation. */
  --bs-primary: var(--blue);
  --bs-primary-active: var(--blue-strong);
  --bs-primary-light: var(--blue-soft);
  --bs-primary-inverse: var(--on-blue);
  --bs-primary-clarity: var(--blue-soft);
  --bs-text-primary: var(--blue);
  --bs-primary-text-emphasis: var(--blue-strong);
  --bs-primary-bg-subtle: var(--blue-soft);
  --bs-primary-border-subtle: var(--blue);
  --bs-link-color: var(--blue);
  --bs-link-hover-color: var(--blue-strong);
  --bs-component-active-bg: var(--blue);
  --bs-component-active-color: var(--on-blue);
  --bs-component-checked-bg: var(--blue);
  --bs-component-checked-color: var(--on-blue);
  --bs-component-hover-bg: var(--surface-subtle);
  --bs-component-hover-color: var(--blue);
  --bs-focus-ring-color: var(--focus-ring);
  --bs-scrolltop-bg-color: var(--blue);
  --bs-scrolltop-bg-color-hover: var(--blue-strong);
  --bs-scrolltop-icon-color: var(--on-blue);
  --bs-scrolltop-icon-color-hover: var(--on-blue);
  --bs-ribbon-label-bg: var(--blue);

  /* Keenthemes' info is a violet; here it is the same blue. */
  --bs-info: var(--blue);
  --bs-info-active: var(--blue-strong);
  --bs-info-light: var(--blue-soft);
  --bs-info-inverse: var(--on-blue);
  --bs-text-info: var(--blue);

  /* Neutral components: secondary, light and dark buttons and badges. */
  --bs-secondary: var(--surface-subtle);
  --bs-secondary-active: var(--line);
  --bs-secondary-light: var(--surface-subtle);
  --bs-secondary-inverse: var(--ink);
  --bs-text-secondary: var(--ink-muted);
  --bs-light: var(--surface-subtle);
  --bs-light-active: var(--line);
  --bs-light-light: var(--surface);
  --bs-light-inverse: var(--ink);
  --bs-text-light: var(--surface-subtle);
  --bs-dark: var(--ink);
  --bs-dark-active: var(--ink);
  --bs-dark-light: var(--surface-subtle);
  --bs-dark-inverse: var(--surface);
  --bs-text-dark: var(--ink);

  /* Status colours, the soft surfaces mixed from the token and the page. */
  --bs-success: var(--success);
  --bs-success-active: color-mix(in srgb, var(--success) 85%, var(--ink));
  --bs-success-light: color-mix(in srgb, var(--success) 12%, var(--surface));
  --bs-success-inverse: var(--surface);
  --bs-text-success: var(--success);
  --bs-warning: var(--warning);
  --bs-warning-active: color-mix(in srgb, var(--warning) 85%, var(--ink));
  --bs-warning-light: color-mix(in srgb, var(--warning) 12%, var(--surface));
  --bs-warning-inverse: var(--surface);
  --bs-text-warning: var(--warning);
  --bs-danger: var(--danger);
  --bs-danger-active: color-mix(in srgb, var(--danger) 85%, var(--ink));
  --bs-danger-light: color-mix(in srgb, var(--danger) 12%, var(--surface));
  --bs-danger-inverse: var(--surface);
  --bs-text-danger: var(--danger);
  --bs-form-valid-color: var(--success);
  --bs-form-valid-border-color: var(--success);
  --bs-form-invalid-color: var(--danger);
  --bs-form-invalid-border-color: var(--danger);

  /* Keenthemes' grey scale onto surface, line and ink. */
  --bs-gray-100: var(--surface-subtle);
  --bs-gray-200: var(--line);
  --bs-gray-300: var(--line);
  --bs-gray-400: var(--line-strong);
  --bs-gray-500: var(--ink-muted);
  --bs-gray-600: var(--ink-muted);
  --bs-gray-700: var(--ink-muted);
  --bs-gray-800: var(--ink);
  --bs-gray-900: var(--ink);
  --bs-text-muted: var(--ink-muted);
  --bs-text-gray-100: var(--surface-subtle);
  --bs-text-gray-200: var(--line);
  --bs-text-gray-300: var(--line);
  --bs-text-gray-400: var(--line-strong);
  --bs-text-gray-500: var(--ink-muted);
  --bs-text-gray-600: var(--ink-muted);
  --bs-text-gray-700: var(--ink-muted);
  --bs-text-gray-800: var(--ink);
  --bs-text-gray-900: var(--ink);
  --bs-text-white: var(--on-blue);

  /* Lines instead of shadows, square corners, 4px at most on controls. */
  --bs-border-color: var(--line);
  --bs-border-color-translucent: var(--line);
  --bs-border-dashed-color: var(--line-strong);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-radius-xl: var(--radius-md);
  --bs-border-radius-xxl: var(--radius-md);
  --bs-border-radius-2xl: var(--radius-md);
  --bs-border-radius-pill: var(--radius-sm);
  --bs-box-shadow-xs: none;
  --bs-box-shadow-sm: none;
  --bs-box-shadow: none;
  --bs-box-shadow-lg: none;
  --bs-box-shadow-inset: none;
  --bs-root-card-box-shadow: none;
  --bs-root-card-border-color: var(--line);
  --bs-tooltip-box-shadow: var(--shadow-float);
  --bs-dropdown-bg: var(--surface-raised);
  --bs-dropdown-box-shadow: var(--shadow-float);
  --bs-menu-dropdown-bg-color: var(--surface-raised);
  --bs-menu-dropdown-box-shadow: var(--shadow-float);
  --bs-drawer-bg-color: var(--surface);
  --bs-drawer-box-shadow: none;
  --bs-table-loading-message-box-shadow: var(--shadow-float);
  --bs-scrolltop-box-shadow: none;
  --bs-code-bg: var(--surface-subtle);
  --bs-code-color: var(--ink);
  --bs-code-shadow: none;
  --bs-code-border-color: var(--line);
  --bs-table-striped-bg: var(--surface-subtle);
  --bs-symbol-label-bg: var(--surface-subtle);
  --bs-symbol-label-color: var(--ink);
  --bs-bullet-bg-color: var(--line-strong);
  --bs-scrollbar-color: var(--line);
  --bs-scrollbar-hover-color: var(--line-strong);

  /* Fields: a plain surface with a 1px line-strong edge (see below). */
  --bs-input-bg: var(--surface);
  --bs-input-color: var(--ink);
  --bs-input-solid-bg: var(--surface);
  --bs-input-solid-bg-focus: var(--surface);
  --bs-input-solid-color: var(--ink);
  --bs-input-solid-placeholder-color: var(--ink-muted);

  /* Menus: hover on the subtle surface, the active entry in blue-soft. */
  --bs-menu-heading-color: var(--ink-muted);
  --bs-menu-link-color-hover: var(--blue);
  --bs-menu-link-color-show: var(--blue);
  --bs-menu-link-color-here: var(--blue);
  --bs-menu-link-color-active: var(--blue);
  --bs-menu-link-bg-color-hover: var(--surface-subtle);
  --bs-menu-link-bg-color-show: var(--surface-subtle);
  --bs-menu-link-bg-color-here: var(--blue-soft);
  --bs-menu-link-bg-color-active: var(--blue-soft);

  /* The frame: a light page, header and sidebar separated by a line. */
  --bs-app-bg-color: var(--surface-subtle);
  --bs-app-blank-bg-color: var(--surface-subtle);
  --bs-app-header-base-bg-color: var(--surface);
  --bs-app-header-minimize-bg-color: var(--surface);
  --bs-app-header-sticky-bg-color: var(--surface);
  --bs-app-header-base-border-bottom: 1px solid var(--line);
  --bs-app-header-minimize-border-bottom: 1px solid var(--line);
  --bs-app-header-sticky-border-bottom: 1px solid var(--line);
  --bs-app-header-base-box-shadow: none;
  --bs-app-header-minimize-box-shadow: none;
  --bs-app-header-sticky-box-shadow: none;
  --bs-app-sidebar-base-bg-color: var(--surface);
  --bs-app-sidebar-base-box-shadow: none;
  --bs-app-sidebar-base-border-end: 1px solid var(--line);
  --bs-app-footer-bg-color: var(--surface-subtle);
}

/* ---------- Type ---------- */
body,
.btn,
.form-control,
.form-select,
.menu,
.menu .menu-title,
.select2-container .select2-selection,
.modal,
.tooltip,
.toast {
  font-family: var(--font-sans);
}
h1, h2, h3, .h1, .h2, .h3, .card-title, .section-title, .section-title-inner {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
code, kbd, pre, samp, .shortcut, [data-repeater-list="public_keys"] textarea {
  font-family: var(--font-mono);
}
.shortcut {
  color: var(--ink-muted);
}
.fw-bold, .fw-bolder {
  font-weight: 600 !important;
}
/* Bootstrap colours links from --bs-link-color-rgb, a triplet of numbers no
   token provides; the named variable is mapped above. */
a {
  color: var(--bs-link-color);
}
a:hover {
  color: var(--bs-link-hover-color);
}

/* Labels and figures in Geist Mono: table heads, sizes and dates. */
.table thead th,
.table thead th .dt-column-title {
  font-family: var(--font-mono);
  font-size: 12px !important;
  line-height: 16px;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase !important;
  color: var(--ink-muted) !important;
}
#file_manager_list tbody td:nth-child(3),
#file_manager_list tbody td:nth-child(4) {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-muted);
}

/* ---------- Frame: header, sidebar, footer ---------- */
.app-header {
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
}
[data-kt-app-header-minimize=on] .app-header {
  backdrop-filter: none;
}
.app-sidebar {
  border-right: 1px solid var(--line);
}
.text-sidebar {
  color: var(--ink);
  font-weight: 600 !important;
  letter-spacing: -0.015em;
}
[data-bs-theme=dark] .text-sidebar {
  color: var(--ink);
}
.app-sidebar-navs .menu .menu-item .menu-link,
.app-sidebar-navs .menu .menu-item .menu-link .menu-title,
.app-sidebar-navs .menu .menu-item .menu-link .menu-icon,
.app-sidebar-navs .menu .menu-item .menu-link .menu-icon i {
  color: var(--ink-muted);
}
.app-sidebar-navs .menu .menu-item .menu-link:hover:not(.disabled):not(.active),
.app-sidebar-navs .menu .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-title,
.app-sidebar-navs .menu .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-icon i,
.app-sidebar-navs .menu .menu-item.show > .menu-link,
.app-sidebar-navs .menu .menu-item.show > .menu-link .menu-title,
.app-sidebar-navs .menu .menu-item.show > .menu-link .menu-icon i,
.app-sidebar-navs .menu .menu-item.here > .menu-link,
.app-sidebar-navs .menu .menu-item.here > .menu-link .menu-title,
.app-sidebar-navs .menu .menu-item.here > .menu-link .menu-icon i {
  color: var(--ink) !important;
}
.app-sidebar-navs .menu .menu-item .menu-link.active {
  background-color: var(--blue-soft);
  color: var(--blue);
}
.app-sidebar-navs .menu .menu-item .menu-link.active .menu-title,
.app-sidebar-navs .menu .menu-item .menu-link.active .menu-icon,
.app-sidebar-navs .menu .menu-item .menu-link.active .menu-icon i {
  color: var(--blue) !important;
}
.app-sidebar-navs .menu .menu-item .menu-heading {
  color: var(--ink-muted);
}
.app-sidebar .hover-scroll-y:hover {
  scrollbar-color: var(--line-strong) transparent;
}
.app-sidebar .hover-scroll-y:hover::-webkit-scrollbar-thumb {
  background-color: var(--line-strong);
}
.app-footer {
  background-color: transparent;
  border-top: 1px solid var(--line);
}

/* The footer names SFTPGo on every signed-in page, as SFTPGo's licence
   terms ask (ADR 0303), in place of the server version and its commit hash:
   the text SFTPGo writes is hidden and the attribution drawn in its place.
   i18next sets <html lang> to the language it resolved. */
#kt_app_footer .app-container > div > span:first-child {
  font-size: 0 !important;
  margin: 0 !important;
}
#kt_app_footer .app-container > div > span:first-child::after {
  content: "GL Files runs on SFTPGo";
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--ink-muted);
}
html:lang(de) #kt_app_footer .app-container > div > span:first-child::after {
  content: "GL Files nutzt SFTPGo";
}

/* ---------- The logo. The monogram's G is ink and vanishes on Nachtblau, so
   in the dark theme every <img> of it shows the on-dark monogram instead: the
   file SFTPGo links is pushed out of the box with object-position and the
   other one drawn as its background. This needs nothing beyond CSS 2 and
   object-position, unlike content: url() on an <img>, which browsers do not
   handle alike. ---------- */
img[src$="/gl-monogram.svg"] {
  border-radius: var(--radius-0);
}
[data-bs-theme=dark] img[src$="/gl-monogram.svg"] {
  background: url("vendor/design-system/assets/Logos/gl-monogram-on-dark.svg") center / contain no-repeat;
  object-position: -10000px 0;
}
.app-sidebar-logo {
  display: flex;
  align-items: center;
}

/* ---------- Cards, the sign-in box, dialogs, menus ---------- */
.card,
.card.card-flush {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-0) !important;
  box-shadow: none !important;
  background-color: var(--surface-raised);
}
.card .card-header {
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-0) !important;
}
.card .card-header.bg-light {
  background-color: var(--surface-subtle) !important;
}
.card .card .card-header.bg-light {
  background-color: transparent !important;
}
.card-flush > .card-header {
  border-bottom: 0;
}
.shadow-sm, .shadow, .shadow-lg, .shadow-xs {
  box-shadow: none !important;
}
.rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-top, .rounded-bottom {
  border-radius: var(--radius-0) !important;
}
.app-blank #app_root .bg-body {
  border: 1px solid var(--line);
  background-color: var(--surface) !important;
}
/* The whole monogram before the product name, as a product mark is set
   (brandbook 05), instead of two Bootstrap columns far apart. */
#sign_in_form .row {
  flex-wrap: nowrap;
}
#sign_in_form .row > .col-5,
#sign_in_form .row > .col-7 {
  flex: 0 0 auto;
  width: auto;
}
#sign_in_form .row img[src$="/gl-monogram.svg"] {
  height: 56px !important;
  width: 56px;
}
.app-blank h1 {
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -0.025em;
  margin: 0 !important;
}
.modal-content {
  border: 1px solid var(--line);
  border-radius: var(--radius-0);
  box-shadow: var(--shadow-float);
  background-color: var(--surface-raised);
}
.modal-header, .modal-footer {
  border-color: var(--line);
}
.menu-sub-dropdown,
.dropdown-menu,
.select2-dropdown,
.swal2-popup {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-0) !important;
  background-color: var(--surface-raised) !important;
  box-shadow: var(--shadow-float) !important;
}
.menu-rounded .menu-link {
  border-radius: var(--radius-0);
}
/* The row menu sits in a right-aligned cell and is 200px wide; Geist is
   wider than SFTPGo's Inter, so an entry such as "Verschieben oder kopieren"
   would wrap and align right. */
.menu-sub-dropdown {
  text-align: start;
}
.menu-sub-dropdown.w-200px {
  width: max-content !important;
  min-width: 200px;
}
.menu-sub-dropdown .menu-link {
  white-space: nowrap;
}
.separator {
  border-bottom-color: var(--line) !important;
}
hr {
  border-top: 1px solid var(--line);
  opacity: 1;
}
.notice, .alert {
  border-style: solid !important;
  border-width: 1px !important;
}
.notice.bg-light-primary, .alert-primary {
  border-color: var(--blue) !important;
  background-color: var(--blue-soft) !important;
}
#errorMsg {
  border-style: solid !important;
}

/* ---------- Buttons: 4px at most, no shadow, the blue only for the one
   primary action; the "light primary" secondary actions become outlined.
   Keenthemes takes the border off every button and pads it by 1px instead,
   so the outline is an inset line of 1px, which keeps every size. ---------- */
.btn {
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.btn.btn-primary {
  background-color: var(--blue);
  color: var(--on-blue);
}
.btn.btn-primary i,
.btn.btn-primary .svg-icon {
  color: var(--on-blue);
}
.btn-check:active + .btn.btn-primary,
.btn-check:checked + .btn.btn-primary,
.btn.btn-primary.active,
.btn.btn-primary.show,
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:hover:not(.btn-active),
.show > .btn.btn-primary {
  background-color: var(--blue-strong) !important;
  border-color: var(--blue-strong) !important;
  color: var(--on-blue) !important;
}
.btn.btn-light-primary,
.btn.btn-light,
.btn.btn-secondary {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong) !important;
  color: var(--ink);
}
.btn.btn-light-primary i,
.btn.btn-light i,
.btn.btn-secondary i {
  color: var(--ink);
}
.btn-check:checked + .btn.btn-light-primary,
.btn.btn-light-primary.active,
.btn.btn-light-primary.show,
.btn.btn-light-primary:active:not(.btn-active),
.btn.btn-light-primary:focus:not(.btn-active),
.btn.btn-light-primary:hover:not(.btn-active),
.show > .btn.btn-light-primary,
.btn.btn-light:hover:not(.btn-active),
.btn.btn-light.btn-active-light-primary.active,
.btn.btn-secondary:hover:not(.btn-active) {
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--ink) !important;
  color: var(--ink) !important;
}
.btn-check:checked + .btn.btn-light-primary i,
.btn.btn-light-primary:hover:not(.btn-active) i,
.btn.btn-light-primary:focus:not(.btn-active) i {
  color: var(--ink) !important;
}
.btn.btn-light-danger {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--danger) !important;
  color: var(--danger);
}
.btn.btn-light-danger i {
  color: var(--danger);
}
.btn.btn-light-danger:hover:not(.btn-active),
.btn.btn-light-danger:focus:not(.btn-active) {
  background-color: var(--danger) !important;
  color: var(--surface) !important;
}
.btn.btn-light-danger:hover:not(.btn-active) i,
.btn.btn-light-danger:focus:not(.btn-active) i {
  color: var(--surface) !important;
}
/* The icon buttons in each row of the file list: a line, the icon in ink. */
.btn.btn-icon.btn-light {
  box-shadow: inset 0 0 0 1px var(--line) !important;
}
.btn.btn-icon.btn-light i,
.btn.btn-icon.btn-light .svg-icon {
  color: var(--ink-muted);
}
.btn.btn-icon.btn-light:hover:not(.btn-active) i {
  color: var(--ink) !important;
}

/* The OpenID button on the sign-in page: the primary action, without the
   OpenID logo, which would be a second colour on the page. */
.app-blank a.btn.btn-primary[href$="/oidclogin"] {
  min-height: 48px;
}
.app-blank img[src$="/img/openid-logo.png"] {
  display: none;
}

/* ---------- Fields: 1px line-strong, 4px at most ---------- */
.form-control,
.form-select,
.form-control.form-control-solid,
.form-select.form-select-solid,
.select2-container--bootstrap5 .select2-selection {
  background-color: var(--surface);
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-md) !important;
  color: var(--ink);
  box-shadow: none !important;
}
.form-control::placeholder {
  color: var(--ink-muted);
}
.form-control[readonly]:not(.form-control-plaintext) {
  background-color: var(--surface-subtle);
}
.form-control-plaintext {
  color: var(--ink);
}
.form-control:focus,
.form-select:focus,
.form-control.form-control-solid:focus,
.form-select.form-select-solid:focus {
  border-color: var(--line-strong) !important;
  background-color: var(--surface);
  color: var(--ink);
}
.form-check-input {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
}
.form-check.form-check-solid .form-check-input:not(:checked) {
  background-color: var(--surface);
  border: 1px solid var(--line-strong);
}
.form-check-input:checked,
.form-check.form-check-solid .form-check-input:checked {
  background-color: var(--blue);
  border-color: var(--blue);
}
.form-switch .form-check-input:not(:checked),
.form-check.form-check-solid.form-switch .form-check-input:not(:checked) {
  background-color: var(--line);
}
.form-check-input:disabled {
  opacity: 0.5;
}
.col-form-label, .form-label {
  color: var(--ink);
  font-weight: 500;
}

/* Focus: 2px of the surface colour, then 2px focus-ring. Never removed. */
a:focus-visible,
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus-visible,
.menu-link:focus-visible,
.page-link:focus-visible,
.select2-container--focus .select2-selection {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ---------- The file list ---------- */
.badge {
  border-radius: var(--radius-sm);
}
/* The path above the file list. */
.badge.badge-light-primary {
  background-color: transparent;
  color: var(--ink) !important;
  padding-left: 0;
  font-size: 15px;
  font-weight: 500;
}
.badge.badge-light-primary a,
[data-kt-filemanager-table-nav-bar] a {
  color: var(--blue);
}
.badge.badge-light-primary i {
  color: var(--blue) !important;
}
.table > :not(caption) > * > * {
  border-bottom-color: var(--line);
}
.table.table-row-dashed tr,
.table.table-row-gray-200 tr,
.table.table-row-dashed tbody tr {
  border-bottom: 1px solid var(--line) !important;
}
.table tbody tr:hover > * {
  background-color: var(--surface-subtle);
}
.table a.text-gray-800,
.table .text-gray-800.text-hover-primary {
  color: var(--ink) !important;
}
.table a.text-gray-800:hover,
.table .text-hover-primary:hover {
  color: var(--blue) !important;
}
.table i.ki-folder,
.table i.ki-files,
.table i.ki-file {
  color: var(--blue) !important;
}
.page-item .page-link {
  border-radius: var(--radius-md) !important;
}
.page-item.active .page-link {
  background-color: var(--blue);
  color: var(--on-blue);
}
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--line-strong);
}
.dropzone {
  border: 1px dashed var(--line-strong) !important;
  border-radius: var(--radius-0) !important;
  background-color: var(--surface-subtle) !important;
}
.progress {
  border-radius: var(--radius-0);
  background-color: var(--line);
}
.progress-bar {
  background-color: var(--blue);
}
.spinner-border {
  color: var(--blue);
}