/*
 * newLook (Konzept 0210) - Restyling in Richtung tabler.io auf Bootstrap 3 / INSPINIA
 *
 * Wird NACH bootstrap, style.css (INSPINIA) und mystyle.css geladen und gewinnt
 * daher bei gleicher Spezifitaet. Kein Klassenname wird umbenannt: .ibox bleibt
 * .ibox und sieht nur aus wie eine tabler-Karte. Deshalb muss kein Template,
 * kein JS-Modul und keine alte Ansicht angefasst werden.
 *
 * Regeln:
 *   - Farben, Schrift, Radien, Abstaende nur ueber Tokens (tokens.css).
 *   - !important nur dort, wo INSPINIA selbst welches setzt. Sonst nie.
 *   - Spezifitaet spiegelt den INSPINIA-Selektor, den sie ueberschreibt.
 */


/* =====================================================================================
   1. Grundton: Seite, Schrift
   ===================================================================================== */

html,
body {
    font-family: var(--nl-font-body);
    font-size: var(--nl-font-size);
    line-height: var(--nl-line-height);
    color: var(--nl-text);
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--nl-bg-page);
}

.gray-bg,
.bg-muted {
    background-color: var(--nl-bg-page);
}

.white-bg {
    background-color: var(--nl-bg-card);
}

/* Seitengeruest als Flex-Spalte: der Fussbereich steht bei kurzen Seiten unten
   am Fenster und bei langen nach dem Inhalt - nie darueber. INSPINIA legt ihn
   absolut auf bottom:0 des #page-wrapper und reserviert dafuer 40px Innenabstand,
   den nur die neuen Seiten (.wrapper-content) mitbringen; die alten Ansichten
   (Benotung, Abgaben) laufen darunter und sind unten nicht mehr erreichbar. */
body.top-navigation > .container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.top-navigation #wrapper {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

#page-wrapper {
    padding: 0 var(--nl-space-4);
    min-height: 0;   /* INSPINIA: 2002px ab 768px - der Sidebar-Layout-Behelf, hier ohne Sinn */
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* Die alten Ansichten haengen direkt in #myContent - unten etwas Luft, sonst
   klebt die letzte Karte am Fussbereich. */
#myContent {
    padding-bottom: var(--nl-space-5);
}

.wrapper-content {
    padding: var(--nl-space-4) 0 var(--nl-space-6);
}

/* Die neuen Seiten setzen padding inline auf 8px - der Wrapper darf nicht doppelt polstern. */
.wrapper.wrapper-content.m-t-sm {
    margin-top: var(--nl-space-3);
}

p {
    line-height: 1.6;
    margin-bottom: 0.9em;
}

li {
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.btn,
.table > thead > tr > th {
    font-family: var(--nl-font-heading);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--nl-text-strong);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-top: 0;
}

h1 { font-size: 26px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 13px; }

/* Links: dunkle Schema-Variante statt des grellen Primaertons - gut lesbar
   auf hellen Flaechen, aber je Farbschema deutlich vom Grautext unterscheidbar.
   Das Standard-Schema (gruen) setzt --nl-link noch eine Stufe dunkler. */
a {
    color: var(--nl-link, var(--nl-primary-text));
}

a:hover,
a:focus {
    color: var(--nl-link, var(--nl-primary-text));
    text-decoration: underline;
}

small,
.small {
    font-size: var(--nl-font-size-xs);
}

.text-muted {
    color: var(--nl-text-muted);
}

.text-success { color: var(--nl-success-text); }
.text-warning { color: var(--nl-warning-text); }
.text-danger  { color: var(--nl-danger-text); }
.text-info    { color: var(--nl-info-text); }

code {
    font-family: var(--nl-font-mono);
    font-size: 0.92em;
    color: var(--nl-text-strong);
    background-color: var(--nl-bg-subtle);
    border: 1px solid var(--nl-border);
    border-radius: var(--nl-radius-sm);
    padding: 1px 6px;
}

hr {
    border-top: 1px solid var(--nl-border);
    margin: var(--nl-space-5) 0;
}


/* =====================================================================================
   2. Karten: ibox, panel, well
   ===================================================================================== */

.ibox {
    margin-bottom: var(--nl-space-5);
    background-color: var(--nl-bg-card);
    border: 1px solid var(--nl-border);
    border-radius: var(--nl-radius);
    box-shadow: var(--nl-shadow-card);
    /* KEIN overflow:hidden - das wuerde Aufklappmenues abschneiden, die aus der
       Karte hinausragen (Zahnrad in der Abgabenuebersicht). Der Radius wird
       stattdessen dem ersten und letzten Kind mitgegeben. */
}

.ibox > :first-child {
    border-top-left-radius: var(--nl-radius);
    border-top-right-radius: var(--nl-radius);
}

.ibox > :last-child {
    border-bottom-left-radius: var(--nl-radius);
    border-bottom-right-radius: var(--nl-radius);
}

/* INSPINIA setzt oben eine 2-px-Farbkante - die ist der 2016-Eindruck. */
.ibox-title {
    background-color: var(--nl-bg-card);
    border: 0;
    border-bottom: 1px solid var(--nl-border);
    padding: var(--nl-space-4) var(--nl-space-5);
    min-height: 0;
    /* INSPINIA floatet das h5 (und .ibox-tools). flow-root schliesst die Floats
       ein, damit der Kopf seine Hoehe behaelt und die untere Linie unter der
       Schrift bleibt - ohne overflow:hidden, das Aufklappmenues abschneiden wuerde. */
    display: flow-root;
}

/* OHMS Schnuppertage-Manager: der Kopf ist ein Flex-Container (Chevron links
   vom "KW ..."-Titel, Werkzeuge rechts) - flow-root von .ibox-title wuerde das
   auf Blocksatz zurueckwerfen und den Chevron in eine eigene Zeile schieben. */
.ibox-title.openday-ibox-title {
    display: flex;
    align-items: center;
}

