/* Shared responsive layer. Keep the original table nodes, forms and event handlers. */
:root { --lk-green: #389268; --lk-header-height: 64px; }
.main-panel, .content, .row > *, .card, .card-body, .tab-pane { min-width: 0; }
.wrapper > .main-panel { transition: none; }
.main-panel .content img, .modal img { max-width: 100%; }
.main-panel .content pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.table-responsive, .lk-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lk-table-scroll { width: 100%; }
.lk-table-scroll:focus-visible, :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #176b4b; outline-offset: 3px;
}
.lk-mobile-header, .lk-menu-close, .lk-menu-backdrop { display: none; }
.lk-table-controls { display: none; }
.lk-cell-label { display: none; }
.lk-standalone .form-control { min-height: 44px; font-size: 16px; }
.lk-standalone .btn { min-height: 44px; font-size: 16px; white-space: normal; }
.lk-standalone .input-group { min-width: 0; }
.lk-standalone .input-group > .form-control { min-width: 0; }
.lk-row-link { cursor: pointer; }
.lk-details-link > span { display: none; }
.lk-action-text, .lk-header-check > span { display: none; }

/* The sidebar takes too much space on tablets, including landscape tablets. */
@media screen and (max-width: 1199.98px) {
    body { font-size: 16px; line-height: 1.5; }
    .wrapper { position: relative; min-height: 100vh; }
    .wrapper > .main-panel, .nav-open .main-panel {
        width: 100%; float: none; transform: none !important; position: relative;
    }
    .lk-mobile-header {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: sticky; top: 0; z-index: 1040; min-height: var(--lk-header-height);
        padding: 8px 16px; background: #fff; border-bottom: 1px solid #ddd;
    }
    .lk-menu-toggle, .lk-menu-close {
        min-height: 44px; padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px;
        background: #fff; color: #232323; font-size: 16px; font-weight: 700;
    }
    .lk-menu-toggle i { margin-right: 6px; }
    .lk-mobile-brand { color: #232323; font-size: 16px; font-weight: 800; text-decoration: none; }
    .wrapper > #lk-navigation {
        display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0;
        width: min(320px, 88vw); height: 100vh; height: 100dvh; z-index: 1250;
        background: #fff; transform: translateX(-100%); visibility: hidden;
        transition: transform .2s ease, visibility .2s; overflow: hidden;
    }
    #lk-navigation .logo { flex: 0 0 auto; }
    #lk-navigation .sidebar-wrapper {
        position: relative; flex: 1 1 auto; height: auto; width: 100%;
        overflow-y: auto !important; overscroll-behavior: contain; padding-bottom: 24px;
    }
    #lk-navigation .nav a, #lk-navigation .nav .user .info > a {
        min-height: 48px; font-size: 14px; line-height: 1.5; white-space: normal;
    }
    #lk-navigation .nav > li.active > a::before,
    #lk-navigation .nav > li.active > a::after { display: none; }
    .lk-menu-close { display: block; align-self: flex-end; margin: 12px 12px 0; }
    .lk-menu-open #lk-navigation { visibility: visible; transform: translateX(0); }
    .lk-menu-open body { overflow: hidden; }
    .lk-menu-backdrop:not([hidden]) {
        display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1240;
        border: 0; border-radius: 0; background: rgba(0, 0, 0, .4); padding: 0;
    }
    .main-panel > .content, .main-panel > .content#dashBoard {
        margin: 0; padding: 24px 20px 96px; max-width: 100%;
    }
    .main-panel .content h1 { font-size: 1.8rem; line-height: 1.25; overflow-wrap: anywhere; }
    .main-panel .content h2 { font-size: 1.5rem; line-height: 1.3; }
    .card-header { display: flow-root; }
    .card-header .d-flex, .card-header.d-flex { flex-wrap: wrap; gap: 8px; }
    .main-panel .content :is(.form-control, .form-select, .ere-input, .ere-select),
    .modal :is(.form-control, .form-select), .full-page .form-control {
        min-height: 44px; height: auto; max-width: 100%; font-size: 16px; line-height: 1.5;
    }
    .main-panel .content input[type="file"] { max-width: 100%; }
    .main-panel :is(.btn, .btn-helptext, .btn-ere-next, .btn-ere-back, .btn-ere-confirm),
    .modal :is(.btn, .close, .btn-close), .full-page .btn, .swal2-styled {
        min-height: 44px; min-width: 44px; height: auto; font-size: 16px;
        white-space: normal; line-height: 1.4; overflow-wrap: anywhere;
    }
    .main-panel .btn-helptext { position: static; display: inline-flex; align-items: center; justify-content: center; }
    .main-panel :is(.lk-details-link, .ere-view-link) { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; }
    .main-panel .lk-details-link > span { display: inline; }
    .main-panel label, .modal label { line-height: 1.5; }
    .main-panel .form-check-label { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
    .main-panel :is(.btn-group, .btn-toolbar) { flex-wrap: wrap; max-width: 100%; }
    .main-panel .input-group { max-width: 100%; }
    .main-panel .input-group > .form-control { min-width: 0; }
    .main-panel .select2-container { max-width: 100%; }
    .select2-container .select2-selection--single { min-height: 44px; }
    .main-panel .pagination, .main-panel .dataTables_paginate { display: flex; flex-wrap: wrap; gap: 4px; }
    .main-panel .page-link, .main-panel .paginate_button { min-width: 44px; min-height: 44px; }
    .main-panel .dataTables_wrapper { max-width: 100%; min-width: 0; }
    .main-panel :is(.dt-container, .dataTables_scroll, .dt-scroll) { max-width: 100%; min-width: 0; }
    .main-panel .dt-layout-row { flex-wrap: wrap; gap: 12px; }
    .main-panel :is(.dt-input, .dt-paging-button) { min-height: 44px; font-size: 16px; max-width: 100%; }
    .main-panel .dt-paging { white-space: normal; }
    .main-panel .dataTables_filter input { max-width: 100%; }
    .main-panel .dataTables_length, .main-panel .dataTables_filter { margin-bottom: 12px; }
    .main-panel .dataTables_filter label { display: flex; flex-wrap: wrap; gap: 6px; }
    .main-panel .dataTables_info { white-space: normal; }
    .main-panel .topMenu { margin: 0 0 20px; padding: 0; }
    .main-panel .topMenu ul { display: flex; flex-wrap: wrap; padding: 0; }
    .main-panel .topMenu li { float: none; }
    .main-panel .topMenu a { min-height: 44px; display: flex; align-items: center; white-space: normal; }
    .modal { padding: 0 !important; }
    .modal-dialog { width: auto; max-width: calc(100% - 24px) !important; margin: 12px auto; }
    .modal-content { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
    .modal-header, .modal-footer { flex-shrink: 0; flex-wrap: wrap; gap: 8px; }
    .modal-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
    .modal-body { min-height: 0; overflow-y: auto; overflow-wrap: anywhere; }
    .modal-header :is(.close, .btn-close) { margin: 0; padding: 8px; flex-shrink: 0; }
    .swal2-popup { top: auto; max-width: calc(100vw - 24px); font-size: 16px; }
    .swal2-container p { max-width: 100%; font-size: 1rem; }
    .swal2-html-container { overflow-wrap: anywhere; }
    #addUserModal { top: 0; }
    #backoffice #footerbar { position: static; height: auto; padding: 16px; }
    #backoffice #footerbar .container-footer { display: flex; flex-wrap: wrap; gap: 12px; }
    #backoffice #footerbar label { height: auto; line-height: 1.5; }
    #token_list .alert, #editUser .form-check-label.tokenChoice { width: auto; max-width: 100%; }
    #xmlOverview table { width: 100%; }
    #mapView #map2, .main-panel .content > #map { min-height: 360px !important; height: 65vh; height: 65dvh; }
    #dashBoard .title-tag { max-width: 100%; }
    #dashBoard .title-tag h1 { height: auto; margin: 0 0 24px; text-align: left; line-height: 1.25; }
    #dashBoard .chart-row { overflow: visible; }
    #dashBoard .chart-row .card { width: 100%; }
    #dashBoard .dashboard-chart-grid .card-body { min-width: 0; }
    #myCP_details .equalHeight { height: auto !important; }
    #myCP_details .equalHeight .card { height: auto; }
    #myCP_details .abbo_details, #myCP_details ul.abbo { flex-wrap: wrap; }
    #myCP_details ul.abbo > li { max-width: 100%; }
    #myCP_details .select-group { max-width: 100%; }
    #myCP_details .totals :is(label, span) { max-width: 100%; }
    #myCP_details .myexports :is(select, input) { min-width: 0; }
    #wizardCard .nav { display: flex; flex-wrap: wrap; }
    #wizardCard .nav li { min-width: 0; flex: 1 1 160px; }
    #wizardCard .nav a { min-height: 48px; white-space: normal; }
    #wizardCard .nav-pills > li > a { color: #214b37; }
    #wizardCard .nav-pills > li > a.active { background: #287b55; color: #fff; }
    #wizardCard .card-footer { display: flow-root; }
    #wizardCard .card-footer .btn { margin: 8px 0; }
    body .main-panel .ere-page { margin: 16px auto 24px; padding: 0; }
    body .main-panel :is(.ere-card, .ere-panel) { padding: 20px; }
    body .main-panel :is(.ere-tab, .ere-label, .ere-checkbox-group label, .ere-option-card p, .ere-feature-list, .ere-info-warn, .ere-info-ok) { font-size: 1rem; }
    body .main-panel .ere-tabs { flex-wrap: wrap; }
    body .main-panel .ere-tab { min-width: 120px; min-height: 56px; }
    body .main-panel .ere-nav { gap: 12px; flex-wrap: wrap; }
    body .main-panel :is(.ere-summary-value, .ere-detail-value) { min-width: 0; overflow-wrap: anywhere; }
    body .main-panel .ere-checkbox-group input { width: 22px; height: 22px; }
    body .main-panel :is(.ere-btn, .ere-action-btn) { min-width: 44px; min-height: 44px; width: auto; height: auto; padding: 10px; font-size: 16px; white-space: normal; }
    body .main-panel .ere-actions { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
    .main-panel .lk-action-text { display: inline; margin-left: 6px; }
    .main-panel .lk-header-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; }
    .main-panel .lk-header-check > span { display: inline; }
    .main-panel :is(.text-muted, .card-category, .stats) { color: #626a65; }
    .main-panel #allFeatures { min-width: 0 !important; }
    .lk-touch-help { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; cursor: pointer; }
    .lk-help-text { display: block; flex-basis: 100%; padding: 12px; margin: 8px 0; background: #f1f8f4; border: 1px solid #b8d7c7; color: #232323; font-size: 1rem; font-weight: 400; }
    .lk-help-text[hidden] { display: none; }
}

/* Simple lists become labelled cards; financial matrices retain their column layout. */
/* Several legacy forms combine an lg width with an earlier md offset. */
@media screen and (max-width: 991.98px) {
    .main-panel .content .row > [class*="col-lg-"][class*="offset-md-"]:not([class*="col-md-"]) { margin-left: 0; }
}

@media screen and (max-width: 767.98px) {
    .lk-has-cards > .lk-table-controls { display: block; margin: 0 0 16px; font-weight: 700; }
    .lk-table-controls select { margin-top: 6px; }
    .main-panel .content table.lk-table-cards { display: block; width: 100% !important; min-width: 0 !important; border: 0; }
    .main-panel .content table.lk-table-cards > thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .main-panel .content table.lk-table-cards > :is(tbody, tfoot) { display: block; width: 100%; border: 0; }
    .main-panel .content table.lk-table-cards > :is(tbody, tfoot) > tr { display: block; margin: 0 0 16px; padding: 8px 12px; border: 1px solid #d6ded9; border-radius: 6px; background: #fff; }
    .main-panel .content table.lk-table-cards > :is(tbody, tfoot) > tr > [data-lk-label] {
        display: block !important; width: auto !important; min-width: 0 !important; max-width: 100%;
        padding: 8px 0 !important; margin: 0; text-align: left !important; white-space: normal !important;
        overflow-wrap: anywhere; border: 0 !important; border-bottom: 1px solid #edf0ee !important; font-size: 16px;
    }
    .main-panel .content table.lk-table-cards > :is(tbody, tfoot) > tr > [data-lk-label]::before {
        content: attr(data-lk-label); display: block; margin-bottom: 3px; color: #575d59; font-size: 14px; font-weight: 700;
    }
    .main-panel .content table.lk-table-cards > :is(tbody, tfoot) > tr > [data-lk-label=""]::before { display: none; }
    .main-panel .content table.lk-table-cards > :is(tbody, tfoot) > tr > .lk-has-icon::before { display: none; }
    .main-panel .content table.lk-table-cards .lk-cell-label { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; color: #575d59; font-size: 14px; font-weight: 700; }
    .main-panel .content table.lk-table-cards .lk-cell-label i { color: var(--lk-green); }
    .main-panel .content table.lk-table-cards .lk-cell-label::after { content: attr(data-lk-title); }
    .main-panel .content table.lk-table-cards > :is(tbody, tfoot) > tr > :last-child { border-bottom: 0 !important; }
    .main-panel .content table.lk-table-cards .btn { margin: 4px 4px 4px 0; }
}
@media screen and (min-width: 768px) and (max-width: 1199.98px) {
    .main-panel .content .row > .lk-form-column { width: 50%; max-width: 50%; flex: 0 0 50%; margin-left: 0; margin-bottom: 12px; }
    .lk-has-wide > .lk-table-controls { display: block; max-width: 440px; margin: 0 0 16px; font-weight: 700; }
    .main-panel .content table.lk-table-wide { display: block; width: 100% !important; min-width: 0 !important; }
    .main-panel .content table.lk-table-wide > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .main-panel .content table.lk-table-wide > :is(tbody, tfoot) { display: block; }
    .main-panel .content table.lk-table-wide > :is(tbody, tfoot) > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid #d6ded9; border-radius: 6px; }
    .main-panel .content table.lk-table-wide > :is(tbody, tfoot) > tr > [data-lk-label] { display: block !important; width: auto !important; min-width: 0 !important; padding: 8px 0 !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; border: 0 !important; font-size: 16px; }
    .main-panel .content table.lk-table-wide > :is(tbody, tfoot) > tr > [data-lk-label]::before { content: attr(data-lk-label); display: block; margin-bottom: 3px; color: #575d59; font-size: 14px; font-weight: 700; }
    .main-panel .content table.lk-table-wide > :is(tbody, tfoot) > tr > .lk-has-icon::before { display: none; }
    .main-panel .content table.lk-table-wide .lk-cell-label { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; color: #575d59; font-size: 14px; font-weight: 700; }
    .main-panel .content table.lk-table-wide .lk-cell-label i { color: var(--lk-green); }
    .main-panel .content table.lk-table-wide .lk-cell-label::after { content: attr(data-lk-title); }
    .main-panel .content table.lk-table-wide [colspan] { grid-column: 1 / -1; }
}

/* Keep the Gegevens fields aligned from tablet width upward. */
@media screen and (min-width: 768px) {
    .myData .card-body > :is(.mydata-account-row, .mydata-name-row, .mydata-address-row,
        .mydata-location-row, .mydata-contact-row, .mydata-actions-row) {
        width: calc(100% - 32px); max-width: 1400px; margin-right: auto; margin-left: auto;
    }
    .myData .card-body > :is(.mydata-name-row, .mydata-address-row,
        .mydata-location-row, .mydata-contact-row) {
        display: grid; gap: 0 16px;
    }
    .myData .card-body > :is(.mydata-account-row, .mydata-name-row, .mydata-address-row,
        .mydata-location-row, .mydata-contact-row, .mydata-actions-row) > [class*="col-"] {
        width: auto; max-width: none; min-width: 0; flex: none;
        margin-left: 0; padding-right: 0; padding-left: 0;
    }
    .myData .mydata-account-row > .col-md-10 { flex: 0 0 100%; }
    .myData .mydata-name-row { grid-template-columns: minmax(140px, .65fr) repeat(2, minmax(0, 1fr)); }
    .myData .mydata-address-row { grid-template-columns: minmax(190px, .7fr) minmax(0, 2.3fr); }
    .myData .mydata-address-row > #col-address { grid-column: 1 / -1; }
    .myData .mydata-address-row > #col-address.col-md-8 { grid-column: 2; }
    .myData .mydata-location-row { grid-template-columns: minmax(160px, .8fr) minmax(0, 1.4fr) minmax(170px, .8fr); }
    .myData .mydata-contact-row { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
    .myData .mydata-actions-row > .col-md-6 { width: 100%; max-width: 600px; }
    .myData .mydata-actions-row > .col-md-10 { width: 100%; }
}
@media screen and (min-width: 768px) and (max-width: 1100px) {
    .myData .mydata-contact-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .myData .mydata-contact-row > :first-child { grid-column: 1 / -1; }
}

@media screen and (max-width: 1199.98px) {
    .main-panel .content table.lk-cards-active.lk-table-has-controls > thead {
        display: block; position: static; clip-path: none; width: auto; height: auto; white-space: normal;
    }
    .main-panel .content table.lk-cards-active.lk-table-has-controls > thead > tr { display: flex; flex-wrap: wrap; }
    .main-panel .content table.lk-cards-active.lk-table-has-controls > thead > tr > th:not(.lk-header-action) {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
    }
    .main-panel .content table.lk-cards-active.lk-table-has-controls .lk-header-action { display: block; width: auto; min-height: 44px; }
    .main-panel .content table.lk-cards-active.lk-table-has-controls .lk-header-action input { min-width: 22px; min-height: 22px; }
}

/* Dashboard metrics use the card width instead of one long column per row. */
@media screen and (max-width: 900px) {
    #dashBoard table[data-responsive="compact"] { display: block; width: 100% !important; min-width: 0 !important; border: 0; }
    #dashBoard table[data-responsive="compact"] > thead {
        position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap;
    }
    #dashBoard table[data-responsive="compact"] > tbody { display: block; width: 100%; }
    #dashBoard table[data-responsive="compact"] > tbody > tr {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px;
        width: 100%; margin: 0 0 12px; padding: 8px 12px;
        border: 1px solid #d6ded9; border-radius: 6px; background: #fff;
    }
    #dashBoard table[data-responsive="compact"] > tbody > tr.total { border-bottom: 1px solid #d6ded9; }
    #dashBoard table[data-responsive="compact"] > tbody > tr > [data-lk-label] {
        display: block !important; width: auto !important; min-width: 0 !important; max-width: 100%;
        padding: 8px 4px !important; margin: 0; text-align: left !important;
        white-space: normal !important; overflow-wrap: anywhere;
        border: 0 !important; border-bottom: 1px solid #edf0ee !important; font-size: 16px;
    }
    #dashBoard table[data-responsive="compact"] > tbody > tr > [data-lk-label]::before {
        content: attr(data-lk-label); display: block; margin-bottom: 3px;
        color: #575d59; font-size: 14px; font-weight: 700;
    }
    #dashBoard table[data-responsive="compact"] > tbody > tr > .lk-has-icon::before { display: none; }
    #dashBoard table[data-responsive="compact"] .lk-cell-label {
        display: flex; align-items: center; gap: 6px; margin-bottom: 3px;
        color: #575d59; font-size: 14px; font-weight: 700;
    }
    #dashBoard table[data-responsive="compact"] .lk-cell-label i { color: var(--lk-green); }
    #dashBoard table[data-responsive="compact"] .lk-cell-label::after { content: attr(data-lk-title); }
    #dashBoard table[data-responsive="compact"] > tbody > tr > :first-child { grid-column: 1 / -1; }
    #dashBoard table[data-responsive="compact"] > tbody > tr > :last-child { border-bottom: 0 !important; }
    #dashBoard table[data-responsive="compact"] > tbody > tr.total > [data-lk-label="ERE"] { display: none !important; }
}
@media screen and (max-width: 767.98px) {
    #dashBoard table[data-responsive="compact"] > tbody > tr > :nth-last-child(2) { border-bottom: 0 !important; }
    #dashBoard table[data-responsive="compact"] > tbody > tr:not(.total) > .ere-cell { grid-column: 1 / -1; }
    #dashBoard #tokenSessions table[data-responsive="compact"] > tbody > tr:not(.total) > td:first-child {
        display: grid !important; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 6px;
    }
    #dashBoard #tokenSessions table[data-responsive="compact"] > tbody > tr:not(.total) > td:first-child::before {
        margin-bottom: 0;
    }
    #dashBoard #tokenSessions table[data-responsive="compact"] > tbody > tr:not(.total) > td:first-child strong {
        display: inline-flex; align-items: center; min-width: 0;
    }
    #dashBoard #tokenSessions table[data-responsive="compact"] > tbody > tr:not(.total) > td:first-child strong > br { display: none; }
    #dashBoard #cpSessions table[data-responsive="compact"] > tbody > tr:not(.total) > .ere-cell {
        display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-start;
        gap: 6px 10px;
    }
    #dashBoard #cpSessions .ere-cell > .lk-cell-label { flex: 0 0 100%; margin-bottom: 0; }
    #dashBoard #cpSessions .ere-cell > .ere-status { flex: 0 0 auto; }
    #dashBoard #cpSessions .ere-cell > a { flex: 0 0 auto; max-width: 100%; margin: 0; }
}
@media screen and (min-width: 768px) and (max-width: 900px) {
    #dashBoard table[data-responsive="compact"] > tbody > tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #dashBoard table[data-responsive="compact"] > tbody > tr > [data-lk-label="Totale laadtijd"] { grid-column: span 2; }
    #cpSessions table[data-responsive="compact"] > tbody > tr > :nth-last-child(2) { border-bottom: 0 !important; }
}

