/* ===================================================================
   True Legends - Golden Hour
   Grundausstattung für alle Seiten, die kein eigenes Layout haben:
   Tabellen, Formulare, Blätterung, Meldungen, Menüs.

   MyBB gibt auf Suchergebnissen, in der Mitgliederliste, im Kalender,
   in den Nachrichten und in allen Formularen seine Standardklassen aus.
   Ohne diese Datei stünden diese Seiten ungestaltet da.
   =================================================================== */

/* ---------- Tabellen ---------- */
.tborder{
  width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--line);background:var(--bg-panel);
  margin-bottom:16px;
}
.thead{
  background:linear-gradient(180deg,var(--bg-panel-2),rgb(var(--panel-rgb) / .6));
  border-bottom:1px solid var(--line);
}
.thead,.thead td,.thead th{
  font-family:var(--caps);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);text-align:left;padding:11px 14px;font-weight:400;
}
.thead a{color:var(--gold-light);}
.tcat,.tcat td{
  background:rgb(var(--panel2-rgb) / .8);border-bottom:1px solid var(--line);
  font-family:var(--caps);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);padding:9px 14px;
}
.trow1,.trow2,.trow_shaded,tbody td{
  padding:11px 14px;border-bottom:1px solid rgb(var(--line-rgb) / .6);
  font-size:.95rem;color:var(--text-dim);vertical-align:top;
}
.trow2{background:rgb(var(--shadow-rgb) / .18);}
.trow_shaded{background:rgb(var(--gold-rgb) / .09);}
tbody tr:last-child td{border-bottom:0;}
tbody tr:hover td{background:rgb(var(--panel2-rgb) / .5);}
.tfoot,.tfoot td{
  background:var(--bg-panel-2);border-top:1px solid var(--line);
  padding:11px 14px;font-size:.9rem;color:var(--text-faint);
}
.tborder td b,.tborder td strong{color:var(--text);}
.smalltext{font-size:.84rem;color:var(--text-faint);}
.largetext{font-family:var(--display);font-size:1.3rem;color:var(--text);}
/* Breite Tabellen dürfen nicht die Seite sprengen */
.tborder-scroll{overflow-x:auto;}

/* ---------- Formulare ---------- */
input[type=text],input[type=password],input[type=email],input[type=url],
input[type=number],input[type=search],input[type=date],input[type=time],
select,textarea,.textbox{
  background:rgb(var(--shadow-rgb) / .45);
  border:1px solid var(--line);
  color:var(--text);
  font-family:var(--serif);font-size:1rem;
  padding:9px 12px;
  max-width:100%;
  transition:border-color .16s ease,background .16s ease;
}
textarea{line-height:1.6;min-height:180px;resize:vertical;}
input:focus,select:focus,textarea:focus,.textbox:focus{
  outline:none;border-color:var(--gold);background:rgb(var(--shadow-rgb) / .6);
}
input::placeholder,textarea::placeholder{color:var(--text-faint);font-style:italic;}
select{cursor:pointer;}
select option{background:var(--bg-panel);color:var(--text);}
label{font-size:.95rem;color:var(--text-dim);}
fieldset{
  border:1px solid var(--line);background:rgb(var(--shadow-rgb) / .2);
  padding:16px 18px;margin:0 0 16px;
}
legend{
  font-family:var(--caps);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-soft);padding:0 9px;
}
input[type=checkbox],input[type=radio]{accent-color:var(--gold);width:15px;height:15px;}

/* Schaltflächen */
input[type=submit],input[type=button],input[type=reset],button.mybb,.button{
  font-family:var(--caps);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  padding:10px 22px;cursor:pointer;
  border:1px solid var(--gold-deep);color:var(--gold-light);
  background:linear-gradient(180deg,rgb(var(--gold-rgb) / .18),rgb(var(--gold-rgb) / .06));
  transition:background .18s ease,border-color .18s ease;
}
input[type=submit]:hover,input[type=button]:hover,input[type=reset]:hover,.button:hover{
  background:linear-gradient(180deg,rgb(var(--gold-rgb) / .34),rgb(var(--gold-rgb) / .14));
  border-color:var(--gold);
}