/* Alte Ansichten: h5 gefloatet und mit unterem Rand versehen - beides weg */
.ibox-title h5 {
    float: none;
    display: block;
    margin: 0;
}

/* Werkzeuge rechts im Kopf (Zahnrad, Knoepfe) sauber auf Hoehe des Titels */
.ibox-title .ibox-tools,
.ibox-title .pull-right {
    margin-top: 0;
}

/* Neue Seiten: h3 neben dem Zurueck-Knopf - auf dessen Hoehe (34px) */
.ibox-title h3,
.ibox-title h4 {
    margin: 0;
    line-height: 34px;
}

/* Alte Karten: h5 allein im Kopf - normale Zeilenhoehe, sonst wird der Kopf zu hoch */
.ibox-title h5 {
    line-height: 1.4;
}

.ibox-title h3 {
    font-size: 18px;
}

.ibox-title h5 {
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
}

.ibox-content {
    background-color: var(--nl-bg-card);
    border: 0;
    padding: var(--nl-space-5);
}

.ibox-footer {
    border-top: 1px solid var(--nl-border);
    background-color: var(--nl-bg-subtle);
    padding: var(--nl-space-3) var(--nl-space-5);
}

/* Bootstrap-3-Panels: dieselbe Kartensprache */
.panel {
    background-color: var(--nl-bg-card);
    border: 1px solid var(--nl-border);
    border-radius: var(--nl-radius);
    box-shadow: var(--nl-shadow-card);
    margin-bottom: var(--nl-space-4);
    /* kein overflow:hidden - siehe .ibox */
}

.panel > :first-child {
    border-top-left-radius: var(--nl-radius);
    border-top-right-radius: var(--nl-radius);
}

.panel > :last-child {
    border-bottom-left-radius: var(--nl-radius);
    border-bottom-right-radius: var(--nl-radius);
}

.panel > .panel-heading {
    background-color: var(--nl-bg-subtle);
    border-bottom: 1px solid var(--nl-border);
    color: var(--nl-text-strong);
    font-weight: 600;
    padding: var(--nl-space-3) var(--nl-space-4);
}

.panel > .panel-heading h4 {
    font-size: 15px;
    line-height: 1.4;
}

.panel-body {
    padding: var(--nl-space-4);
}

.panel-footer {
    background-color: var(--nl-bg-subtle);
    border-top: 1px solid var(--nl-border);
    padding: var(--nl-space-3) var(--nl-space-4);
}

/* Farbige Panels: tabler-Art mit Statusleiste oben statt gefuelltem Kopf */
.panel-primary,
.panel-success,
.panel-info,
.panel-warning,
.panel-danger {
    border-color: var(--nl-border);
    border-top-width: 3px;
}

.panel-primary { border-top-color: var(--nl-primary); }
.panel-success { border-top-color: var(--nl-success); }
.panel-info    { border-top-color: var(--nl-info); }
.panel-warning { border-top-color: var(--nl-warning); }
.panel-danger  { border-top-color: var(--nl-danger); }

.panel-primary > .panel-heading,
.panel-success > .panel-heading,
.panel-info > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger > .panel-heading {
    background-color: var(--nl-bg-subtle);
    border-color: var(--nl-border);
    color: var(--nl-text-strong);
}

.well {
    background-color: var(--nl-bg-subtle);
    border: 1px solid var(--nl-border);
    border-radius: var(--nl-radius);
    box-shadow: none;
    padding: var(--nl-space-4);
}

.well-sm {
    padding: var(--nl-space-2) var(--nl-space-3);
}


/* =====================================================================================
   3. Knoepfe
   ===================================================================================== */

.btn {
    font-family: var(--nl-font-body);
    font-size: var(--nl-font-size);
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--nl-radius-sm);
    padding: 7px 14px;
    border-width: 1px;
    box-shadow: none;
    transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
    outline: 0;
    box-shadow: var(--nl-shadow-focus);
}

.btn-sm,
.btn-group-sm > .btn {
    font-size: var(--nl-font-size-sm);
    padding: 5px 10px;
    border-radius: var(--nl-radius-sm);
}

.btn-xs,
.btn-group-xs > .btn {
    font-size: var(--nl-font-size-xs);
    padding: 2px 7px;
    border-radius: var(--nl-radius-sm);
}

.btn-lg,
.btn-group-lg > .btn {
    font-size: 16px;
    padding: 10px 20px;
    border-radius: var(--nl-radius);
}

/* Neutral: weiss mit Rahmen, nicht grau */
.btn-default,
.btn-white {
    color: var(--nl-text-strong);
    background: var(--nl-bg-card);
    border: 1px solid var(--nl-border-strong);
}

/* Icons in weissen Knoepfen in der Primaerfarbe - weisse Buttons mit grauem
   Icon wirkten deaktiviert, obwohl sie aktiv sind (z. B. Bearbeiten-Stift). */
.btn-default .fa, .btn-white .fa,
.btn-default .glyphicon, .btn-white .glyphicon {
    color: var(--nl-primary);
}

.btn-default.disabled .fa, .btn-default[disabled] .fa,
.btn-white.disabled .fa, .btn-white[disabled] .fa,
.btn-default.disabled .glyphicon, .btn-default[disabled] .glyphicon,
.btn-white.disabled .glyphicon, .btn-white[disabled] .glyphicon {
    color: inherit;
}

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active,
.open .dropdown-toggle.btn-default,
.btn-default:active:focus, .btn-default:active:hover, .btn-default.active:hover, .btn-default.active:focus,
.btn-white:hover, .btn-white:focus, .btn-white:active, .btn-white.active,
.open .dropdown-toggle.btn-white,
.btn-white:active:focus, .btn-white:active:hover, .btn-white.active:hover, .btn-white.active:focus {
    color: var(--nl-text-strong);
    background: var(--nl-bg-hover);
    border-color: var(--nl-border-strong);
}

