/* ==========================================================
   TRASSIFY THEME FOR APACHE ANSWER
   Responsive Light/Dark Theme — v5.2
   Datei für Apache Answer → Appearance → Themes → Custom CSS
   oder Stylus → gilt für knowledge.trassify.cloud
   ========================================================== */

:root,
html[data-bs-theme="light"] {
    color-scheme: light !important;

    --trassify-green: #A6C4A1;
    --trassify-green-dark: #7FA478;
    --trassify-green-soft: #EAF2E8;
    --trassify-green-pale: #F4F8F3;

    --trassify-ink: #18221B;
    --trassify-text: #2D392F;
    --trassify-muted: #6F7C72;

    --trassify-bg: #F5F7F4;
    --trassify-surface: #FFFFFF;
    --trassify-sidebar: #EFF4EE;

    --trassify-border: #DCE5DA;
    --trassify-border-strong: #C6D4C3;
    --trassify-header-ink: #18221B;
    --trassify-active-bg: #18221B;
    --trassify-active-text: #FFFFFF;
    --trassify-accent-text: #47634C;
    --trassify-tag-border: #C7D8C4;

    --trassify-shadow-sm: 0 3px 12px rgba(27, 43, 31, 0.06);
    --trassify-shadow-md: 0 10px 28px rgba(27, 43, 31, 0.10);

    --trassify-radius: 14px;
    --trassify-radius-sm: 9px;

    --bs-body-bg: var(--trassify-bg) !important;
    --bs-body-color: var(--trassify-text) !important;
    --bs-emphasis-color: var(--trassify-ink) !important;
    --bs-secondary-color: var(--trassify-muted) !important;
    --bs-tertiary-bg: var(--trassify-sidebar) !important;
    --bs-border-color: var(--trassify-border) !important;
    --bs-primary: #A6C4A1 !important;
    --bs-primary-rgb: 166, 196, 161 !important;
    --bs-link-color: #52745A !important;
    --bs-link-hover-color: #35543D !important;
    --bs-heading-color: var(--trassify-ink) !important;
    --bs-body-bg-rgb: 245, 247, 244 !important;
    --bs-body-color-rgb: 45, 57, 47 !important;
    --bs-tertiary-bg-rgb: 239, 244, 238 !important;
}

html[data-bs-theme="dark"] {
    color-scheme: dark !important;

    --trassify-green: #A6C4A1;
    --trassify-green-dark: #8DB187;
    --trassify-green-soft: #26372B;
    --trassify-green-pale: #202C23;

    --trassify-ink: #F2F6F1;
    --trassify-text: #D9E2D8;
    --trassify-muted: #9DAB9F;

    --trassify-bg: #141A17;
    --trassify-surface: #1D2521;
    --trassify-sidebar: #18201C;

    --trassify-border: #344239;
    --trassify-border-strong: #4A5C50;
    --trassify-header-ink: #18221B;
    --trassify-active-bg: #A6C4A1;
    --trassify-active-text: #18221B;
    --trassify-accent-text: #C3DCBE;
    --trassify-tag-border: #48634D;

    --trassify-shadow-sm: 0 3px 12px rgba(0, 0, 0, 0.22);
    --trassify-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.32);

    --bs-body-bg: var(--trassify-bg) !important;
    --bs-body-color: var(--trassify-text) !important;
    --bs-emphasis-color: var(--trassify-ink) !important;
    --bs-secondary-color: var(--trassify-muted) !important;
    --bs-tertiary-bg: var(--trassify-sidebar) !important;
    --bs-border-color: var(--trassify-border) !important;
    --bs-primary: #A6C4A1 !important;
    --bs-primary-rgb: 166, 196, 161 !important;
    --bs-link-color: #B5D4AF !important;
    --bs-link-hover-color: #D4E6D0 !important;
    --bs-heading-color: var(--trassify-ink) !important;
    --bs-body-bg-rgb: 20, 26, 23 !important;
    --bs-body-color-rgb: 217, 226, 216 !important;
    --bs-tertiary-bg-rgb: 24, 32, 28 !important;
}

/* 01 — GLOBAL */

html,
body,
#root {
    min-height: 100%;
    background: var(--trassify-bg) !important;
    color: var(--trassify-text) !important;
}

body {
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
}

#root,
#root > div,
.page-wrap,
.page-main,
.page-content,
.page-right-side,
.answer-container,
.container,
.container-fluid,
main,
main > div,
.flex-fill,
.w-100,
.overflow-x-hidden {
    background-color: transparent !important;
}

.bg-body {
    background-color: var(--trassify-bg) !important;
}

