/*
  TeXercises – moderne Gestaltungsschicht
  ---------------------------------------
  Liegt ueber dem Equation-Theme (assets/css/main.css, structure.css) und
  ueberschreibt nur Farben, Abstaende, Radien und die Hover-/Klick-Zustaende.
  Die Templates und die Position der Bedienelemente bleiben unveraendert.

  Ausgeliefert durch about.views.theme_asset unter /about/theme/modern.css?v=<hash>,
  damit die Datei mit dem Repository versioniert ist und nicht im S3-Bucket
  der Theme-Dateien liegen muss.

  Spezifitaet: Etliche Seiten bringen eigene <style>-Bloecke mit und das Theme
  benutzt an einigen Stellen !important. Regeln, die dagegen gewinnen muessen,
  sind deshalb mit #container, #content bzw. #sidebar verankert oder ebenfalls
  mit !important versehen.
*/

:root {
  --tx-blue: #1a73e9;
  --tx-blue-ink: #155fc4;
  --tx-blue-hover: #2b7ff0;
  --tx-blue-tint: #e9f1fe;
  --tx-blue-glow: rgba(26, 115, 233, .28);
  --tx-blue-light: #5b9cff;

  --tx-dark: #1f2a37;
  --tx-dark-2: #26323f;
  --tx-on-dark: #c6cfdb;
  --tx-on-dark-dim: #8592a3;

  --tx-ground: #f2f4f7;
  --tx-card: #ffffff;
  --tx-line: #e3e7ee;
  --tx-line-2: #eef1f5;
  --tx-row: #f6f8fb;

  --tx-ink: #1f2937;
  --tx-ink-2: #4b5563;
  --tx-mute: #7a8594;

  --tx-red: #d93a3a;
  --tx-red-ink: #b42323;
  --tx-red-tint: #fdecec;
  --tx-red-glow: rgba(217, 58, 58, .25);
  --tx-green: #1e9e5a;
  --tx-green-ink: #177a45;
  --tx-green-tint: #e6f6ec;
  --tx-green-glow: rgba(30, 158, 90, .25);
  --tx-amber: #d98a0b;
  --tx-amber-ink: #a86a05;
  --tx-amber-tint: #fdf3e0;
  --tx-amber-glow: rgba(217, 138, 11, .25);
  --tx-cyan: #0b9fc9;
  --tx-cyan-ink: #087da0;
  --tx-cyan-tint: #e4f5fb;
  --tx-cyan-glow: rgba(11, 159, 201, .25);
  --tx-violet: #6b5ce7;
  --tx-violet-tint: #eeebfd;
  --tx-violet-glow: rgba(107, 92, 231, .25);
  --tx-gray-tint: #eef1f5;
  --tx-gray-glow: rgba(31, 41, 55, .12);

  --tx-radius: 8px;
  --tx-radius-card: 12px;
  --tx-header-h: 64px;
  --tx-sidebar-w: 255px;
  --tx-font: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --tx-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --tx-shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -18px rgba(16, 24, 40, .25);
  --tx-shadow-pop: 0 12px 32px -12px rgba(16, 24, 40, .3);
}

/* ---------- Grundschrift und Farben ---------- */

body {
  font-family: var(--tx-font);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--tx-ink-2);
  background: var(--tx-ground);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--tx-ink);
}
/* Bootstrap gibt Ueberschriften Gewicht 500. Open Sans hatte kein 500 und fiel
   auf 400 zurueck; IBM Plex Sans bringt 500 mit, womit h5/h6 (vielerorts als
   Fliesstext benutzt) ploetzlich fett wirkten. */
h5, h6 {
  font-weight: 400;
}

a {
  color: var(--tx-ink);
  transition: color .12s;
}
a:hover, a:focus {
  color: var(--tx-blue-ink);
  text-decoration: none;
}

code, kbd, pre, .tx-mono {
  font-family: var(--tx-mono);
}
code {
  color: var(--tx-blue-ink);
  background: var(--tx-blue-tint);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12.5px;
}
pre code {
  background: transparent;
  padding: 0;
}

/* ---------- Kopfzeile ---------- */

header.header.navbar:not(.tabMobileView) {
  background-color: var(--tx-dark);
  height: var(--tx-header-h);
  min-height: var(--tx-header-h);
  padding: 0 16px 0 0;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  align-items: center;
}
@media (min-width: 992px) {
  header.header.navbar:not(.tabMobileView) {
    flex-wrap: nowrap;
  }
  /* d-lg-block im Template ist !important; ohne Zentrierung wuerde das
     Menue-Symbol am Kreisrand abgeschnitten. Unter 992 px bleibt d-none. */
  header.header.navbar a.sidebarCollapse {
    display: inline-flex !important;
  }
}

header.header.navbar a.sidebarCollapse {
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0 12px 0 14px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  line-height: 1;
  transition: background .14s;
}
header.header.navbar a.sidebarCollapse:hover {
  background: rgba(255, 255, 255, .10);
}
header.header.navbar a.sidebarCollapse i {
  font-size: 22px;
  color: var(--tx-on-dark);
  transition: color .14s;
}
header.header.navbar a.sidebarCollapse:hover i {
  color: #fff;
}

/* Geladene Sammlung / Set / Thema (Kopfzeile links) */
header.header.navbar > h6 {
  background: rgba(91, 156, 255, .14);
  border: 1px solid rgba(91, 156, 255, .25);
  border-radius: var(--tx-radius);
  color: var(--tx-on-dark);
  font-size: 12px;
  line-height: 1.35;
  padding: 5px 12px;
  margin: 0 12px 0 0 !important;
  white-space: nowrap;
}
header.header.navbar > h6 a {
  color: #fff;
}
header.header.navbar > h6 a:hover {
  color: var(--tx-blue-light);
}
header.header.navbar > h6 span[style*="color:red"] {
  color: #ffb4a8 !important;
}
header.header.navbar > h6 a i {
  color: #9dc4ff !important;
  font-size: 13px !important;
}
header.header.navbar > h6 strong {
  color: #fff;
  font-weight: 500;
}

/* Suche */
header.header.navbar .navbar-nav .nav-item form.form-inline {
  width: 260px;
  padding: 0;
}
header.header.navbar .navbar-nav .nav-item form.form-inline:before {
  color: var(--tx-on-dark-dim) !important;
  font-size: 15px;
  top: 11px;
  left: 13px;
  transition: color .15s;
}
header.header.navbar .navbar-nav .nav-item form.form-inline:focus-within:before {
  color: #fff !important;
}
header.header.navbar .navbar-nav .nav-item form.form-inline input.search-form-control {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .08);
  color: #fff !important;
  font-size: 14px;
  padding: 8px 14px 8px 38px;
  height: 38px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