/* ---------- Blätterung ---------- */
.pagination{
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;
  margin:14px 0;font-size:.9rem;
}
.pagination a,.pagination span,.pagination_current{
  min-width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 9px;
  border:1px solid var(--line);color:var(--text-dim);
  font-family:var(--caps);font-size:.78rem;font-variant-numeric:tabular-nums;
}
.pagination a:hover{border-color:var(--gold-deep);color:var(--gold-light);}
.pagination_current{
  border-color:var(--gold-deep);color:var(--gold-light);
  background:rgb(var(--gold-rgb) / .14);
}
.pagination .pages{border:0;color:var(--text-faint);font-family:var(--caps);font-size:.7rem;letter-spacing:.14em;}

/* ---------- Meldungen ---------- */
.error,.inline_error,.validation_error,
.success_message,.inline_message,.validation_success,
.notice_box{
  border:1px solid var(--line);border-left-width:3px;
  background:rgb(var(--shadow-rgb) / .35);
  padding:13px 17px;margin:0 0 16px;font-size:.95rem;color:var(--text-dim);
}
.error,.inline_error,.validation_error{border-left-color:var(--u-admin);}
.success_message,.inline_message,.validation_success{border-left-color:var(--online);}
.notice_box{border-left-color:var(--gold);}
.error ul,.inline_error ul{margin:8px 0 0;padding-left:20px;}

/* ---------- Klappmenüs und Aufklapper ---------- */
.popup_menu{
  border:1px solid var(--gold-deep);background:var(--bg-panel);
  box-shadow:0 8px 26px rgb(var(--shadow-rgb) / .7);
  z-index:60;
}
.popup_menu .popup_item{
  display:block;padding:9px 15px;
  border-bottom:1px solid rgb(var(--line-rgb) / .6);
  font-size:.92rem;color:var(--text-dim);white-space:nowrap;
}
.popup_menu .popup_item:last-child{border-bottom:0;}
.popup_menu .popup_item:hover{background:rgb(var(--gold-rgb) / .16);color:var(--gold-light);}
.expcolimage{float:right;}
.expcolimage img{width:15px;height:15px;opacity:.7;}

/* ---------- Beitragstext ---------- */
.post_body img,.signature img{max-width:100%;height:auto;}
.codeblock,.codeblock .title,pre{
  background:rgb(var(--shadow-rgb) / .55);border:1px solid var(--line);
  font-family:Consolas,'Courier New',monospace;font-size:.88rem;
  padding:12px 15px;overflow-x:auto;color:var(--text-dim);
}
.codeblock .title{
  border:0;border-bottom:1px solid var(--line);
  font-family:var(--caps);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);padding:8px 15px;
}
hr{border:0;border-top:1px solid var(--line);margin:18px 0;}

/* ---------- Kalender ---------- */
.calendar td{text-align:center;padding:9px 5px;font-variant-numeric:tabular-nums;}
.calendar .today{background:rgb(var(--gold-rgb) / .18);color:var(--gold-light);}

/* ---------- Nur für Bildschirmleser ---------- */
.hidden,.hiddenrow{display:none;}
.clear{clear:both;}
.float_left{float:left;}
.float_right{float:right;}

/* ---- Helle Tabellenzeilen aus MyBBs Grundgeruest ----
   global.css faerbt trow1/trow2 hell. Das faellt ueberall dort auf, wo
   MyBB seine Standardausgabe verwendet: Formulare, Hinweiszeilen,
   Plugin-Ausgaben. Hier bekommen sie den dunklen Grund des Designs. */
.trow1,
.trow2,
.trow_shaded,
td.trow1,
td.trow2{
  background:rgb(var(--shadow-rgb) / .28);
  color:var(--text-dim);
  border-color:rgb(var(--line-rgb) / .6);
}
.trow2,
td.trow2{background:rgb(var(--panel2-rgb) / .45);}
.trow1 strong,
.trow2 strong,
.trow1 b,
.trow2 b{color:var(--text);}
.tcat,
td.tcat,
.thead,
td.thead{
  background:var(--bg-panel-2);
  color:var(--gold-soft);
  border-color:var(--line);
}