.bg-body-secondary,
.bg-body-tertiary {
    background-color: var(--trassify-sidebar) !important;
}

.bg-light,
.bg-white {
    background-color: transparent !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--trassify-ink) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em;
}

.text-secondary,
.text-muted {
    color: var(--trassify-muted) !important;
}

.text-body,
.link-dark,
.page-main a.link-dark,
.page-right-side a.link-dark,
.list-group-item-action {
    color: var(--trassify-ink) !important;
}

.list-group-item {
    background-color: transparent !important;
    border-color: var(--trassify-border) !important;
}

/* 02 — HEADER */

#header,
nav#header,
header.navbar,
.navbar.sticky-top {
    background: var(--trassify-green) !important;
    border: 0 !important;
    box-shadow: 0 2px 14px rgba(27, 43, 31, 0.08) !important;
}

#header,
#header a,
#header button,
#header span,
.navbar,
.navbar a,
.navbar button {
    color: var(--trassify-header-ink) !important;
}

#header input[type="search"],
#header input[type="text"],
.navbar input[type="search"],
.navbar input[type="text"],
#header .form-control,
.navbar .form-control {
    width: min(500px, 44vw) !important;
    background: rgba(255, 255, 255, 0.90) !important;
    color: var(--trassify-header-ink) !important;
    border: 1px solid rgba(24, 34, 27, 0.14) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

#header input::placeholder,
.navbar input::placeholder {
    color: #647267 !important;
    opacity: 1 !important;
}

/* 03 — SIDEBAR */

.position-sticky.px-3.border-end,
aside,
.sidebar {
    background: var(--trassify-sidebar) !important;
    border-color: var(--trassify-border) !important;
}

.position-sticky.px-3.border-end a,
.sidebar a {
    color: #58665B !important;
    border-radius: var(--trassify-radius-sm) !important;
}

.position-sticky.px-3.border-end a:hover,
.sidebar a:hover {
    background: var(--trassify-green-soft) !important;
    color: var(--trassify-ink) !important;
}

.position-sticky.px-3.border-end .active,
.sidebar .active {
    background: var(--trassify-active-bg) !important;
    color: var(--trassify-active-text) !important;
}

/* 04 — CARDS */

.card,
.page-right-side > div,
.page-right-side .card,
.answer-container .card {
    background: var(--trassify-surface) !important;
    color: var(--trassify-text) !important;
    border: 1px solid var(--trassify-border) !important;
    border-radius: var(--trassify-radius) !important;
    box-shadow: var(--trassify-shadow-sm) !important;
}

.card-header {
    background: var(--trassify-green-pale) !important;
    color: var(--trassify-ink) !important;
    border-bottom: 1px solid var(--trassify-border) !important;
}

.card-body {
    background: transparent !important;
}

/* 05 — QUESTION LIST */

[class*="question-item"],
[class*="question-list"] > div,
.page-main > .border,
.page-main .border-bottom {
    background: var(--trassify-surface) !important;
    border-color: var(--trassify-border) !important;
}

.page-main .border,
.page-main .border-bottom {
    border-radius: var(--trassify-radius) !important;
    box-shadow: var(--trassify-shadow-sm) !important;
    margin-bottom: 12px !important;
}

/* 06 — TAG OVERVIEW CARDS */

div.d-flex.flex-column.align-items-start.card-body {
    min-height: 100%;
    padding: 18px !important;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

div.d-flex.flex-column.align-items-start.card-body:hover {
    transform: translateY(-3px);
    border-color: var(--trassify-border-strong) !important;
    box-shadow: var(--trassify-shadow-md) !important;
}

/* 07 — TAG CHIPS */

a[href*="/tags/"],
[class*="tag-chip"],
[class*="tag-label"],
[class*="tag-item"] > span,
[class*="tag"] .badge,
[class*="tags"] .badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    border-radius: 999px !important;
    padding: 5px 10px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

/* Tag input / selected tags */

.react-tags,
.ReactTags__tags,
.ReactTags__selected,
.tag-input,
.tag-editor,
[class*="tag-input"],
[class*="tags-input"],
[class*="tag-selector"] {
    background: transparent !important;
}

.react-tags__selected-tag,
.ReactTags__tag,
.badge-tag,
.tag-badge,
[class*="tag-chip"],
[class*="tag-label"] {
    border-radius: 999px !important;
    padding: 5px 10px !important;
    font-weight: 650 !important;
}

/* Automatische Tag-Farben aus custom-head.html.
   Der Tag-Slug bestimmt die Farbe dauerhaft und ohne feste Tag-Liste. */

a.badge-tag[data-trassify-tag-color] {
    background: var(--tag-bg-light) !important;
    color: var(--tag-text-light) !important;
    border: 1px solid var(--tag-border-light) !important;
}

html[data-bs-theme="dark"] a.badge-tag[data-trassify-tag-color] {
    background: var(--tag-bg-dark) !important;
    color: var(--tag-text-dark) !important;
    border-color: var(--tag-border-dark) !important;
}

/* 08 — BUTTONS */

.btn {
    border-radius: var(--trassify-radius-sm) !important;
    font-weight: 650 !important;
}

.btn-primary {
    background: var(--trassify-green) !important;
    border-color: var(--trassify-green) !important;
    color: var(--trassify-header-ink) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--trassify-green-dark) !important;
    border-color: var(--trassify-green-dark) !important;
    color: var(--trassify-header-ink) !important;
}

.btn-outline-secondary,
.btn-outline-dark,
.btn-secondary {
    background: var(--trassify-surface) !important;
    border: 1px solid var(--trassify-border-strong) !important;
    color: var(--trassify-ink) !important;
}

.btn-outline-secondary:hover,
.btn-outline-dark:hover,
.btn-secondary:hover {
    background: var(--trassify-green-soft) !important;
    border-color: var(--trassify-green-dark) !important;
    color: var(--trassify-ink) !important;
}

/* New Question button inserted by the Head script */

#trassify-question-actions {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
    margin-left: auto;
}