header.header.navbar .navbar-nav .nav-item form.form-inline input.search-form-control:focus {
  background: rgba(255, 255, 255, .12) !important;
  border-color: var(--tx-blue-light);
  box-shadow: 0 0 0 3px rgba(91, 156, 255, .25);
}
header.header.navbar .navbar-nav .nav-item form.form-inline input.search-form-control::placeholder {
  color: var(--tx-on-dark-dim);
  font-size: 14px;
}
/* Auf mittleren Breiten (Seitenleiste offen, wenig Platz) das Suchfeld
   schmaler, damit Willkommen und Letzte Aktivitaet in der Zeile bleiben. */
@media (max-width: 1199px) {
  header.header.navbar .navbar-nav .nav-item form.form-inline {
    width: 180px;
  }
  header.header.navbar .navbar-nav > li.nav-item.mr-5 {
    margin-right: 1rem !important;
  }
}
#global_search_results {
  border: 1px solid var(--tx-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--tx-shadow-pop);
  padding: 12px 16px !important;
  color: var(--tx-ink) !important;
  margin-top: 8px;
  z-index: 1030;
}
#global_search_results strong {
  color: var(--tx-ink);
}

/* Willkommen, Letzte Aktivitaet, Login */
header.header.navbar .navbar-nav > li.nav-item {
  color: var(--tx-on-dark);
  font-size: 13.5px;
}
header.header.navbar .navbar-nav > li.nav-item.mt-3 {
  margin-top: 0 !important;
  display: inline-flex;
  align-items: center;
}
header.header.navbar .navbar-nav > li.nav-item > span,
header.header.navbar .navbar-nav > li.nav-item > span a {
  color: var(--tx-on-dark);
}
header.header.navbar .navbar-nav > li.nav-item > span a {
  color: #fff;
  font-weight: 500;
}
header.header.navbar .navbar-nav > li.nav-item > span a:hover {
  color: var(--tx-blue-light);
}
header.header.navbar .navbar-nav > li.nav-item > a.text-dark,
header.header.navbar .navbar-nav > li.nav-item > a[href*="login"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tx-on-dark) !important;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  transition: background .14s, color .14s;
}
header.header.navbar .navbar-nav > li.nav-item > a.text-dark:hover,
header.header.navbar .navbar-nav > li.nav-item > a[href*="login"]:hover {
  background: rgba(255, 255, 255, .10);
  color: #fff !important;
}
header.header.navbar .navbar-nav > li.nav-item > a.text-dark i,
header.header.navbar .navbar-nav > li.nav-item > a[href*="login"] i {
  color: var(--tx-on-dark) !important;
  font-size: 14px !important;
}
header.header.navbar .navbar-nav > li.nav-item > a.text-dark:hover i,
header.header.navbar .navbar-nav > li.nav-item > a[href*="login"]:hover i {
  color: #fff !important;
}

/* Profil-Symbol und Seitenleisten-Umschalter (rechts) */
header.header.navbar .navbar-nav .nav-item.user-profile-dropdown .nav-link.user,
header.header.navbar .navbar-nav .nav-item.cs-toggle .nav-link {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0 0 0 6px;
  line-height: 1;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  transition: background .14s;
}
header.header.navbar .navbar-nav .nav-item.user-profile-dropdown .nav-link.user:hover,
header.header.navbar .navbar-nav .nav-item.cs-toggle .nav-link:hover {
  background: rgba(255, 255, 255, .10);
}
header.header.navbar .navbar-nav .nav-item.user-profile-dropdown .nav-link.user span,
header.header.navbar .navbar-nav .nav-item.cs-toggle .nav-link span {
  color: var(--tx-on-dark) !important;
  font-size: 20px;
  transition: color .14s;
}
header.header.navbar .navbar-nav .nav-item.user-profile-dropdown .nav-link.user:hover span,
header.header.navbar .navbar-nav .nav-item.cs-toggle .nav-link:hover span,
header.header.navbar .navbar-nav .nav-item.dropdown.show a.nav-link span {
  color: #fff !important;
}

/* Profil-Menue */
header.header.navbar .navbar-nav .nav-item.user-profile-dropdown .dropdown-menu {
  background: var(--tx-dark-2);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 6px;
  min-width: 14rem;
  top: 52px;
  right: 0;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .5);
}
header.header.navbar .navbar-nav .nav-item.user-profile-dropdown .dropdown-menu .dropdown-item {
  color: #e6eaf0;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .12s, color .12s;
}
header.header.navbar .navbar-nav .nav-item.user-profile-dropdown .dropdown-menu .dropdown-item i {
  color: var(--tx-on-dark) !important;
  font-size: 15px !important;
  width: 18px;
  text-align: center;
}
header.header.navbar .navbar-nav .nav-item.user-profile-dropdown .dropdown-menu .dropdown-item span {
  color: #e6eaf0;
  font-size: 13.5px;
  padding-left: 0;
}
header.header.navbar .navbar-nav .nav-item.user-profile-dropdown .dropdown-menu .dropdown-item:hover {
  background: rgba(255, 255, 255, .08);
}
header.header.navbar .navbar-nav .nav-item.user-profile-dropdown .dropdown-menu .dropdown-item:hover i,
header.header.navbar .navbar-nav .nav-item.user-profile-dropdown .dropdown-menu .dropdown-item:hover span {
  color: #fff !important;
}
header.header.navbar .navbar-nav .nav-item.user-profile-dropdown .dropdown-menu .dropdown-divider {
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin: 6px 4px;
}

/* Mobile Kopfzeile */
header.tabMobileView {
  background-color: var(--tx-dark) !important;
}

/* ---------- Seitenleiste ---------- */

.sidebar-wrapper.sidebar-theme,
.sidebar-theme {
  background: var(--tx-dark);
}
.sidebar-wrapper {
  box-shadow: none;
  border-right: 1px solid rgba(255, 255, 255, .06);
}

/* Logo-Zeile: gleich hoch wie die Kopfzeile */
#sidebar .theme-brand {
  background: transparent;
  box-shadow: none;
  padding: 0;
  height: var(--tx-header-h);
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
#sidebar .theme-brand li.nav-item {
  margin: 0 !important;
  padding: 0 20px;
  align-items: center;
}
#sidebar .theme-brand img.img-fluid {
  max-height: 34px;
  width: auto;
  display: block;
}

#sidebar ul.menu-categories {
  padding: 10px 12px;
}
/* Die Vorlage komprimiert die Punkte mit mt-n3 (Bootstrap-!important) und
   hebt den aktiven mit mb-3/pl-1 hervor; hier zaehlt nur ein fester Rhythmus. */
