* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-padding-top: 88px;
}

/* Centrale agenda */
.agenda-page .admin-card {
    overflow: visible;
}

.agenda-title-row {
    align-items: center;
    border-bottom: 1px solid #eef0f2;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 18px;
}

.agenda-editor {
    border: 1px solid #e7eaed;
    margin-bottom: 24px;
}
.agenda-editor-overlay { background: rgba(255,255,255,.88); }
.agenda-editor-dialog {
    max-height: calc(100vh - 44px);
    max-width: 900px;
    position: relative;
    width: 100%;
}
.agenda-editor-dialog .agenda-editor {
    background: #fff;
    box-shadow: 0 18px 55px rgba(0,0,0,.14);
    margin: 0;
    max-height: calc(100vh - 44px);
    overflow: auto;
}
.agenda-editor-modal-close {
    align-items: center;
    background: #f5f6f7;
    border: 0;
    border-radius: 50%;
    color: #777;
    cursor: pointer;
    display: flex;
    height: 34px;
    justify-content: center;
    position: absolute;
    right: 12px;
    top: 11px;
    width: 34px;
    z-index: 2;
}
.agenda-editor-modal-close:hover { background: var(--brand-soft); color: var(--brand); }
.agenda-editor-modal-close:focus, .agenda-preview-close:focus { box-shadow: none; outline: none; }
.agenda-editor-modal-close:focus-visible, .agenda-preview-close:focus-visible { box-shadow: 0 0 0 2px var(--brand-soft); color: var(--brand); }
body.agenda-editor-open { overflow: hidden; }
.agenda-editor-dialog .agenda-editor > summary { padding-right: 58px; }