#trassify-new-question {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 9px 15px !important;
    background: var(--trassify-green) !important;
    color: var(--trassify-header-ink) !important;
    border: 1px solid var(--trassify-green-dark) !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 14px rgba(27, 43, 31, 0.12) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

#trassify-new-question:hover {
    background: var(--trassify-green-dark) !important;
    transform: translateY(-1px);
}

#trassify-import-question {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 10px;
    color: var(--trassify-muted) !important;
    border: 1px solid var(--trassify-border);
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.25;
    text-decoration: none !important;
}

#trassify-import-question:hover {
    background: var(--trassify-green-soft);
    color: var(--trassify-ink) !important;
    border-color: var(--trassify-green-dark);
}

/* 09 — FORMS */

input,
textarea,
select,
.form-control,
.form-select {
    background: var(--trassify-surface) !important;
    border: 1px solid var(--trassify-border-strong) !important;
    color: var(--trassify-ink) !important;
    border-radius: var(--trassify-radius-sm) !important;
    caret-color: var(--trassify-ink) !important;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: #839087 !important;
    opacity: 1 !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--trassify-green-dark) !important;
    box-shadow: 0 0 0 0.2rem rgba(166, 196, 161, 0.30) !important;
}

/* 10 — TABS */

.nav-tabs .nav-link,
.btn-group .btn {
    background: var(--trassify-surface) !important;
    border-color: var(--trassify-border-strong) !important;
    color: var(--trassify-muted) !important;
}

.nav-tabs .nav-link.active,
.btn-group .btn.active {
    background: var(--trassify-active-bg) !important;
    border-color: var(--trassify-active-bg) !important;
    color: var(--trassify-active-text) !important;
}

/* 11 — DROPDOWNS / MODALS */

.dropdown-menu,
.popover,
.modal-content {
    background: var(--trassify-surface) !important;
    border: 1px solid var(--trassify-border) !important;
    color: var(--trassify-text) !important;
    box-shadow: var(--trassify-shadow-md) !important;
    border-radius: var(--trassify-radius) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--trassify-green-soft) !important;
    color: var(--trassify-ink) !important;
}

/* 12 — LOGIN */

form[action*="login"],
form[class*="login"],
[class*="login"] form {
    padding: clamp(24px, 4vw, 40px) !important;
    background: var(--trassify-surface) !important;
    border: 1px solid var(--trassify-border) !important;
    border-radius: calc(var(--trassify-radius) + 4px) !important;
    box-shadow: var(--trassify-shadow-md) !important;
}

form[action*="login"] .btn-primary,
form[class*="login"] .btn-primary,
[class*="login"] form .btn-primary {
    width: 100% !important;
    min-height: 42px !important;
}

/* 13 — CONTENT */

a {
    color: var(--bs-link-color);
    text-underline-offset: 0.16em;
}

a:hover {
    color: var(--bs-link-hover-color);
}

code,
pre {
    border-radius: var(--trassify-radius-sm) !important;
}

pre {
    border: 1px solid var(--trassify-border) !important;
}