#sidebar ul.menu-categories li.menu.mt-n3,
#sidebar ul.menu-categories li.menu.mt-5 {
  margin-top: 0 !important;
}
#sidebar ul.menu-categories li.menu.mb-3 {
  margin-bottom: 0 !important;
}
#sidebar ul.menu-categories li.menu.pl-1 {
  padding-left: 0 !important;
}
#sidebar ul.menu-categories li.menu {
  margin: 2px 0;
}
#sidebar ul.menu-categories li.menu:first-child {
  margin: 0;
}
#sidebar ul.menu-categories li.menu:last-child {
  padding-bottom: 24px;
}
#sidebar ul.menu-categories li.menu > a.dropdown-toggle {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  margin: 0;
  border-radius: var(--tx-radius);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--tx-on-dark);
  position: relative;
  overflow: hidden;
  transition: background .14s, color .14s;
}
#sidebar ul.menu-categories li.menu > a.dropdown-toggle > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
#sidebar ul.menu-categories li.menu > a.dropdown-toggle i {
  color: var(--tx-on-dark);
  font-size: 17px;
  width: 22px;
  margin: 0;
  padding: 0;
  text-align: center;
  background: transparent !important;
  border-radius: 0;
  transition: transform .14s, color .14s;
}
#sidebar ul.menu-categories li.menu > a.dropdown-toggle span {
  color: var(--tx-on-dark);
  transition: color .14s;
}
#sidebar ul.menu-categories li.menu > a.dropdown-toggle:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}
#sidebar ul.menu-categories li.menu > a.dropdown-toggle:hover i,
#sidebar ul.menu-categories li.menu > a.dropdown-toggle:hover span {
  color: #fff;
}
#sidebar ul.menu-categories li.menu > a.dropdown-toggle:hover i {
  transform: translateY(-1px);
}
#sidebar ul.menu-categories li.menu > a.dropdown-toggle:focus-visible {
  outline: 2px solid var(--tx-blue-light);
  outline-offset: -2px;
}
/* Aktiver Menuepunkt: die Vorlage faerbt das li mit bg-light-warning und den
   Text mit text-dark -- beides waere auf dem dunklen Grund unlesbar. */
#sidebar ul.menu-categories li.menu.bg-light-warning {
  background: transparent !important;
  border-radius: var(--tx-radius) !important;
}
#sidebar ul.menu-categories li.menu.bg-light-warning > a.dropdown-toggle {
  background: rgba(91, 156, 255, .12);
  box-shadow: inset 3px 0 0 var(--tx-blue-light);
}
#sidebar ul.menu-categories li.menu.bg-light-warning > a.dropdown-toggle i,
#sidebar ul.menu-categories li.menu.bg-light-warning > a.dropdown-toggle span,
#sidebar ul.menu-categories li.menu > a.dropdown-toggle span.text-dark {
  color: #8ab8ff !important;
}
/* Untermenue (Superuser) */
#sidebar ul.menu-categories ul.submenu {
  padding: 4px 0 6px;
}
#sidebar ul.menu-categories ul.submenu > li a {
  margin-left: 34px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--tx-on-dark-dim);
  transition: background .12s, color .12s;
}
#sidebar ul.menu-categories ul.submenu > li.mt-n3 {
  margin-top: 0 !important;
}
#sidebar ul.menu-categories li.menu:not(:first-child) ul.submenu > li a:before {
  display: none;
}
#sidebar ul.menu-categories ul.submenu > li a:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

/* ---------- Inhalt ---------- */

#content {
  margin-top: var(--tx-header-h);
}
/* Unter 992 px stapelt das Theme die mobile Kopfzeile (85 px) ueber die
   normale; der Inhalt beginnt erst darunter. */
@media (max-width: 991px) {
  #content {
    margin-top: calc(85px + var(--tx-header-h));
  }
}
.page-title {
  margin-top: 22px;
  margin-bottom: 12px;
}
.page-title h3 {
  color: var(--tx-ink);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 0;
}
.layout-spacing {
  margin-bottom: 24px;
}

/* Karten (Widgets) */
.widget.box,
.widget.portlet-widget {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  border-radius: var(--tx-radius-card);
  box-shadow: var(--tx-shadow-card);
}
.widget.box.box-shadow {
  box-shadow: var(--tx-shadow-card);
}
.widget.box .widget-header {
  background: transparent;
  border-radius: var(--tx-radius-card) var(--tx-radius-card) 0 0;
  padding: 0 10px;
}
.widget.box .widget-header.border-bottom {
  border-bottom: 1px solid var(--tx-line-2) !important;
}
.widget.box .widget-header > .row {
  align-items: center;
}
.row [class*="col-"] .widget .widget-header h4 {
  padding: 12px 8px;
  font-size: 15px;
  color: var(--tx-ink);
}
.widget-content-area {
  background: transparent;
  box-shadow: none;
  border-radius: 0 0 var(--tx-radius-card) var(--tx-radius-card);
  padding: 18px 20px;
}
.widget-content-area.widget-no-header {
  border-radius: var(--tx-radius-card);
}
.portlet {
  border-radius: var(--tx-radius-card);
}

/* Meldungen */
.alert {
  border-radius: 10px;
  border-width: 1px;
}
.alert-light-success,
.alert-success {
  color: var(--tx-green-ink);
  background: var(--tx-green-tint);
  border-color: #bfe8cf;
}
.alert-light-danger,
.alert-danger,
.alert-light-error,
.alert-error {
  color: var(--tx-red-ink);
  background: var(--tx-red-tint);
  border-color: #f2c9c9;
}
.alert-light-warning,
.alert-warning {
  color: var(--tx-amber-ink);
  background: var(--tx-amber-tint);
  border-color: #f3dcae;
}
.alert-light-info,
.alert-light-primary,
.alert-info,
.alert-primary {
  color: var(--tx-blue-ink);
  background: var(--tx-blue-tint);
  border-color: #bcd3f7;
}
.alert-light-dark,
.alert-light-default {
  color: var(--tx-ink-2);
  background: #fff;
  border-color: var(--tx-line);
}
.alert-light-dark i.text-default {
  color: var(--tx-amber) !important;
}
.alert-outline-warning {
  border-color: #f3dcae;
  background: var(--tx-amber-tint);
  color: var(--tx-amber-ink);
  border-radius: 10px;
}
.alert-outline-success {
  border-color: #bfe8cf;
  background: var(--tx-green-tint);
  color: var(--tx-green-ink);
  border-radius: 10px;
}
.alert-outline-danger {
  border-color: #f2c9c9;
  background: var(--tx-red-tint);
  color: var(--tx-red-ink);
  border-radius: 10px;
}
.alert.alert-icon-left {
  border-left-width: 48px;
  border-left-color: var(--tx-amber);
  padding-left: 16px;
}
.alert.alert-icon-left i:not(.close) {
  width: 48px;
  left: -48px;
  color: #fff !important;
  font-size: 18px;
}
.alert.alert-icon-left.alert-light-success { border-left-color: var(--tx-green); }
.alert.alert-icon-left.alert-light-danger { border-left-color: var(--tx-red); }
.alert.alert-icon-left.alert-light-primary,
.alert.alert-icon-left.alert-light-info { border-left-color: var(--tx-blue); }
.alert i.close {
  opacity: .6;
}
.alert i.close:hover {
  opacity: 1;
}