.btn-primary {
    background-color: var(--nl-primary);
    border-color: var(--nl-primary);
    color: #fff;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.open .dropdown-toggle.btn-primary,
.btn-primary:active:focus, .btn-primary:active:hover, .btn-primary.active:hover, .btn-primary.active:focus {
    background-color: var(--nl-primary-hover);
    border-color: var(--nl-primary-hover);
    color: #fff;
}

.btn-success {
    background-color: var(--nl-success);
    border-color: var(--nl-success);
    color: #fff;
}

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active,
.open .dropdown-toggle.btn-success,
.btn-success:active:focus, .btn-success:active:hover, .btn-success.active:hover, .btn-success.active:focus {
    background-color: var(--nl-success-hover);
    border-color: var(--nl-success-hover);
    color: #fff;
}

.btn-danger {
    background-color: var(--nl-danger);
    border-color: var(--nl-danger);
    color: #fff;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active,
.open .dropdown-toggle.btn-danger,
.btn-danger:active:focus, .btn-danger:active:hover, .btn-danger.active:hover, .btn-danger.active:focus {
    background-color: var(--nl-danger-hover);
    border-color: var(--nl-danger-hover);
    color: #fff;
}

.btn-warning {
    background-color: var(--nl-warning);
    border-color: var(--nl-warning);
    color: #fff;
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active,
.open .dropdown-toggle.btn-warning {
    background-color: var(--nl-warning-hover);
    border-color: var(--nl-warning-hover);
    color: #fff;
}

.btn-info {
    background-color: var(--nl-info);
    border-color: var(--nl-info);
    color: #fff;
}

.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active,
.open .dropdown-toggle.btn-info {
    background-color: var(--nl-info-hover);
    border-color: var(--nl-info-hover);
    color: #fff;
}

/* Umrissknoepfe (INSPINIA .btn-outline): weiss mit farbigem Rand und Text,
   beim Ueberfahren gefuellt. Zwei Klassen, damit sie ueber .btn-primary gewinnen -
   sonst faerbt .btn-primary den Hintergrund und der Text verschwindet darin.
   Verwendet in Schuelerzuweisung, Gruppen und Teams (8 Stellen). */
.btn-primary.btn-outline, .btn-success.btn-outline, .btn-info.btn-outline,
.btn-warning.btn-outline, .btn-danger.btn-outline {
    background-color: var(--nl-bg-card);   /* weiss, nicht transparent - auf grauem Seitengrund sonst grau */
}

.btn-primary.btn-outline { color: var(--nl-primary); border-color: var(--nl-primary); }
.btn-success.btn-outline { color: var(--nl-success); border-color: var(--nl-success); }
.btn-info.btn-outline    { color: var(--nl-info);    border-color: var(--nl-info); }
.btn-warning.btn-outline { color: var(--nl-warning-text); border-color: var(--nl-warning); }
.btn-danger.btn-outline  { color: var(--nl-danger);  border-color: var(--nl-danger); }

.btn-primary.btn-outline:hover, .btn-primary.btn-outline:focus { background-color: var(--nl-primary); color: #fff; }
.btn-success.btn-outline:hover, .btn-success.btn-outline:focus { background-color: var(--nl-success); color: #fff; }
.btn-info.btn-outline:hover,    .btn-info.btn-outline:focus    { background-color: var(--nl-info);    color: #fff; }
.btn-warning.btn-outline:hover, .btn-warning.btn-outline:focus { background-color: var(--nl-warning); color: #fff; }
.btn-danger.btn-outline:hover,  .btn-danger.btn-outline:focus  { background-color: var(--nl-danger);  color: #fff; }

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    opacity: .5;
    box-shadow: none;
}

/* INSPINIA gibt gesperrten Farbknoepfen eigene, hellere Farbwerte
   (.btn-primary.disabled { background: #1dc5a3 } usw.) - zwei Klassen, damit
   staerker als .btn-primary. Hier mit derselben Staerke auf die Tokens gezogen;
   die Abschwaechung kommt allein aus der Deckkraft oben. */
.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover, .btn-primary[disabled]:hover,
.btn-primary.disabled:focus, .btn-primary[disabled]:focus {
    background-color: var(--nl-primary);
    border-color: var(--nl-primary);
}

.btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success,
.btn-success.disabled:hover, .btn-success[disabled]:hover {
    background-color: var(--nl-success);
    border-color: var(--nl-success);
}

.btn-danger.disabled, .btn-danger[disabled], fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover, .btn-danger[disabled]:hover {
    background-color: var(--nl-danger);
    border-color: var(--nl-danger);
}

.btn-warning.disabled, .btn-warning[disabled], fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover, .btn-warning[disabled]:hover {
    background-color: var(--nl-warning);
    border-color: var(--nl-warning);
}

.btn-info.disabled, .btn-info[disabled], fieldset[disabled] .btn-info,
.btn-info.disabled:hover, .btn-info[disabled]:hover {
    background-color: var(--nl-info);
    border-color: var(--nl-info);
}

/* Gesperrte Umrissknoepfe bleiben weiss - sonst faerben die Regeln darueber den
   Hintergrund und der gleichfarbige Text verschwindet darin (Gruppenzuordnung
   ohne angelegte Gruppe). Drei Klassen, damit staerker als .btn-x[disabled]. */
.btn.btn-primary.btn-outline[disabled], .btn.btn-primary.btn-outline.disabled,
.btn.btn-primary.btn-outline[disabled]:hover, .btn.btn-primary.btn-outline.disabled:hover,
.btn.btn-primary.btn-outline[disabled]:focus, .btn.btn-primary.btn-outline.disabled:focus {
    background-color: var(--nl-bg-card);
    color: var(--nl-primary);
    border-color: var(--nl-primary);
}

.btn.btn-success.btn-outline[disabled], .btn.btn-success.btn-outline.disabled,
.btn.btn-success.btn-outline[disabled]:hover, .btn.btn-success.btn-outline.disabled:hover {
    background-color: var(--nl-bg-card);
    color: var(--nl-success);
    border-color: var(--nl-success);
}

.btn.btn-danger.btn-outline[disabled], .btn.btn-danger.btn-outline.disabled,
.btn.btn-danger.btn-outline[disabled]:hover, .btn.btn-danger.btn-outline.disabled:hover {
    background-color: var(--nl-bg-card);
    color: var(--nl-danger);
    border-color: var(--nl-danger);
}

.btn.btn-warning.btn-outline[disabled], .btn.btn-warning.btn-outline.disabled,
.btn.btn-warning.btn-outline[disabled]:hover, .btn.btn-warning.btn-outline.disabled:hover {
    background-color: var(--nl-bg-card);
    color: var(--nl-warning-text);
    border-color: var(--nl-warning);
}

.btn.btn-info.btn-outline[disabled], .btn.btn-info.btn-outline.disabled,
.btn.btn-info.btn-outline[disabled]:hover, .btn.btn-info.btn-outline.disabled:hover {
    background-color: var(--nl-bg-card);
    color: var(--nl-info);
    border-color: var(--nl-info);
}

.btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default,
.btn-white.disabled, .btn-white[disabled], fieldset[disabled] .btn-white,
.btn-default.disabled:hover, .btn-default[disabled]:hover,
.btn-white.disabled:hover, .btn-white[disabled]:hover {
    background: var(--nl-bg-card);
    border-color: var(--nl-border-strong);
    color: var(--nl-text-strong);
}

/* Knopfgruppen: Trennlinien statt Doppelrahmen */
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}

.btn-group > .btn + .btn {
    margin-left: -1px;
}

.btn .fa {
    margin-right: 2px;
}

.btn-block {
    text-align: center;
}


/* =====================================================================================
   4. Formulare
   ===================================================================================== */

.form-control {
    height: var(--nl-control-height);
    font-family: var(--nl-font-body);
    font-size: var(--nl-font-size);
    color: var(--nl-text-strong);
    background-color: var(--nl-bg-card);
    border: 1px solid var(--nl-border-strong);
    border-radius: var(--nl-radius-sm);
    box-shadow: none;
    padding: 6px 12px;
    transition: border-color .12s, box-shadow .12s;
}

.form-control:focus,
.has-error .form-control:focus,
.has-success .form-control:focus,
.has-warning .form-control:focus {
    border-color: var(--nl-primary);
    box-shadow: var(--nl-shadow-focus);
    outline: 0;
}

.form-control::placeholder {
    color: var(--nl-text-muted);
    opacity: 1;
}

.input-sm,
.form-control.input-sm,
.input-group-sm > .form-control {
    height: var(--nl-control-height-sm);
    font-size: var(--nl-font-size-sm);
    padding: 4px 10px;
}

textarea.form-control {
    height: auto;
    line-height: 1.5;
}

select.form-control {
    padding-right: 28px;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: var(--nl-bg-subtle);
    color: var(--nl-text-muted);
}

.input-group-addon {
    background-color: var(--nl-bg-subtle);
    border: 1px solid var(--nl-border-strong);
    border-radius: var(--nl-radius-sm);
    color: var(--nl-text-muted);
    font-size: var(--nl-font-size-sm);
}

/* Eingabegruppen: Addon und Knoepfe exakt auf Feldhoehe - der .btn-Innenabstand
   (7px) ergab 37px und liess Kalender-Addon/Buttons 1-2px ueberstehen. */
.input-group .form-control,
.input-group-addon,
.input-group-btn .btn {
    height: var(--nl-control-height);
}

.input-group-btn .btn {
    padding-top: 0;
    padding-bottom: 0;
}

.input-group .form-control:first-child,
.input-group-addon:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .form-control:last-child,
.input-group-addon:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

label {
    color: var(--nl-text-strong);
    font-weight: 500;
    font-size: var(--nl-font-size-sm);
    margin-bottom: var(--nl-space-1);
}

.help-block {
    color: var(--nl-text-muted);
    margin-top: var(--nl-space-1);
    margin-bottom: 0;
}

.has-error .form-control {
    border-color: var(--nl-danger);
    box-shadow: none;
}

.has-error .control-label,
.has-error .help-block,
.has-error label {
    color: var(--nl-danger-text);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--nl-primary);
    width: 15px;
    height: 15px;
    vertical-align: -2px;
    margin-right: 4px;
}

.form-group {
    margin-bottom: var(--nl-space-4);
}


/* =====================================================================================
   5. Tabellen
   ===================================================================================== */

.table {
    margin-bottom: var(--nl-space-2);
    color: var(--nl-text);
}

.table > thead > tr > th {
    font-family: var(--nl-font-body);
    font-size: var(--nl-font-size-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nl-text-muted);
    background-color: var(--nl-bg-subtle);
    border-bottom: 1px solid var(--nl-border);
    border-top: 0;
    padding: 9px 12px;
    vertical-align: middle;
    white-space: nowrap;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td {
    border-top: 1px solid var(--nl-border);
    padding: 9px 12px;
    vertical-align: middle;
}

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th {
    padding: 6px 10px;
}

.table-striped > tbody > tr:nth-of-type(odd),
.table-stripped > tbody > tr:nth-of-type(odd) {
    background-color: transparent;
}

.table-striped > tbody > tr:nth-of-type(even),
.table-stripped > tbody > tr:nth-of-type(even) {
    background-color: var(--nl-bg-subtle);
}

.table-hover > tbody > tr:hover {
    background-color: var(--nl-bg-hover);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: var(--nl-border);
}

.table tbody tr.text-muted td {
    color: var(--nl-text-muted);
}

.table .badge {
    vertical-align: baseline;
}

.table-responsive {
    border: 0;
}


/* =====================================================================================
   6. Badges und Labels - pillenfoermig, weich (tabler "soft")
   ===================================================================================== */

.label,
.badge {
    display: inline-block;
    font-family: var(--nl-font-body);
    font-size: var(--nl-font-size-xs);
    font-weight: 600;
    line-height: 1.2;
    padding: 3px 9px;
    border-radius: var(--nl-radius-pill);
    text-shadow: none;
    vertical-align: baseline;
    white-space: nowrap;
}

.label,
.badge,
.label-default,
.badge-default {
    background-color: var(--nl-neutral-soft);
    color: var(--nl-neutral-text);
}

/* Kraeftige Volltoene mit weissem Text statt tabler-"soft" - die hellen
   Pastellhintergruende waren zu blass (Wunsch: Zaehler-Badges gut sichtbar). */
.label-primary, .badge-primary { background-color: var(--nl-primary); color: #fff; }
.label-success, .badge-success { background-color: var(--nl-success); color: #fff; }
.label-warning, .badge-warning { background-color: var(--nl-warning); color: #fff; }
.label-danger,  .badge-danger  { background-color: var(--nl-danger);  color: #fff; }
.label-info,    .badge-info    { background-color: var(--nl-info);    color: #fff; }

.label-inverse, .badge-inverse { background-color: var(--nl-navy); color: #fff; }

/* Zahlen-Badges (Zaehler) bleiben kompakt */
.badge {
    padding: 2px 8px;
    min-width: 22px;
    text-align: center;
}

/* Badge als Schalter (Aktiv-Umschalter) - der Cursor kommt inline, der Rest hier */
.label[data-toggle-row] {
    transition: filter .12s;
}

.label[data-toggle-row]:hover {
    filter: brightness(.94);
}

/* INSPINIA setzt Labels in Karten/Navigation kleiner - zuruecknehmen */
.nav .label,
.ibox .label {
    font-size: var(--nl-font-size-xs);
}


/* =====================================================================================
   7. Hinweise (alert)
   ===================================================================================== */

.alert {
    border: 1px solid var(--nl-border);
    border-left-width: 4px;
    border-radius: var(--nl-radius);
    padding: var(--nl-space-3) var(--nl-space-4);
    color: var(--nl-text);
    background-color: var(--nl-bg-card);
}

.alert-success { border-left-color: var(--nl-success); background-color: var(--nl-success-soft); color: var(--nl-success-text); }
.alert-info    { border-left-color: var(--nl-info);    background-color: var(--nl-info-soft);    color: var(--nl-info-text); }
.alert-warning { border-left-color: var(--nl-warning); background-color: var(--nl-warning-soft); color: var(--nl-warning-text); }
.alert-danger  { border-left-color: var(--nl-danger);  background-color: var(--nl-danger-soft);  color: var(--nl-danger-text); }

.alert strong,
.alert em,
.alert code {
    color: inherit;
}

.alert hr {
    border-top-color: rgba(0, 0, 0, .08);
    margin: var(--nl-space-3) 0;
}


/* =====================================================================================
   8. Navigation
   ===================================================================================== */

/* Der Balken: weiss, untere Trennlinie, ohne den gefuellten Markenblock */
.top-navigation .navbar,
.navbar-default,
.navbar-static-top {
    background-color: var(--nl-bg-card);
    border: 0;
    min-height: 56px;
}

.row.border-bottom.white-bg {
    border-bottom: 1px solid var(--nl-border) !important;   /* INSPINIA: .border-bottom {!important} */
    background-color: var(--nl-bg-card);
    box-shadow: var(--nl-shadow-card);
}

.top-navigation .navbar-brand {
    background: transparent;
    color: var(--nl-text-strong);
    font-family: var(--nl-font-heading);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 17px 20px 17px 16px;
    height: 56px;
    line-height: 22px;
}

.top-navigation .navbar-brand:hover,
.top-navigation .navbar-brand:focus {
    color: var(--nl-primary);
}

.top-navigation .nav > li > a {
    color: var(--nl-text);
    font-size: var(--nl-font-size);
    font-weight: 500;
    padding: 17px 14px;
    line-height: 22px;
    border-radius: 0;
}

.top-navigation .nav > li a:hover,
.top-navigation .nav > li a:focus,
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus {
    background: var(--nl-bg-hover);
    color: var(--nl-text-strong);
}

.top-navigation .nav .open > a,
.top-navigation .nav .open > a:hover,
.top-navigation .nav .open > a:focus {
    background: var(--nl-bg-hover);
    color: var(--nl-text-strong);
}

.top-navigation .nav > li.active > a,
.top-navigation .navbar .nav > li.active {
    background: transparent;
    color: var(--nl-primary);
    box-shadow: inset 0 -2px 0 var(--nl-primary);
}

/* Sudoer-Menue traegt ein text-danger im Anker - bleibt sichtbar rot */
.top-navigation .nav > li > a .text-danger {
    color: var(--nl-danger-text);
}

/* Der Knopf, der auf schmalen Schirmen das Menue aufklappt. INSPINIA faerbt ihn
   tuerkis (#1ab394) - hier ein gewoehnlicher heller Knopf mit Rand. */
.navbar-toggle {
    background-color: var(--nl-bg-card);
    border-color: var(--nl-border-strong);
    border-radius: var(--nl-radius-sm);
    color: var(--nl-text-strong);
}

.navbar-toggle:hover,
.navbar-toggle:focus {
    background-color: var(--nl-bg-subtle);
    border-color: var(--nl-primary);
    color: var(--nl-primary);
}

/* Der gewaehlte Eintrag in einem Aufklappmenue (INSPINIA faerbt ihn tuerkis) */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.top-navigation .navbar-nav .dropdown-menu > .active > a {
    background-color: var(--nl-primary-soft);
    color: var(--nl-primary-text);
}

/* Fortschrittsbalken - beim Hochladen sichtbar */
.progress-bar {
    background-color: var(--nl-primary);
}

/* Bootstrap-Panels in der Primaerfarbe */
.panel-primary {
    border-color: var(--nl-primary);
}

.panel-primary > .panel-heading {
    background-color: var(--nl-primary);
    border-color: var(--nl-primary);
    color: #fff;
}

/* Aufklappmenues */
.dropdown-menu,
.top-navigation .navbar-nav .dropdown-menu {
    border: 1px solid var(--nl-border);
    border-radius: var(--nl-radius);
    box-shadow: var(--nl-shadow-pop);
    padding: var(--nl-space-1) 0;
    font-size: var(--nl-font-size);
    min-width: 200px;
}

.dropdown-menu > li > a,
.top-navigation .dropdown-menu > li > a {
    color: var(--nl-text);
    padding: 8px 16px;
    font-size: var(--nl-font-size);
    line-height: 1.45;
    border-radius: 0;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.top-navigation .navbar-nav .dropdown-menu > .active > a {
    background: var(--nl-bg-hover);
    color: var(--nl-text-strong);
}

.dropdown-menu .divider {
    background-color: var(--nl-border);
    margin: var(--nl-space-1) 0;
}

.dropdown-submenu > .dropdown-menu {
    border-radius: var(--nl-radius);
    margin-top: -5px;
}

.dropdown-submenu > a:after {
    border-left-color: var(--nl-text-muted);
}

.dropdown-submenu:hover > a:after {
    border-left-color: var(--nl-text-strong);
}

/* Aufklappmenues in Kartenkoepfen (Zahnrad) muessen ueber der naechsten Karte liegen */
.ibox-title .dropdown-menu,
.panel-heading .dropdown-menu {
    z-index: 1010;
}

/* Breitenumschalter: als weicher Badge */
#widthToggleLabel {
    border-radius: var(--nl-radius-pill);
    font-weight: 600;
    padding: 3px 10px;
    color: #fff;
}

#widthToggleLabel.mode-normal { background-color: var(--nl-text-muted); }
#widthToggleLabel.mode-wide   { background-color: var(--nl-warning); }
#widthToggleLabel.mode-full   { background-color: var(--nl-primary); }


/* =====================================================================================
   9. Fusszeile
   ===================================================================================== */

.footer {
    background: var(--nl-bg-card);
    border-top: 1px solid var(--nl-border);
    color: var(--nl-text-muted);
    font-size: var(--nl-font-size-sm);
    padding: var(--nl-space-3) var(--nl-space-5);
}

/* Nur im angemeldeten Bereich: im Fluss statt absolut, ans Ende der Flex-Spalte,
   ueber die volle Breite des #page-wrapper (dessen Innenabstand aufheben).
   Die Anmeldeseite behaelt ihren fixierten Fussbereich aus logon.html.twig. */
body.top-navigation .footer {
    position: static;
    margin-top: auto;
    margin-left: calc(-1 * var(--nl-space-4));
    margin-right: calc(-1 * var(--nl-space-4));
}

.footer a {
    color: var(--nl-text-muted);
}

.footer a:hover {
    color: var(--nl-primary);
}


/* =====================================================================================
   10. Anmeldeseite (Entscheidung 1: zieht mit)
   Der OHMS-Style-Block in logon.html.twig bleibt stehen und wird hier ueberdeckt.

   Der Block steht als <style> IM Template, also nach diesem Stylesheet - bei
   gleicher Spezifitaet gewinnt er. Deshalb tragen alle Regeln hier den Vorsatz
   "body.white-bg .auth-layout-container" (0,3,1) und schlagen damit sowohl die
   einfachen Klassenregeln (0,1,0) als auch die Fusszeilen-Regel (0,2,1) des Blocks.
   ===================================================================================== */

body.white-bg .login-card {
    background: var(--nl-bg-card);
    border: 1px solid var(--nl-border);
    border-radius: var(--nl-radius-lg);
    box-shadow: var(--nl-shadow-card);
    padding: var(--nl-space-5) 26px;
}

body.white-bg .login-subtitle,
body.white-bg .login-card-sub,
body.white-bg .login-panel-hint,
body.white-bg .login-kennung-label {
    color: var(--nl-text-muted);
}

body.white-bg .login-card-title,
body.white-bg .login-panel-title {
    color: var(--nl-text-strong);
    font-weight: 600;
}

body.white-bg .login-choice-card:hover {
    border-color: var(--nl-primary);
    box-shadow: var(--nl-shadow-pop);
}

body.white-bg .login-card-icon-lg {
    color: var(--nl-primary);
}

body.white-bg .login-select-btn {
    border: 1px solid var(--nl-primary);
    border-radius: var(--nl-radius-sm);
    color: var(--nl-primary);
    font-weight: 500;
}

body.white-bg .login-choice-card:hover .login-select-btn {
    background: var(--nl-primary);
    color: #fff;
}

body.white-bg .login-back {
    border: 1px solid var(--nl-border-strong);
    border-radius: var(--nl-radius-sm);
    background: var(--nl-bg-card);
    color: var(--nl-text);
    font-weight: 500;
}

body.white-bg .login-back:hover,
body.white-bg .login-back:focus {
    background: var(--nl-bg-hover);
    border-color: var(--nl-border-strong);
    color: var(--nl-text-strong);
    box-shadow: none;
}

body.white-bg .login-kennung {
    background: var(--nl-bg-subtle);
    border: 1px solid var(--nl-border);
    border-radius: var(--nl-radius);
}

body.white-bg .login-kennung-code {
    color: var(--nl-text-strong);
    font-family: var(--nl-font-mono);
}

body.white-bg .login-hl {
    color: var(--nl-primary-text);
}

body.white-bg .login-loading-box {
    border: 1px solid var(--nl-border);
    border-radius: var(--nl-radius-lg);
    box-shadow: var(--nl-shadow-pop);
}

body.white-bg #login-loading-text {
    color: var(--nl-text);
}

html body.white-bg > .footer {
    border-top: 1px solid var(--nl-border);
    background: var(--nl-bg-card);
}

body.white-bg .otp-box {
    border-radius: var(--nl-radius-sm);
}

/* Fehler-Panel auf der Anmeldeseite */
body.white-bg .login-step .panel-danger {
    border-top-width: 3px;
}


/* =====================================================================================
   11. Dialoge (SweetAlert2) und Toasts (toastr)
   ===================================================================================== */

.swal2-popup {
    font-family: var(--nl-font-body);
    font-size: var(--nl-font-size);
    color: var(--nl-text);
    border-radius: var(--nl-radius-lg);
    box-shadow: var(--nl-shadow-pop);
    padding: var(--nl-space-5) var(--nl-space-5) var(--nl-space-4);
}

.swal2-title {
    font-family: var(--nl-font-heading);
    font-size: 19px;
    font-weight: 600;
    color: var(--nl-text-strong);
}

.swal2-html-container {
    font-size: var(--nl-font-size);
    line-height: 1.55;
    color: var(--nl-text);
}

.swal2-html-container p {
    margin-bottom: 0.7em;
}

.swal2-html-container .table {
    font-size: var(--nl-font-size-sm);
}

.swal2-styled {
    font-family: var(--nl-font-body);
    font-size: var(--nl-font-size);
    font-weight: 500;
    border-radius: var(--nl-radius-sm);
    padding: 8px 18px;
    box-shadow: none;
}

.swal2-styled.swal2-confirm { background-color: var(--nl-primary); }
.swal2-styled.swal2-confirm:hover { background-color: var(--nl-primary-hover); }
.swal2-styled.swal2-deny    { background-color: var(--nl-danger); }
.swal2-styled.swal2-deny:hover { background-color: var(--nl-danger-hover); }

.swal2-styled.swal2-cancel {
    background-color: var(--nl-bg-card);
    color: var(--nl-text-strong);
    border: 1px solid var(--nl-border-strong);
}

.swal2-styled.swal2-cancel:hover {
    background-color: var(--nl-bg-hover);
}

.swal2-styled:focus {
    box-shadow: var(--nl-shadow-focus);
}

.swal2-input,
.swal2-select,
.swal2-textarea {
    font-family: var(--nl-font-body);
    font-size: var(--nl-font-size);
    border: 1px solid var(--nl-border-strong);
    border-radius: var(--nl-radius-sm);
    box-shadow: none;
    height: 40px;
}

.swal2-input:focus,
.swal2-select:focus,
.swal2-textarea:focus {
    border-color: var(--nl-primary);
    box-shadow: var(--nl-shadow-focus);
}

/* Die 6-stellige Bestaetigungszahl im Dialog */
.swal2-html-container code {
    font-size: inherit;
    padding: 4px 12px;
}

#toast-container > div {
    font-family: var(--nl-font-body);
    font-size: var(--nl-font-size-sm);
    border-radius: var(--nl-radius);
    box-shadow: var(--nl-shadow-pop);
    opacity: 1;
    padding: 12px 16px 12px 48px;
}

#toast-container > div:hover {
    box-shadow: var(--nl-shadow-pop);
}

#toast-container > .toast-success { background-color: var(--nl-success); }
#toast-container > .toast-error   { background-color: var(--nl-danger); }
#toast-container > .toast-warning { background-color: var(--nl-warning); }
#toast-container > .toast-info    { background-color: var(--nl-info); }

.toast-title {
    font-weight: 600;
}

#toast-container .toast-close-button {
    font-weight: 400;
    text-shadow: none;
    opacity: .7;
}


/* =====================================================================================
   12. Kleinkram, das auf den neuen Seiten oft vorkommt
   ===================================================================================== */

/* Zusammenfassungszeilen ("55 Klassen · 5 Schueler") */
#classSummary, #userSummary, #topicSummary, #itemSummary, #deleteSummary, #previewCounts {
    color: var(--nl-text);
}

/* Aktionsleisten: Knopfgruppe plus Zaehler */
#selectionInfo {
    font-size: var(--nl-font-size-sm);
}

/* Rollenfilter-Knopfgruppe (btn-xs, active) */
.btn-group > .btn-xs.active {
    background: var(--nl-primary-soft);
    border-color: var(--nl-primary);
    color: var(--nl-primary-text);
    box-shadow: none;
}

/* Leere Zustaende */
.ibox-content > p.text-muted:only-child {
    padding: var(--nl-space-4) 0;
    text-align: center;
}

/* Symbol im Leer-Hinweis der Lehreruebersicht (Farbe kommt inline) */
.ibox-content .text-center .fa-folder-open-o {
    opacity: .6;
}

/* Tooltip */
.tooltip-inner {
    background-color: var(--nl-navy);
    border-radius: var(--nl-radius-sm);
    font-family: var(--nl-font-body);
    font-size: var(--nl-font-size-xs);
    padding: 5px 9px;
}

.tooltip.top .tooltip-arrow { border-top-color: var(--nl-navy); }
.tooltip.left .tooltip-arrow { border-left-color: var(--nl-navy); }
.tooltip.right .tooltip-arrow { border-right-color: var(--nl-navy); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--nl-navy); }

/* Druck: Karten ohne Schatten. Zusaetzlich zurueck auf die kompakten Masse des
   alten Looks (13px, enges Padding) - Drucklisten wie die Kontrollliste der
   Anmeldungen sind auf 3 Bloecke pro Seite ausgelegt und liefen mit den
   groesseren Bildschirm-Massen ueber. Karten werden nie zerschnitten. */
@media print {
    body {
        font-size: 13px;
        line-height: 1.42857143;
    }
    .ibox, .panel {
        box-shadow: none;
        border-color: #ccc;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .ibox {
        margin-bottom: 12px;
    }
    .ibox-content {
        padding: 12px 15px;
    }
    .table > thead > tr > th {
        font-size: 11px;
        padding: 6px 8px;
    }
    .table > tbody > tr > td,
    .table > tbody > tr > th,
    .table > tfoot > tr > td {
        padding: 5px 8px;
    }
}


/* =====================================================================================
   Notenmatrix (grading.php und der Dialog fuer die Sammelbenotung)
   -------------------------------------------------------------------------------------
   Die Kacheln kommen aus inc/grading/GradeType.* als <td class="gradeButton">, die
   Auswahl als zusaetzliche Klasse .gradeSelected. Beides bleibt, nur das Aussehen
   wechselt: helle Kacheln mit Rand, die gewaehlte Note gefuellt.

   Die Farben aus mystyle.css (blaugrau, gelbe Auswahl) werden hier ueberschrieben.
   ===================================================================================== */

.gradeMatrix {
    border-collapse: separate;
    border-spacing: 0;
}

.gradeButton,
.gradeButtonM {
    box-sizing: border-box;
    height: 38px;
    line-height: 36px;
    margin: 4px;
    padding: 0 4px;
    background-color: var(--nl-bg-card);
    border: 1px solid var(--nl-border-strong);
    border-radius: var(--nl-radius-sm);
    color: var(--nl-text-strong);
    font-family: var(--nl-font-body);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
}

.gradeButton  { width: 46px; }
.gradeButtonM { width: 78px; font-size: 15px; }

.gradeButton:hover,
.gradeButtonM:hover {
    background-color: var(--nl-primary-soft);
    border-color: var(--nl-primary);
    color: var(--nl-primary-text);
}

/* Die gewaehlte Note: gefuellt, damit sie im Raster sofort auffaellt */
.gradeButton.gradeSelected,
.gradeButtonM.gradeSelected {
    background-color: var(--nl-primary);
    border-color: var(--nl-primary);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.gradeButton.gradeSelected:hover,
.gradeButtonM.gradeSelected:hover {
    background-color: var(--nl-primary-hover);
    border-color: var(--nl-primary-hover);
    color: #fff;
}

/* Die Wuerfelzeichen der Symbol-Beurteilung (&#x2680; bis &#x2684;).
   Inter hat sie nicht, der Rueckweg zeichnet sie duenn und klein - deshalb
   eine symbolfaehige Schrift und deutlich mehr Groesse. */
.gradeSymbol {
    display: inline-block;
    font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", "DejaVu Sans", sans-serif;
    font-size: 30px;
    line-height: 1;
    vertical-align: middle;
}

/* In den Tabellen (Beurteilungsspalte, Verlauf) steht dasselbe Zeichen im
   Fliesstext - dort reicht knapp ueber Zeilenhoehe. */
td.gradingText .gradeSymbol,
.table .gradeSymbol {
    font-size: 22px;
}

/* "X" bzw. "n.b." heisst: noch nicht beurteilt. Gestrichelt und zurueckhaltend -
   das ist ein Zustand, keine Note. Gewaehlt wird daraus ein Warnton. */
#grade-nc {
    border-style: dashed;
    color: var(--nl-text-muted);
    font-weight: 500;
}

#grade-nc:hover {
    background-color: var(--nl-bg-subtle);
    border-color: var(--nl-border-strong);
    color: var(--nl-text-strong);
}

#grade-nc.gradeSelected,
#grade-nc.gradeSelected:hover {
    background-color: var(--nl-warning-soft);
    border-color: var(--nl-warning);
    border-style: solid;
    color: var(--nl-warning-text);
    box-shadow: none;
}

/* Im Dialog der Sammelbenotung steht dieselbe Matrix - dort mittig */
#glBulkMatrix .gradeMatrix {
    margin: 0 auto;
}


/* Zahl im Vor/Zurueck-Knopf der Beurteilung: wie viele Abgaben in dieser
   Richtung noch unbeurteilt sind. Heller Fleck auf dem gefuellten Knopf. */
.btn-primary .gr-open-count {
    background-color: rgba(255, 255, 255, .25);
    color: #fff;
    font-size: var(--nl-font-size-xs);
    font-weight: 700;
    margin: 0 2px;
    padding: 2px 7px;
}


/* Zeichen neben dem Namen - in der Kopfzeile und ueber dem Titel der
   Anmeldeseite. In der Themefarbe, damit beides denselben Anker hat. */
.brand-icon {
    color: var(--nl-primary);
}

.navbar-brand .brand-icon {
    font-size: 19px;
    margin-right: 7px;
    vertical-align: -1px;
}

/* Auf der Anmeldeseite nimmt es die Groesse der Ueberschrift an */
h1 .brand-icon {
    margin-right: 14px;
    vertical-align: -2px;
}


/* Kopfzeile einer Seite: links die Knoepfe, daneben der Titel, darunter die
   erste Karte. Der Titel sitzt auf Knopfhoehe; den Abstand nach unten haelt die
   Zeile, nicht ein <br> im Markup. */
.page-head {
    margin-bottom: 18px;
}

.page-title {
    margin: 0;
    line-height: 34px;
}

/* Werkzeugleiste ueber einer Karte oder Tabelle (Auswahl, Suchfeld) */
.page-toolbar {
    margin-bottom: 16px;
}

/* Schmale Schirme: die Spalten stapeln sich, der Titel rutscht unter die
   Knoepfe - dort braucht er Luft nach oben und darf umbrechen. */
@media (max-width: 767px) {
    .page-title {
        margin-top: 14px;
        line-height: 1.3;
    }

    .page-head {
        margin-bottom: 14px;
    }
}


/* Zahl neben einem Kommentar: wie oft dieser Text schon vergeben wurde.
   Zurueckhaltend - sie ordnet ein, sie ist keine Meldung. */
.badge.comment-usage {
    background-color: var(--nl-bg-subtle);
    border: 1px solid var(--nl-border);
    color: var(--nl-text-muted);
    font-weight: 600;
    margin-left: 6px;
}


/* Kommentar bearbeiten: Knoepfe und das "ueberall"-Kaestchen unter dem Feld */
.gr-comment-actions {
    margin-top: 8px;
}

.gr-comment-everywhere {
    display: inline-block;
    margin: 0 0 0 12px;
    font-weight: normal;
    color: var(--nl-text-muted);
}

.gr-comment-everywhere input {
    margin-right: 4px;
}