blockquote {
    padding: 12px 16px !important;
    background: var(--trassify-green-pale) !important;
    border-left: 4px solid var(--trassify-green) !important;
    border-radius: 0 var(--trassify-radius-sm) var(--trassify-radius-sm) 0;
}

:focus-visible {
    outline: 3px solid rgba(127, 164, 120, 0.48) !important;
    outline-offset: 2px !important;
}

/* 14 — FOOTER */

footer,
.footer,
#footer {
    background: var(--trassify-bg) !important;
    color: #7D8A80 !important;
}

/* 15 — RESPONSIVE */

/* 15 — QUESTIONS GROUPED BY TAG
   Benötigt trassify-question-groups.js im Custom Head. */

.trassify-question-source {
    display: none !important;
}

#trassify-question-groups {
    display: grid;
    gap: 22px;
    margin-top: 16px;
}

.trassify-question-group {
    overflow: hidden;
    background: var(--trassify-surface);
    border: 1px solid var(--trassify-border);
    border-radius: var(--trassify-radius);
    box-shadow: var(--trassify-shadow-sm);
}

.trassify-question-group__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    background: var(--trassify-green-pale);
    border-bottom: 1px solid var(--trassify-border);
}

.trassify-question-group__title {
    color: var(--trassify-ink) !important;
    font-size: 1rem;
    font-weight: 750;
    text-decoration: none;
}

.trassify-question-group__title:hover {
    color: var(--bs-link-hover-color) !important;
}

.trassify-question-group__count {
    flex: 0 0 auto;
    color: var(--trassify-muted);
    font-size: 0.8rem;
    font-weight: 650;
    white-space: nowrap;
}

.trassify-question-group__toggle {
    appearance: none !important;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: -7px -8px -7px auto;
    padding: 7px 8px;
    background: transparent !important;
    color: var(--trassify-text) !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    cursor: pointer;
    font: inherit !important;
}

.trassify-question-group__toggle:hover {
    background: color-mix(
        in srgb,
        var(--trassify-green) 18%,
        transparent
    ) !important;
}

.trassify-question-group__alert {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 3px 8px;
    background: #FFF0F1;
    color: #A61926;
    border: 1px solid #F0B8BE;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.trassify-question-group__alert-dot {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    background: #D92D3A;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(217, 45, 58, 0.12);
}

html[data-bs-theme="dark"] .trassify-question-group__alert {
    background: #442328;
    color: #FFCDD2;
    border-color: #71343C;
}

html[data-bs-theme="dark"] .trassify-question-group__alert-dot {
    background: #FF6673;
    box-shadow: 0 0 0 3px rgba(255, 102, 115, 0.14);
}

.trassify-question-group__chevron {
    display: inline-block;
    font-size: 1.15rem;
    font-weight: 750;
    line-height: 1;
    transition: transform 0.18s ease;
}

.trassify-question-group.is-collapsed .trassify-question-group__chevron {
    transform: rotate(-90deg);
}

.trassify-question-group__list[hidden] {
    display: none !important;
}

.trassify-question-group__list > .list-group-item {
    padding: 16px !important;
}

.trassify-question-group__list > .list-group-item:last-child {
    border-bottom: 0 !important;
}

/* 16 — JSON QUESTION IMPORT */

.trassify-import-mode .page-right-side,
.trassify-import-mode .page-main {
    display: none !important;
}

#trassify-question-import {
    flex: 1 1 auto;
    min-width: 0;
    width: min(100%, 980px);
    padding-bottom: 48px;
}

.trassify-import__header,
.trassify-import__preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.trassify-import__header h2,
.trassify-import__preview-head h3 {
    margin-bottom: 5px;
}

.trassify-import__header p,
.trassify-import__preview-head p {
    margin: 0;
    color: var(--trassify-muted);
}

.trassify-import__privacy {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 7px;
    padding: 6px 11px;
    background: var(--trassify-green-soft);
    color: var(--trassify-accent-text);
    border: 1px solid var(--trassify-tag-border);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.trassify-import__panel,
.trassify-import__preview-area {
    padding: 22px;
    background: var(--trassify-surface);
    border: 1px solid var(--trassify-border);
    border-radius: var(--trassify-radius);
    box-shadow: var(--trassify-shadow-sm);
}

.trassify-import__preview-area {
    margin-top: 18px;
}

.trassify-import__file {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    min-height: 112px;
    padding: 20px;
    color: var(--trassify-muted);
    border: 1px dashed var(--trassify-border-strong);
    border-radius: var(--trassify-radius-sm);
    cursor: pointer;
}

.trassify-import__file:hover {
    background: var(--trassify-green-soft);
    color: var(--trassify-ink);
}

.trassify-import__file i {
    color: var(--trassify-green-dark);
    font-size: 1.7rem;
}

.trassify-import__file span {
    color: var(--trassify-ink);
    font-weight: 700;
}

.trassify-import__file input {
    width: min(100%, 340px);
    font-size: 0.82rem;
}

.trassify-import__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--trassify-muted);
    font-size: 0.78rem;
}