/* ---------- Tabellen ---------- */

#content .table {
  color: var(--tx-ink);
}
#content .table > thead > tr > th {
  color: var(--tx-ink-2) !important;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--tx-row);
  border-top: 0;
  border-bottom: 1px solid var(--tx-line);
  padding: 9px 12px;
  vertical-align: middle;
}
#content .table > thead > tr > th i {
  font-size: 13px;
}
/* Sortierpfeile: aktiv rot (Vorlage), sonst grau; im Kopf kleinere Knoepfe */
#content .table > thead a.tx-ib {
  min-width: 22px;
  height: 22px;
  margin: 0 -1px;
}
#content .table > thead a.tx-ib > i {
  font-size: 12px !important;
}
#content .table td {
  padding: 8px 12px;
  color: var(--tx-ink);
  border-top: 1px solid var(--tx-line-2);
}
#content .table-bordered,
#content .table-bordered th,
#content .table-bordered td {
  border-color: var(--tx-line-2);
  border-left: 0;
  border-right: 0;
}
#content .table-bordered {
  border-top: 0;
  border-bottom: 1px solid var(--tx-line-2);
}
#content .table-bordered > thead > tr > th {
  border-bottom: 1px solid var(--tx-line);
}
#content .table.bg-light {
  background: var(--tx-row) !important;
}
#content .table-striped tbody tr:nth-of-type(odd) {
  background-color: transparent !important;
}
#content .table tbody tr {
  transition: background-color .1s;
}
#content .table-hover:not(.table-dark) tbody tr:hover {
  background-color: var(--tx-row) !important;
}
#content .table > tfoot > tr > th {
  color: var(--tx-ink);
}
/* Aktions-Icons in Zeilen: dezent, bei Hover der Zeile voll sichtbar.
   Der 30 px hohe Knopf ragt in die Zellenpolsterung (7 px oben/unten),
   statt die Zeile ueber die Texthoehe (21 px) hinaus zu strecken. */
#content .table tbody td a.tx-ib {
  opacity: .8;
  margin-top: -6px;
  margin-bottom: -5px;
}
#content .table tbody tr:hover td a.tx-ib {
  opacity: 1;
}
/* Icon-Reihen in Zellen (ul.table-controls): die Vorlagen mischen darin
   li-Eintraege, lose <i> (Schwierigkeit, Typ) und Flaggen-<img> mit mb-2;
   inline-block mit line-height 1 setzte jedes davon auf eine andere Hoehe.
   Als Flex-Zeile sitzen alle mittig, auch neben den 30 px hohen Icon-Knoepfen. */
#content .table td ul.table-controls,
#content .table th ul.table-controls {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  vertical-align: middle;
}
#content .table td.text-center ul.table-controls {
  justify-content: center;
}
#content .table td.text-right ul.table-controls {
  justify-content: flex-end;
}
/* Ein Raster fuer alles: jedes Icon sitzt in einem 20-px-Kasten, 17 px gross
   (die icn_-Tags setzen 15-25 px durcheinander), Flaggen 18 px. Links werden
   28-px-Knoepfe, die um 4 px in die Luft ragen -- der Mittenabstand bleibt so
   fuer Icons und Knoepfe derselbe (28 px). */
#content .table ul.table-controls > li,
#content .table ul.table-controls > i,
#content .table ul.table-controls > img,
#content .table ul.table-controls > a,
#content .table ul.table-controls > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  line-height: 1;
  flex: 0 0 auto;
}
#content .table ul.table-controls > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
#content .table ul.table-controls i {
  display: block;
  font-size: 17px !important;
  line-height: 1;
  margin: 0 !important;
}
#content .table ul.table-controls > i {
  width: 20px;
  text-align: center;
}
/* Flaggen: 18 px Bild im 20-px-Kasten */
#content .table ul.table-controls img {
  display: block;
  width: 20px !important;
  height: 20px !important;
  padding: 1px;
  box-sizing: border-box;
  margin: 0 !important;
}
#content .table ul.table-controls > li > a i {
  color: var(--tx-ink-2);
}
#content .table ul.table-controls a.tx-ib,
#content .table ul.table-controls > li > a.tx-ib {
  min-width: 28px;
  width: 28px;
  height: 28px;
  margin: -4px;
}
#content .table ul.table-controls > li:has(> a.tx-ib) {
  width: auto;
  height: auto;
  margin: 0;
}
#content .table ul.table-controls > li:has(> a.tx-ib) > a.tx-ib {
  margin: -4px;
}
/* "Create New ..."-Zeile */
#content .table td > a.font-italic {
  color: var(--tx-green-ink);
  font-style: normal !important;
  font-weight: 500;
}
#content .table td > a.font-italic:hover {
  color: var(--tx-green);
}
.fs-10 {
  color: var(--tx-mute);
}

/* ---------- Icon-Knoepfe ---------- */
/* Die Klasse tx-ib setzt modern.js auf Links, die nur ein Icon enthalten. */

a.tx-ib {
  position: relative;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  vertical-align: middle;
  text-decoration: none;
  transition: background .12s, box-shadow .12s, transform .08s;
}
/* Alle Icon-Knoepfe gleich gross, unabhaengig von der fs-Klasse der Vorlage
   (die icn_-Tags mischen 16, 20 und 25 px nebeneinander); 17 px passt auch
   fuer hohe Glyphen wie das PDF-Symbol in den Kreis. */