/* ---- Szenentracker (misc.php, Inplaytracker) --------------------------
   Der Tracker legt jede Szene in eine eigene kleine Tabelle innerhalb
   von .threadlist. Vor dem Titel steht ein <strong> fuer das Praefix,
   das meist leer bleibt und samt Zeilenumbruch die Zeile aufblaeht. */
.threadlist strong:empty{display:none;}
.threadlist strong:empty + br{display:none;}
.threadlist table{width:100%;border:0;background:none;margin:0;}
.threadlist td{
  border:0;background:none;padding:9px 14px;vertical-align:middle;
}
.threadlist td:first-child a{
  font-family:var(--serif);font-size:1.02rem;color:var(--text);
}
.threadlist td:first-child a:hover{color:var(--gold-light);}
.threadlist td + td{text-align:right;font-size:.88rem;color:var(--text-faint);}
.threadlist > table:not(:last-child){
  border-bottom:1px dashed rgb(var(--line-rgb) / .45);
}

/* Der Kopf jeder Charaktergruppe */
.shell .tcat,
.shell .thead{
  font-family:var(--caps);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);padding:10px 14px;
}

/* Datum und letzter Schreiber stehen im Quelltext untereinander; als
   Reihe nebeneinander bleibt die Szenenzeile flach. */
.threadlist td{padding:7px 14px;}
.threadlist td + td{
  display:flex;justify-content:flex-end;align-items:baseline;gap:16px;white-space:nowrap;
}
.threadlist td + td br{display:none;}

/* ---- MyBBs helle Grundflaechen durchgehend eindunkeln ------------------
   global.css faerbt eine ganze Reihe von Klassen hell ein. Solange eine
   Seite keine eigenen Regeln dieses Designs hat, schlagen sie durch --
   so entstanden die weissen Balken auf "Wer ist wer". Darum hier alle
   auf einmal, statt sie einzeln nachzuziehen. */
.trow_sep,
.tfoot,
.bottommenu{
  background:linear-gradient(180deg,var(--bg-panel-2),rgb(var(--panel-rgb) / .6));
  color:var(--gold-soft);
  font-family:var(--caps);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding:9px 14px;
}
.trow_sep a,
.tfoot a,
.bottommenu a{color:var(--gold-light);}

/* Hervorgehobene Zeilen behalten ihre Bedeutung, nur im dunklen Ton */
.trow_shaded,
.post.unapproved_post{background:rgb(120 40 48 / .28);}
.trow_deleted,
.post.deleted_post{background:rgb(78 60 120 / .28);}
.trow_selected,
tr.trow_selected td{background:rgb(var(--gold-rgb) / .16);}

/* Eingabefelder ausserhalb der Schreibmaske */
input.textbox,
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=number],
textarea,
select{
  background:rgb(var(--shadow-rgb) / .5);
  border:1px solid var(--line);
  color:var(--text);
  font-family:var(--serif);
}
/* Nur MyBBs eigene Schaltflaechen. Ein blankes "button" wuerde auch die
   Symbolknoepfe dieses Designs treffen - deren Symbole schrumpfen dann
   auf die hier gesetzte Schriftgroesse. */
input.button,
input[type=submit],
input[type=button],
input[type=reset]{
  background:rgb(var(--shadow-rgb) / .45);
  border:1px solid var(--line);
  color:var(--text-dim);
  font-family:var(--caps);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 18px;cursor:pointer;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
input.button:hover,
input[type=submit]:hover,
input[type=button]:hover{
  border-color:var(--gold-deep);color:var(--gold-light);background:rgb(var(--gold-rgb) / .12);
}

/* Reste des MyBB-Grundgeruests */
#panel .lower,
#footer .upper,
#logo{background:none;}

/* ---- Szenentracker: Aufbau wie im bestehenden Board -------------------
   Der Name des Charakters gross ueber seinen Szenen, rechts daneben der
   Zaehler, darunter je Szene Titel links, Datum und letzter Schreiber
   rechts. Das Plugin liefert je nach Fassung .threadlist (aeltere) oder
   .sbox/.sthreadlist (neuere) - beide werden gleich eingekleidet. */
.sbox{
  border:1px solid var(--line);background:var(--bg-panel);
  padding:16px 18px;margin:0;
  max-height:340px;overflow-y:auto;
}
.sthreadlist{width:100%;border:0;background:none;margin:0;}
.sthreadlist td{border:0;background:none;padding:7px 0;vertical-align:top;}
.sthreadlist .threadlink{
  font-family:var(--caps);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text);
}
.sthreadlist .threadauthor{
  font-family:var(--caps);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);text-align:right;
}
.sthreadlist tr + tr td{border-top:1px dashed rgb(var(--line-rgb) / .4);}