@media screen and (max-width: 767.98px) {
    .main-panel > .content, .main-panel > .content#dashBoard { padding: 20px 12px 96px; }
    .main-panel .content .row > [class*="col-md-"], .main-panel .content .row > [class*="col-lg-"] { width: 100%; max-width: 100%; flex: 0 0 100%; margin-left: 0; }
    .main-panel .content .row > .lk-form-column { width: 100%; max-width: 100%; flex: 0 0 100%; margin-left: 0; margin-bottom: 12px; }
    .main-panel .content h1 { font-size: 1.65rem; }
    .main-panel .content h2 { font-size: 1.35rem; }
    .main-panel .content :is(.card-header, .card-body, .card-footer) { padding-left: 16px; padding-right: 16px; }
    .main-panel .content :is(.card-header, .card-body, .card-footer) > :is(.pull-left, .pull-right),
    .main-panel .content > :is(.pull-left, .pull-right) { float: none !important; max-width: 100%; }
    .main-panel .content .card-header h1, .main-panel .content .card-header h2 { height: auto; line-height: 1.3; margin-bottom: 16px; }
    .main-panel .card-header > .pull-right > .btn { margin: 4px 4px 8px 0; }
    .main-panel .content :is(.d-flex, [style*="display:flex"], [style*="display: flex"]) { flex-wrap: wrap; }
    .main-panel .content :is(.form-inline, .form-group, .input-group) { min-width: 0; max-width: 100%; }
    .main-panel .content .input-group { flex-wrap: wrap; }
    .main-panel .content .input-group > .form-control { flex-basis: 150px; }
    .main-panel .topMenu li { flex: 1 1 140px; }
    .main-panel .topMenu a { padding: 10px; border: 1px solid #ddd; }
    #dashBoard .dashboard-chart-grid .card-body { height: 260px; flex-basis: 260px; }
    #myCP_details .table-responsive { padding: 0; }
    #myCP_details .equalHeight.col-md-3 { width: 100%; }
    #myCP_details .abbo_details, #myCP_details ul.abbo, #wizardCard ul.abbo { flex-direction: column; }
    #myCP_details ul.abbo > li, #wizardCard ul.abbo > li { width: 100%; max-width: 100%; margin-bottom: 16px; }
    #wizardCard .tab-pane { padding: 16px 12px; }
    #wizardCard .card-footer :is(.pull-left, .pull-right) { float: none !important; }
    #wizardCard .card-footer .btn { width: 100%; }
    #myToken_wizard #bg_token { max-width: 100%; }
    .main-panel .flip-card { width: 100%; max-width: 400px; height: auto; aspect-ratio: 8 / 5; }
    #myToken_wizard #bg_token { height: auto; aspect-ratio: 8 / 5; background-size: 100% 100%; }
    #myToken_wizard #bg_token .KeyValueSummary__item__value { top: 74%; left: 44%; width: 50%; }
    #myToken_wizard #bg_token .smaller { width: 100%; max-width: 114px; }
    #myCP_wizard #tab0 table tr td { display: block; width: 100%; }
    #myCP_wizard #tab0 table tr td .item_wrapper { width: 100%; max-width: 100%; }
    .full-page > .content#login { padding-top: 24px; }
    .full-page .content > .container { padding: 0 12px; }
    body .main-panel :is(.ere-card, .ere-panel, .machtiging-preview) { padding: 16px; }
    body .main-panel .ere-page :is(p, .ere-field-error, .charger-meta) { font-size: 1rem !important; }
    body .main-panel :is(.ere-summary-row, .ere-detail-row) { flex-direction: column; gap: 4px; font-size: 1rem; }
    body .main-panel :is(.ere-summary-label, .ere-detail-label) { width: auto !important; }
    body .main-panel .ere-option-card { min-width: 0; flex-basis: 100%; }
    body .main-panel .ere-nav > :is(button, a) { flex: 1 1 180px; text-align: center; }
    .footer .copyright { display: block; text-align: center; float: none; }
}
@media (prefers-reduced-motion: reduce) {
    #lk-navigation, .main-panel, .wrapper { transition: none !important; }
}