a.tx-ib > i {
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1;
  transition: color .12s;
}
a.tx-ib:hover {
  background: var(--tx-blue-tint);
  box-shadow: 0 0 0 3px var(--tx-blue-glow);
}
a.tx-ib:hover > i {
  color: var(--tx-blue-ink) !important;
}
a.tx-ib:active {
  transform: scale(.92);
}
a.tx-ib:focus-visible {
  outline: 2px solid var(--tx-blue);
  outline-offset: 1px;
}
a.tx-ib.tx-danger:hover {
  background: var(--tx-red-tint);
  box-shadow: 0 0 0 3px var(--tx-red-glow);
}
a.tx-ib.tx-danger:hover > i {
  color: var(--tx-red-ink) !important;
}
a.tx-ib.tx-success:hover {
  background: var(--tx-green-tint);
  box-shadow: 0 0 0 3px var(--tx-green-glow);
}
a.tx-ib.tx-success:hover > i {
  color: var(--tx-green-ink) !important;
}
a.tx-ib.tx-warning:hover {
  background: var(--tx-amber-tint);
  box-shadow: 0 0 0 3px var(--tx-amber-glow);
}
a.tx-ib.tx-warning:hover > i {
  color: var(--tx-amber-ink) !important;
}
a.tx-ib.tx-info:hover {
  background: var(--tx-cyan-tint);
  box-shadow: 0 0 0 3px var(--tx-cyan-glow);
}
a.tx-ib.tx-info:hover > i {
  color: var(--tx-cyan-ink) !important;
}
a.tx-ib.tx-secondary:hover {
  background: var(--tx-violet-tint);
  box-shadow: 0 0 0 3px var(--tx-violet-glow);
}
a.tx-ib.tx-secondary:hover > i {
  color: var(--tx-violet) !important;
}
a.tx-ib.tx-dark:hover {
  background: var(--tx-gray-tint);
  box-shadow: 0 0 0 3px var(--tx-gray-glow);
}
a.tx-ib.tx-dark:hover > i {
  color: var(--tx-ink) !important;
}
/* Links ohne Ziel (z. B. "Already in Collection") nur als Hinweis */
a.tx-ib:not([href]):hover,
a.tx-ib[href="#/"][onclick=""]:hover {
  box-shadow: none;
}

/* Semantische Farben der Icons an die Palette angleichen */
.text-danger { color: var(--tx-red) !important; }
.text-success { color: var(--tx-green) !important; }
.text-warning { color: var(--tx-amber) !important; }
.text-info { color: var(--tx-cyan) !important; }
.text-secondary { color: var(--tx-violet) !important; }
.text-primary { color: var(--tx-blue) !important; }
.text-dark { color: var(--tx-ink) !important; }
.text-muted { color: var(--tx-mute) !important; }

