.card-header.bg-primary.text-white {
    margin-top: -15px;
}


.tags-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.tag {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
    font-size: 0.9rem;
}

.btn-close {
    font-size: 0.8rem;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    cursor: pointer;
}

.tag-input {
    border: none;
    flex: 1;
    min-width: 100px;
    outline: none;
    font-size: 1rem;
}

.tag-search-container {
    position: relative;
}

.suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
}

.suggestions ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.suggestions li {
    padding: 0.5rem;
    cursor: pointer;
}

.suggestions li:hover {
    background-color: #f8f9fa;
}


.selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.badge .btn-close {
    color: white;
    padding: 0;
    margin-left: 0.5rem;
    font-size: 0.8rem;
    background: none;
    border: none;
    cursor: pointer;
}


.mud-input{
height:40px;
}
.mud-input-adornment, .mud-button-root, .mud-icon-root {
    display: none !important;
}

/* Make any table scrollable on small screens, and tighten spacing */
@media (max-width: 768px) {
    table, .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        /* Prevent awkward multi-line headers; keep columns compact */
        table th, table td,
        .table th, .table td {
            white-space: nowrap;
        }

        /* Slightly smaller table padding on mobile */
        .table th, .table td {
            padding: .5rem .75rem;
        }

    /* Optional: slightly smaller font size for dense tables */
    .table {
        font-size: 0.95rem;
    }
}

/* Utilities: fixed layout and word breaking for long content */
.table-fixed, table.table-fixed {
    table-layout: fixed;
    width: 100%;
}

.table .text-break, table .text-break {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Exam player container always full width */
.lln-exam-player {
    max-width: 100%;
}

/* SurveyJS density/padding reductions: MOBILE ONLY */
@media (max-width: 576px) {
    /* Trim outer container padding and reduce SurveyJS base spacing on phones */
    .lln-exam-player, #ResultsContainer {
        padding: .0rem !important;
    }

    /* Override inline min-height when narrow */
    .lln-exam-player #surveyContainer {
        min-height: 90vh !important;
    }

    /* Remove outer padding/margins SurveyJS adds */
    .lln-exam-player .sd-root-modern,
    .lln-exam-player .sd-body,
    .lln-exam-player .sd-page,
    .lln-exam-player .sd-rows {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Page header: smaller, tighter */
    .lln-exam-player .sd-page__title,
    .lln-exam-player .sd-title {
        font-size: 1.15rem !important;
        line-height: 1.2 !important;
        margin: 0 0 .5rem 0 !important;
    }
    .lln-exam-player .sd-page__description,
    .lln-exam-player .sd-description {
        font-size: .95rem !important;
        margin-bottom: .5rem !important;
    }

    /* Panels/questions: remove the card-in-card feel and cut padding */
    .lln-exam-player .sd-panel,
    .lln-exam-player .sd-question,
    .lln-exam-player .sd-element {
        padding: .5rem !important;
        margin: .5rem 0 !important;
        box-shadow: none !important;
        border: 1px solid rgba(0,0,0,.06) !important;
        background: #fff !important;
    }
    .lln-exam-player .sd-question__content,
    .lln-exam-player .sd-panel__content {
        padding: 0 !important;
    }
    .lln-exam-player .sd-question__header {
        margin-bottom: .25rem !important;
    }

    .body-wrapper {
        padding: 12px !important;
    }

    /* Ranking items: prevent long-press heuristics on touch */
    .lln-exam-player .sd-ranking,
    .lln-exam-player .sd-ranking * {
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    /* Allow wrapping anywhere for long tokens */
    h1, h2, h3, h4, h5, h6,
    p, li, dt, dd, small, span,
    .card-title, .card-subtitle, .card-text, .lead,
    .nav-link, .navbar-brand, .breadcrumb, .badge, .btn,
    .form-label, .form-control, .alert, .modal-title,
    .table, .table th, .table td, span,
    /* SurveyJS text */
    .lln-exam-player .sd-title,
    .lln-exam-player .sd-description,
    .lln-exam-player .sd-question__title,
    .lln-exam-player .sd-question__description,
    .lln-exam-player .sv-string-viewer {
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }

    /* Ensure SurveyJS strings don’t force single-line */
    .lln-exam-player  .dropdown-sentence span {
        white-space: normal !important;
        word-break: auto-phrase;
    }

    .sv-string-viewer {
        word-break: auto-phrase;
    }
    /* Relax Bootstrap nowraps on phones */
    .text-nowrap {
        white-space: normal !important;
    }

    .sv-ranking-item, .sv-ranking-item__content {
        display: contents;
        touch-action: none;
        -webkit-user-drag: none;
        user-select: none;
    }

    .audio-answer-wrapper{
        white-space:normal;
    }

}