.trassify-import__divider::before,
.trassify-import__divider::after {
    height: 1px;
    background: var(--trassify-border);
    content: "";
    flex: 1;
}

.trassify-import__label {
    display: block;
    margin-bottom: 7px;
    color: var(--trassify-ink);
    font-weight: 700;
}

.trassify-import__panel textarea {
    width: 100%;
    padding: 13px !important;
    background: var(--trassify-bg) !important;
    color: var(--trassify-text) !important;
    border: 1px solid var(--trassify-border-strong) !important;
    border-radius: var(--trassify-radius-sm) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    resize: vertical;
}

.trassify-import__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

.trassify-import__notice {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--trassify-border);
    border-radius: var(--trassify-radius-sm);
    font-size: 0.86rem;
}

.trassify-import__notice.is-info {
    background: var(--trassify-bg);
    color: var(--trassify-muted);
}

.trassify-import__notice.is-success {
    background: color-mix(in srgb, #198754 12%, var(--trassify-surface));
    color: var(--trassify-ink);
    border-color: color-mix(in srgb, #198754 35%, var(--trassify-border));
}

.trassify-import__notice.is-error {
    background: color-mix(in srgb, #dc3545 11%, var(--trassify-surface));
    color: var(--trassify-ink);
    border-color: color-mix(in srgb, #dc3545 35%, var(--trassify-border));
}

.trassify-import__cards {
    display: grid;
    gap: 10px;
}

.trassify-import__card {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 15px;
    background: var(--trassify-bg);
    border: 1px solid var(--trassify-border);
    border-radius: var(--trassify-radius-sm);
}

.trassify-import__card.has-error {
    border-color: color-mix(in srgb, #dc3545 50%, var(--trassify-border));
}

.trassify-import__number {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    background: var(--trassify-green-soft);
    color: var(--trassify-accent-text);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 800;
}

.trassify-import__card-main {
    min-width: 0;
}

.trassify-import__card-main > strong {
    color: var(--trassify-ink);
}

.trassify-import__card-main > p {
    display: -webkit-box;
    overflow: hidden;
    margin: 5px 0 9px;
    color: var(--trassify-muted);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.trassify-import__status {
    padding: 4px 8px;
    background: var(--trassify-green-soft);
    color: var(--trassify-accent-text);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 750;
    white-space: nowrap;
}

.has-error .trassify-import__status {
    background: color-mix(in srgb, #dc3545 14%, var(--trassify-surface));
    color: #b02a37;
}

.trassify-import__messages {
    margin: 10px 0 0;
    padding-left: 18px;
    font-size: 0.78rem;
}

.trassify-import__messages .is-error {
    color: #b02a37;
}

.trassify-import__messages .is-warning {
    color: #997404;
}

.trassify-import__result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    background: var(--trassify-bg);
    border: 1px solid var(--trassify-border);
    border-radius: var(--trassify-radius-sm);
}

.trassify-import__result.is-error {
    color: #b02a37;
    border-color: color-mix(in srgb, #dc3545 45%, var(--trassify-border));
}

.trassify-import__result small {
    color: inherit;
}

@media (min-width: 1200px) {
    .trassify-import-mode .answer-container {
        width: calc(100% - 28px) !important;
        max-width: none !important;
        margin-right: 28px !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 768px) {
    .trassify-import__header,
    .trassify-import__preview-head {
        flex-direction: column;
    }

    .trassify-import__card {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .trassify-import__status {
        grid-column: 2;
        justify-self: start;
    }

    .trassify-import__result {
        align-items: flex-start;
        flex-direction: column;
    }
}
@media (max-width: 768px) {
    #header input[type="search"],
    #header input[type="text"],
    .navbar input[type="search"],
    .navbar input[type="text"] {
        width: 42vw !important;
    }

    #trassify-new-question {
        padding: 8px 11px !important;
        font-size: 0.9rem !important;
    }

    form[action*="login"],
    form[class*="login"],
    [class*="login"] form {
        margin-inline: 16px !important;
        padding: 24px 20px !important;
    }

    .trassify-question-group__heading,
    .trassify-question-group__list > .list-group-item {
        padding: 12px !important;
    }}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}