/* Filter-Kreise (new-control) und Bootstrap-Kontrollen */
.new-control.new-checkbox .new-control-indicator,
.new-control.new-radio .new-control-indicator {
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.new-control.new-checkbox:hover .new-control-indicator,
.new-control.new-radio:hover .new-control-indicator {
  border-color: var(--tx-blue);
  box-shadow: 0 0 0 3px var(--tx-blue-glow);
}
.new-control.new-checkbox.checkbox-primary > input:checked ~ span.new-control-indicator,
.new-control.new-radio.radio-primary > input:checked ~ span.new-control-indicator {
  background: var(--tx-blue);
  border-color: var(--tx-blue);
}

/* ---------- Badges ---------- */

.badge {
  border-radius: 6px;
  font-weight: 600;
  padding: 3px 8px;
  font-size: 11.5px;
  letter-spacing: .02em;
  line-height: 1.5;
}
.badge-classic {
  border-radius: 5px;
  font-family: var(--tx-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .01em;
}
.badge-pills {
  border-radius: 999px;
}
/* Pillen neben Text (Reihenfolge im Stapel-Kopf) mittig statt auf der
   Grundlinie, sonst stehen sie ueber den Pfeilen daneben. */
.badge-pills,
.widget-header .badge {
  vertical-align: middle;
}
.badge-default {
  background: var(--tx-line-2);
  border: 0;
  color: var(--tx-ink-2);
}
.badge-default a {
  color: inherit;
}
.badge-default:hover,
.badge-default:focus {
  background: #e3e8ef;
  color: var(--tx-ink);
}
.badge-light.border {
  background: #fff;
  border-color: var(--tx-line) !important;
  color: var(--tx-ink-2);
}
.badge-primary {
  background: var(--tx-blue-tint);
  color: var(--tx-blue-ink);
}
.badge-primary:hover,
.badge-primary:focus {
  background: #d7e5fc;
}
.badge-danger, .bg-danger { background-color: var(--tx-red) !important; }
.badge-success, .bg-success { background-color: var(--tx-green) !important; }
.badge-warning, .bg-warning { background-color: var(--tx-amber) !important; }
.badge-info, .bg-info { background-color: var(--tx-cyan) !important; }
.badge-dark, .bg-dark { background-color: var(--tx-dark) !important; }
.badge-secondary { background-color: var(--tx-violet); }
.badge-danger:hover, .badge-danger:focus { background-color: #c73232 !important; }
.badge-success:hover, .badge-success:focus { background-color: #198a4e !important; }
.badge-dark:hover, .badge-dark:focus { background-color: #2b394a !important; }
.bg-light-warning { background-color: var(--tx-amber-tint) !important; color: var(--tx-amber-ink); }
.bg-light-success { background-color: var(--tx-green-tint) !important; color: var(--tx-green-ink); }
.bg-light-primary { background-color: var(--tx-blue-tint) !important; color: var(--tx-blue-ink); }
.bg-light-danger { background-color: var(--tx-red-tint) !important; color: var(--tx-red-ink); }
.bg-light-info { background-color: var(--tx-cyan-tint) !important; color: var(--tx-cyan-ink); }
a.badge,
.widget-header .badge {
  border-radius: 999px;
  padding: 3px 10px;
  position: relative;
  overflow: hidden;
  transition: filter .12s, box-shadow .12s;
}
a.badge:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 0 3px var(--tx-gray-glow);
}
table .badge-success, table .badge-primary, table .badge-warning,
table .badge-danger, table .badge-info, table .badge-dark, table .badge-secondary {
  box-shadow: none;
}

/* ---------- Seitenzahlen ---------- */

.pagination {
  margin: 0;
}
ul.pagination li {
  color: var(--tx-mute);
  font-size: 13px;
}
ul.pagination.pagination-style-11 li a,
ul.pagination.pagination-sm > li > a {
  background: transparent;
  color: var(--tx-ink-2);
  border-radius: 7px;
  font-size: 13px;
  padding: 4px 9px;
  min-width: 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: none;
  transition: background .12s, color .12s;
}
ul.pagination.pagination-style-11 li a:hover:not(.active),
ul.pagination li a:hover:not(.active) {
  background: var(--tx-blue-tint);
  color: var(--tx-blue-ink);
}
ul.pagination.pagination-style-11 li a.active,
ul.pagination li a.active {
  background: var(--tx-blue);
  border-color: var(--tx-blue);
  color: #fff;
  font-weight: 600;
}

/* Ladezustand nach Klick auf eine Seitenzahl (modern.js): Liste aufhellen
   und sperren, im angeklickten Feld dreht sich ein kleiner Ring. */
ul.pagination > li {
  transition: opacity .15s;
}
ul.pagination.tx-loading {
  pointer-events: none;
}
ul.pagination.tx-loading > li {
  opacity: .4;
}
ul.pagination.tx-loading > li.tx-busy {
  opacity: 1;
}
ul.pagination li a .tx-spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: -2px;
  border: 2px solid var(--tx-blue);
  border-right-color: transparent;
  border-radius: 50%;
  animation: tx-spin .7s linear infinite;
}
@keyframes tx-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Knoepfe ---------- */

.btn {
  border-radius: var(--tx-radius);
  font-weight: 500;
  padding: 8px 16px;
  position: relative;
  overflow: hidden;
  box-shadow: none;
  transition: background-color .12s, color .12s, box-shadow .12s, transform .08s, border-color .12s;
}
.btn:active:not(:disabled):not(.disabled) {
  transform: translateY(1px) scale(.985);
}
.btn:focus-visible {
  outline: 2px solid var(--tx-blue);
  outline-offset: 2px;
}
.btn.btn-sm {
  padding: 5px 11px;
  font-size: 13px;
}
.btn.btn-rounded {
  border-radius: 999px;
}

.btn.btn-primary,
.btn.btn-gradient-info,
.btn.btn-gradient-primary {
  background: var(--tx-blue) !important;
  border-color: var(--tx-blue) !important;
  color: #fff !important;
  background-image: none !important;
}
.btn.btn-primary:hover,
.btn.btn-gradient-info:hover,
.btn.btn-gradient-primary:hover {
  background: var(--tx-blue-hover) !important;
  border-color: var(--tx-blue-hover) !important;
  box-shadow: 0 0 0 3px var(--tx-blue-glow), 0 6px 14px -8px rgba(26, 115, 233, .7) !important;
}
.btn.btn-primary.disabled,
.btn.btn-primary:disabled {
  background: var(--tx-blue) !important;
  border-color: var(--tx-blue) !important;
  opacity: .55;
}

.btn.btn-success {
  background: var(--tx-green) !important;
  border-color: var(--tx-green) !important;
  color: #fff !important;
}
.btn.btn-success:hover {
  background: #22ad63 !important;
  border-color: #22ad63 !important;
  box-shadow: 0 0 0 3px var(--tx-green-glow), 0 6px 14px -8px rgba(30, 158, 90, .7) !important;
}

.btn.btn-danger {
  background: #fff !important;
  border-color: #f2c9c9 !important;
  color: var(--tx-red) !important;
}
.btn.btn-danger:hover {
  background: var(--tx-red-tint) !important;
  border-color: #eab2b2 !important;
  box-shadow: 0 0 0 3px var(--tx-red-glow) !important;
}

.btn.btn-warning,
.btn.btn-gradient-warning {
  background: var(--tx-amber) !important;
  border-color: var(--tx-amber) !important;
  color: #fff !important;
  background-image: none !important;
}
.btn.btn-warning:hover,
.btn.btn-gradient-warning:hover {
  background: #e99a1c !important;
  border-color: #e99a1c !important;
  box-shadow: 0 0 0 3px var(--tx-amber-glow), 0 6px 14px -8px rgba(217, 138, 11, .7) !important;
}

.btn.btn-info {
  background: var(--tx-cyan) !important;
  border-color: var(--tx-cyan) !important;
  color: #fff !important;
}
.btn.btn-info:hover {
  background: #14aed9 !important;
  border-color: #14aed9 !important;
  box-shadow: 0 0 0 3px var(--tx-cyan-glow) !important;
}

.btn.btn-secondary {
  background: var(--tx-violet) !important;
  border-color: var(--tx-violet) !important;
  color: #fff !important;
}
.btn.btn-secondary:hover {
  background: #7a6cf0 !important;
  border-color: #7a6cf0 !important;
  box-shadow: 0 0 0 3px var(--tx-violet-glow) !important;
}

.btn.btn-dark,
.btn.btn-gradient-dark {
  background: var(--tx-dark) !important;
  border-color: var(--tx-dark) !important;
  color: #fff !important;
  background-image: none !important;
}
.btn.btn-dark:hover,
.btn.btn-gradient-dark:hover {
  background: var(--tx-dark-2) !important;
  box-shadow: 0 0 0 3px var(--tx-gray-glow) !important;
}

/* Umriss-Knoepfe: heller Grund, farbige Schrift; beim Hover getoent statt
   gefuellt, damit die Schrift lesbar bleibt (das Theme faerbt sie sonst weiss). */
.btn.btn-outline-primary {
  color: var(--tx-blue-ink) !important;
  border: 1px solid #bcd3f7 !important;
  background: #fff !important;
}
.btn.btn-outline-primary:hover {
  background: var(--tx-blue-tint) !important;
  border-color: #a6c5f5 !important;
  box-shadow: 0 0 0 3px var(--tx-blue-glow);
}
.btn.btn-outline-info {
  color: var(--tx-cyan-ink) !important;
  border: 1px solid #a9dff0 !important;
  background: #fff !important;
}
.btn.btn-outline-info:hover {
  background: var(--tx-cyan-tint) !important;
  border-color: #8ed3ea !important;
  box-shadow: 0 0 0 3px var(--tx-cyan-glow);
}
.btn.btn-outline-success {
  color: var(--tx-green-ink) !important;
  border: 1px solid #bfe8cf !important;
  background: #fff !important;
}
.btn.btn-outline-success:hover {
  background: var(--tx-green-tint) !important;
  border-color: #a5dcbb !important;
  box-shadow: 0 0 0 3px var(--tx-green-glow);
}
.btn.btn-outline-danger {
  color: var(--tx-red-ink) !important;
  border: 1px solid #f2c9c9 !important;
  background: #fff !important;
}
.btn.btn-outline-danger:hover {
  background: var(--tx-red-tint) !important;
  border-color: #eab2b2 !important;
  box-shadow: 0 0 0 3px var(--tx-red-glow);
}
.btn.btn-outline-warning {
  color: var(--tx-amber-ink) !important;
  border: 1px solid #f3dcae !important;
  background: #fff !important;
}
.btn.btn-outline-warning:hover {
  background: var(--tx-amber-tint) !important;
  border-color: #ecc98a !important;
  box-shadow: 0 0 0 3px var(--tx-amber-glow);
}
.btn.btn-outline-secondary {
  color: var(--tx-ink-2) !important;
  border: 1px solid var(--tx-line) !important;
  background: #fff !important;
}
.btn.btn-outline-secondary:hover {
  background: #fbfcfd !important;
  border-color: #c9d1dc !important;
  color: var(--tx-ink) !important;
  box-shadow: 0 0 0 3px var(--tx-gray-glow);
}
.btn.btn-outline-dark {
  color: var(--tx-ink) !important;
  border: 1px solid #c9d1dc !important;
  background: #fff !important;
}
.btn.btn-outline-dark:hover {
  background: var(--tx-gray-tint) !important;
  box-shadow: 0 0 0 3px var(--tx-gray-glow);
}

/* Getoente Knoepfe: die Vorlagen kombinieren btn-<farbe> mit bg-light-<farbe>
   und faerben den Text per text-<farbe> (Umschalter Question/Solution/Short/
   Video in der Aufgabenansicht). Die gefuellten Regeln oben wuerden sonst
   gewinnen und den farbigen Text auf gleichfarbigem Grund verstecken. */
.btn[class*="bg-light-"],
.btn.btn-primary.bg-light-primary,
.btn.btn-success.bg-light-success,
.btn.btn-warning.bg-light-warning,
.btn.btn-danger.bg-light-danger,
.btn.btn-info.bg-light-info,
.btn.btn-secondary.bg-light-secondary,
.btn.btn-default.bg-light-default {
  color: var(--tx-ink) !important;
  background-image: none !important;
  box-shadow: none;
}
.btn.btn-primary.bg-light-primary,
.btn.bg-light-primary {
  background: var(--tx-blue-tint) !important;
  border-color: #bcd3f7 !important;
}
.btn.btn-primary.bg-light-primary:hover,
.btn.bg-light-primary:hover {
  background: #d7e5fc !important;
  box-shadow: 0 0 0 3px var(--tx-blue-glow) !important;
}
.btn.btn-success.bg-light-success,
.btn.bg-light-success {
  background: var(--tx-green-tint) !important;
  border-color: #bfe8cf !important;
}
.btn.btn-success.bg-light-success:hover,
.btn.bg-light-success:hover {
  background: #d3efdd !important;
  box-shadow: 0 0 0 3px var(--tx-green-glow) !important;
}
.btn.btn-warning.bg-light-warning,
.btn.bg-light-warning {
  background: var(--tx-amber-tint) !important;
  border-color: #f3dcae !important;
}
.btn.btn-warning.bg-light-warning:hover,
.btn.bg-light-warning:hover {
  background: #fae9c6 !important;
  box-shadow: 0 0 0 3px var(--tx-amber-glow) !important;
}
.btn.btn-danger.bg-light-danger,
.btn.bg-light-danger {
  background: var(--tx-red-tint) !important;
  border-color: #f2c9c9 !important;
}
.btn.btn-danger.bg-light-danger:hover,
.btn.bg-light-danger:hover {
  background: #fadada !important;
  box-shadow: 0 0 0 3px var(--tx-red-glow) !important;
}
.btn.btn-info.bg-light-info,
.btn.bg-light-info {
  background: var(--tx-cyan-tint) !important;
  border-color: #a9dff0 !important;
}
.btn.btn-info.bg-light-info:hover,
.btn.bg-light-info:hover {
  background: #d0edf7 !important;
  box-shadow: 0 0 0 3px var(--tx-cyan-glow) !important;
}
.btn.btn-secondary.bg-light-secondary,
.btn.bg-light-secondary {
  background: var(--tx-violet-tint) !important;
  border-color: #d3ccf7 !important;
}
.btn.btn-secondary.bg-light-secondary:hover,
.btn.bg-light-secondary:hover {
  background: #e2ddfb !important;
  box-shadow: 0 0 0 3px var(--tx-violet-glow) !important;
}
.btn.btn-default.bg-light-default,
.btn.bg-light-default {
  background: var(--tx-gray-tint) !important;
  border-color: var(--tx-line) !important;
}
.btn.btn-default.bg-light-default:hover,
.btn.bg-light-default:hover {
  background: #e3e8ef !important;
  box-shadow: 0 0 0 3px var(--tx-gray-glow) !important;
}
.btn[class*="bg-light-"].disabled,
.btn[class*="bg-light-"]:disabled {
  opacity: .55;
  box-shadow: none !important;
}
.text-light-dark {
  color: var(--tx-ink-2) !important;
}

/* Umschalter aus mehreren Knoepfen: gleiche Hoehe wie die Felder daneben,
   ohne Leuchten um einzelne Segmente. bootstrap-select traegt ebenfalls
   btn-group und bleibt ausgenommen. */
#container .btn-group:not(.bootstrap-select) > .btn {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}
#container .btn-group:not(.bootstrap-select) > .btn + .btn {
  margin-left: -1px;
}
#container .btn-group:not(.bootstrap-select) > .btn:hover {
  box-shadow: none !important;
}

/* ---------- Formularfelder ---------- */

#container .form-control,
body > .modal .form-control {
  height: 38px;
  border: 1px solid var(--tx-line);
  border-radius: var(--tx-radius);
  background: #fff;
  color: var(--tx-ink);
  font-size: 14px;
  padding: 6px 11px;
  box-shadow: none;
  transition: border-color .12s, box-shadow .12s;
}
#container .form-control.form-control-sm {
  height: 32px;
  font-size: 13px;
  padding: 4px 9px;
}
#container textarea.form-control,
body > .modal textarea.form-control {
  height: auto;
  min-height: 90px;
}
#container select.form-control[multiple],
#container select.form-control[size] {
  height: auto;
}
#container .form-control:hover,
body > .modal .form-control:hover {
  border-color: #c9d1dc;
}
#container .form-control:focus,
body > .modal .form-control:focus {
  border: 1px solid var(--tx-blue);
  box-shadow: 0 0 0 3px var(--tx-blue-glow);
  outline: 0;
}
#container .form-control::placeholder,
body > .modal .form-control::placeholder {
  color: var(--tx-mute);
  font-size: 14px;
}
#container .form-control:disabled,
#container .form-control[readonly] {
  background: var(--tx-line-2);
  border-color: var(--tx-line-2);
  color: var(--tx-mute);
}
label {
  color: var(--tx-ink-2);
}
.form-vertical .form-group .control-label,
label.control-label {
  color: var(--tx-ink);
  font-weight: 500;
}
.input-group-text {
  border-color: var(--tx-line);
  background: var(--tx-row);
  color: var(--tx-ink-2);
  border-radius: var(--tx-radius);
}