/* Der Name des Charakters ueber seiner Szenenliste */
.shell .tcat:first-child,
.sbox + .tcat,
.threadlist ~ .tcat{letter-spacing:.16em;}



/* ---- Szenentracker: Charaktere untereinander --------------------------
   Eine Zelle traegt alles: je Charakter ein .thead mit dem Namen (das
   Plugin setzt ihn in ein Gruppen-Tag, daher kommt die Farbe von selbst),
   darunter ein .tcat mit dem Zaehler und dann je Szene eine .threadlist.
   Angesprochen ueber die Zelle, damit die allgemeinen Klassen .thead und
   .tcat auf anderen Seiten unberuehrt bleiben. */
td:has(> .szenenbox){padding:0 18px 18px;}
td:has(> .szenenbox) > .thead{
  background:none;border:0;border-top:1px solid rgb(var(--line-rgb) / .6);
  margin:26px 0 0;padding:20px 2px 0;
}
td:has(> .szenenbox) > .thead:first-child{border-top:0;margin-top:0;padding-top:14px;}
td:has(> .szenenbox) > .thead a{
  font-family:var(--display);font-size:1.9rem;line-height:1.2;letter-spacing:.03em;
  text-transform:lowercase;
}
td:has(> .szenenbox) > .tcat{
  background:none;border:0;padding:2px 2px 12px;text-align:right;
  font-family:var(--caps);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);
}
td:has(> .szenenbox) .threadlist{
  border:0;margin:0 0 3px;background:rgb(var(--shadow-rgb) / .22);
}

/* ---- Wer ist wer: etwas grosszuegiger ---------------------------------- */
.weristwer_accounts{margin:0 0 18px;}
.weristwer_accounts img{width:112px;height:auto;}
.weristwer_accounts td{padding:11px 14px;font-size:.96rem;}
.weristwer_accounts .trow_sep{font-size:.78rem;}
.weristwer_zweit td{padding:9px 14px;}

/* Wer ist wer: die Spieler stehen nebeneinander - Name, darunter seine
   Charaktere, daneben der naechste. Das Plugin liefert alle Bloecke als
   Geschwister in einer Zelle; die Spalten macht erst das Design. */
.weristwer_container{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));
  gap:18px;align-items:start;
}
.weristwer_container > .weristwer_accounts{margin:0;}
.weristwer_container > .weristwer_accounts > table{width:100%;}

/* Die Szenen eines Charakters rollen gemeinsam, damit ein Spieler mit
   vielen beendeten Szenen die Seite nicht endlos lang macht. */
.szenenbox{max-height:250px;overflow-y:auto;padding-right:6px;}
.szenenbox::-webkit-scrollbar{width:8px;}
.szenenbox::-webkit-scrollbar-track{background:rgb(var(--shadow-rgb) / .3);}
.szenenbox::-webkit-scrollbar-thumb{background:var(--gold-deep);}

/* Ueberschriften in Inhaltstabellen - etwa die Abschnitte der
   Listenuebersicht - tragen den Goldton des Designs. */
.tborder td h2,
.tborder td h3{
  font-family:var(--display);font-size:1.35rem;letter-spacing:.03em;line-height:1.25;
  color:var(--gold-light);margin:20px 0 10px;
}
.tborder td h2:first-child,
.tborder td h3:first-child{margin-top:0;}