.agenda-readonly {
    align-items: flex-start;
    background: var(--brand-soft);
    border: 1px solid var(--brand-soft-border);
    display: grid;
    gap: 12px;
    grid-template-columns: 38px minmax(0, 1fr) 28px;
    margin-bottom: 22px;
    padding: 14px;
}
.agenda-readonly-icon { align-items: center; background: #fff; border-radius: 50%; color: var(--brand); display: flex; height: 36px; justify-content: center; width: 36px; }
.agenda-readonly strong, .agenda-readonly small { display: block; }
.agenda-readonly small { color: #737a7e; margin-top: 2px; }
.agenda-readonly p { margin: 9px 0 0; white-space: normal; }
.agenda-readonly-close { color: #7c8387; font-size: 16px; padding: 4px; text-align: center; }

.agenda-editor > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 15px 17px;
}

.agenda-editor > summary::-webkit-details-marker { display: none; }
.agenda-editor > summary::after {
    color: var(--brand);
    content: "\f107";
    font-family: FontAwesome;
}
.agenda-editor[open] > summary::after { content: "\f106"; }
.agenda-editor > summary span { display: flex; flex-direction: column; gap: 2px; }
.agenda-editor > summary small { color: #8b9095; font-weight: 400; }

.agenda-form {
    border-top: 1px solid #eef0f2;
    padding: 18px;
}

.agenda-quick-grid {
    align-items: end;
    display: grid;
    gap: 0 12px;
    grid-template-columns: minmax(220px, 2fr) minmax(135px, 1fr) 105px minmax(170px, 1.25fr);
}
.agenda-quick-hint { color: #969b9f; display: block; margin: -8px 0 13px; }

.agenda-more-options {
    border-top: 1px solid #edf0f2;
    margin: 2px 0 0;
}
.agenda-more-options > summary {
    align-items: center;
    color: #71777b;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    list-style: none;
    min-height: 44px;
    padding: 10px 2px;
}
.agenda-more-options > summary::-webkit-details-marker { display: none; }
.agenda-more-options > summary:focus,
.agenda-more-options > summary:focus-visible {
    border-color: var(--brand-soft-border);
    box-shadow: 0 0 0 2px var(--brand-soft);
    outline: 0;
}
.agenda-more-options > summary::after { color: var(--brand); content: "\f107"; font-family: FontAwesome; margin-left: 12px; }
.agenda-more-options[open] > summary::after { content: "\f106"; }
.agenda-more-options > summary small { color: #a0a5a8; margin-left: auto; }
.agenda-more-options-body { background: #fafbfb; border: 1px solid #edf0f2; padding: 15px; }
.agenda-advanced-grid { display: grid; gap: 0 12px; grid-template-columns: minmax(145px, 1fr) 115px minmax(260px, 2.4fr); }
.agenda-advanced-description { grid-column: 3; }

.agenda-form-grid {
    align-items: end;
    display: grid;
    gap: 0 12px;
    grid-template-columns: minmax(180px, 2fr) minmax(110px, 1fr) minmax(95px, .7fr) minmax(110px, 1fr) minmax(95px, .7fr);
}

.agenda-form-title { grid-column: 1 / -1; }
.agenda-form-location { grid-column: 1 / 3; }
.agenda-form-description { grid-column: 3 / -1; }
.agenda-all-day {
    align-items: center;
    display: flex;
    gap: 7px;
    grid-column: 1 / -1;
    margin: -3px 0 16px;
}

.agenda-time-field input:disabled { background: #f5f6f7; color: #a3a7ab; }

.agenda-visibility {
    border: 0;
    margin: 2px 0 18px;
    padding: 0;
}
.agenda-visibility legend { font-size: 14px; font-weight: 600; margin-bottom: 9px; }
.agenda-visibility-options { display: flex; flex-wrap: wrap; gap: 8px; }
.agenda-visibility-option { cursor: pointer; margin: 0; }
.agenda-visibility-option input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.agenda-visibility-option span {
    align-items: center;
    background: #f7f8f9;
    border: 1px solid #e3e6e8;
    display: flex;
    gap: 7px;
    min-height: 38px;
    padding: 8px 13px;
}
.agenda-visibility-option input:checked + span {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand);
}

.agenda-access {
    background: #fafbfb;
    border: 1px solid #e7eaed;
    margin-top: 10px;
    padding: 12px;
}
.agenda-access[hidden] { display: none; }
.agenda-access-picker { margin-top: 0; }
.agenda-access-picker .document-access-selected { min-height: 44px; }
.agenda-access-list {
    display: grid;
    gap: 5px 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 10px;
    max-height: 170px;
    overflow: auto;
}
.agenda-access-list label { align-items: center; display: flex; gap: 7px; margin: 0; min-height: 30px; }
.agenda-form-actions { align-items: center; display: flex; gap: 8px; }
.agenda-form-actions--final { margin-top: 13px; }

.agenda-toolbar {
    align-items: center;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto 40px;
    margin-bottom: 14px;
}
.agenda-toolbar h2 { font-size: 20px; font-weight: 600; margin: 0; text-align: center; }
.agenda-nav-button {
    align-items: center;
    border: 1px solid #dce1e4;
    color: var(--brand);
    display: flex;
    font-size: 21px;
    height: 38px;
    justify-content: center;
    width: 38px;
}
.agenda-nav-button:hover { background: var(--brand-soft); color: var(--brand-hover); text-decoration: none; }
.agenda-today { margin-right: 10px; }

.agenda-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 15px;
}
.agenda-filters button {
    align-items: center;
    background: #f5f5f5;
    border: 0;
    border-radius: 999px;
    color: #777;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    gap: 6px;
    min-height: 31px;
    padding: 5px 11px;
    transition: background-color .15s ease, color .15s ease;
}
.agenda-filters button > i { color: var(--brand); font-size: 13px; }
.agenda-filters button strong { color: var(--brand); font-size: 13px; font-weight: 600; }
.agenda-filters button:not(.is-active) { background: #f5f5f5; color: #999; }
.agenda-filters button.is-active,
.agenda-filters button:hover { background: var(--brand-soft); color: var(--brand); }
.agenda-filters button:focus { box-shadow: none; outline: none; }
.agenda-filters button:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }

body.agenda-preview-open { overflow: hidden; }
.agenda-preview-overlay { background: rgba(255,255,255,.88); }
.agenda-preview-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 18px 55px rgba(0,0,0,.14);
    max-height: calc(100vh - 44px);
    max-width: 470px;
    overflow: auto;
    padding: 25px;
    position: relative;
    width: 100%;
}
.agenda-preview-close {
    align-items: center;
    background: #f5f6f7;
    border: 0;
    border-radius: 50%;
    color: #777;
    cursor: pointer;
    display: flex;
    height: 34px;
    justify-content: center;
    position: absolute;
    right: 16px;
    top: 16px;
    width: 34px;
}
.agenda-preview-close:hover { background: var(--brand-soft); color: var(--brand); }
.agenda-preview-heading { align-items: center; display: flex; gap: 13px; padding-right: 42px; }
.agenda-preview-heading h2 { color: #222; font-size: 18px; font-weight: 600; line-height: 1.35; margin: 2px 0 0; }
.agenda-preview-heading small { color: var(--brand); display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.agenda-preview-icon { align-items: center; background: var(--brand-soft); border-radius: 50%; color: var(--brand); display: flex; flex: 0 0 42px; height: 42px; justify-content: center; width: 42px; }
.agenda-preview-icon img { border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--brand-soft-border); height: 48px; object-fit: cover; width: 48px; }
.agenda-preview-card.is-birthday { border-top: 4px solid var(--brand); }
.agenda-preview-card.is-birthday .agenda-preview-icon { background: transparent; flex-basis: 48px; height: 48px; width: 48px; }
.agenda-preview-birthday { align-items: center; background: var(--brand-soft); border-left: 3px solid var(--brand); color: #3f4548; display: flex; gap: 11px; margin-top: 20px; padding: 13px 15px; }
.agenda-preview-birthday > i { color: var(--brand); font-size: 19px; }
.agenda-preview-birthday strong { color: #333; font-size: 14px; font-weight: 600; }
.agenda-preview-details { border-bottom: 1px solid #edf0f2; border-top: 1px solid #edf0f2; display: grid; gap: 8px; margin-top: 20px; padding: 15px 0; }
.agenda-preview-details > div { align-items: center; color: #666; display: flex; font-size: 13px; gap: 10px; }
.agenda-preview-details > div > i { color: #979da1; text-align: center; width: 15px; }
.agenda-preview-description { color: #666; font-size: 13px; line-height: 1.55; margin: 15px 0 0; max-height: 160px; overflow: auto; white-space: pre-line; }
.agenda-preview-people { align-items: center; display: flex; margin-top: 15px; }
.agenda-preview-people[hidden] { display: none; }
.agenda-preview-avatar-stack { align-items: center; display: flex; padding-left: 7px; }
.agenda-preview-person-avatar {
    align-items: center;
    background: var(--brand-soft);
    border: 2px solid #fff;
    border-radius: 50%;
    color: var(--brand);
    display: inline-flex;
    font-size: 10px;
    font-weight: 600;
    height: 34px;
    justify-content: center;
    margin-left: -7px;
    overflow: hidden;
    width: 34px;
}
.agenda-preview-person-avatar img { height: 100%; object-fit: cover; width: 100%; }
.agenda-preview-person-avatar--more { background: #f1f3f4; color: #666; }
.agenda-preview-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.agenda-preview-actions[hidden] { display: none; }
.agenda-preview-manage-actions { display: flex; gap: 7px; }
.agenda-preview-manage-actions[hidden] { display: none; }
.agenda-preview-manage-actions form { display: inline-flex; }
.agenda-preview-source-link { align-items: center; color: var(--brand); display: inline-flex; font-size: 12px; justify-content: center; padding: 7px 5px; }
.agenda-preview-source-link:hover { color: var(--brand); text-decoration: underline; }
.agenda-preview-audit { border-top: 1px solid #edf0f2; color: #a0a5a8; display: block; font-size: 10px; line-height: 1.45; margin-top: 15px; padding-top: 11px; }
.agenda-preview-audit[hidden] { display: none; }

.agenda-calendar {
    border-left: 1px solid #e3e6e8;
    border-top: 1px solid #e3e6e8;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.agenda-weekday {
    background: #f7f8f9;
    border-bottom: 1px solid #e3e6e8;
    border-right: 1px solid #e3e6e8;
    color: #777d82;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 10px;
    text-align: center;
    text-transform: uppercase;
}
.agenda-day {
    border-bottom: 1px solid #e3e6e8;
    border-right: 1px solid #e3e6e8;
    cursor: pointer;
    min-height: 122px;
    padding: 8px;
    transition: background-color .15s ease;
}
.agenda-day:hover { background: #fbfcfc; }
.agenda-day.is-outside { background: #fafafa; }
.agenda-day.is-outside:hover { background: #f5f7f7; }
.agenda-day.is-outside .agenda-day-number { opacity: .45; }
.agenda-day-number { align-items: center; display: flex; justify-content: space-between; margin-bottom: 7px; }
.agenda-day-number span {
    align-items: center;
    display: inline-flex;
    font-size: 12px;
    height: 25px;
    justify-content: center;
    width: 25px;
}
.agenda-day-number small { color: var(--brand); font-size: 10px; }
.agenda-day.is-today .agenda-day-number span { background: var(--brand); border-radius: 50%; color: var(--brand-button-text); font-weight: 600; }
.agenda-day-events { display: flex; flex-direction: column; gap: 4px; }
.agenda-event {
    align-items: center;
    background: #f3f5f6;
    border-left: 3px solid #a1a8ad;
    color: #333;
    display: flex;
    font-size: 11px;
    gap: 5px;
    line-height: 1.25;
    min-height: 24px;
    overflow: hidden;
    padding: 4px 6px;
}
.agenda-event:hover { background: #edf0f1; color: #111; text-decoration: none; }
.agenda-event time { color: #777; flex: 0 0 auto; font-size: 10px; }
.agenda-event span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-event--afspraak { background: var(--brand-soft); border-left-color: var(--brand); }
.agenda-event--verjaardag { background: var(--brand-soft); border-left-color: var(--brand); }
.agenda-event--taak { border-left-color: #5c8790; }
.agenda-event--activiteit { border-left-color: #79995f; }
.agenda-event--verslag { border-left-color: #87749c; }
.agenda-event--helpers { border-left-color: #bd8b4c; }
.agenda-event.is-complete { opacity: .55; text-decoration: line-through; }

.agenda-list { display: none; }
.agenda-empty { border: 1px solid #e7eaed; margin: 0; padding: 18px; text-align: center; }
.settings-agenda-sources { margin-top: 4px; }

@media (max-width: 767px) {
    .agenda-title-row { align-items: flex-start; }
    .agenda-title-row .btn { align-items: center; display: inline-flex; flex: 0 0 42px; font-size: 0; height: 40px; justify-content: center; line-height: 1; padding: 0; width: 42px; }
    .agenda-title-row .btn .fa { display: block; font-size: 14px; line-height: 1; margin: 0 !important; }
    .agenda-form { padding: 13px; }
    .agenda-form-grid, .agenda-quick-grid, .agenda-advanced-grid { display: block; }
    .agenda-all-day { margin: 0 0 16px; }
    .agenda-more-options > summary { align-items: flex-start; flex-wrap: wrap; }
    .agenda-more-options > summary small { display: block; margin: 2px 20px 0 0; width: 100%; }
    .agenda-more-options-body { padding: 12px; }
    .agenda-access-list { grid-template-columns: 1fr; }
    .agenda-form-actions { flex-wrap: wrap; }
    .agenda-toolbar { grid-template-columns: 38px minmax(0, 1fr) 38px; }
    .agenda-toolbar h2 { font-size: 17px; }
    .agenda-today { display: none; }
    .agenda-filters { flex-wrap: nowrap; margin-left: -1px; overflow-x: auto; padding-bottom: 3px; }
    .agenda-filters button { flex: 0 0 auto; }
    .agenda-preview-card { max-height: calc(100vh - 28px); padding: 22px 18px 18px; }
    .agenda-preview-actions { align-items: flex-end; }
    .agenda-preview-source-link { min-height: 34px; padding: 5px; }
    .agenda-editor-overlay { padding: 10px; }
    .agenda-editor-dialog, .agenda-editor-dialog .agenda-editor { max-height: calc(100vh - 20px); }
    .agenda-calendar { display: none; }
    .agenda-list { display: block; }
    .agenda-list-date {
        align-items: baseline;
        border-bottom: 1px solid #e6e9eb;
        display: flex;
        font-size: 13px;
        gap: 6px;
        margin: 21px 0 0;
        padding: 0 2px 7px;
    }
    .agenda-list-date:first-child { margin-top: 4px; }
    .agenda-list-date span { font-weight: 600; }
    .agenda-list-item {
        align-items: center;
        border-bottom: 1px solid #eef0f2;
        color: #333;
        display: grid;
        gap: 10px;
        grid-template-columns: 38px minmax(0, 1fr) 12px;
        min-height: 64px;
        padding: 9px 3px;
    }
    .agenda-list-item:hover { color: #111; text-decoration: none; }
    .agenda-list-icon { align-items: center; background: #f2f4f5; border-radius: 50%; color: #758087; display: flex; height: 36px; justify-content: center; width: 36px; }
    .agenda-list-item--afspraak .agenda-list-icon { background: var(--brand-soft); color: var(--brand); }
    .agenda-list-item--verjaardag .agenda-list-icon { background: var(--brand-soft); color: var(--brand); }
    .agenda-list-main { display: flex; flex-direction: column; min-width: 0; }
    .agenda-list-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .agenda-list-main small { color: #81868a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .agenda-list-item.is-complete .agenda-list-main { opacity: .55; text-decoration: line-through; }
}

[id] {
    scroll-margin-top: 88px;
}

body {
    color: #555;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
}

a {
    color: var(--brand);
}

a:hover,
a:focus {
    color: var(--brand-link-hover);
}

.form-control {
    border-color: #ccc;
    height: auto;
    color: #555;
}

.form-control:focus {
    border-color: var(--brand);
    color: #555;
    box-shadow: none;
}

.form-control::placeholder {
    color: inherit;
    opacity: .5;
}

.checkbox-row {
    align-items: center;
    color: #555;
    display: inline-flex;
    gap: 8px;
    line-height: 1.4;
}

.checkbox-row input {
    accent-color: var(--brand);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand);
}

input[type="checkbox"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    box-shadow: none;
    outline: 0;
}

.settings-subsection {
    border: 1px solid #eee;
    margin-bottom: 28px;
    padding: 24px;
}

.settings-subsection:last-child {
    margin-bottom: 0;
}

.settings-tabs {
    border-bottom: 1px solid #e8ecee;
    display: flex;
    gap: 4px;
    margin: 4px 0 24px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.settings-tab {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #777;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 7px;
    padding: 11px 14px;
}

.settings-tab:hover,
.settings-tab:focus,
.settings-tab.is-active {
    color: var(--brand);
    outline: 0;
}

.settings-tab.is-active {
    border-bottom-color: var(--brand);
    font-weight: 600;
}

.settings-panel[hidden] {
    display: none;
}

.settings-panel.is-active {
    animation: settings-panel-in .16s ease-out;
}

@keyframes settings-panel-in {
    from { opacity: .45; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

.settings-panel-heading {
    align-items: center;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 18px;
}

.settings-panel-heading h4 {
    color: #222;
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 4px;
}

.settings-panel-heading p {
    color: #888;
    margin: 0;
}

.settings-module-list {
    border: 1px solid #e8ecee;
}

.settings-module-row {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #edf0f1;
    display: grid;
    gap: 12px;
    grid-template-columns: 28px 42px minmax(160px, 1fr) auto auto auto;
    padding: 14px 16px;
}

.settings-module-row:last-child {
    border-bottom: 0;
}

.settings-module-row.is-dragging {
    opacity: .45;
}

.settings-module-handle {
    color: #a5adb0;
    cursor: grab;
    text-align: center;
}

.settings-module-icon {
    align-items: center;
    background: var(--brand-soft);
    color: var(--brand);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.settings-module-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.settings-module-info strong {
    color: #333;
    font-weight: 600;
}

.settings-module-info small {
    color: #888;
    margin-top: 2px;
}

.settings-module-switch {
    align-items: center;
    display: inline-flex;
    gap: 7px;
    margin: 0;
}

.settings-module-switch input {
    accent-color: var(--brand);
}

.settings-module-move {
    display: inline-flex;
    gap: 4px;
}

.settings-status {
    background: #f1f3f4;
    color: #888;
    font-size: 12px;
    padding: 5px 9px;
}

.settings-status.is-active {
    background: var(--brand-soft);
    color: var(--brand);
}

.settings-savebar {
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid #e8ecee;
    bottom: 0;
    margin: 28px -2px -2px;
    padding: 14px 2px 2px;
    position: sticky;
    z-index: 5;
}

@media (max-width: 767px) {
    .settings-tabs {
        margin-left: -12px;
        margin-right: -12px;
        padding: 0 8px;
    }

    .settings-module-row {
        gap: 9px;
        grid-template-columns: 24px 38px minmax(0, 1fr) auto;
        padding: 12px;
    }

    .settings-module-switch,
    .settings-module-move {
        grid-column: 3 / 5;
    }

    .settings-module-row > [data-open-module] {
        grid-column: 4;
        grid-row: 1;
    }

    .settings-module-info small {
        display: none;
    }

    .settings-panel-heading {
        align-items: flex-start;
        gap: 12px;
    }
}

.g-bg-primary,
.u-btn-primary,
.badge.g-bg-primary {
    background-color: var(--brand) !important;
    color: var(--brand-button-text) !important;
}

.g-color-primary,
.card-icon,
.ok {
    color: var(--brand) !important;
}

.g-color-primary--hover:hover,
.g-color-primary--hover:focus,
.u-link-v5.g-color-primary--hover:hover,
.u-link-v5.g-color-primary--hover:focus {
    color: var(--brand-link-hover) !important;
}

.g-bg-primary--hover:hover,
.g-bg-primary--hover:focus {
    background-color: var(--brand-hover) !important;
}

.g-brd-primary,
.u-btn-outline-primary,
.button-secondary,
.icon-button {
    border-color: var(--brand) !important;
}

.g-brd-primary--hover:hover,
.g-brd-primary--hover:focus,
.g-brd-top.g-brd-primary,
.g-brd-bottom.g-brd-primary,
.g-brd-left.g-brd-primary,
.g-brd-right.g-brd-primary {
    border-color: var(--brand) !important;
}

.u-btn-primary {
    border-color: var(--brand) !important;
    color: var(--brand-button-text) !important;
}

.u-btn-primary:hover,
.u-btn-primary:focus,
.u-btn-primary:active {
    background-color: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
    color: var(--brand-button-text) !important;
}

.u-btn-outline-primary {
    color: var(--brand) !important;
}

.u-btn-outline-primary:hover,
.u-btn-outline-primary:focus,
.u-btn-outline-primary:active {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: var(--brand-button-text) !important;
}

.g-bg-gray-lineargradient {
    background: linear-gradient(to bottom, #fff 0%, #f7f7f7 100%);
    flex: 1 0 auto;
}

.va-header-spacer {
    background: #111;
    /* Reserve the closed fixed-header height before the footer script runs. */
    height: var(--header-height, 102px);
}

.u-header {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    z-index: 1030;
}

.u-header__section.g-bg-primary {
    background-color: var(--header-bg) !important;
}

.u-header__section .navbar > .container {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}

.va-navbar-brand {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    text-decoration: none;
}

.va-navbar-toggler {
    align-items: center;
    border: 0;
    color: var(--header-link-color);
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    height: 42px;
    justify-content: center;
    margin-left: auto;
    padding: 0;
    position: relative;
    flex: 0 0 42px;
    z-index: 1040;
    width: 42px;
}

.va-navbar-toggler span {
    background: currentColor;
    border-radius: 999px;
    display: block;
    height: 2px;
    transition: transform .2s ease, opacity .2s ease;
    width: 24px;
}

@media (max-width: 991.98px) {
    .u-header.u-header--sticky-top,
    .u-header.u-header--moved-up,
    .u-header.u-header--faded,
    .u-header.u-negative-top {
        bottom: auto !important;
        display: block !important;
        left: 0 !important;
        opacity: 1 !important;
        position: fixed !important;
        right: 0 !important;
        top: 0 !important;
        transform: none !important;
        visibility: visible !important;
    }

    .navbar-expand-lg .va-navbar-toggler {
        display: inline-flex !important;
        margin: 0 !important;
        opacity: 1 !important;
        position: fixed !important;
        right: 16px !important;
        top: 14px !important;
        transform: none !important;
        visibility: visible !important;
        z-index: 1000001 !important;
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg .va-navbar-toggler {
        display: none !important;
    }

    .task-toolbar .actions .document-mobile-new-action {
        display: none !important;
    }

    .task-toolbar .actions .document-print-label {
        display: inline !important;
    }
}

.va-navbar-toggler:hover,
.va-navbar-toggler:focus {
    color: var(--header-link-hover);
    outline: none;
}

.va-navbar-toggler.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.va-navbar-toggler.is-open span:nth-child(2) {
    opacity: 0;
}

.va-navbar-toggler.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.u-header__section .navbar-nav > .nav-item > .nav-link,
.u-header__section .navbar-nav > .nav-item > details > summary.nav-link {
    color: var(--header-link-color) !important;
}

.u-header__section .navbar-nav > .nav-item > .nav-link:hover,
.u-header__section .navbar-nav > .nav-item > .nav-link:focus,
.u-header__section .navbar-nav > .nav-item > details > summary.nav-link:hover,
.u-header__section .navbar-nav > .nav-item > details > summary.nav-link:focus {
    color: var(--header-link-hover) !important;
}

.va-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 60px;
    height: 60px;
    background: transparent;
    color: var(--header-link-color);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .03em;
}

.va-brand-logo-wrap {
    background: transparent;
    overflow: hidden;
}

.va-brand-logo-wrap img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.va-brand-default-mark {
    color: var(--header-link-color);
    font-size: 30px;
    transition: color .2s ease;
}

.va-navbar-brand:hover .va-brand-default-mark,
.va-navbar-brand:focus .va-brand-default-mark {
    color: var(--header-link-hover);
}

.va-account-menu {
    position: relative;
}

.va-account-menu details {
    position: relative;
}

.va-account-menu summary {
    list-style: none;
    cursor: pointer;
}

.va-account-menu summary::-webkit-details-marker {
    display: none;
}

.va-account-menu .hs-sub-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 100;
    background: #fff;
}

.va-account-menu details[open] .hs-sub-menu {
    display: block;
}

.va-account-menu .dropdown-item {
    padding: 0;
}

.va-account-menu .dropdown-item .nav-link {
    display: block;
    padding: 9px 16px;
    color: #777;
    text-transform: none;
}

.va-account-menu .dropdown-item .nav-link:hover,
.va-account-menu .dropdown-item .nav-link:focus {
    color: #000;
}

.footer-contact {
    margin-bottom: 0;
}

.footer-contact a {
    color: rgba(255, 255, 255, .85);
}

.footer-contact a:hover,
.footer-contact a:focus {
    color: #fff;
    text-decoration: none;
}

.footer-contact .icoontjes {
    color: var(--brand);
    margin-right: 8px;
}

.footer-socials a {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    color: rgba(255, 255, 255, .85);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
    width: 38px;
}

.footer-socials a:hover,
.footer-socials a:focus {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .75);
    color: #fff;
    text-decoration: none;
}

.panel {
    background: #fff;
    border: 1px solid #eee;
    padding: 30px;
    box-shadow: 0 10px 6px -6px rgba(0, 0, 0, .2);
}

.panel + .panel,
.grid + .panel,
.panel + .grid {
    margin-top: 30px;
}

.dashboard-modules {
    margin: 0 0 30px;
}

.dashboard-module-grid {
    margin-bottom: -22px;
}

.dashboard-module-column {
    margin-bottom: 22px;
}

.dashboard-card {
    background: #fff;
    border: 1px solid #e9e9e9;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .06);
    color: #222;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 150px;
    overflow: hidden;
    padding: 26px;
    position: relative;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.dashboard-card::after {
    background: var(--brand-soft);
    border-radius: 50%;
    content: '';
    height: 180px;
    opacity: .55;
    position: absolute;
    right: -75px;
    top: -90px;
    transition: transform .25s ease;
    width: 180px;
}

.dashboard-card:hover,
.dashboard-card:focus {
    border-color: var(--brand-soft-border);
    box-shadow: 0 11px 21px rgba(0, 0, 0, .09);
    color: #222;
    outline: none;
    text-decoration: none;
    transform: translateY(-2px);
}

.dashboard-card:hover::after,
.dashboard-card:focus::after {
    transform: scale(1.04);
}

.dashboard-card__icon {
    align-items: center;
    background: var(--brand);
    border-radius: 2px;
    box-shadow: 0 8px 18px var(--brand-soft-border);
    color: var(--brand-button-text);
    display: inline-flex;
    flex: 0 0 54px;
    font-size: 23px;
    height: 54px;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    width: 54px;
    z-index: 1;
}

.dashboard-card__body {
    display: block;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.dashboard-card__body strong {
    color: #222;
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.dashboard-card__arrow {
    align-items: center;
    border: 1px solid var(--brand-soft-border);
    border-radius: 50%;
    color: var(--brand);
    display: inline-flex;
    font-size: 12px;
    height: 32px;
    justify-content: center;
    position: absolute;
    right: 22px;
    top: 22px;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
    width: 32px;
    z-index: 2;
}

.dashboard-card:hover .dashboard-card__arrow,
.dashboard-card:focus .dashboard-card__arrow {
    background: var(--brand);
    color: var(--brand-button-text);
    transform: translateX(1px);
}

.dashboard-overview {
    padding: 20px 28px 28px;
}

.dashboard-overview-title {
    color: #000;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 20px;
}

.dashboard-overview > .row {
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -25px;
}

.dashboard-overview > .row > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

.overview-card {
    align-items: flex-start;
    border: 1px solid #eee;
    display: flex;
    gap: 18px;
    height: 100%;
    padding: 22px;
}

.overview-card__icon {
    align-items: center;
    background: var(--brand-soft);
    border-radius: 50%;
    color: var(--brand);
    display: inline-flex;
    flex: 0 0 46px;
    font-size: 20px;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.overview-card h4 {
    color: #222;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px;
}

.overview-card strong {
    color: #222;
    display: block;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 5px;
}

.overview-card span {
    color: #777;
}

.overview-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.overview-list li {
    align-items: center;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 8px 0;
}

.overview-list li:last-child {
    padding-bottom: 0;
}

.overview-list b {
    color: #333;
    font-weight: 600;
}

.overview-progress {
    background: #eee;
    height: 6px;
    margin-top: 14px;
    overflow: hidden;
    width: 100%;
}

.overview-progress span {
    background: var(--brand);
    display: block;
    height: 100%;
}

.dashboard-inbox {
    box-shadow: none;
}

.dashboard-inbox > summary,
.dashboard-inbox-header {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 20px 28px;
}

.dashboard-inbox > summary::-webkit-details-marker,
.dashboard-inbox-item summary::-webkit-details-marker {
    display: none;
}

.dashboard-inbox h3 {
    color: #000;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.dashboard-inbox-header-actions {
    align-items: center;
    display: inline-flex;
    gap: 12px;
    margin-left: auto;
}

.dashboard-inbox-count {
    align-items: center;
    background: #f5f5f5;
    border-radius: 999px;
    color: #777;
    display: inline-flex;
    font-size: 12px;
    gap: 6px;
    padding: 5px 11px;
    text-decoration: none;
}

.dashboard-compose-nav {
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.dashboard-inbox-count:hover,
.dashboard-inbox-count:focus,
.dashboard-inbox-count.is-active {
    background: var(--brand-soft);
    color: var(--brand);
    text-decoration: none;
}

.dashboard-inbox-count strong {
    color: var(--brand);
    font-size: 13px;
    font-weight: 600;
}

.dashboard-inbox-count > i {
    color: var(--brand);
    font-size: 13px;
}

.dashboard-inbox-count.has-unread {
    background: var(--brand);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    color: var(--brand-button-text);
}

.dashboard-inbox-count.has-unread > i,
.dashboard-inbox-count.has-unread strong {
    color: var(--brand-button-text);
}

.dashboard-inbox-new-alert {
    align-items: center;
    background: var(--brand);
    border-radius: 999px;
    color: var(--brand-button-text);
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 7px;
    margin-left: 14px;
    padding: 6px 10px;
}

.dashboard-inbox-new-alert[hidden] {
    display: none;
}

.dashboard-inbox-chevron {
    color: #888;
    font-size: 14px;
    margin-left: 12px;
    transition: transform .18s ease;
}

.dashboard-inbox:not([open]) .dashboard-inbox-chevron {
    transform: rotate(180deg);
}

.dashboard-inbox-content {
    border-top: 1px solid #eee;
    padding: 18px 28px 24px;
}

.dashboard-inbox-mode-title {
    align-items: center;
    color: #222;
    display: flex;
    font-size: 16px;
    font-weight: 600;
    gap: 9px;
    margin: 0 0 16px;
}

.dashboard-inbox-mode-title i {
    color: var(--brand);
}

.dashboard-inbox-toolbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    min-height: 32px;
}

.dashboard-inbox-toolbar[hidden] {
    display: none !important;
}

.dashboard-inbox-toolbar:empty {
    display: none;
}

.dashboard-inbox-toolbar > span {
    color: #777;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.dashboard-inbox-select-all {
    align-items: center;
    color: #777;
    display: inline-flex;
    font-size: 13px;
    gap: 9px;
    min-height: 32px;
}

.dashboard-inbox-select-all input {
    margin: 0;
}

.dashboard-inbox-selection-delete[hidden] {
    display: inline-flex !important;
    pointer-events: none;
    visibility: hidden;
}

.dashboard-inbox-list {
    display: block;
}

.dashboard-inbox-item {
    background: #fff;
    border: 0;
    border-bottom: 1px solid #eee;
    transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
}

.dashboard-inbox-item[open] {
    background: #f8f8f8;
    border-bottom-color: transparent;
    margin: 10px -12px 16px;
    padding: 0 12px 4px;
}

.dashboard-inbox-item[open] + .dashboard-inbox-item {
    border-top: 1px solid #eee;
}

.dashboard-inbox-item.is-removing,
.superadmin-user-row.is-removing {
    opacity: 0;
    transform: translateX(10px);
    transition: opacity .18s ease, transform .18s ease;
}

.dashboard-inbox-item summary {
    align-items: center;
    cursor: pointer;
    display: grid;
    gap: 14px;
    grid-template-columns: 28px minmax(220px, 280px) minmax(160px, 230px) minmax(0, 1fr) auto;
    list-style: none;
    padding: 12px 0;
}

.dashboard-inbox-check {
    grid-column: 1;
    justify-self: center;
}

.dashboard-inbox-person {
    align-items: center;
    display: flex;
    gap: 12px;
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
}

.dashboard-inbox-avatar {
    align-items: center;
    background: var(--brand-soft);
    border: 1px solid var(--brand-soft-border);
    border-radius: 50%;
    color: var(--brand);
    display: inline-flex;
    flex: 0 0 42px;
    font-size: 15px;
    font-weight: 600;
    height: 42px;
    justify-content: center;
    overflow: hidden;
    width: 42px;
}

.dashboard-inbox-avatar img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.dashboard-inbox-person-text {
    display: block;
    min-width: 0;
    overflow: hidden;
}

.dashboard-inbox-person-text strong,
.dashboard-inbox-person-text small,
.dashboard-inbox-subject,
.dashboard-inbox-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-inbox-person-text strong {
    color: #111;
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.dashboard-inbox-person-text small {
    color: #999;
    display: block;
    font-size: 11px;
    line-height: 1.35;
    margin-top: 3px;
}

.dashboard-inbox-subject {
    align-self: start;
    color: #111;
    font-size: 14px;
    font-weight: 700;
    grid-column: 3;
    line-height: 1.25;
    min-width: 0;
    padding-top: 3px;
}

.dashboard-inbox-preview {
    align-self: start;
    color: #999;
    font-size: 13px;
    font-weight: 400;
    grid-column: 4;
    line-height: 1.25;
    padding-top: 3px;
}

.dashboard-inbox-item.is-read .dashboard-inbox-person-text strong,
.dashboard-inbox-item.is-read .dashboard-inbox-subject {
    color: #666;
    font-weight: 400;
}

.dashboard-inbox-item.is-read .dashboard-inbox-preview {
    color: #aaa;
}

.dashboard-inbox-item[open] .dashboard-inbox-preview {
    display: none;
}

.dashboard-inbox-actions {
    align-items: center;
    display: inline-flex;
    grid-column: 5;
    justify-self: end;
}

.dashboard-inbox-row-chevron {
    color: #888;
    display: inline-flex;
    transition: transform .18s ease;
}

.dashboard-inbox-item[open] .dashboard-inbox-row-chevron {
    transform: rotate(180deg);
}

.dashboard-inbox-actions .leden-actieknop {
    background: transparent !important;
    border: 0 !important;
    color: #888 !important;
    height: 28px;
    padding: 0;
    width: 28px;
}

.dashboard-inbox-actions .leden-actieknop:hover,
.dashboard-inbox-actions .leden-actieknop:focus {
    color: var(--brand) !important;
}

.dashboard-inbox-body {
    color: #555;
    display: grid;
    gap: 14px;
    grid-template-columns: 28px minmax(220px, 280px) minmax(160px, 230px) minmax(0, 1fr) auto;
    line-height: 1.55;
    padding: 0 0 22px;
}

.dashboard-inbox-open-card {
    background: #fff;
    border: 1px solid #eee;
    color: #555;
    font-size: 14px;
    grid-column: 2 / 5;
    min-height: 74px;
    padding: 22px 24px;
}

.dashboard-inbox-open-content p {
    margin: 0;
}

.dashboard-inbox-thread-message {
    display: flex;
    gap: 14px;
    padding: 0 0 18px;
}

.dashboard-inbox-thread-message + .dashboard-inbox-thread-message {
    border-top: 1px solid #eee;
    padding-top: 18px;
}

.dashboard-inbox-thread-message:last-child {
    padding-bottom: 0;
}

.dashboard-inbox-thread-avatar {
    flex: 0 0 38px;
    height: 38px;
    width: 38px;
}

.dashboard-inbox-thread-main {
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-inbox-thread-meta {
    align-items: baseline;
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.dashboard-inbox-thread-meta strong {
    color: #111;
    font-size: 14px;
    font-weight: 700;
}

.dashboard-inbox-thread-meta small {
    color: #999;
    font-size: 12px;
}

.dashboard-inbox-body-actions {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    grid-column: 2 / 5;
}

.dashboard-inbox-action-icon {
    align-items: center;
    background: transparent;
    border: 0;
    color: #888;
    cursor: pointer;
    display: inline-flex;
    font-size: 15px;
    height: 28px;
    justify-content: center;
    padding: 0;
    text-decoration: none;
    width: 28px;
}

.dashboard-inbox-action-icon:hover,
.dashboard-inbox-action-icon:focus {
    color: var(--brand);
    outline: none;
    text-decoration: none;
}

.dashboard-inbox-reply {
    grid-column: 2 / 5;
    margin-top: 4px;
}

.dashboard-inbox-reply[hidden] {
    display: none !important;
}

.dashboard-inbox-reply-subject {
    align-items: baseline;
    color: #999;
    display: flex;
    font-size: 12px;
    gap: 8px;
    margin-bottom: 7px;
}

.dashboard-inbox-reply-subject strong {
    color: #555;
    font-size: 13px;
    font-weight: 600;
}

.dashboard-inbox-reply textarea {
    font-size: 14px;
    min-height: 96px;
    resize: vertical;
}

.dashboard-inbox-reply-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.dashboard-inbox-empty {
    color: #999;
    font-size: 13px;
    padding: 18px 0;
}

.dashboard-inbox-sent-meta {
    color: #aaa;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    font-size: 11px;
    gap: 2px;
    line-height: 1.35;
    padding: 4px 0 0;
}

.dashboard-inbox-trash-note {
    align-items: center;
    background: #fafafa;
    border: 1px solid #eee;
    color: #777;
    display: flex;
    font-size: 13px;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 12px 14px;
}

.dashboard-compose {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 18px;
    padding: 0 0 16px;
}

.dashboard-compose[hidden] {
    display: none !important;
}

.dashboard-compose-recipient-field {
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: text;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 38px;
    padding: 4px 8px;
    position: relative;
}

.dashboard-compose-token-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.dashboard-compose-token-row:empty {
    display: none;
}

.dashboard-compose-token {
    align-items: center;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 999px;
    color: #444;
    display: inline-flex;
    font-size: 12px;
    gap: 7px;
    line-height: 1.2;
    padding: 4px 8px;
}

.dashboard-compose-token button {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

.dashboard-compose-mention-tools {
    margin-bottom: 0;
}

.dashboard-compose-mention-tools .mention-hint {
    display: none;
}

.dashboard-compose-recipient-input {
    border: 0 !important;
    box-shadow: none !important;
    flex: 1 1 180px;
    height: 28px;
    line-height: 20px;
    min-height: 28px;
    min-width: 160px;
    overflow: hidden;
    padding: 4px 0 !important;
    resize: none;
}

.dashboard-compose-recipient-input:focus {
    border: 0 !important;
    box-shadow: none !important;
}

.dashboard-compose-suggestions {
    left: 0;
    top: 28px;
}

@media (max-width: 575.98px) {
    .dashboard-inbox > summary,
    .dashboard-inbox-header {
        align-items: center;
        display: grid;
        gap: 14px 10px;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 18px;
    }

    .dashboard-inbox h3 {
        font-size: 1.25rem;
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-inbox-header-actions {
        display: grid;
        gap: 8px;
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        justify-self: center;
        margin-left: 0;
        max-width: 420px;
        width: 100%;
    }

    .dashboard-inbox-new-alert {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: start;
        margin-left: 0;
    }

    .dashboard-inbox.has-unread .dashboard-inbox-header-actions {
        grid-row: 3;
    }

    .dashboard-inbox-count {
        border-radius: 12px;
        height: 60px;
        justify-content: center;
        padding: 0;
        position: relative;
        width: 100%;
    }

    .dashboard-inbox-count-label {
        display: none;
    }

    .dashboard-inbox-count > i {
        font-size: 22px;
    }

    .dashboard-inbox-count strong {
        align-items: center;
        background: var(--brand);
        border: 2px solid #fff;
        border-radius: 999px;
        color: var(--brand-button-text);
        display: flex;
        font-size: 10px;
        font-weight: 700;
        height: 20px;
        justify-content: center;
        line-height: 1;
        min-width: 20px;
        padding: 0 4px;
        position: absolute;
        right: 5px;
        top: 5px;
    }

    .dashboard-inbox-count.has-unread strong {
        background: #fff;
        border-color: var(--brand);
        color: var(--brand);
    }

    .dashboard-inbox-chevron {
        align-self: center;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        margin-left: 0;
    }

    .dashboard-inbox-content {
        padding: 18px 18px 22px;
    }

    .dashboard-inbox-trash-note {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-inbox-trash-note .btn {
        padding: 10px 12px;
        white-space: normal;
        width: 100%;
    }

    .dashboard-inbox-toolbar {
        align-items: flex-start;
        gap: 12px;
    }

    .dashboard-inbox-item[open] {
        margin: 8px -8px 14px;
        padding: 0 8px 4px;
    }

    .dashboard-inbox-item summary {
        gap: 8px;
        grid-template-columns: 24px minmax(0, 1fr) auto;
    }

    .dashboard-inbox-person {
        grid-column: 2;
    }

    .dashboard-inbox-subject {
        grid-column: 2;
    }

    .dashboard-inbox-preview {
        display: none;
    }

    .dashboard-inbox-actions {
        grid-column: 3;
        grid-row: 1 / span 2;
        justify-content: flex-start;
    }

    .dashboard-inbox-body {
        display: block;
        padding-bottom: 20px;
        padding-left: 32px;
        padding-right: 0;
    }

    .dashboard-inbox-open-card {
        min-height: 72px;
        padding: 18px;
    }

    .dashboard-inbox-body-actions {
        display: flex;
        flex-wrap: wrap;
        margin-top: 12px;
    }

    .dashboard-inbox-reply {
        margin-top: 12px;
    }

}

.panel-narrow {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.auth-panel {
    max-width: 460px;
    padding: 34px;
}

.auth-panel h1 {
    margin-bottom: 26px;
}

.auth-form .form-group {
    margin-bottom: 20px;
}

.auth-form label {
    color: #333;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.auth-remember {
    margin: 4px 0 24px;
}

.auth-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
}

.auth-link {
    color: var(--brand);
    font-size: 13px;
    text-decoration: none;
}

.auth-link:hover,
.auth-link:focus {
    color: var(--brand-hover);
    text-decoration: underline;
}

.panel h1 {
    margin-top: 0;
    color: #000;
    font-size: 1.25rem;
    font-weight: 600;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.card {
    display: block;
    min-height: 124px;
    padding: 30px;
    background: #fff;
    border: 1px solid #eee;
    color: #111;
    text-decoration: none;
    box-shadow: 0 10px 6px -6px rgba(0, 0, 0, .2);
}

.card:hover,
.card:focus {
    color: #111;
    text-decoration: none;
}

.card-icon {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 32px;
    line-height: 1;
}

.card h2 {
    margin: 0;
    color: #000;
    font-size: 1.25rem;
    font-weight: 600;
}

.card p {
    margin-top: 8px;
    margin-bottom: 0;
}

.form-row {
    margin-bottom: 1rem;
}

.form-row label {
    display: block;
    margin-bottom: .5rem;
    color: #555;
    font-weight: 400;
}

.form-row input,
.form-row select,
.form-row textarea {
    display: block;
    width: 100%;
    min-height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    border: 1px solid #ccc;
    background: #fff;
    color: #555;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    border-color: var(--brand);
    outline: 0;
    box-shadow: none;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
    color: inherit;
    opacity: .5;
}

.form-row input:disabled,
.form-row select:disabled,
.form-row textarea:disabled,
.form-row input[readonly],
.form-row select[readonly],
.form-row textarea[readonly] {
    background-color: #e9ecef;
    color: #6c757d;
}

.form-row input[type="search"] {
    max-width: 420px;
}

.button,
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid var(--brand);
    color: var(--brand-button-text);
    background: var(--brand);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.button {
    padding: 9px 20px;
}

.button:hover,
.button:focus,
.icon-button-primary:hover,
.icon-button-primary:focus {
    border-color: var(--brand-hover) !important;
    background: var(--brand-hover) !important;
    color: var(--brand-button-text);
    outline: 0;
    text-decoration: none;
}

.button-secondary,
.icon-button {
    background: #fff;
    color: var(--brand);
}

.button-secondary:hover,
.button-secondary:focus,
.icon-button:hover,
.icon-button:focus {
    background: var(--brand);
    color: var(--brand-button-text);
    outline: 0;
    text-decoration: none;
}

.sr-only {
    clip: rect(0, 0, 0, 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.profile-photo-editor {
    align-items: flex-start;
    display: inline-flex;
    flex-direction: column;
    gap: 7px;
}

.profile-photo-editor__frame {
    display: inline-flex;
    position: relative;
}

.profile-photo-editor__preview {
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
    position: relative;
}

.profile-photo-editor__preview::before,
.profile-photo-editor__preview::after {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 5;
}

.profile-photo-editor__preview::before {
    background: rgba(34, 34, 34, .84);
    border-radius: 4px;
    color: #fff;
    content: attr(data-tooltip);
    font-size: 11px;
    font-weight: 400;
    left: calc(100% + 10px);
    line-height: 1.25;
    padding: 4px 7px;
    top: 50%;
    transform: translate(-2px, -50%);
    white-space: nowrap;
}

.profile-photo-editor__preview::after {
    border-color: transparent rgba(34, 34, 34, .84) transparent transparent;
    border-style: solid;
    border-width: 4px 4px 4px 0;
    content: "";
    left: calc(100% + 6px);
    top: 50%;
    transform: translate(-2px, -50%);
}

.profile-photo-editor__preview:hover::before,
.profile-photo-editor__preview:hover::after {
    opacity: .96;
    transform: translate(0, -50%);
}

.profile-photo-editor__avatar {
    align-items: center;
    background: var(--brand-soft);
    border: 1px solid var(--brand-soft-border);
    border-radius: 50%;
    color: var(--brand);
    display: inline-flex;
    font-size: 28px;
    font-weight: 500;
    height: 86px;
    justify-content: center;
    overflow: hidden;
    width: 86px;
}

.profile-photo-editor__avatar img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.profile-photo-editor__camera {
    align-items: center;
    background: var(--brand);
    border: 2px solid #fff;
    border-radius: 50%;
    bottom: 2px;
    color: var(--brand-button-text);
    display: inline-flex;
    font-size: 13px;
    height: 28px;
    justify-content: center;
    position: absolute;
    right: 2px;
    transition: background-color .18s ease, transform .18s ease;
    width: 28px;
}

.profile-photo-editor__preview:hover .profile-photo-editor__camera,
.profile-photo-editor__preview:focus-within .profile-photo-editor__camera {
    background: var(--brand-hover);
    transform: scale(1.05);
}

.profile-photo-editor__file,
.profile-photo-editor__remove input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.profile-photo-editor__meta {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.profile-photo-editor__meta strong {
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.profile-photo-editor__meta .muted {
    font-size: 12px;
    line-height: 1.4;
}

.profile-photo-editor__remove {
    cursor: pointer;
    display: inline-flex;
    left: 2px;
    margin: 0;
    position: absolute;
    top: 2px;
    z-index: 2;
}

.profile-photo-editor__remove[hidden] {
    display: none;
}

.profile-photo-editor__remove span {
    align-items: center;
    background: rgba(255, 255, 255, .95);
    border: 1px solid var(--brand-soft-border);
    border-radius: 50%;
    color: var(--brand);
    display: inline-flex;
    font-size: 12px;
    font-weight: 500;
    height: 28px;
    justify-content: center;
    min-height: 28px;
    padding: 0;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
    width: 28px;
}

.profile-photo-editor__remove:hover span,
.profile-photo-editor__remove:focus-within span,
.profile-photo-editor__remove input:checked + span {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-button-text);
}

.profile-photo-editor__status {
    font-size: 12px;
    line-height: 1.4;
}

.profile-photo-editor__status[hidden] {
    display: none;
}

.profile-photo-remove-button {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    margin-bottom: 0;
}

.profile-photo-remove-button input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.profile-photo-remove-button span {
    align-items: center;
    background: #fff;
    border: 1px solid var(--brand);
    border-radius: 4px;
    color: var(--brand);
    display: inline-flex;
    font-size: 13px;
    font-weight: 500;
    min-height: 34px;
    padding: 6px 11px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.profile-photo-remove-button:hover span,
.profile-photo-remove-button:focus-within span,
.profile-photo-remove-button input:checked + span {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-button-text);
}

.button-danger {
    border-color: var(--brand-danger) !important;
    background: var(--brand-danger);
    color: #fff !important;
}

.button-danger:hover,
.button-danger:focus {
    border-color: var(--brand-danger-hover) !important;
    background: var(--brand-danger-hover);
    color: #fff !important;
}

.icon-button {
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 15px;
}

.icon-button-primary {
    background: var(--brand);
    color: var(--brand-button-text);
}

.alert {
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 0 !important;
    border-left: 4px solid var(--brand) !important;
    background: var(--brand-soft) !important;
    color: #555 !important;
    transition: opacity .35s ease, transform .35s ease;
}

.alert-success,
.alert-info {
    border-left-color: var(--brand) !important;
    background: var(--brand-soft) !important;
    color: #555 !important;
}

.alert a,
.alert-success a,
.alert-info a {
    color: var(--brand) !important;
    font-weight: 600;
}

.alert-error,
.alert-danger {
    border-left-color: var(--brand-danger) !important;
    background: var(--brand-danger-soft) !important;
    color: #555 !important;
}

.alert.is-dismissing {
    opacity: 0;
    transform: translateY(-4px);
}

.muted {
    color: #777;
    font-size: 13px;
}

.superadmin-panel .document-search {
    max-width: none;
}

.superadmin-page {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.superadmin-user-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.superadmin-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid #eee;
    background: #fff;
}

.superadmin-user-info {
    min-width: 0;
}

.superadmin-user-info strong {
    display: block;
    color: #222;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.superadmin-user-info small {
    display: block;
    margin-top: 3px;
}

.superadmin-user-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 7px;
    padding: 2px 7px;
    border: 1px solid var(--brand-border);
    border-radius: 4px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 11px;
    line-height: 1.3;
}

.superadmin-user-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .superadmin-user-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .superadmin-user-actions {
        justify-content: flex-start;
        width: 100%;
    }
}

.search-context {
    display: block;
    margin-top: 4px;
    color: #aaa;
    font-size: 12px;
    line-height: 1.35;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.page-actions {
    justify-content: space-between;
    margin-bottom: 20px;
}

.search-row {
    max-width: 420px;
    margin-bottom: 25px;
}

.inline-add-form {
    display: grid;
    grid-template-columns: minmax(0, 420px) 38px;
    align-items: end;
    gap: 12px;
    max-width: 470px;
    margin-bottom: 22px;
}

.inline-add-form .form-row {
    margin-bottom: 0;
}

.member-list {
    display: grid;
    gap: 42px;
    margin-top: 22px;
}

.member-group {
    display: grid;
    gap: 12px;
}

.member-group + .member-group {
    margin-top: 48px;
}

.member-group-header {
    align-items: center;
    border-bottom: 1px solid var(--brand);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding-bottom: 12px;
}

.member-group-print-actions {
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
}

.member-group-icon-button {
    align-items: center;
    display: inline-flex !important;
    height: 34px;
    justify-content: center;
    min-width: 34px;
    padding: 0 !important;
    width: 34px;
}

.member-group-icon-button i {
    margin-right: 0 !important;
}

.member-print-menu {
    display: inline-block;
    position: relative;
}

.member-print-menu > summary {
    align-items: center;
    display: inline-flex;
    list-style: none;
}

.member-print-menu > summary::-webkit-details-marker {
    display: none;
}

.member-print-menu > summary::after {
    content: "\f107";
    font-family: FontAwesome;
    font-size: 12px;
    margin-left: 8px;
}

.member-print-menu > summary.member-group-icon-button::after {
    display: none;
}

.member-print-menu-options {
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
    min-width: 132px;
    padding: 6px;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
}

.member-print-menu-options a {
    color: #555;
    display: block;
    font-size: 13px;
    padding: 8px 10px;
    text-decoration: none;
}

.member-print-menu-options a:hover,
.member-print-menu-options a:focus {
    background: var(--brand-soft);
    color: var(--brand);
    text-decoration: none;
}

.member-group-title {
    color: #111;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.leden-zoekveld {
    max-width: 420px;
}

.leden-actieknop {
    align-items: center;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    line-height: 1;
    min-width: 38px;
    padding-left: 0;
    padding-right: 0;
    width: 38px;
}

.leden-actieknop .fa {
    margin: 0;
}

.member-accordion {
    border: 1px solid #eee;
    background: #fff;
    overflow-anchor: none;
}

.member-accordion + .member-accordion {
    margin-top: 12px;
}

.member-accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px;
    cursor: pointer;
    list-style: none;
    min-width: 0;
}

.member-accordion:focus,
.member-accordion:focus-visible,
.member-accordion > summary:focus,
.member-accordion > summary:focus-visible {
    box-shadow: none !important;
    outline: 0 !important;
}

.member-accordion > summary:focus-visible {
    background: var(--brand-soft);
}

.member-type-choice {
    margin-bottom: 18px;
}

.member-type-choice .check-line {
    margin-right: 18px;
}

.member-sort-handle {
    align-items: center;
    background: var(--brand);
    border-radius: 50%;
    color: #fff;
    cursor: grab;
    display: inline-flex;
    flex: 0 0 32px;
    font-size: 13px;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.member-sort-handle:active {
    cursor: grabbing;
}

.member-mobile-order-actions {
    display: none;
}

.member-mobile-order-button {
    align-items: center;
    background: #fff;
    border: 1px solid var(--brand);
    color: var(--brand);
    cursor: pointer;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 30px;
}

.member-mobile-order-button:disabled {
    cursor: default;
    opacity: .3;
}

.member-accordion.is-dragging {
    opacity: .55;
}

.member-contact-avatar {
    align-items: center;
    background: var(--brand-soft);
    border: 1px solid var(--brand-soft-border);
    border-radius: 50%;
    color: var(--brand);
    display: inline-flex;
    flex: 0 0 38px;
    font-weight: 600;
    height: 38px;
    justify-content: center;
    overflow: hidden;
    width: 38px;
}

.member-contact-avatar img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.member-contact-avatar-large {
    flex: 0 0 82px;
    font-size: 28px;
    height: 82px;
    width: 82px;
}

.account-photo-card {
    align-items: center;
    border-bottom: 1px solid #eee;
    display: flex;
    gap: 18px;
    margin-bottom: 24px;
    padding-bottom: 22px;
}

.account-photo-fields {
    flex: 1 1 auto;
    min-width: 0;
}

.account-photo-fields label:first-child {
    display: block;
    margin-bottom: 8px;
}

.member-photo-trigger {
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 auto;
    position: relative;
}

.member-photo-trigger[aria-disabled="false"] {
    cursor: pointer;
}

.member-photo-static {
    cursor: pointer;
}

.member-photo-static::after {
    display: none !important;
}

.member-photo-trigger[aria-disabled="false"]:hover .member-contact-avatar,
.member-photo-trigger[aria-disabled="false"]:focus .member-contact-avatar {
    box-shadow: 0 0 0 3px var(--brand-soft-border);
}

.member-photo-trigger[aria-disabled="false"]::after {
    align-items: center;
    background: var(--brand);
    border-radius: 50%;
    bottom: 2px;
    color: #fff;
    content: "\f002";
    display: inline-flex;
    font-family: FontAwesome;
    font-size: 9px;
    height: 20px;
    justify-content: center;
    opacity: .9;
    position: absolute;
    right: 2px;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
    width: 20px;
}

.member-photo-trigger[aria-disabled="false"]:hover::after,
.member-photo-trigger[aria-disabled="false"]:focus::after {
    opacity: 1;
    transform: translateY(0);
}

.member-summary-main {
    flex: 1 1 auto;
    margin-right: auto;
    min-width: 0;
}

.member-summary-main strong {
    display: block;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-summary-contact-person {
    color: #777;
    display: block;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-status-icons {
    align-items: center;
    color: var(--brand) !important;
    display: inline-flex !important;
    flex: 0 0 auto;
    gap: 8px;
    margin-left: 22px !important;
    vertical-align: 1px;
}

.member-status-icons .member-status-icon,
.member-status-icons > i.member-status-icon,
i.member-status-icon.member-user-icon,
i.member-status-icon.member-admin-icon,
i.member-status-icon.member-superadmin-icon {
    color: var(--brand) !important;
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    margin: 0 !important;
    opacity: .95;
    text-align: center;
    width: 12px;
}

.member-status-icons .member-status-icon::before {
    color: var(--brand) !important;
}

.member-invite-status {
    color: #aaa;
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1;
    margin-left: 10px;
}

.member-invite-status:hover {
    color: var(--brand);
}

.member-contact-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
}

.member-contact-actions[hidden] {
    display: none !important;
}

.member-contact-action {
    align-items: center;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 999px;
    color: var(--brand-button-text);
    display: inline-flex;
    justify-content: center;
    height: 44px;
    min-height: 44px;
    min-width: 44px;
    padding: 0;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, opacity .18s ease;
    width: 44px;
}

.member-contact-action:hover,
.member-contact-action:focus {
    color: var(--brand-button-text);
    opacity: .88;
    text-decoration: none;
}

.member-contact-action i {
    color: var(--brand-button-text);
    font-size: 18px;
}

.member-contact-card {
    align-items: flex-start;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    display: flex;
    gap: 18px;
    margin-bottom: 18px;
    max-width: 100%;
    padding-bottom: 18px;
}

.member-contact-card-body {
    display: grid;
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;
}

.member-contact-card-body > strong {
    color: #222;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
}

.member-contact-person {
    display: block;
    line-height: 1.35;
    margin-top: -4px;
}

.member-contact-card a,
.member-contact-card button,
.member-contact-card form,
.member-contact-card .member-photo-trigger {
    cursor: auto;
}

.member-contact-card .member-contact-action {
    cursor: pointer;
}

.member-contact-manage-actions {
    border-top: 1px solid #eee;
    gap: 8px;
    justify-content: center;
    margin: 18px 0 0;
    padding-top: 16px !important;
}

.member-current-photo {
    margin-bottom: 8px;
}

.member-photo-modal[hidden] {
    display: none;
}

.member-photo-modal {
    align-items: center;
    background: rgba(0, 0, 0, .76);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 24px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000002;
    cursor: pointer;
}

.member-photo-modal-content {
    align-items: center;
    color: #fff;
    display: grid;
    justify-items: center;
    max-height: 94vh;
    max-width: 96vw;
    width: 96vw;
}

.member-photo-modal-content img {
    background: transparent;
    border-radius: 4px;
    box-shadow: 0 18px 58px rgba(0, 0, 0, .28);
    display: block;
    height: 94vh;
    max-height: 94vh;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
    cursor: default;
}

@media (min-width: 1600px) {
    .member-photo-modal {
        padding: 18px;
    }

    .member-photo-modal-content {
        max-height: 96vh;
        max-width: 98vw;
        width: 98vw;
    }

    .member-photo-modal-content img {
        height: 96vh;
        max-height: 96vh;
    }
}

.member-photo-modal-close {
    align-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    position: absolute;
    right: 18px;
    top: 18px;
    width: 38px;
}

.member-photo-modal-close:hover,
.member-photo-modal-close:focus {
    background: rgba(255, 255, 255, .16);
}

body.member-photo-modal-open {
    overflow: hidden;
}

.member-accordion summary::-webkit-details-marker {
    display: none;
}

.member-accordion summary::after {
    content: "\f078";
    color: var(--brand);
    flex: 0 0 auto;
    font-family: FontAwesome;
    font-size: 12px;
}

.member-accordion[open] summary::after {
    content: "\f077";
}

.member-card-accordion[open] > summary {
    border-bottom: 1px solid #f7f7f7;
}

.member-card-accordion[open] .member-contact-card > .member-photo-trigger,
.member-card-accordion[open] .member-contact-card-body > strong,
.member-card-accordion[open] .member-contact-card-body > small {
    display: none;
}

.member-card-accordion[open] .member-contact-card {
    display: block;
}

.member-card-accordion[open] .member-contact-card-body {
    display: block;
}

.member-card-accordion,
.member-card-accordion > .member-view,
.member-card-accordion > .member-edit-form {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

.member-tool-panel:not([open]) {
    display: none;
}

.member-tool-panel {
    margin-bottom: 12px;
}

.member-tool-panel > summary {
    display: none;
}

.member-accordion strong,
.member-accordion small {
    display: block;
}

.member-accordion strong {
    color: #000;
    font-weight: 600;
}

.member-form {
    padding: 15px;
}

.member-view {
    position: relative;
}

.member-view-actions {
    margin-bottom: 0;
}

.member-edit-form {
    border-top: 1px solid #eee;
    margin-top: 0;
}

.member-edit-heading {
    align-items: center;
    border-bottom: 1px solid #eee;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
}

.member-edit-heading > div,
.member-editor-modal-heading > div {
    min-width: 0;
}

.member-editor-modal-heading {
    align-items: center;
    border-bottom: 1px solid #e8eded;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin: -2px 0 18px;
    padding-bottom: 14px;
}

.member-editor-modal-heading strong,
.member-editor-modal-heading small {
    display: block;
}

.member-editor-modal-close {
    align-items: center;
    background: var(--brand-soft);
    border: 0;
    border-radius: 50%;
    color: var(--brand);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
    outline: 0;
    padding: 0;
    width: 36px;
}

.member-editor-modal-close:hover,
.member-editor-modal-close:focus {
    background: #e4eff0;
    box-shadow: none;
    outline: 0;
}

.member-editor-backdrop {
    background: rgba(15, 24, 27, .42);
    inset: 0;
    position: fixed;
    z-index: 1190;
}

.member-editor-backdrop[hidden] {
    display: none;
}

.member-editor-form.is-member-editor-modal {
    background: #fff;
    border: 0 !important;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .2);
    left: 50%;
    margin: 0;
    max-height: calc(100vh - 60px);
    max-width: 1080px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 24px;
    position: fixed;
    top: 30px;
    transform: translateX(-50%);
    width: calc(100vw - 40px);
    z-index: 1200;
}

body.member-editor-modal-open {
    overflow: hidden;
}

body.member-editor-modal-open .member-card-accordion.is-editing > .member-view {
    display: block;
}

.admin-confirm-overlay {
    align-items: center;
    background: rgba(255, 255, 255, .88);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 22px;
    position: fixed;
    z-index: 1000003;
}

.admin-confirm-overlay[hidden] {
    display: none;
}

.admin-confirm-dialog {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .14);
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 410px;
    padding: 28px 34px 24px;
    position: relative;
    text-align: center;
    width: 100%;
}

.admin-confirm-icon {
    align-items: center;
    background: var(--brand-danger-soft);
    border-radius: 50%;
    color: var(--brand-danger);
    display: flex;
    font-size: 18px;
    height: 44px;
    justify-content: center;
    margin-bottom: 3px;
    width: 44px;
}

.admin-confirm-copy {
    min-width: 0;
    width: 100%;
}

.admin-confirm-copy h2 {
    color: #222;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 5px;
}

.admin-confirm-copy p {
    color: #686f73;
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    overflow-wrap: anywhere;
}

.admin-confirm-close {
    align-items: center;
    background: #f4f6f6;
    border: 0;
    border-radius: 50%;
    color: #7e8589;
    cursor: pointer;
    display: flex;
    height: 34px;
    justify-content: center;
    outline: 0;
    padding: 0;
    position: absolute;
    right: 14px;
    top: 14px;
    width: 34px;
}

.admin-confirm-close:hover,
.admin-confirm-close:focus {
    background: var(--brand-soft);
    box-shadow: none;
    color: var(--brand);
}

.admin-confirm-actions {
    display: flex;
    gap: 9px;
    justify-content: center;
    padding-top: 12px;
    width: 100%;
}

body.admin-confirm-open {
    overflow: hidden;
}

@media (max-width: 575px) {
    .admin-confirm-overlay {
        padding: 16px;
    }

    .admin-confirm-dialog {
        padding: 25px 20px 20px;
    }

    .admin-confirm-actions .btn {
        flex: 1 1 0;
        justify-content: center;
    }
}

.member-edit-heading strong {
    color: #222;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
}

.member-edit-heading small {
    font-size: 12px;
}

.member-card-accordion.is-editing > .member-view {
    display: none;
}

.member-card-accordion.is-editing > .member-edit-form {
    border-top: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 30px;
}

.form-row-wide {
    grid-column: span 3;
}

.member-type-form.is-contact-type .member-field-bedrijfsnaam {
    order: 10;
}

.member-type-form.is-contact-type .member-field-voornaam {
    order: 20;
}

.member-type-form.is-contact-type .member-field-naam {
    order: 30;
}

.member-type-form.is-contact-type .member-field-btw-nummer {
    order: 35;
}

.member-type-form.is-contact-type .member-field-straat {
    order: 40;
}

.member-type-form.is-contact-type .member-field-huisnummer {
    order: 50;
}

.member-type-form.is-contact-type .member-field-postcode {
    order: 60;
}

.member-type-form.is-contact-type .member-field-woonplaats {
    order: 70;
}

.member-type-form.is-contact-type .member-field-gsm {
    order: 80;
}

.member-type-form.is-contact-type .member-field-email {
    order: 90;
}

.member-type-form.is-contact-type .member-field-website {
    order: 100;
}

.member-type-form.is-contact-type .member-field-extra-info {
    order: 110;
}

.member-type-form.is-contact-type .member-field-tags {
    order: 120;
}

.member-extra-info {
    min-height: 120px;
}

.tag-editor {
    width: 100%;
}

.tag-editor__list {
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 42px;
    padding: 7px 9px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.tag-editor__list:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand-soft);
}

.tag-chip {
    align-items: center;
    background: var(--brand-soft);
    border: 1px solid var(--brand-soft-border);
    border-radius: 999px;
    color: var(--brand);
    display: inline-flex;
    font-size: 13px;
    gap: 6px;
    line-height: 1.2;
    min-height: 26px;
    padding: 4px 7px 4px 10px;
}

.tag-chip button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    height: 18px;
    justify-content: center;
    opacity: .72;
    padding: 0;
    width: 18px;
}

.tag-chip button:hover,
.tag-chip button:focus {
    background: rgba(0, 0, 0, .06);
    opacity: 1;
    outline: 0;
}

.tag-editor__input {
    border: 0;
    flex: 1 1 140px;
    min-width: 120px;
    outline: 0;
    padding: 4px 2px;
}

.document-access-picker {
    margin-top: 10px;
    position: relative;
}

.document-access-picker.is-inactive .document-access-selected {
    border-color: #eee;
    box-shadow: none;
}

.document-access-selected {
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 42px;
    padding: 7px 9px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.document-access-selected:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand-soft);
}

.document-access-chip {
    align-items: center;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 999px;
    color: #333;
    display: inline-flex;
    font-size: 13px;
    gap: 7px;
    line-height: 1.2;
    min-height: 30px;
    padding: 3px 7px 3px 4px;
}

.document-access-chip img,
.document-access-chip__initials {
    align-items: center;
    background: var(--brand-soft);
    border-radius: 50%;
    color: var(--brand);
    display: inline-flex;
    flex: 0 0 24px;
    font-size: 11px;
    font-weight: 600;
    height: 24px;
    justify-content: center;
    object-fit: cover;
    overflow: hidden;
    width: 24px;
}

.document-access-chip button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: #888;
    cursor: pointer;
    display: inline-flex;
    height: 18px;
    justify-content: center;
    padding: 0;
    width: 18px;
}

.document-access-chip button:hover,
.document-access-chip button:focus {
    background: rgba(0, 0, 0, .06);
    color: var(--brand);
    outline: 0;
}

.document-access-input {
    border: 0;
    flex: 1 1 130px;
    min-width: 120px;
    outline: 0;
    padding: 5px 2px;
}

.document-access-suggestions {
    top: calc(100% + 4px);
}

.field-box {
    margin: 18px 0 20px;
    padding: 15px;
    border: 1px solid #eee;
}

.field-box legend {
    width: auto;
    padding: 0 6px;
    color: #000;
    font-size: 14px;
    font-weight: 600;
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 16px;
}

.check-line {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #555;
    font-weight: 400;
}

.check-line input {
    accent-color: var(--brand);
}

.member-rights-section-title {
    color: #333;
    display: block;
    font-size: 13px;
    margin-bottom: 11px;
}

.member-rights-base-grid {
    margin-bottom: 18px;
}

.member-rights-cards {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.member-right-card {
    align-content: start;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    display: grid;
    gap: 9px;
    padding: 14px 16px;
}

.member-rights-cards > .member-right-card:first-child:nth-last-child(3) {
    grid-row: span 2;
}

.member-right-card > strong {
    color: #222;
    font-size: 14px;
    margin-bottom: 2px;
}

.member-contact-category-access {
    border-top: 1px solid #e5e5e5;
    display: grid;
    gap: 8px;
    margin-top: 4px;
    padding-top: 12px;
}

.member-contact-category-access > .muted {
    font-size: 12px;
    font-weight: 600;
}

.member-contact-category-options {
    background: #fff;
    border-left: 2px solid var(--brand-soft-border);
    grid-template-columns: 1fr;
    margin: 2px 0 0 5px;
    padding: 8px 10px;
}

.member-rights-activity-section {
    margin-top: 18px;
}

.member-right-card--activity {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.member-right-card--activity > strong {
    grid-column: 1 / -1;
}

@media (max-width: 767.98px) {
    .member-rights-cards {
        grid-template-columns: 1fr;
    }

    .member-rights-cards > .member-right-card:first-child:nth-last-child(3) {
        grid-row: auto;
    }

    .member-right-card--activity {
        grid-template-columns: 1fr;
    }
}

.responsible-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px 16px;
}

.responsible-option {
    padding: 2px 0;
}

.responsible-empty {
    display: block;
    margin-top: 10px;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid var(--brand-soft-border);
    color: var(--brand);
    background: var(--brand-soft);
    font-size: 12px;
    font-weight: 500;
}

.ok,
.fail {
    display: inline-flex;
    min-width: 46px;
    margin-right: 8px;
    font-weight: 500;
}

.fail {
    color: var(--brand-danger);
}

.member-secondary-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 15px 15px;
}

.member-secondary-actions.member-contact-manage-actions {
    padding-left: 0;
    padding-right: 0;
}

.category-list {
    width: min(470px, 100%);
    margin-top: 8px;
}

.category-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-top: 1px solid #eee;
}

.category-row.is-dragging {
    opacity: .45;
}

.category-row:first-child {
    border-top: 0;
}

.category-row-name {
    flex: 1 1 auto;
    min-width: 0;
    color: #000;
    overflow-wrap: anywhere;
}

.category-edit-input {
    flex: 1 1 auto;
    min-width: 0;
}

.member-readonly-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.member-readonly-field-wide {
    grid-column: 1 / -1;
}

.member-readonly-field {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    padding: 14px 15px;
}

.member-readonly-field strong,
.member-readonly-field span {
    display: block;
}

.member-readonly-field strong {
    color: #222;
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 10px;
}

.member-readonly-field span {
    color: #777;
    line-height: 1.62;
    margin-top: 0;
    white-space: pre-line;
}

.member-readonly-line {
    line-height: 1.45;
    margin-top: 0 !important;
    white-space: normal !important;
}

.member-readonly-line + .member-readonly-line {
    margin-top: 7px;
}

.member-readonly-line span {
    display: inline;
    line-height: inherit;
    margin-top: 0;
    white-space: normal;
}

.category-row form {
    flex: 0 0 auto;
}

.category-row-actions {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
}

.category-sort-handle {
    align-items: center;
    background: var(--brand);
    border-radius: 50%;
    color: var(--brand-button-text);
    cursor: grab;
    display: inline-flex;
    flex: 0 0 auto;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.category-sort-handle:active {
    cursor: grabbing;
}

.category-autosave-status {
    min-height: 18px;
}

.member-autosave-status {
    display: block;
    height: 20px;
    line-height: 20px;
    margin-bottom: 10px;
    overflow: hidden;
}

.task-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
}

.task-page-heading {
    gap: 12px;
}

.task-page-actions {
    gap: 10px;
}

.task-search {
    max-width: 380px;
    width: 100%;
}

.document-search {
    max-width: none;
}

.document-search input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

.document-search input[type="search"]::-webkit-search-decoration,
.document-search input[type="search"]::-webkit-search-cancel-button,
.document-search input[type="search"]::-webkit-search-results-button,
.document-search input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

.document-search [data-search-dismiss] {
    cursor: pointer;
}

.document-meta-detail {
    border-top: 1px solid #f2f2f2;
    color: #aaa;
    font-size: 11px;
    line-height: 1.35;
    margin: 16px 0 0;
    padding-top: 10px;
}

.document-summary-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.task-summary-main small.document-summary-meta {
    gap: 6px !important;
}

.document-summary-meta > * {
    margin-right: 6px;
}

.document-summary-meta > *:last-child {
    margin-right: 0;
}

.document-accordion .task-summary-main {
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.document-title-line {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.document-title-text {
    display: block;
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-title-line .fa {
    flex: 0 0 auto;
}

.document-access-count {
    align-items: center;
    color: var(--brand);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 14px;
    gap: 4px;
    margin-left: 2px;
    vertical-align: middle;
}

.document-access-count span {
    align-items: center;
    background: var(--brand-soft);
    border: 1px solid var(--brand-soft-border);
    border-radius: 999px;
    color: var(--brand);
    display: inline-flex;
    font-size: 11px;
    font-weight: 600;
    justify-content: center;
    line-height: 1;
    min-width: 18px;
    padding: 3px 6px;
}

.document-file-count {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-mobile-new-action {
    display: none !important;
}

.document-print-icon {
    margin-right: 8px;
}

.task-toolbar .actions .document-print-action {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.document-files {
    margin-top: 16px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.document-file-row {
    align-items: flex-start;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 8px 0;
}

.document-file-row:last-child {
    border-bottom: 0;
}

.document-file-main {
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.document-file-link {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: 7px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.document-file-link .fa {
    flex: 0 0 auto;
}

.document-file-name {
    display: block;
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-file-size {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 2px;
}

.document-file-delete-form {
    flex: 0 0 auto;
    margin: 18px 0 0;
}

.document-file-delete-button {
    background: transparent;
    border: 0;
    color: #aaa;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 2px 0 2px 8px;
}

.document-file-delete-button:hover,
.document-file-delete-button:focus {
    color: var(--brand);
    outline: none;
}

.document-choice-group {
    margin-bottom: 22px;
}

.document-form-section-title {
    color: #222;
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 9px;
}

.admin-file-upload {
    display: block;
    position: relative;
}

.admin-file-upload__input {
    height: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 0;
}

.admin-file-upload__dropzone {
    align-items: center;
    background: #fbfbfb;
    border: 1px dashed rgba(var(--brand-rgb), .45);
    color: #555;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    min-height: 128px;
    padding: 22px 18px;
    text-align: center;
    transition: border-color .2s ease, box-shadow .2s ease, color .2s ease, background-color .2s ease;
}

.admin-file-upload__dropzone i {
    color: var(--brand);
    font-size: 30px;
    line-height: 1;
}

.admin-file-upload__dropzone strong {
    color: #333;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.admin-file-upload__dropzone span {
    color: #888;
    font-size: 13px;
    line-height: 1.25;
}

.admin-file-upload__dropzone:hover,
.admin-file-upload__dropzone:focus-within,
.admin-file-upload.is-dragover .admin-file-upload__dropzone {
    background: rgba(var(--brand-rgb), .035);
    border-color: var(--brand);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .045);
    color: var(--brand);
}

.admin-file-upload__text {
    color: #777;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 8px;
    word-break: break-word;
}

.upload-queue-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 0;
}

.upload-queue-actions .btn {
    cursor: pointer;
    margin: 12px 0 0;
}

.upload-camera-action,
.upload-scan-action {
    align-items: center;
    border-radius: 50%;
    display: none;
    height: 38px;
    justify-content: center;
    min-width: 42px;
    margin: 0;
    padding-left: 12px;
    padding-right: 12px;
    position: absolute;
    right: 12px;
    top: 76px;
    z-index: 2;
}

.upload-scan-action {
    right: 62px;
}

.upload-queue-actions .upload-camera-action,
.upload-queue-actions .upload-scan-action {
    margin: 0;
}

[data-upload-queue-submit][hidden] {
    display: none !important;
}

.upload-queue-preview {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    margin-top: 12px;
}

.upload-queue-preview[hidden] {
    display: none;
}

.upload-queue-item {
    align-items: center;
    background: #fbfbfb;
    border: 1px solid #ededed;
    display: grid;
    gap: 9px;
    grid-template-columns: 42px minmax(0, 1fr) 30px;
    min-height: 52px;
    padding: 5px 6px;
}

.upload-queue-item__visual {
    align-items: center;
    background: rgba(var(--brand-rgb), .08);
    color: var(--brand);
    display: flex;
    height: 40px;
    justify-content: center;
    overflow: hidden;
    width: 40px;
}

.upload-queue-item__visual img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.upload-queue-item__name {
    color: #555;
    font-size: 12px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-queue-item__remove {
    align-items: center;
    background: transparent;
    border: 0;
    color: #888;
    cursor: pointer;
    display: flex;
    height: 30px;
    justify-content: center;
    padding: 0;
    width: 30px;
}

.upload-queue-item__remove:hover,
.upload-queue-item__remove:focus {
    color: var(--brand-danger);
}

@media (max-width: 575px) {
    .upload-queue-preview {
        grid-template-columns: 1fr;
    }

    .upload-camera-action,
    .upload-scan-action {
        display: inline-flex;
    }

    .admin-file-upload__dropzone {
        min-height: 168px;
        padding-bottom: 66px;
    }

    .upload-camera-action,
    .upload-scan-action {
        bottom: auto;
        left: 50%;
        right: auto;
        top: 116px;
        transform: translateX(-50%);
    }

    .has-document-scanner .upload-camera-action {
        left: calc(50% - 27px);
    }

    .has-document-scanner .upload-scan-action {
        left: calc(50% + 27px);
    }
}

@media (hover: none) and (pointer: coarse) {
    .upload-camera-action,
    .upload-scan-action {
        display: inline-flex;
    }
}

body.document-scanner-open {
    overflow: hidden;
}

.document-scanner-overlay {
    align-items: center;
    background: rgba(255, 255, 255, .9);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 18px;
    position: fixed;
    z-index: 1000004;
}

.document-scanner-overlay[hidden] {
    display: none;
}

.document-scanner-card {
    background: #fff;
    border-top: 3px solid var(--brand);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 36px);
    max-width: 980px;
    overflow: hidden;
    width: 100%;
}

.document-scanner-card > header,
.document-scanner-card > footer {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    padding: 14px 17px;
}

.document-scanner-card > header {
    border-bottom: 1px solid #ececec;
}

.document-scanner-card > header > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.document-scanner-card > header strong {
    color: #222;
    font-size: 16px;
}

.document-scanner-card > header span {
    color: #777;
    font-size: 12px;
    margin-top: 2px;
}

.document-scanner-card > header button {
    align-items: center;
    background: var(--brand-soft);
    border: 0;
    border-radius: 50%;
    color: var(--brand);
    cursor: pointer;
    display: flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
    margin-left: 12px;
    padding: 0;
    width: 36px;
}

.document-scanner-card > header button:hover,
.document-scanner-card > header button:focus {
    background: rgba(var(--brand-rgb), .16);
    outline: 0;
}

.document-scanner-stage {
    align-items: center;
    background: #252525;
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-height: 250px;
    overflow: auto;
    padding: 12px;
}

.document-scanner-stage canvas {
    box-shadow: 0 4px 18px rgba(0, 0, 0, .32);
    cursor: crosshair;
    display: block;
    max-height: 100%;
    max-width: 100%;
    touch-action: none;
}

.document-scanner-modes {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 7px;
    justify-content: center;
    padding: 12px 16px 4px;
}

.document-scanner-modes button {
    background: #f4f7f7;
    border: 1px solid transparent;
    border-radius: 18px;
    color: #666;
    cursor: pointer;
    min-width: 76px;
    padding: 7px 13px;
}

.document-scanner-modes button.is-active {
    background: var(--brand-soft);
    border-color: rgba(var(--brand-rgb), .22);
    color: var(--brand);
}

.document-scanner-status {
    color: var(--brand);
    flex: 0 0 auto;
    font-size: 12px;
    padding: 8px 16px 0;
    text-align: center;
}

.document-scanner-card > footer {
    gap: 9px;
    justify-content: flex-end;
}

@media (max-width: 575px) {
    .document-scanner-overlay {
        padding: 0;
    }

    .document-scanner-card {
        height: 100%;
        max-height: none;
    }

    .document-scanner-card > header,
    .document-scanner-card > footer {
        padding: 12px;
    }

    .document-scanner-stage {
        min-height: 0;
        padding: 8px;
    }

    .document-scanner-card > footer .btn {
        flex: 1 1 50%;
        justify-content: center;
    }
}

/* Superadmin: naslagwerk voor de volledige klantconfiguratie. */
.feature-catalog-title-row {
    margin-bottom: 22px;
}

.feature-catalog-tools {
    align-items: center;
    border-bottom: 1px solid #ececec;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 20px;
}

.feature-catalog-search {
    flex: 1 1 430px;
    margin: 0;
    max-width: 620px;
}

.feature-catalog-tool-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.feature-catalog-group + .feature-catalog-group {
    margin-top: 38px;
}

.feature-catalog-group > h2 {
    color: #222;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 13px;
}

.feature-catalog-list {
    display: grid;
    gap: 10px;
}

.feature-catalog-module {
    background: #fff;
    border: 1px solid #e9e9e9;
}

.feature-catalog-module[hidden],
.feature-catalog-group[hidden],
.feature-catalog-empty[hidden] {
    display: none !important;
}

.feature-catalog-module > summary {
    align-items: center;
    cursor: pointer;
    display: grid;
    gap: 13px;
    grid-template-columns: 42px minmax(0, 1fr) auto 18px;
    list-style: none;
    min-height: 72px;
    padding: 13px 16px;
}

.feature-catalog-module > summary::-webkit-details-marker {
    display: none;
}

.feature-catalog-module > summary:hover {
    background: #fcfdfd;
}

.feature-catalog-icon {
    align-items: center;
    background: var(--brand-soft);
    border-radius: 50%;
    color: var(--brand);
    display: flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.feature-catalog-heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.feature-catalog-heading strong {
    color: #222;
    font-size: 14px;
    font-weight: 600;
}

.feature-catalog-heading small {
    color: #7b7b7b;
    font-size: 12px;
    line-height: 1.4;
    margin-top: 3px;
}

.feature-catalog-status {
    background: #f3f5f5;
    border-radius: 14px;
    color: #666;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    white-space: nowrap;
}

.feature-catalog-status.is-enabled {
    background: var(--brand-soft);
    color: var(--brand);
}

.feature-catalog-status.is-disabled {
    background: #f3f3f3;
    color: #999;
}

.feature-catalog-chevron {
    color: var(--brand);
    font-size: 12px;
    transition: transform .18s ease;
}

.feature-catalog-module[open] .feature-catalog-chevron {
    transform: rotate(180deg);
}

.feature-catalog-body {
    border-top: 1px solid #ededed;
    padding: 17px 20px 19px 70px;
}

.feature-catalog-body ul {
    column-gap: 38px;
    columns: 2;
    list-style: none;
    margin: 0;
    padding: 0;
}

.feature-catalog-body li {
    align-items: flex-start;
    break-inside: avoid;
    color: #555;
    display: flex;
    font-size: 13px;
    gap: 9px;
    line-height: 1.5;
    padding: 5px 0;
}

.feature-catalog-body li i {
    color: var(--brand);
    flex: 0 0 auto;
    font-size: 10px;
    margin-top: 5px;
}

.feature-catalog-empty {
    margin: 24px 0 0;
    text-align: center;
}

@media (max-width: 767px) {
    .member-editor-form.is-member-editor-modal {
        inset: 12px;
        max-height: none;
        padding: 18px 15px;
        transform: none;
        width: auto;
    }
    .feature-catalog-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .feature-catalog-search {
        flex-basis: auto;
        max-width: none;
    }

    .feature-catalog-tool-actions {
        justify-content: center;
    }

    .feature-catalog-tool-actions .btn {
        flex: 1 1 50%;
    }

    .feature-catalog-module > summary {
        gap: 10px;
        grid-template-columns: 38px minmax(0, 1fr) 16px;
        padding: 12px;
    }

    .feature-catalog-icon {
        height: 38px;
        width: 38px;
    }

    .feature-catalog-status {
        grid-column: 2;
        justify-self: start;
        margin-top: -5px;
    }

    .feature-catalog-chevron {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .feature-catalog-body {
        padding: 14px 15px 16px;
    }

    .feature-catalog-body ul {
        columns: 1;
    }
}

.admin-file-upload.has-error .admin-file-upload__dropzone {
    border-color: var(--brand-danger);
}

.admin-file-upload.has-error .admin-file-upload__text {
    color: var(--brand-danger);
}

.document-upload-inline-error {
    background: var(--brand-danger-soft);
    border-left: 3px solid var(--brand-danger);
    color: var(--brand-danger);
    font-size: 13px;
    line-height: 1.35;
    margin-top: 10px;
    padding: 8px 10px;
}

.document-visibility-card {
    background: #fbfbfb;
    border: 1px solid #f0f0f0;
    padding: 12px 14px;
}

.document-visibility-option {
    align-items: center;
    color: #666;
    cursor: pointer;
    display: flex;
    gap: 9px;
    line-height: 1.25;
    margin: 0 0 9px;
}

.document-visibility-card input[type="radio"],
.document-visibility-option input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    border: 1px solid #b8b8b8;
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
    flex: 0 0 16px;
    height: 16px;
    margin: 0;
    position: relative;
    width: 16px;
}

.document-visibility-card input[type="radio"]:checked,
.document-visibility-option input[type="radio"]:checked {
    background: radial-gradient(circle at center, var(--brand) 0 4px, #fff 4.5px);
    border-color: var(--brand) !important;
}

.document-visibility-card input[type="radio"]:checked::after,
.document-visibility-option input[type="radio"]:checked::after {
    background: transparent;
    border-radius: 50%;
    content: "";
    height: 8px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
}

.document-visibility-card input[type="radio"]:focus,
.document-visibility-card input[type="radio"]:focus-visible,
.document-visibility-option input[type="radio"]:focus,
.document-visibility-option input[type="radio"]:focus-visible {
    box-shadow: none;
    outline: 0;
}

.document-visibility-option:last-child {
    margin-bottom: 0;
}

.document-date-option {
    align-items: center;
    flex-wrap: wrap;
}

.document-date-input {
    flex: 1 1 170px;
    margin-left: 6px;
    max-width: 190px;
}

.document-date-input:disabled {
    background: #f5f5f5;
    opacity: .6;
}

.autofill-decoys {
    height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    width: 0;
}

.autofill-decoys input {
    height: 0;
    min-height: 0;
    padding: 0;
    width: 0;
}

.search-clear-button[hidden] {
    display: none !important;
}

.search-clear-button {
    align-items: center;
    display: inline-flex;
    height: 100%;
    white-space: nowrap;
}

.task-list {
    display: grid;
    gap: 12px;
}

.task-accordion.is-dragging {
    opacity: .45;
}

.task-completed-heading {
    align-items: center;
    border-top: 1px solid #eeeeee;
    color: #000;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 42px;
    padding-top: 28px;
}

.task-completed-heading form {
    margin: 0;
}

.task-completed-heading .btn {
    font-size: 13px;
    font-weight: 400;
}

.task-completed-heading + .task-accordion {
    margin-top: 6px;
}

.task-accordion.is-complete {
    opacity: .72;
}

.verslag-link {
    color: inherit;
    display: block;
    padding: 18px 22px;
    text-decoration: none;
}

.verslag-link:hover,
.verslag-link:focus {
    background: #f8f8f8;
    color: inherit;
    text-decoration: none;
}

.linked-task-list {
    border-top: 1px solid #eee;
    margin-top: 18px;
    padding-top: 14px;
}

.linked-task-heading {
    color: #000;
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.linked-task-row {
    border: 1px solid #eee;
    margin-top: 10px;
    padding: 13px 14px;
}

.linked-task-row.is-complete {
    background: #fafafa;
}

.linked-task-row strong,
.linked-task-row small {
    display: block;
}

.linked-task-status {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 10px;
}

.linked-task-status form {
    margin: 0;
}

.linked-task-description {
    border-top: 1px solid #f0f0f0;
    margin: 12px 0 0;
    padding-top: 12px;
}

.badge-soft {
    background: #f7f7f7;
    border: 1px solid #e7e7e7;
    color: #666;
}

.inline-tool-panel {
    border: 1px solid #eee;
    margin-top: 16px;
}

.inline-tool-panel summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
}

.inline-tool-panel summary::-webkit-details-marker {
    display: none;
}

.inline-tool-panel summary::after {
    color: var(--brand);
    content: "\f078";
    font-family: FontAwesome;
    font-size: 12px;
}

.inline-tool-panel[open] summary::after {
    content: "\f077";
}

.inline-tool-panel .member-form {
    border-top: 1px solid #eee;
}

.task-accordion summary {
    align-items: center;
    gap: 15px;
    padding: 20px;
    min-width: 0;
}

.task-summary-main {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.task-summary-main small {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
}

.task-sort-handle {
    align-items: center;
    background: var(--brand);
    border-radius: 50%;
    color: var(--brand-button-text);
    cursor: grab;
    display: inline-flex;
    flex: 0 0 auto;
    height: 34px;
    justify-content: center;
    margin-right: 12px;
    width: 34px;
}

.task-sort-handle:active {
    cursor: grabbing;
}

.task-detail {
    border-top: 1px solid #eee;
    padding: 18px 15px 15px;
}

.task-detail-actions {
    align-items: center;
    border-top: 1px solid #f2f2f2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
}

.task-detail-actions form {
    margin: 0;
}

.activity-list {
    gap: 16px;
}

.activity-overview-groups {
    display: grid;
    gap: 52px;
}

.activity-overview-group__title {
    color: #222;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px;
}

.activity-overview-group[hidden] {
    display: none;
}

.activity-list .activity-overview-row.is-dragging {
    opacity: .55;
}

.activity-overview-row {
    align-items: center;
    display: flex;
    gap: 12px;
    padding: 0;
}

.activity-overview-link {
    align-items: center;
    color: inherit;
    display: flex;
    flex: 1 1 auto;
    gap: 15px;
    min-width: 0;
    padding: 18px 20px;
    text-decoration: none;
}

.activity-order-control {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: 18px;
}

.activity-order-control + .activity-overview-link {
    padding-left: 0;
}

.activity-order-control .activity-icon {
    cursor: grab;
}

.activity-order-control .activity-icon:active {
    cursor: grabbing;
}

.activity-mobile-order-actions {
    display: none;
}

.activity-mobile-order-actions button {
    align-items: center;
    background: #fff;
    border: 1px solid var(--brand);
    color: var(--brand);
    display: inline-flex;
    height: 30px;
    justify-content: center;
    padding: 0;
    width: 30px;
}

.activity-mobile-order-actions button:disabled {
    opacity: .3;
}

.activity-overview-description {
    display: -webkit-box !important;
    margin-top: 4px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.activity-page-description {
    color: #777;
    line-height: 1.55;
    margin: 8px 0 0;
    max-width: 720px;
}

.activity-description-input {
    min-height: 100px;
}

.activity-overview-link:hover,
.activity-overview-link:focus {
    color: inherit;
    text-decoration: none;
}

.activity-overview-row .task-summary-actions {
    flex: 0 0 auto;
    margin-right: 18px;
}

.activity-accordion summary {
    align-items: center;
    gap: 15px;
    padding: 18px 20px;
}

.activity-icon {
    cursor: default;
}

.activity-detail {
    border-top: 1px solid #eee;
    padding: 18px 15px 15px;
}

.activity-meta-form {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 18px;
}

.activity-section {
    border: 1px solid #eee;
    margin-bottom: 12px;
    order: var(--activity-module-order, 99);
}

.activity-module-sections {
    display: flex;
    flex-direction: column;
}

.activity-module-overview {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 20px;
}

.activity-module-card {
    align-items: center;
    background: #fff;
    border: 1px solid #e8ecee;
    color: #222;
    display: flex;
    gap: 14px;
    min-height: 104px;
    padding: 18px;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.activity-module-card:hover,
.activity-module-card:focus {
    border-color: var(--brand-soft-border);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
    color: #222;
    outline: 0;
    text-decoration: none;
    transform: translateY(-1px);
}

.activity-module-card__icon {
    align-items: center;
    background: var(--brand);
    color: var(--brand-button-text);
    display: inline-flex;
    flex: 0 0 44px;
    font-size: 18px;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.activity-module-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.activity-module-card__body strong {
    font-size: 15px;
}

.activity-module-card__body small {
    color: #888;
    line-height: 1.4;
}

.activity-module-card__arrow {
    color: var(--brand);
    flex: 0 0 auto;
    font-size: 12px;
}

.activity-module-page .activity-section {
    border: 0;
    margin-bottom: 0;
}

.activity-module-page .activity-section > summary {
    display: none;
}

.activity-module-page .activity-section > .accordion-body {
    border-top: 0;
    padding: 0;
}

.activity-module-picker {
    border: 1px solid #e8ecee;
    margin: 18px 0;
    padding: 16px;
}

.activity-module-picker legend {
    color: #333;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    padding: 0 6px;
    width: auto;
}

.activity-module-picker-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.activity-module-choice {
    margin: 0;
}

.activity-module-choice > input {
    left: -9999px;
    position: absolute;
}

.activity-module-choice > span {
    align-items: center;
    background: #f6f7f7;
    border: 1px solid #eef0f1;
    color: #aaa;
    cursor: pointer;
    display: flex;
    gap: 9px;
    min-height: 42px;
    padding: 9px 12px;
}

.activity-module-choice > input:checked + span {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-button-text);
}

.activity-module-choice:hover > input:not(:checked) + span {
    border-color: var(--brand-soft-border);
    color: #777;
}

.activity-module-choice > input:focus-visible + span {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.activity-section > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 15px 16px;
}

.activity-section > summary::-webkit-details-marker,
.activity-accordion > summary::-webkit-details-marker {
    display: none;
}

.activity-section > summary::after {
    color: var(--brand);
    content: "\f078";
    font-family: FontAwesome;
    font-size: 12px;
}

.activity-section[open] > summary::after {
    content: "\f077";
}

.activity-section-title {
    min-width: 0;
}

.activity-section-actions {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    margin-left: auto;
}

.activity-section .accordion-body {
    border-top: 1px solid #eee;
    padding: 16px;
}

.activity-inline-add {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) auto;
}

.carry-list-quick-add {
    align-items: stretch;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
}

.carry-list-quick-add .form-control {
    min-height: 42px;
}

.carry-list-quick-add .btn {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    justify-content: center;
}

.carry-list-items {
    display: grid;
    gap: 8px;
}

.carry-list-item__avatar {
    align-items: center;
    background: #eaf4f6;
    border-radius: 50%;
    color: var(--brand);
    display: inline-flex;
    flex: 0 0 36px;
    font-size: 11px;
    font-weight: 600;
    height: 36px;
    justify-content: center;
    overflow: hidden;
    width: 36px;
}

.carry-list-item__avatars {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    padding-right: 4px;
}

.carry-list-item__avatars .carry-list-item__avatar + .carry-list-item__avatar {
    margin-left: -10px;
}

.carry-list-item__avatars .carry-list-item__avatar {
    border: 2px solid #fff;
}

.carry-list-item__avatar--more {
    background: #f1f1f1;
    color: #666;
}

.carry-list-item__avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.carry-list-item__main {
    flex: 1 1 auto;
    min-width: 0;
}

.carry-list-item__main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carry-list-item__main .carry-list-responsible-line {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.carry-list-responsible-line > span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carry-list-item__body {
    border-top: 1px solid #eee;
    padding: 14px 16px 16px;
}

.carry-list-edit-form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.carry-list-edit-form label {
    margin: 0;
}

.carry-list-edit-form textarea {
    min-height: 70px;
}

.carry-list-edit-form .btn {
    justify-self: start;
}

.carry-list-description {
    margin: 0 0 12px;
    white-space: normal;
}

.carry-list-row-actions {
    align-items: center;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 7px;
}

.carry-list-mobile-avatar-count,
.carry-list-mobile-responsibles,
.carry-list-mobile-detail-actions {
    display: none;
}

.carry-list-sort-handle {
    cursor: grab;
}

.carry-list-item.is-dragging {
    opacity: .55;
}

.carry-list-no-results,
.carry-list-order-notice {
    margin-bottom: 12px;
}

.helper-list-create {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.helper-list-create .btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.helper-empty-state {
    align-items: center;
    border: 1px dashed #dfe5e7;
    color: #888;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 34px 20px;
    text-align: center;
}

.helper-empty-state > i {
    color: var(--brand);
    font-size: 28px;
}

.helper-empty-state strong {
    color: #333;
}

.helper-toolbar .task-search {
    margin-left: auto;
}

.helper-new-task-button {
    flex: 0 0 auto;
}

.helper-list {
    border: 1px solid #e8ecee;
    margin-bottom: 20px;
}

.helper-list--planning {
    border: 0;
    margin-bottom: 0;
}

.helper-list--planning .helper-new-task {
    border: 1px solid #e8ecee;
    margin-bottom: 18px;
}

.helper-list--planning .helper-task-list {
    border: 1px solid #e8ecee;
}

.helper-list__header {
    align-items: center;
    background: #fafbfb;
    border-bottom: 1px solid #e8ecee;
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
}

.helper-list__header h2 {
    color: #222;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 2px;
}

.helper-list__header form,
.helper-task__actions form,
.helper-registration form {
    margin: 0;
}

.helper-new-task {
    border-width: 0 0 1px;
    margin: 0;
}

.helper-task-form {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 180px);
}

.helper-task-form label {
    margin: 0;
}

.helper-task-form__description {
    grid-column: 1 / -1;
}

.helper-task-form__schedule {
    display: grid;
    gap: 10px;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
}

.helper-task-form__schedule label,
.helper-task-form__schedule input {
    min-width: 0;
    width: 100%;
}

.helper-task-form__people {
    grid-column: 1 / -1;
    position: relative;
}

.helper-task-form__people > label {
    display: block;
    margin-bottom: 5px;
}

.helper-task-form__people .document-access-selected {
    min-height: 44px;
}

.helper-task-form__people .document-access-input {
    flex: 1 1 180px;
    min-width: 150px;
}

.helper-picker-limit {
    color: var(--brand);
    display: block;
    margin-top: 6px;
}

.helper-picker-limit.is-error {
    color: #b42318;
}

.helper-picker-footer {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 6px;
}

.helper-picker-footer small {
    color: #888;
}

.helper-picker-footer a {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    white-space: nowrap;
}

.helper-task-form textarea {
    min-height: 72px;
}

.helper-task-form .btn {
    justify-self: start;
}

.helper-task-list {
    gap: 0;
}

.helper-task {
    border-width: 0 0 1px;
    margin: 0;
}

.helper-task:last-child {
    border-bottom: 0;
}

.helper-task__people {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
}

.helper-avatar {
    align-items: center;
    background: #eaf4f6;
    border: 2px solid #fff;
    border-radius: 50%;
    color: var(--brand);
    display: inline-flex;
    flex: 0 0 36px;
    font-size: 11px;
    font-weight: 600;
    height: 36px;
    justify-content: center;
    overflow: hidden;
    width: 36px;
}

.helper-avatar + .helper-avatar {
    margin-left: -8px;
}

.helper-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.helper-avatar--count {
    background: #f1f1f1;
    color: #666;
}

.helper-task__main {
    flex: 1 1 auto;
    min-width: 0;
}

.helper-task__main > strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.helper-progress {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.helper-progress > span:last-child:not(.helper-occupancy):not(.helper-schedule) {
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 10px;
    font-weight: 600;
    margin-left: 10px;
    padding: 2px 6px;
    text-transform: uppercase;
}

.helper-schedule {
    align-items: center;
    display: inline-flex;
    gap: 5px;
}

.helper-progress > .helper-schedule + .helper-schedule,
.helper-progress > .helper-occupancy {
    border-left: 1px solid #ddd;
    margin-left: 10px;
    padding-left: 10px;
}

.helper-task__actions {
    align-items: center;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 7px;
}

.helper-signup-button {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    justify-content: center;
    min-height: 36px;
}

.helper-task__body {
    border-top: 1px solid #eee;
    padding: 14px 16px 16px;
}

.helper-task__description {
    margin: 0 0 16px;
}

.helper-mobile-admin-actions {
    display: none;
}

.helper-person-add {
    align-items: start;
    border: 1px solid #e8ecee;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    margin: 0 0 18px;
    padding: 12px;
}

.helper-contact-picker {
    min-width: 0;
    position: relative;
}

.helper-contact-suggestions {
    left: 0;
    max-height: 290px;
    overflow-y: auto;
    right: 0;
    top: calc(100% + 4px);
    width: auto;
    z-index: 30;
}

.helper-contact-option {
    align-items: center;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #eee;
    color: #444;
    cursor: pointer;
    display: grid;
    gap: 9px;
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 8px 10px;
    text-align: left;
    width: 100%;
}

.helper-contact-option:hover,
.helper-contact-option:focus {
    background: var(--brand-soft);
    outline: 0;
}

.helper-contact-option > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.helper-contact-option strong,
.helper-contact-option small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.helper-contact-option small {
    color: #888;
    font-size: 11px;
}

.helper-create-contact {
    align-items: center;
    color: var(--brand);
    display: inline-flex;
    gap: 6px;
    min-height: 38px;
    white-space: nowrap;
}

.helper-person-add > small {
    color: #888;
    grid-column: 1 / -1;
}

.helper-registrations {
    margin-bottom: 14px;
}

.helper-registrations h3 {
    color: #333;
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 9px;
}

.helper-registration-card {
    margin-top: 8px;
}

.helper-registration-card > summary {
    min-height: 58px;
    padding: 9px 12px;
}

.helper-registration-card .member-form.member-view {
    padding: 16px;
}

.helper-registration-card .member-contact-card {
    cursor: default;
}

.helper-registration-actions {
    margin-top: 14px;
}

.helper-registration-actions form {
    margin: 0;
}

.helper-registration {
    align-items: center;
    border-top: 1px solid #f0f0f0;
    display: grid;
    gap: 10px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: 8px 0;
}

.helper-registration .helper-avatar {
    height: 32px;
    width: 32px;
}

.helper-registration > span:nth-child(2) {
    color: #444;
    min-width: 0;
}

.helper-registration small {
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 10px;
    margin-left: 7px;
    padding: 2px 5px;
    text-transform: uppercase;
}

.helper-task-edit-form {
    border-top: 1px solid #eee;
    margin-top: 14px;
    padding-top: 14px;
}

.helper-task-edit-form[hidden] {
    display: none;
}

.activity-person-picker {
    margin-top: 0;
    min-width: 0;
}

.activity-person-picker .document-access-selected {
    min-height: 42px;
    padding: 5px 7px;
}

.activity-person-picker .document-access-input {
    flex-basis: 52px;
    font-size: 12px;
    min-width: 45px;
}

.activity-person-picker .document-access-chip {
    max-width: 175px;
}

.activity-person-picker .document-access-chip > span:not(.document-access-chip__initials) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-wide-field {
    grid-column: 1 / -1;
    min-height: 80px;
}

.form-span-2 {
    grid-column: 1 / -1;
}

.activity-mini-list {
    display: grid;
    gap: 10px;
}

.activity-mini-row {
    align-items: flex-start;
    border: 1px solid #eee;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 14px;
}

.activity-mini-row.is-complete {
    background: #fafafa;
    color: #777;
}

.activity-mini-row strong,
.activity-mini-row small {
    display: block;
}

.activity-mini-row p {
    margin: 8px 0;
}

.activity-row-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}

.activity-topic {
    border: 1px solid #eee;
    margin-bottom: 12px;
    padding: 14px;
}

.activity-topic p {
    margin: 8px 0;
}

.activity-reply {
    border-left: 3px solid var(--brand);
    margin: 12px 0 0;
    padding-left: 12px;
}

.activity-forum-form,
.activity-reply-form {
    display: grid;
    gap: 10px;
}

.activity-forum-form textarea {
    min-height: 110px;
}

.notes-panel {
    min-width: 0;
}

.notes-toolbar {
    align-items: center;
}

.notes-empty {
    margin: 18px 0 0;
}

.note-new-panel {
    margin-top: 0;
}

.note-form {
    display: grid;
    gap: 14px;
}

.note-form label {
    margin: 0;
}

.note-form > .btn {
    justify-self: start;
    width: auto;
}

.note-textarea {
    min-height: 120px;
}

.note-item summary {
    align-items: center;
}

.note-icon {
    align-items: center;
    background: var(--brand);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.note-item.is-dragging { opacity: .45; }
.note-mobile-order-actions { display: none; }
.note-mobile-order-actions button {
    align-items: center;
    background: #fff;
    border: 1px solid var(--brand);
    color: var(--brand);
    display: inline-flex;
    height: 30px;
    justify-content: center;
    padding: 0;
    width: 30px;
}

.note-item .task-summary-actions form,
.note-reply-actions form {
    margin: 0;
}

.note-detail {
    overflow-wrap: anywhere;
}

.note-content {
    color: #444;
    line-height: 1.65;
    margin-bottom: 14px;
    white-space: normal;
}

.note-edit-form {
    border-top: 1px solid #eee;
    margin-top: 16px;
    padding-top: 18px;
}

.note-form-actions,
.note-reply-actions,
.note-reply-heading {
    align-items: center;
    display: flex;
    gap: 8px;
}

.note-replies {
    border-top: 1px solid #eee;
    margin-top: 22px;
    padding-top: 18px;
}

.note-reply {
    border-left: 3px solid rgba(var(--brand-rgb), .55);
    margin-bottom: 14px;
    padding: 2px 0 2px 14px;
}

.note-reply-heading {
    justify-content: space-between;
}

.note-reply-actions {
    flex: 0 0 auto;
}

.note-reply p {
    margin: 7px 0;
}

.note-reply-edit-form {
    display: grid;
    gap: 10px;
}

.note-reply-new-form {
    display: grid;
    gap: 6px;
    margin-top: 16px;
}

.note-reply-new-form > .note-reply-input { order: 1; }
.note-reply-new-form > .mention-tools { order: 2; }
.note-reply-new-form > .note-form-actions { order: 3; }

.note-reply-input {
    min-height: 58px;
}

.photo-album-form,
.photo-upload-form {
    display: grid;
    gap: 14px;
}

.photo-album-form > .btn,
.photo-upload-form > .btn {
    justify-self: start;
    width: auto;
}

.photo-album-grid {
    display: grid;
    gap: 12px;
}

.photo-album-card {
    align-items: center;
    border: 1px solid #eee;
    color: #222;
    display: grid;
    gap: 14px;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    padding: 15px 18px;
}

.photo-album-card:hover { border-color: var(--brand); color: #222; text-decoration: none; }
.photo-album-card strong, .photo-album-card small { display: block; }
.photo-album-card__icon { align-items: center; background: var(--brand-soft); border-radius: 50%; color: var(--brand); display: flex; font-size: 18px; height: 46px; justify-content: center; width: 46px; }

.photo-album-heading { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; margin-bottom: 20px; }
.photo-album-heading h2 { font-size: 19px; margin: 10px 0 5px; }
.photo-album-heading p { margin: 0; max-width: 720px; }
.photo-album-heading form { margin: 0; }
.photo-direct-actions { justify-content: flex-end; }
.photo-empty-message { margin: 0; }
.photo-albums-section { border-top: 1px solid #e8eded; margin-top: 34px; padding-top: 28px; }
.photo-albums-heading { align-items: flex-end; display: flex; gap: 20px; justify-content: space-between; margin-bottom: 18px; }
.photo-albums-heading h2 { font-size: 17px; margin: 0 0 3px; }
.photo-albums-heading p { margin: 0; }
.stock-list-overview { display: grid; gap: 12px; }
.stock-list-card { align-items: center; color: #222; display: flex; gap: 14px; padding: 15px 18px; }
.stock-list-card:hover { border-color: var(--brand); color: #222; text-decoration: none; }
.stock-list-card .task-sort-handle { cursor: default; flex: 0 0 38px; height: 38px; }
.stock-list-card .task-summary-main { min-width: 0; }
.stock-list-card .task-summary-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-heading { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; }
.stock-heading h2 { font-size: 19px; }
.stock-heading p { max-width: 720px; }
.stock-heading form { margin: 0; }
.stock-heading .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.stock-settings-form { align-items: end; display: grid; gap: 14px; grid-template-columns: minmax(220px, .65fr) minmax(300px, 1.35fr) auto; }
.stock-settings-form label { margin: 0; }
.stock-settings-form textarea { min-height: 42px; }
.stock-list-form { display: grid; gap: 14px; grid-template-columns: 1fr; }
.stock-list-form label { margin: 0; }
.stock-list-form textarea { min-height: 76px; }
.stock-list-form > div { display: flex; justify-content: flex-start; }
.stock-section-heading { align-items: flex-end; display: flex; gap: 20px; justify-content: space-between; margin-bottom: 15px; }
.stock-section-heading h2 { font-size: 17px; margin: 0 0 3px; }
.stock-section-heading p { margin: 0; }
.stock-heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.stock-section-heading--lists { border-top: 1px solid #eee; margin-top: 32px; padding-top: 28px; }
.stock-product-form { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stock-product-form > label { margin: 0; }
.stock-product-form .stock-product-title, .stock-product-form .stock-form-actions { grid-column: 1 / -1; }
.stock-product-form fieldset { border: 1px solid #e8eded; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin: 0; padding: 12px; }
.stock-product-form fieldset legend { font-size: 13px; font-weight: 600; padding: 0 5px; width: auto; }
.stock-product-form fieldset label { font-size: 12px; margin: 0; }
.stock-product-form [hidden] { display: none !important; }
.stock-products-list { display: grid; gap: 10px; }
.stock-quick-add { align-items: start; background: #fafcfc; border: 1px solid #edf0f0; display: grid; gap: 12px; grid-template-columns: minmax(210px, 1fr) minmax(210px, 1fr) auto; padding: 16px; }
.stock-quick-add .form-control, .stock-quick-add .btn { min-height: 40px; }
.stock-quick-add > .stock-product-picker { grid-column: 1 / -1; }
.stock-product-picker { position: relative; }
.stock-product-suggestions { left: 0; right: 0; top: calc(100% + 4px); width: auto; }
.stock-quick-add .stock-count-group { background: #fff; padding: 8px 10px 10px; }
.stock-quick-add .stock-form-actions { align-items: flex-start; display: flex; flex-direction: column; gap: 7px; padding-top: 19px; }
.stock-category-groups { display: grid; gap: 38px; }
.stock-category-section { min-width: 0; }
.stock-category-heading { align-items: baseline; border-bottom: 1px solid #e8eded; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 12px; padding: 0 2px 9px; }
.stock-category-heading h3 { color: #222; font-size: 16px; font-weight: 600; margin: 0; }
.stock-items-list { display: grid; gap: 12px; }
.stock-item { border-color: #e5e9e9; }
.stock-item-summary { align-items: center; display: flex; gap: 15px; min-width: 0; padding: 16px 18px; }
.stock-item-icon { cursor: default; }
.stock-item-used { color: var(--brand); font-size: 13px; font-weight: 600; margin-left: auto; white-space: nowrap; }
.stock-item-detail { border-top: 1px solid #edf0f0; display: none; padding: 18px; }
.stock-item-edit-form { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
.stock-item-edit-form > label { margin: 0; }
.stock-bulk-form { align-items: center; display: flex; gap: 12px; justify-content: flex-end; margin: 0 0 18px; }
.stock-bulk-form[hidden] { display: none; }
.stock-bulk-status { margin-right: auto; }
.stock-module.is-stock-fill-mode .stock-item { border-color: #d9e1e2; }
.stock-module.is-stock-fill-mode .stock-item-detail { display: block; }
.stock-count-group { border: 1px solid #e8eded; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 12px; }
.stock-count-group legend { color: #222; font-size: 13px; font-weight: 600; margin: 0; padding: 0 5px; width: auto; }
.stock-count-group label { font-size: 12px; margin: 0; }
.stock-edit-actions { grid-column: 1 / -1; }

.cashbox-list-form { display: grid; gap: 14px; }
.cashbox-list-form label { margin: 0; }
.cashbox-list-form textarea { min-height: 76px; }
.cashbox-list-form > div { display: flex; justify-content: flex-start; }
.cashbox-heading form { margin: 0; }
.cashbox-count-form { display: grid; gap: 26px; }
.cashbox-stats { margin-bottom: 0; }
.cashbox-stat-result { background: color-mix(in srgb, var(--brand) 8%, #fff) !important; border-color: color-mix(in srgb, var(--brand) 22%, #eee) !important; }
.cashbox-stat-result strong { color: var(--brand); }
.cashbox-count-section,
.cashbox-adjustments,
.cashbox-extra-grid { border-top: 1px solid #e8eded; padding-top: 22px; }
.cashbox-count-heading { align-items: end; display: flex; gap: 18px; justify-content: space-between; margin-bottom: 15px; }
.cashbox-count-heading h3,
.cashbox-adjustments h3 { font-size: 16px; margin: 0 0 4px; }
.cashbox-count-heading p { margin: 0; }
.cashbox-count-legend { display: grid; flex: 0 0 280px; font-size: 12px; font-weight: 600; gap: 10px; grid-template-columns: repeat(2, 1fr); text-align: center; text-transform: uppercase; }
.cashbox-denominations { display: grid; gap: 6px; }
.cashbox-denominations h4 { color: #555; font-size: 12px; font-weight: 600; letter-spacing: .04em; margin: 16px 0 2px; text-transform: uppercase; }
.cashbox-denominations h4:first-child { margin-top: 0; }
.cashbox-denomination-row { align-items: center; background: #fafcfc; border: 1px solid #edf0f0; display: grid; gap: 10px; grid-template-columns: minmax(74px, .55fr) minmax(110px, 1fr) minmax(110px, 1fr) minmax(90px, .7fr); min-height: 52px; padding: 6px 10px; }
.cashbox-denomination-row > strong { font-size: 15px; }
.cashbox-denomination-row label { margin: 0; }
.cashbox-denomination-row label > span { display: none; }
.cashbox-denomination-row input { min-height: 38px; text-align: right; }
.cashbox-row-total { color: var(--brand); font-size: 13px; font-weight: 600; text-align: right; white-space: nowrap; }
.cashbox-extra-grid { align-items: stretch; display: grid; gap: 18px; grid-template-columns: 1fr; }
.cashbox-counters,
.cashbox-notes { background: #fafcfc; border: 1px solid #e8eded; display: flex; flex-direction: column; min-width: 0; padding: 16px; }
.cashbox-counter-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.cashbox-counter-column > label,
.cashbox-notes { margin: 0; }
.cashbox-counters .cashbox-block-title,
.cashbox-notes .cashbox-block-title { color: #333; font-size: 16px; font-weight: 500; line-height: 1.35; margin: 0 0 12px; }
.cashbox-counter-column { min-width: 0; }
.cashbox-counter-column > label { display: block; margin-bottom: 6px; }
.cashbox-person-picker { margin-top: 0; }
.cashbox-person-picker .document-access-selected { min-height: 44px; }
.cashbox-notes textarea { flex: 1 1 auto; min-height: 132px; }
.cashbox-electronic-payments > label { display: block; margin: 0; max-width: 420px; }
.cashbox-electronic-payments > label > small { color: #888; display: block; font-size: 11px; margin-bottom: 5px; }
.cashbox-save { display: flex; justify-content: flex-start; }

.expense-quick-add { grid-template-columns: minmax(220px, 1.4fr) minmax(110px, .35fr) minmax(220px, .8fr) auto; }
.expense-quick-add .expense-payer-picker { margin: 0; min-width: 0; }
.expense-quick-add .document-access-selected { min-height: 42px; }
.expense-list-amount { color: var(--brand); flex: 0 0 auto; font-size: 15px; margin-left: auto; white-space: nowrap; }
.expense-edit-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.expense-edit-form > label:first-of-type,
.expense-edit-form > label:nth-of-type(3),
.expense-edit-form > .activity-person-picker,
.expense-edit-form > .btn { grid-column: 1 / -1; }

.product-catalog-heading { gap: 16px; }
.product-catalog-top-actions { gap: 8px; }
.stock-template-form { display: grid; gap: 14px; }
.stock-template-form > label { margin: 0; }
.stock-template-products { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stock-template-products fieldset { border: 1px solid #e8eded; margin: 0; min-width: 0; padding: 12px 14px 14px; }
.stock-template-products legend { font-size: 13px; font-weight: 600; padding: 0 5px; width: auto; }
.stock-template-products legend label { align-items: center; cursor: pointer; display: flex; gap: 7px; margin: 0; }
.stock-template-products fieldset > div { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stock-template-products fieldset > div > label { align-items: center; cursor: pointer; display: flex; gap: 7px; margin: 0; min-width: 0; }
.stock-template-products fieldset > div > label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-template-card .task-detail { padding: 18px; }
.product-category-admin-list { max-width: 470px; width: 100%; }
.product-category-name-form { flex: 1 1 auto; margin: 0; min-width: 0; }
.product-category-name-input { background: transparent !important; border-color: transparent !important; color: #111; height: 38px; padding-left: 0; }
.product-category-name-input:not([readonly]) { background: #fff !important; border-color: #ddd !important; padding-left: 12px; }
.product-category-groups { display: grid; gap: 34px; }
.product-category-group { border: 0; min-width: 0; }
.product-category-group > summary { cursor: pointer; list-style: none; }
.product-category-group > summary::-webkit-details-marker { display: none; }
.product-category-group > summary::after { color: var(--brand); content: "\f107"; font-family: FontAwesome; font-size: 14px; margin-left: 2px; }
.product-category-group[open] > summary::after { content: "\f106"; }
.product-category-group > summary > span:first-child { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.product-category-group > summary small { font-size: 12px; margin-top: 3px; }
.product-category-group .member-group { margin-top: 12px; }
.product-card summary { justify-content: flex-start; }
.product-card .member-summary-main { flex: 1 1 auto; min-width: 0; }
.product-card .member-summary-main strong,
.product-card .member-summary-main small { display: block; }
.product-card .task-summary-actions { margin-left: auto; }
.product-card.is-dragging { opacity: .5; }
.product-catalog-form { border-top: 1px solid #eee; padding: 20px; }
.member-tool-panel > .product-catalog-form { border-top: 0; }

.photo-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.photo-card { background: #fff; border: 1px solid #eee; min-width: 0; }
.photo-card__image { aspect-ratio: 4 / 3; background: #f3f5f5; border: 0; cursor: zoom-in; display: block; overflow: hidden; padding: 0; width: 100%; }
.photo-card__image img { height: 100%; object-fit: cover; transition: transform .2s ease; width: 100%; }
.photo-card__image:hover img { transform: scale(1.025); }
.photo-card__meta { align-items: center; color: #888; display: flex; font-size: 11px; gap: 8px; justify-content: space-between; padding: 8px 10px; }
.photo-card__meta form { margin: 0; }
.photo-card__meta button { background: transparent; border: 0; color: #999; cursor: pointer; padding: 2px 4px; }
.photo-card__meta button:hover { color: var(--brand); }

.photo-is-busy { overflow: hidden; }
.photo-busy-overlay { align-items: center; background: rgba(255,255,255,.88); display: flex; inset: 0; justify-content: center; padding: 22px; position: fixed; z-index: 1000003; }
.photo-busy-overlay[hidden] { display: none; }
.photo-busy-card { align-items: center; background: #fff; border: 1px solid rgba(0,0,0,.07); box-shadow: 0 18px 55px rgba(0,0,0,.14); color: #777; display: flex; flex-direction: column; gap: 7px; max-width: 390px; padding: 28px 34px 24px; text-align: center; width: 100%; }
.photo-busy-card strong { color: #222; font-size: 17px; }
.photo-busy-card > span:not(.photo-busy-spinner):not(.photo-busy-progress) { font-size: 13px; }
.photo-busy-spinner { animation: photo-busy-spin .75s linear infinite; border: 3px solid var(--brand-soft); border-radius: 50%; border-top-color: var(--brand); height: 38px; margin-bottom: 4px; width: 38px; }
.photo-busy-progress { background: var(--brand-soft); height: 3px; margin-top: 9px; overflow: hidden; position: relative; width: 100%; }
.photo-busy-progress span { animation: photo-busy-progress 1.25s ease-in-out infinite; background: var(--brand); height: 100%; left: -45%; position: absolute; width: 45%; }
@keyframes photo-busy-spin { to { transform: rotate(360deg); } }
@keyframes photo-busy-progress { 0% { left: -45%; } 100% { left: 100%; } }

.photo-lightbox { align-items: center; background: rgba(0, 0, 0, .92); display: flex; inset: 0; justify-content: center; position: fixed; z-index: 1000002; }
.photo-lightbox[hidden] { display: none; }
.photo-lightbox figure { align-items: center; display: flex; flex-direction: column; margin: 0; max-height: 92vh; max-width: min(88vw, 1500px); }
.photo-lightbox figure img { max-height: 86vh; max-width: 100%; object-fit: contain; }
.photo-lightbox figcaption { color: #ddd; font-size: 12px; margin-top: 8px; }
.photo-lightbox__close, .photo-lightbox__nav { background: rgba(255,255,255,.1); border: 0; color: #fff; cursor: pointer; position: absolute; z-index: 2; }
.photo-lightbox__close { font-size: 21px; height: 46px; right: 18px; top: 18px; width: 46px; }
.photo-lightbox__nav { border-radius: 50%; font-size: 22px; height: 52px; top: 50%; transform: translateY(-50%); width: 52px; }
.photo-lightbox__nav--prev { left: 18px; }
.photo-lightbox__nav--next { right: 18px; }
.photo-lightbox.is-slideshow,
.photo-lightbox:fullscreen { background: #050505; }
.photo-lightbox.is-slideshow figure,
.photo-lightbox:fullscreen figure { height: 100vh; max-height: none; max-width: none; width: 100vw; }
.photo-lightbox.is-slideshow figure img,
.photo-lightbox:fullscreen figure img { max-height: 100vh; max-width: 100vw; }
.photo-lightbox.is-slideshow figcaption,
.photo-lightbox:fullscreen figcaption { background: linear-gradient(transparent, rgba(0,0,0,.78)); bottom: 0; left: 0; margin: 0; padding: 45px 25px 18px; position: absolute; text-align: center; width: 100%; z-index: 1; }
.photo-lightbox.is-slideshow .photo-lightbox__close,
.photo-lightbox.is-slideshow .photo-lightbox__nav,
.photo-lightbox:fullscreen .photo-lightbox__close,
.photo-lightbox:fullscreen .photo-lightbox__nav { backdrop-filter: blur(4px); background: rgba(255,255,255,.16); }

@media (prefers-reduced-motion: reduce) {
    .photo-busy-spinner, .photo-busy-progress span { animation-duration: 2.5s; }
}

@media (max-width: 991px) { .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .photo-album-heading { flex-direction: column; }
    .photo-album-heading .actions { width: 100%; }
    .photo-album-heading .actions .btn { flex: 1 1 auto; }
    .photo-albums-heading { align-items: stretch; flex-direction: column; }
    .photo-albums-heading > .btn { align-self: flex-start; }
    .photo-grid { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .photo-card__meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .photo-lightbox__nav { height: 44px; width: 44px; }
    .photo-lightbox__nav--prev { left: 6px; }
    .photo-lightbox__nav--next { right: 6px; }
    .stock-heading { flex-direction: column; }
    .stock-heading .actions { width: 100%; }
    .stock-heading .actions .btn { flex: 1 1 auto; }
    .stock-settings-form, .stock-product-form, .stock-quick-add { grid-template-columns: 1fr; }
    .stock-section-heading { align-items: stretch; flex-direction: column; }
    .stock-section-heading .btn { width: 100%; }
    .stock-heading-actions { width: 100%; }
    .stock-heading-actions .btn { flex: 1 1 auto; }
    .stock-product-form fieldset { grid-template-columns: 1fr 1fr; }
    .product-catalog-page { padding: 20px !important; }
    .stock-template-products { grid-template-columns: 1fr; }
    .stock-template-products fieldset > div { grid-template-columns: 1fr; }
    .product-catalog-top-actions { width: 100%; }
    .product-catalog-top-actions .btn { flex: 1 1 auto; }
    .product-category-groups { gap: 28px; }
    .product-category-group > summary { align-items: center; }
    .product-card summary { gap: 9px; padding: 12px 10px; }
    .product-card .member-sort-handle { flex-basis: 30px; height: 30px; width: 30px; }
    .product-catalog-page .member-mobile-order-actions { display: inline-flex; flex: 0 0 auto; gap: 4px; }
    .product-catalog-page .category-sort-handle,
    .product-catalog-page .product-card .member-sort-handle { display: none; }
    .product-card .task-summary-actions { gap: 5px; }
    .stock-quick-add .btn { align-items: center; display: flex; justify-content: center; }
    .stock-item-summary { flex-wrap: nowrap; gap: 9px; padding: 13px 12px; }
    .stock-item .task-summary-main small { display: none; }
    .stock-item [data-stock-edit] { display: none; }
    .stock-item-detail { padding: 10px 12px 12px; }
    .stock-item-edit-form { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stock-item-edit-form .stock-count-group { gap: 7px; grid-template-columns: 1fr; padding: 8px; }
    .stock-item-edit-form .stock-count-group label { font-size: 11px; }
    .stock-item-edit-form .form-control { min-width: 0; padding-left: 8px; padding-right: 8px; }
    .stock-item-edit-form .stock-edit-actions { grid-column: 1 / -1; }
    .stock-item-edit-form .stock-edit-actions .btn { width: 100%; }
    .stock-item-used { display: none; }
    .stock-count-group { grid-template-columns: 1fr 1fr; }
}

.activity-stats {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
}

.activity-stats div {
    background: #fafafa;
    border: 1px solid #eee;
    padding: 14px;
}

.activity-stats span {
    color: #777;
    display: block;
    font-size: 12px;
    text-transform: uppercase;
}

.activity-stats strong {
    color: #000;
    display: block;
    font-size: 20px;
    margin-top: 5px;
}

.activity-stats.cashbox-stats { margin-bottom: 0; }

@media (max-width: 767px) {
    .cashbox-section-heading { gap: 14px; }
    .cashbox-heading { align-items: flex-start; flex-direction: row; }
    .cashbox-heading > div:first-child { min-width: 0; }
    .cashbox-heading .actions { flex: 0 0 auto; width: auto; }
    .cashbox-heading .actions .btn { flex: 0 0 38px; height: 38px; padding: 0; width: 38px; }
    .activity-stats.cashbox-stats { gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cashbox-stats div { min-width: 0; padding: 10px; }
    .cashbox-stats span { font-size: 10px; }
    .cashbox-stats strong { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cashbox-count-form { gap: 20px; }
    .cashbox-count-section,
    .cashbox-adjustments,
    .cashbox-extra-grid { padding-top: 17px; }
    .cashbox-count-heading { align-items: flex-start; margin-bottom: 10px; }
    .cashbox-count-heading p { display: none; }
    .cashbox-count-legend { display: none; }
    .cashbox-denominations { gap: 5px; }
    .cashbox-denominations h4 { margin-top: 14px; }
    .cashbox-denomination-row { gap: 6px; grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1fr); min-height: 55px; padding: 5px 7px; }
    .cashbox-denomination-row > strong { font-size: 14px; }
    .cashbox-denomination-row label { min-width: 0; position: relative; }
    .cashbox-denomination-row label > span { color: #8a8a8a; display: block; font-size: 9px; left: 7px; line-height: 1; pointer-events: none; position: absolute; text-transform: uppercase; top: 5px; z-index: 1; }
    .cashbox-denomination-row input { font-size: 17px; min-height: 45px; padding: 15px 7px 4px; width: 100%; }
    .cashbox-row-total { display: none; }
    .cashbox-extra-grid { grid-template-columns: 1fr; }
    .cashbox-counter-grid { gap: 7px; }
    .cashbox-save { background: rgba(255,255,255,.96); bottom: 0; box-shadow: 0 -8px 18px rgba(0,0,0,.06); margin: 0 -12px -12px; padding: 10px 12px; position: sticky; z-index: 8; }
    .cashbox-save .btn { min-height: 44px; width: 100%; }

    .carry-list-quick-add.expense-quick-add { display: grid; grid-template-columns: minmax(0, 1fr) 92px 44px; }
    .carry-list-quick-add.expense-quick-add > input[name="item"] { grid-column: 1; padding-right: 10px; }
    .carry-list-quick-add.expense-quick-add > input[name="bedrag"] { grid-column: 2; min-width: 0; }
    .carry-list-quick-add.expense-quick-add > .expense-payer-picker { grid-column: 1 / -1; }
    .carry-list-quick-add.expense-quick-add > .btn { bottom: auto; grid-column: 3; height: 44px; position: static; right: auto; top: auto; width: 44px; }
    .carry-list-item.expense-list-item > summary { grid-template-columns: auto minmax(0, 1fr) auto 38px 18px; }
    .carry-list-item.expense-list-item > summary .expense-list-amount { grid-column: 3; margin: 0; }
    .carry-list-item.expense-list-item > summary .carry-list-row-actions { grid-column: 4; }
    .carry-list-item.expense-list-item > summary::after { grid-column: 5; }
    .expense-edit-form { grid-template-columns: 1fr; }
}

.activity-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.activity-table {
    border-collapse: collapse;
    margin-bottom: 18px;
    width: 100%;
}

.activity-table th,
.activity-table td {
    border-bottom: 1px solid #eee;
    padding: 8px;
    text-align: right;
    vertical-align: top;
}

.activity-table th:first-child,
.activity-table td:first-child {
    text-align: left;
}

.activity-table th {
    color: #777;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.activity-table input {
    min-width: 70px;
}

.activity-drink-table input + input {
    margin-top: 6px;
}

.task-accordion.admin-accordion-animating > .task-detail,
.document-accordion.admin-accordion-animating > .task-detail,
.activity-accordion.admin-accordion-animating > .activity-detail,
.activity-section.admin-accordion-animating > .accordion-body,
.verslag-punt.admin-accordion-animating > .task-detail,
.member-card-accordion.admin-accordion-animating > .member-view,
.member-card-accordion.admin-accordion-animating > .member-edit-form,
.member-tool-panel.admin-accordion-animating > .member-form,
.inline-tool-panel.admin-accordion-animating > .member-form {
    will-change: max-height, opacity;
}

.task-accordion.admin-accordion-closing > .task-detail,
.document-accordion.admin-accordion-closing > .task-detail,
.activity-accordion.admin-accordion-closing > .activity-detail,
.activity-section.admin-accordion-closing > .accordion-body,
.verslag-punt.admin-accordion-closing > .task-detail,
.member-card-accordion.admin-accordion-closing > .member-view,
.member-card-accordion.admin-accordion-closing > .member-edit-form,
.member-tool-panel.admin-accordion-closing > .member-form,
.inline-tool-panel.admin-accordion-closing > .member-form {
    pointer-events: none;
}

.task-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 0;
}

.task-summary-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin-left: auto;
    min-width: 0;
}

.task-action-label-button {
    align-items: center;
    display: inline-flex;
    min-height: 38px;
    white-space: nowrap;
}

.task-summary-actions .leden-actieknop {
    height: 38px;
    width: 38px;
}

.report-detail-back {
    margin-bottom: 22px;
}

.report-detail-heading {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 25px;
}

.report-detail-icon-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.report-detail-icon-actions form {
    display: inline-flex;
    margin: 0;
}

.report-detail-icon-actions .leden-actieknop {
    height: 38px;
    width: 38px;
}

.report-agenda-toolbar {
    align-items: center;
    border-top: 1px solid #edf0f1;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin: 24px 0 18px;
    padding-top: 18px;
}

.report-carryover-choice {
    align-items: center;
    border-top: 1px solid #edf0f1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 18px;
    padding-top: 14px;
}

.report-carryover-choice .check-line {
    cursor: pointer;
    font-size: 14px;
    margin: 0;
}

.report-carryover-choice .check-line input:disabled {
    cursor: default;
}

.report-carryover-choice [data-carryover-status] {
    min-height: 18px;
}

.report-save-template-choice {
    align-items: center;
    border-top: 1px solid #e5eaec;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 26px;
    padding-top: 18px;
}

.report-save-template-choice .check-line {
    cursor: pointer;
    font-size: 14px;
    margin: 0;
}

.report-save-template-choice [data-report-template-status] {
    min-height: 18px;
}

.report-open-items {
    border: 1px solid #e5eaec;
    margin: 8px 0 20px;
    padding: 16px;
}

.report-open-items legend {
    color: #222;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    padding: 0 6px;
    width: auto;
}

.report-open-items__list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    max-height: 290px;
    overflow-y: auto;
}

.report-open-item {
    align-items: flex-start;
    background: #fbfcfc;
    border: 1px solid #edf0f1;
    cursor: pointer;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
}

.report-open-item:hover,
.report-open-item:focus-within {
    background: var(--brand-soft);
    border-color: var(--brand-soft-border);
}

.report-open-item input {
    accent-color: var(--brand);
    flex: 0 0 auto;
    margin-top: 4px;
}

.report-open-item span,
.report-open-item strong,
.report-open-item small {
    display: block;
    min-width: 0;
}

.report-open-item strong {
    color: #222;
    font-size: 14px;
    font-weight: 600;
}

.report-title-line {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.report-title-line > strong {
    min-width: 0;
}

.report-open-indicator {
    align-items: center;
    background: var(--brand-soft);
    border: 1px solid var(--brand-soft-border);
    border-radius: 50%;
    color: var(--brand);
    display: inline-flex;
    flex: 0 0 24px;
    font-size: 11px;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.report-open-indicator[hidden] {
    display: none;
}

.report-open-indicator--overview {
    flex-basis: 22px;
    height: 22px;
    width: 22px;
}

.task-actions form,
.task-comment-actions form {
    display: inline-flex;
}

.task-description-input {
    min-height: 170px;
}

.task-edit-form {
    margin-top: 18px;
}

.task-form .field-box {
    border: 0;
    margin-top: 12px;
    padding: 0;
}

.task-form .field-box legend {
    padding-left: 0;
}

.responsible-search {
    max-width: 380px;
}

.task-comments {
    border-top: 1px solid #eee;
    margin-top: 18px;
    padding-top: 15px;
}

.task-comment {
    background: #fafafa;
    border-left: 3px solid var(--brand);
    margin-bottom: 12px;
    padding: 12px 14px;
}

.task-comment strong,
.task-comment small {
    display: block;
}

.task-comment p {
    margin: 6px 0 8px;
}

.task-comment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.task-comment-new {
    margin-top: 15px;
}

.mention-tools {
    align-items: center;
    display: flex;
    gap: 6px;
    margin: 6px 0 12px;
    position: relative;
}

.mention-hint {
    align-items: center;
    color: var(--brand);
    display: inline-flex;
    font-size: 13px;
    gap: 5px;
    justify-content: center;
    opacity: .75;
}

.mention-trigger {
    align-items: center;
    background: transparent;
    border: 0;
    color: #8b9498;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 12px;
    gap: 6px;
    line-height: 1.35;
    padding: 1px 0;
    transition: color .16s ease;
}

.mention-trigger:hover,
.mention-trigger:focus-visible {
    color: var(--brand);
    outline: none;
}

.report-participants {
    background: #fbfcfc;
    border: 1px solid #edf0f1;
    padding: 16px 18px;
}

.report-participants__header {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.report-participant-editor {
    min-width: 0;
}

.report-participant-save-status {
    display: block;
    font-size: 12px;
    margin-top: 6px;
}

.report-participant-save-status[hidden] {
    display: none;
}

.report-participant-chips {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.report-participant-chip {
    align-items: center;
    background: var(--brand-soft);
    border: 1px solid rgba(var(--brand-rgb), .14);
    border-radius: 999px;
    color: #344247;
    display: inline-flex;
    font-size: 13px;
    gap: 7px;
    line-height: 1.25;
    max-width: 100%;
    padding: 7px 10px;
}

.report-participant-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-participant-chip .fa {
    color: var(--brand);
}

.report-participant-chip button {
    align-items: center;
    background: transparent;
    border: 0;
    color: #7a8589;
    cursor: pointer;
    display: inline-flex;
    padding: 0 0 0 2px;
}

.report-participant-chip button:hover,
.report-participant-chip button:focus-visible {
    color: var(--brand);
    outline: none;
}

.report-participant-suggestions {
    width: min(440px, 100%);
}

.mention-suggestions {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-sizing: border-box;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
    left: 0;
    max-height: 280px;
    width: min(340px, calc(100vw - 48px));
    overflow: auto;
    position: absolute;
    top: 28px;
    z-index: 200;
}

button.mention-suggestion,
.mention-suggestion {
    align-items: center;
    background: #fff;
    border: 0;
    border-radius: 10px;
    box-sizing: border-box;
    color: #333;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    gap: 10px;
    line-height: 1.35;
    margin: 4px;
    min-height: 50px;
    padding: 6px 9px;
    text-align: left;
    width: calc(100% - 8px);
}

button.mention-suggestion:hover,
button.mention-suggestion.is-active,
.mention-suggestion:hover,
.mention-suggestion.is-active {
    background: var(--brand-soft);
    box-shadow: none;
    color: var(--brand);
}

button.mention-suggestion .mention-suggestion__avatar,
.mention-suggestion__avatar {
    align-items: center;
    background: var(--brand-soft);
    border-radius: 50%;
    color: var(--brand);
    display: inline-flex;
    flex: 0 0 38px !important;
    font-size: 14px;
    font-weight: 600;
    height: 38px !important;
    justify-content: center;
    overflow: hidden;
    width: 38px !important;
}

button.mention-suggestion .mention-suggestion__avatar img,
.mention-suggestion__avatar img {
    display: block;
    height: 38px !important;
    max-height: 38px !important;
    max-width: 38px !important;
    object-fit: cover;
    width: 38px !important;
}

button.mention-suggestion .mention-suggestion__body,
.mention-suggestion__body {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

button.mention-suggestion .mention-suggestion__body strong,
.mention-suggestion__body strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button.mention-suggestion .mention-suggestion__body strong,
.mention-suggestion__body strong {
    color: #222;
    font-size: 14px;
    font-weight: 600;
}

.task-order-status {
    min-height: 18px;
    margin-top: 10px;
}

.opmerking-mention {
    color: var(--brand);
    font-weight: 600;
}

.report-template-picker {
    position: relative;
    width: 100%;
}

[data-report-template-select][hidden] {
    display: none !important;
}

.report-template-picker__trigger {
    align-items: center;
    background: #fff;
    border: 1px solid #ccd5d8;
    color: #3f494d;
    display: flex;
    font: inherit;
    justify-content: space-between;
    min-height: 42px;
    padding: 8px 12px;
    text-align: left;
    width: 100%;
}

.report-template-picker__trigger .fa {
    color: var(--brand);
    font-size: 11px;
    transition: transform .18s ease;
}

.report-template-picker__trigger:focus,
.report-template-picker__trigger:focus-visible {
    border-color: var(--brand-soft-border);
    box-shadow: 0 0 0 2px var(--brand-soft);
    outline: 0 !important;
}

.report-template-picker.is-open .report-template-picker__trigger {
    background: #fbfdfd;
    border-color: var(--brand-soft-border);
    box-shadow: 0 0 0 2px var(--brand-soft);
    outline: 0 !important;
}

.report-template-picker.is-open .report-template-picker__trigger .fa {
    transform: rotate(180deg);
}

.report-template-picker__menu {
    background: #fff;
    border: 1px solid #dbe2e4;
    box-shadow: 0 5px 14px rgba(24, 45, 52, .09);
    left: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    z-index: 50;
}

.report-template-picker__menu[hidden] {
    display: none;
}

.report-template-picker__option {
    align-items: center;
    background: transparent;
    border: 0;
    color: #465155;
    display: flex;
    font: inherit;
    justify-content: space-between;
    min-height: 40px;
    padding: 8px 10px;
    text-align: left;
    width: 100%;
}

.report-template-picker__option:hover,
.report-template-picker__option:focus {
    background: var(--brand-soft);
    color: var(--brand);
    outline: 0;
}

.report-template-picker__option .fa {
    color: var(--brand);
    opacity: 0;
}

.report-template-picker__option.is-selected {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
}

.report-template-picker__option.is-selected .fa {
    opacity: 1;
}

.pijlboven {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000000;
}

.pijlboven .back-to-top {
    align-items: center;
    background: rgba(255, 255, 255, .9);
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
    color: #777;
    display: flex !important;
    height: 50px;
    justify-content: center;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: static !important;
    transform: none !important;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
    visibility: visible !important;
    width: 50px;
}

.pijlboven .back-to-top:hover,
.pijlboven .back-to-top:focus {
    background: var(--brand) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
    color: var(--brand-button-text);
    text-decoration: none;
}

@media (max-width: 520px) {
    .pijlboven {
        bottom: 16px;
        right: 14px;
    }

    .pijlboven .back-to-top {
        display: flex !important;
        height: 44px;
        width: 44px;
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        display: none;
        flex-basis: 100%;
        order: 3;
        width: 100%;
    }

    .navbar-collapse.show {
        display: block;
    }

    .navbar-nav {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        margin-top: 12px;
        padding-bottom: 8px;
        width: 100%;
    }

    .u-header__section .navbar-nav > .nav-item {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
    }

    .u-header__section .navbar-nav > .nav-item > .nav-link,
    .u-header__section .navbar-nav > .nav-item > details > summary.nav-link {
        padding: 8px 0 !important;
    }

    .va-account-menu .hs-sub-menu {
        left: 0;
        margin-top: 6px;
        position: static;
        right: auto;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-row-wide {
        grid-column: span 1;
    }
}

@media (max-width: 520px) {
    .u-shadow-v2.g-pa-30 {
        padding: 22px 16px !important;
    }

    .report-detail-heading {
        gap: 12px;
    }

    .report-detail-icon-actions {
        gap: 6px;
    }

    .report-agenda-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .report-agenda-toolbar .btn {
        align-self: flex-end;
    }

    .report-participants {
        padding: 14px;
    }

    .report-participants__header {
        align-items: stretch;
        flex-direction: column;
    }

    .report-participant-picker,
    .report-participant-picker .document-access-selected,
    .report-participant-picker .document-access-input,
    .report-participant-suggestions {
        width: 100%;
    }

    .member-print-action {
        display: none !important;
    }

    .member-print-menu {
        display: none !important;
    }

    .admin-button-label {
        display: none;
    }

    .member-group-header {
        align-items: flex-start;
        gap: 10px;
    }

    .member-group-print-actions {
        gap: 6px;
    }

    .member-group-print-actions .btn,
    [data-toggle-details="nieuw-lid"].btn,
    a[href*="sectie=categorieen"].btn {
        align-items: center;
        display: inline-flex;
        justify-content: center;
        min-height: 36px;
        min-width: 38px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .member-group-print-actions .btn i,
    [data-toggle-details="nieuw-lid"].btn i,
    a[href*="sectie=categorieen"].btn i {
        margin-right: 0 !important;
    }

    .member-sort-handle {
        display: none;
    }

    .task-page-heading {
        align-items: flex-start !important;
    }

    .task-page-heading,
    .task-page-actions,
    .task-toolbar,
    .task-toolbar .btn-group,
    .task-toolbar .input-group {
        width: 100%;
    }

    .task-page-actions .btn,
    .task-toolbar .btn-group .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    .task-toolbar {
        align-items: stretch;
    }

    .activity-inline-add,
    .activity-stats {
        grid-template-columns: 1fr;
    }

    .activity-module-overview {
        grid-template-columns: 1fr;
    }

    .carry-list-quick-add {
        grid-template-columns: 1fr;
    }

    .carry-list-quick-add .btn {
        min-height: 40px;
    }

    .carry-list-toolbar {
        align-items: stretch;
    }

    .carry-list-item__avatar {
        flex-basis: 34px;
        height: 34px;
        width: 34px;
    }

    .carry-list-row-actions {
        margin-left: 46px;
        width: auto;
    }

    .activity-mini-row {
        flex-direction: column;
    }

    .activity-table th,
    .activity-table td {
        padding: 7px 5px;
    }

    .activity-table input {
        min-width: 58px;
    }

    .activity-drink-table {
        min-width: 720px;
    }

    .activity-row-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .task-accordion summary {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px;
        padding-right: 46px;
        position: relative;
    }

    .task-sort-handle {
        display: none;
    }

    .notes-panel .note-mobile-order-actions {
        display: inline-flex;
        flex: 0 0 auto;
        gap: 5px;
    }

    .activity-overview-row {
        flex-wrap: wrap;
        gap: 0;
    }

    .activity-overview-link,
    .activity-order-control + .activity-overview-link {
        flex: 1 1 100%;
        padding: 15px;
    }

    .activity-order-control {
        margin: 0 0 12px 15px;
        order: 2;
    }

    .activity-order-control .task-sort-handle {
        display: none;
    }

    .activity-mobile-order-actions {
        display: inline-flex;
        gap: 6px;
    }

    .activity-overview-row .task-summary-actions {
        margin: 0 15px 12px auto;
        order: 3;
    }

    .task-summary-main {
        flex: 1 1 100%;
        order: 1;
    }

    .task-summary-main small {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .task-summary-main small .g-ml-10 {
        margin-left: 0 !important;
    }

    .task-summary-actions {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-left: 0;
        order: 3;
    }

    .task-completed-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .task-action-label-button {
        white-space: normal;
    }

    .task-accordion summary::after {
        margin-left: 0;
        order: 0;
        position: absolute;
        right: 18px;
        top: 28px;
    }

    .document-accordion summary {
        display: grid;
        gap: 10px 12px;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .document-accordion .task-summary-main {
        grid-column: 1 / 2;
        min-width: 0;
        order: 0;
        width: 100%;
    }

    .document-accordion summary::after {
        align-self: center;
        grid-column: 2 / 3;
        grid-row: 1;
        margin-left: 0;
        order: 0;
        position: static;
    }

    .document-accordion .task-summary-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        margin-left: 0;
        order: 0;
        width: 100%;
    }

    .document-title-line,
    .document-title-text,
    .document-summary-meta,
    .document-file-count,
    .document-files,
    .document-file-row,
    .document-file-main,
    .document-file-link,
    .document-file-name {
        max-width: 100%;
        min-width: 0;
    }

    .document-file-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .inline-add-form {
        grid-template-columns: minmax(0, 1fr) 38px;
        max-width: none;
    }

    .task-search {
        max-width: none;
        width: 100%;
    }

    .task-actions {
        justify-content: flex-start;
    }

    .member-accordion summary {
        gap: 10px;
        padding: 13px 12px;
    }

    .member-contact-avatar {
        flex-basis: 36px;
        height: 36px;
        width: 36px;
    }

    .member-contact-card {
        align-items: flex-start;
        display: grid;
        gap: 14px;
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .member-contact-avatar-large {
        flex-basis: 68px;
        height: 68px;
        width: 68px;
    }

    .account-photo-card {
        align-items: flex-start;
    }

    .profile-photo-editor {
        align-items: flex-start;
        gap: 13px;
    }

    .profile-photo-editor__avatar {
        font-size: 23px;
        height: 72px;
        width: 72px;
    }

    .profile-photo-editor__camera {
        height: 25px;
        width: 25px;
    }

    .member-contact-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .member-contact-action {
        flex: 0 0 58px;
        height: 58px;
        min-height: 58px;
        min-width: 58px;
        padding: 0;
        width: 58px;
    }

    .member-contact-action i {
        font-size: 21px;
    }

    .member-readonly-grid {
        gap: 8px;
        grid-template-columns: 1fr;
    }

    .member-readonly-field-wide {
        grid-column: span 1;
    }

    .member-readonly-field strong {
        font-size: 13px;
    }

    .member-readonly-field span {
        line-height: 1.5;
        margin-top: 0;
    }

    .member-readonly-line {
        line-height: 1.45;
        margin-top: 0 !important;
    }

    .member-readonly-line span {
        margin-top: 0;
    }

    .document-search {
        align-items: stretch;
        flex-wrap: nowrap;
    }

    .document-search .input-group-append {
        flex: 0 0 auto;
    }

    #document-form-panel {
        scroll-margin-top: 210px;
    }

    .document-mobile-new-action {
        align-items: center;
        display: inline-flex !important;
        justify-content: center;
    }

    .document-print-label {
        display: none !important;
    }

    .document-print-icon {
        margin-right: 0;
    }

    .search-clear-button {
        min-width: 42px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .search-clear-button span {
        display: none;
    }

    .search-clear-button .fa {
        margin-right: 0 !important;
    }

    .dashboard-modules {
        margin-bottom: 24px;
    }

    .dashboard-module-grid {
        margin-bottom: -12px;
    }

    .dashboard-module-column {
        margin-bottom: 12px;
    }

    .dashboard-card {
        align-items: center;
        display: grid;
        gap: 14px;
        grid-template-columns: 50px minmax(0, 1fr) 30px;
        min-height: 0;
        padding: 17px;
    }

    .dashboard-card::after {
        height: 135px;
        right: -62px;
        top: -70px;
        width: 135px;
    }

    .dashboard-card__icon {
        flex-basis: 50px;
        font-size: 21px;
        height: 50px;
        margin-bottom: 0;
        width: 50px;
    }

    .dashboard-card__arrow {
        grid-column: 3;
        position: static;
    }

    .dashboard-card:hover,
    .dashboard-card:focus {
        transform: translateY(-1px);
    }

    .dashboard-overview {
        padding: 20px 18px 18px;
    }

    .overview-card {
        gap: 14px;
        padding: 18px;
    }

    /* Op mobiel is de meeneemlijst een compacte afvinklijst. */
    .carry-list-quick-add {
        display: block;
        position: relative;
    }

    .carry-list-quick-add > input[name="omschrijving"] {
        display: none;
    }

    .carry-list-quick-add > input[name="item"] {
        min-height: 44px;
        padding-right: 50px;
    }

    .carry-list-quick-add > .btn {
        align-items: center;
        border-bottom: 0;
        border-right: 0;
        border-top: 0;
        bottom: 1px;
        display: inline-flex;
        height: 42px;
        justify-content: center;
        min-height: 0;
        padding: 0;
        position: absolute;
        right: 1px;
        top: 1px;
        width: 46px;
    }

    .carry-list-quick-add > .btn span {
        display: none;
    }

    .carry-list-quick-add > .btn .fa {
        margin: 0;
    }

    .carry-list-item > summary {
        align-items: center;
        display: grid;
        flex-wrap: nowrap;
        gap: 8px;
        grid-template-columns: auto minmax(0, 1fr) 38px 18px;
        min-height: 58px;
        padding: 9px 10px;
        position: relative;
    }

    .carry-list-item > summary .carry-list-item__avatars {
        grid-column: 1;
        order: 0;
        padding: 0;
    }

    .carry-list-item__avatars .carry-list-item__avatar {
        display: none;
    }

    .carry-list-item__avatars .carry-list-item__avatar:first-child {
        display: inline-flex;
        margin-left: 0;
    }

    .carry-list-item__avatars .carry-list-item__avatar--more {
        display: none;
    }

    .carry-list-mobile-avatar-count {
        align-items: center;
        background: #f1f1f1;
        border: 2px solid #fff;
        border-radius: 999px;
        color: #666;
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 10px;
        font-weight: 600;
        height: 28px;
        justify-content: center;
        margin-left: -8px;
        min-width: 28px;
        padding: 0 5px;
    }

    .carry-list-item > summary .carry-list-item__main {
        grid-column: 2;
        order: 0;
        overflow: hidden;
        width: auto;
    }

    .carry-list-item__main > strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .carry-list-item__main .carry-list-responsible-line {
        display: none;
    }

    .carry-list-item > summary .carry-list-row-actions {
        display: block;
        grid-column: 3;
        margin: 0;
        order: 0;
        width: 38px;
    }

    .carry-list-row-actions .carry-list-desktop-edit,
    .carry-list-row-actions .carry-list-desktop-delete {
        display: none;
    }

    .carry-list-row-actions .carry-list-toggle-action {
        display: inline-flex;
        margin: 0;
    }

    .carry-list-row-actions .carry-list-toggle-action .leden-actieknop {
        height: 36px;
        width: 36px;
    }

    .carry-list-item > summary::after {
        align-self: center;
        grid-column: 4;
        margin: 0;
        order: 0;
        position: static;
        right: auto;
        top: auto;
    }

    .carry-list-item__body {
        padding: 12px;
    }

    .carry-list-mobile-responsibles {
        display: block;
        font-size: 12px;
        margin: 0 0 10px;
    }

    .carry-list-mobile-detail-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 0 12px;
    }

    .carry-list-mobile-detail-actions form {
        margin: 0;
    }

    .helper-list-create {
        display: block;
        position: relative;
    }

    .helper-list-create .form-control {
        min-height: 44px;
        padding-right: 50px;
    }

    .helper-list-create .btn {
        bottom: 1px;
        font-size: 0;
        height: 42px;
        min-height: 0;
        padding: 0;
        position: absolute;
        right: 1px;
        top: 1px;
        width: 46px;
    }

    .helper-list-create .btn .fa {
        font-size: 14px;
        margin: 0;
    }

    .helper-list__header {
        padding: 12px;
    }

    .helper-new-task > summary {
        padding: 12px;
    }

    .helper-new-task-button {
        width: 100%;
    }

    .helper-new-task > summary small {
        display: none;
    }

    .helper-task-form {
        grid-template-columns: minmax(0, 1fr) 105px;
    }

    .helper-task > summary {
        align-items: center;
        display: grid;
        flex-wrap: nowrap;
        gap: 8px;
        grid-template-columns: auto minmax(0, 1fr) auto 16px;
        min-height: 60px;
        padding: 9px 10px;
    }

    .helper-task > summary .helper-task__people {
        grid-column: 1;
        order: 0;
    }

    .helper-task > summary .helper-task__main {
        grid-column: 2;
        order: 0;
        width: auto;
    }

    .helper-task > summary .helper-task__actions {
        flex: 0 0 auto;
        grid-column: 3;
        margin: 0;
        order: 0;
        width: auto;
    }

    .helper-task > summary::after {
        grid-column: 4;
        margin: 0;
        order: 0;
        position: static;
        right: auto;
        top: auto;
    }

    .helper-task__actions > .leden-actieknop,
    .helper-task__actions > form {
        display: none;
    }

    .helper-progress {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .helper-progress > .helper-schedule,
    .helper-progress > .helper-schedule + .helper-schedule,
    .helper-progress > .helper-occupancy {
        border: 0;
        margin-left: 0;
        padding: 0;
    }

    .helper-progress .helper-occupancy {
        display: none;
    }

    .helper-task__body {
        padding: 12px;
    }

    .helper-mobile-admin-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 14px;
    }

    .helper-mobile-admin-actions form {
        margin: 0;
    }

    .helper-task-form__description {
        grid-column: 1 / -1;
    }

    .helper-picker-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .helper-person-add {
        grid-template-columns: minmax(0, 1fr) 42px;
        padding: 10px;
    }

    .helper-person-add > .btn {
        height: 38px;
        padding: 0;
        width: 42px;
    }

    .helper-person-add > .btn span {
        display: none;
    }

    .helper-create-contact {
        grid-column: 1 / -1;
        min-height: 0;
    }

}