/* bootstrap-select (Auswahlfelder): das Plugin kopiert form-control auf seinen
   Wrapper; nur der innere Knopf soll wie ein Feld aussehen. */
#container .bootstrap-select.form-control,
#container .bootstrap-select.form-control:hover,
#container .bootstrap-select.form-control:focus,
#container .bootstrap-select.form-control:focus-within {
  height: auto;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
#container .bootstrap-select > .dropdown-toggle,
#container .bootstrap-select > .dropdown-toggle.btn {
  background: #fff !important;
  border: 1px solid var(--tx-line) !important;
  border-radius: var(--tx-radius);
  color: var(--tx-ink) !important;
  font-weight: 400;
  height: 38px;
  padding: 6px 30px 6px 11px;
  box-shadow: none;
  overflow: visible;
}
#container .bootstrap-select > .dropdown-toggle:hover {
  border-color: #c9d1dc !important;
}
#container .bootstrap-select > .dropdown-toggle:focus,
#container .bootstrap-select.show > .dropdown-toggle {
  border-color: var(--tx-blue) !important;
  box-shadow: 0 0 0 3px var(--tx-blue-glow) !important;
  outline: 0 !important;
}
#container .bootstrap-select > .dropdown-toggle .filter-option {
  color: var(--tx-ink);
}
.bootstrap-select .dropdown-menu {
  border-radius: 10px;
  border: 1px solid var(--tx-line);
  box-shadow: var(--tx-shadow-pop);
  padding: 6px;
}
.bootstrap-select .dropdown-menu .dropdown-item {
  border-radius: 6px;
}
.bootstrap-select .dropdown-menu .dropdown-item:hover,
.bootstrap-select .dropdown-menu .dropdown-item:focus,
.bootstrap-select .dropdown-menu .dropdown-item.active {
  background: var(--tx-blue-tint) !important;
  color: var(--tx-blue-ink);
}