/* Alle Spielerkarten gleich hoch: der Kopf mit Hauptcharakter steht fest,
   die Zweitcharaktere darunter rollen. Sonst reissen Spieler mit vielen
   Charakteren das Raster auseinander (die hoechste Karte war 1599px).
   Die Zelle selbst bleibt eine Tabellenzelle - macht man sie zum Block,
   verliert sie ihre Breite. Gerollt wird in einem eigenen Behaelter,
   den ein kleines Skript im Fussbereich einzieht. */
.weristwer_container{align-items:start;}
/* Bis das Skript den Rollbehaelter eingezogen hat, steht der volle
   Inhalt in der Karte; ohne diesen Riegel blitzt beim Laden ein Streifen
   des naechsten Bildes unter der Karte hervor. */
.weristwer_container > .weristwer_accounts{height:520px;overflow:hidden;}
.weristwer_container > .weristwer_accounts > table{height:100%;}
.zweitbox{max-height:262px;overflow-y:auto;padding-right:6px;}
.zweitbox::-webkit-scrollbar{width:8px;}
.zweitbox::-webkit-scrollbar-track{background:rgb(var(--shadow-rgb) / .3);}
.zweitbox::-webkit-scrollbar-thumb{background:var(--gold-deep);}


/* ---- Szenentracker: Feinheiten ----------------------------------------
   MyBBs global.css faerbt Links in .thead beim Ueberfahren weiss und
   unterstreicht sie - beim Charakternamen, der seine Gruppenfarbe aus
   einem Farbverlauf bezieht, wirkt das wie ein Fehler. */
td:has(> .szenenbox) > .thead a:hover,
td:has(> .szenenbox) > .thead a:active,
td:has(> .szenenbox) > .thead a:focus{
  color:inherit;text-decoration:none;
}

/* Der Zaehler gehoert zum Namen und traegt daher denselben Goldton,
   dicht darunter statt mit Abstand. */
td:has(> .szenenbox) > .tcat{
  color:var(--gold-soft);padding:0 2px 10px;
  /* Der Zaehler steht rechts auf der Hoehe des Namens statt in einer
     eigenen Zeile darunter - das war der leere Streifen. */
  margin-top:-34px;
}

/* "Du bist dran!" steht als gefuelltes <strong> vor dem Szenentitel -
   im Normalfall ist dieses Element leer und ausgeblendet. */
.szenenbox strong:not(:empty){
  display:inline-block;margin:0 0 3px;
  font-family:var(--caps);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:400;color:#d1705c;
}
.szenenbox strong:not(:empty) + br{display:none;}

/* Zweitcharaktere kompakter, damit mehrere zugleich sichtbar sind -
   sonst fuellt schon der erste den ganzen Rollbereich. */
.weristwer_zweit img{width:64px !important;height:auto;}
.weristwer_zweit td{padding:7px 10px;font-size:.9rem;}
.weristwer_zweit table{width:100%;}

/* Blaetterleiste und die Auswahlfelder der Erweiterungen waren die
   letzten hellen Flaechen im ganzen Board. */
.pagination a,
.pagination_current,
.pagination_next,
.pagination_previous,
.pagination_last,
.pagination_first{
  background:rgb(var(--shadow-rgb) / .45) !important;
  border:1px solid var(--line) !important;
  color:var(--text-dim) !important;
  font-family:var(--caps);font-size:.68rem;letter-spacing:.1em;
  padding:5px 10px;
}
.pagination_current{
  border-color:var(--gold-deep) !important;color:var(--gold-light) !important;
  background:rgb(var(--gold-rgb) / .16) !important;
}
.pagination a:hover{border-color:var(--gold-deep) !important;color:var(--gold-light) !important;}
.select2-choice,
.select2-container .select2-choice,
.select2-drop,
.select2-search input{
  background:rgb(var(--shadow-rgb) / .5) !important;
  border-color:var(--line) !important;
  color:var(--text) !important;
}
.select2-results{background:var(--bg-panel-2) !important;color:var(--text-dim) !important;}
.select2-results .select2-highlighted{background:rgb(var(--gold-rgb) / .2) !important;color:var(--gold-light) !important;}