/* select2 */
#container .select2-container--default .select2-selection--single,
#container .select2-container--default .select2-selection--multiple {
  border: 1px solid var(--tx-line);
  border-radius: var(--tx-radius);
  min-height: 38px;
  transition: border-color .12s, box-shadow .12s;
}
#container .select2-container--default .select2-selection--single {
  height: 38px;
}
#container .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px;
  color: var(--tx-ink);
  padding-left: 11px;
}
#container .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
}
#container .select2-container--default.select2-container--focus .select2-selection--single,
#container .select2-container--default.select2-container--focus .select2-selection--multiple,
#container .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--tx-blue);
  box-shadow: 0 0 0 3px var(--tx-blue-glow);
}
.select2-dropdown {
  border: 1px solid var(--tx-line);
  border-radius: 10px;
  box-shadow: var(--tx-shadow-pop);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--tx-blue-tint);
  color: var(--tx-blue-ink);
}

/* Aufklappmenues und Dialoge im Inhalt */
#content .dropdown-menu,
body > .modal .dropdown-menu {
  border-radius: 10px;
  border: 1px solid var(--tx-line);
  box-shadow: var(--tx-shadow-pop);
}
.modal-content {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 24px 64px -24px rgba(16, 24, 40, .5);
}
.modal-header {
  border-bottom: 1px solid var(--tx-line-2);
}
.modal-footer {
  border-top: 1px solid var(--tx-line-2);
}
.small-dialog {
  border-radius: 14px;
  box-shadow: 0 24px 64px -24px rgba(16, 24, 40, .5);
}

/* Steht ein Icon-Knopf allein in einer Spalte neben Textspalten, ist er mit
   30 px hoeher als die Textzeile (21 px) und wirkt nach unten verschoben.
   Negative Aussenabstaende lassen ihn die Zeile nicht mehr strecken. */
#content .row > [class*="col"].align-right > a.tx-ib,
#content .row > [class*="col"].text-right > a.tx-ib,
.modal .row > [class*="col"].align-right > a.tx-ib,
.modal .row > [class*="col"].text-right > a.tx-ib {
  margin-top: -6px;
  margin-bottom: -5px;
}
/* Feste schmale Spalten mit nur Icon-Knoepfen (col-2 in "Letzte Aktivitaet")
   brechen die Knoepfe sonst untereinander: Breite nach Inhalt, nebeneinander. */
#content .row > .col-1.align-right,
#content .row > .col-2.align-right,
.modal .row > .col-1.align-right,
.modal .row > .col-2.align-right {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

/* Icon-Reihe im Kopf der Stapel-Karten (Desk): jede Aktion steht in einer
   eigenen .col mit mr-1/mr-2, und gleich breite .col-Spalten trieben die
   Icons auseinander. Spalten nach Inhalt, Knoepfe dicht an dicht, lose Icons
   mit demselben sichtbaren Abstand wie die Knoepfe. */
.widget-header .col-auto > .row.no-gutters > .col {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin-right: 0 !important;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
}
.widget-header .col-auto > .row.no-gutters > .col:has(> a.tx-ib) {
  padding: 0;
}
.widget-header .col-auto > .row.no-gutters > .col > a:not(.tx-ib) i {
  font-size: 17px !important;
}

/* ---------- Kontroll-Seitenleiste (geladene Sammlung) ---------- */

aside.control-sidebar {
  background: var(--tx-card);
  border-left: 1px solid var(--tx-line);
  box-shadow: var(--tx-shadow-pop);
}

/* ---------- Startseite ---------- */

.circle-counter-container .circle-counter {
  border-color: var(--tx-blue) !important;
}
.circle-counter-container .c-counter {
  color: var(--tx-ink) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ---------- Fusszeile ---------- */

.footer-section {
  background: transparent;
}
.footer-section .footer-section-1.sidebar-theme {
  background: var(--tx-dark);
}
.footer-section .footer-section-2 {
  background: var(--tx-ground);
  border-top: 1px solid var(--tx-line);
}
.footer-section .links a {
  color: var(--tx-ink-2);
  font-size: 13px;
  transition: color .12s;
}
.footer-section .links a:hover {
  color: var(--tx-blue-ink);
}
.footer-section .links a i {
  color: var(--tx-mute);
  font-size: 13px;
}
.footer-section .bottom-footer {
  color: var(--tx-mute);
  font-size: 12.5px;
}
.footer-section .bottom-footer a {
  color: var(--tx-ink-2);
}
.footer-section .scrollTop {
  background: var(--tx-card);
  border: 1px solid var(--tx-line);
  color: var(--tx-ink-2);
  border-radius: 50%;
  box-shadow: none;
  transition: background .12s, box-shadow .12s;
}
.footer-section .scrollTop i {
  background: transparent;
}
.footer-section .scrollTop:hover {
  background: var(--tx-blue-tint);
  color: var(--tx-blue-ink);
  box-shadow: 0 0 0 3px var(--tx-blue-glow);
}

/* ---------- Welleneffekt beim Klick (modern.js) ---------- */

.tx-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .28;
  transform: scale(0);
  animation: tx-rip .45s ease-out forwards;
  pointer-events: none;
}
@keyframes tx-rip {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tx-ripple {
    display: none;
  }
  .btn, a.tx-ib, a.badge, ul.pagination li a,
  #sidebar ul.menu-categories li.menu > a.dropdown-toggle,
  #sidebar ul.menu-categories li.menu > a.dropdown-toggle i,
  #container .form-control {
    transition: none;
  }
}