/* ---- Smilie-Spalte in der Nachrichtenmaske ----------------------------
   Die Smilie-Tabelle ist breiter als ihre Zelle und lief bisher rechts
   ins Schreibfeld hinein. Sie bekommt einen eigenen Rahmen und rollt
   darin, wie in der Schreibmaske der Beitraege. */
td:has(> div img[src*="smilies/"]){width:210px;vertical-align:top;}
td:has(> div img[src*="smilies/"]) > div{
  max-width:186px;max-height:300px;overflow:auto;
  border:1px solid var(--line);background:rgb(var(--shadow-rgb) / .3);
  padding:8px;
}
td:has(> div img[src*="smilies/"]) > div table{width:auto;background:none;border:0;}
td:has(> div img[src*="smilies/"]) > div td{padding:2px;border:0;background:none;}
td:has(> div img[src*="smilies/"]) > strong{
  display:block;margin-bottom:8px;
  font-family:var(--caps);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-soft);
}

/* select2 in der Mehrfachauswahl (Mitspieler, Paerchen) - die Liste der
   gewaehlten Eintraege war noch hell. */
.select2-container-multi .select2-choices,
ul.select2-choices,
.select2-choices li,
.select2-search-choice,
.select2-search-field input{
  background:rgb(var(--shadow-rgb) / .5) !important;
  border-color:var(--line) !important;
  color:var(--text) !important;
}
.select2-search-choice{
  border:1px solid var(--gold-deep) !important;
  background:rgb(var(--gold-rgb) / .14) !important;
  color:var(--gold-light) !important;
}
.select2-choices li.select2-search-field{background:none !important;border:0 !important;}

/* ===================================================================
   Foren-Statistik — die Erweiterung liefert nur nackte Bausteine
   (.mb-grid, .d-flex, .p-4, .statsNumber, .statsDesc); hier bekommen
   sie die Form des Designs.
   =================================================================== */
.mb-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;margin:0 0 22px;
}
.mb-grid > *,
.mx-auto.d-flex{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;margin:0;
}
.p-4.text-center{
  border:1px solid var(--line);background:var(--bg-panel);
  padding:20px 16px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.statsNumber{
  font-family:var(--display);font-size:2.1rem;line-height:1.1;font-weight:600;
  font-variant-numeric:tabular-nums;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.statsDesc{
  font-family:var(--caps);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);line-height:1.4;
}
.d-flex{display:flex;flex-wrap:wrap;gap:14px;}
.mx-auto{margin-left:auto;margin-right:auto;}
.text-center{text-align:center;}

/* Listen ohne eigene Rollbox: Zellen, die eine Reihe von Eintraegen als
   einzelne <div> enthalten, bekommen dieselbe Hoehe und rollen darin -
   sonst wird ein Abschnitt mit vielen Namen viel laenger als die anderen. */
/* Eine Tabellenzelle laesst sich nicht in der Hoehe begrenzen - dafuer
   zieht ein Skript im Fussbereich einen Behaelter ein. */
.listenbox{height:220px;overflow-y:auto;padding-right:6px;}
.listenbox::-webkit-scrollbar{width:8px;}
.listenbox::-webkit-scrollbar-track{background:rgb(var(--shadow-rgb) / .3);}
.listenbox::-webkit-scrollbar-thumb{background:var(--gold-deep);}
.list_box,
.list_box1{
  scrollbar-width:thin;
}
.list_box::-webkit-scrollbar,
.list_box1::-webkit-scrollbar,
td:has(> div + div + div + div + div)::-webkit-scrollbar{width:8px;}
.list_box::-webkit-scrollbar-track,
.list_box1::-webkit-scrollbar-track,
td:has(> div + div + div + div + div)::-webkit-scrollbar-track{background:rgb(var(--shadow-rgb) / .3);}
.list_box::-webkit-scrollbar-thumb,
.list_box1::-webkit-scrollbar-thumb,
td:has(> div + div + div + div + div)::-webkit-scrollbar-thumb{background:var(--gold-deep);}