/* /Components/Account/Pages/Manage/EnableAuthenticator.razor.rz.scp.css */
.info-message[b-5n0e51bupv] {
    justify-content: start;
    margin: 0.625rem 0 0.625rem 0;
}
/* /Components/Account/Pages/Manage/ExternalLogins.razor.rz.scp.css */
.current-logins[b-f4ydbjc2u0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.current-logins-item[b-f4ydbjc2u0] {
    display: flex;
    gap: 0.625rem;
}
/* /Components/Account/Shared/ExternalLoginPicker.razor.rz.scp.css */
.external-logins[b-opr3kjs3la] {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 500px) {
    .external-logins[b-opr3kjs3la] {
        flex-direction: column;
    }
}
/* /Components/Account/Shared/ShowRecoveryCodes.razor.rz.scp.css */
.codes[b-uky84kl95m] {
    margin: 0.625rem 0 0.625rem 0;
}
/* /Components/Layout/Drawer.razor.rz.scp.css */
.drawer-container[b-n0fa7k6q4o] {
    height: 100%;
}

.navigation-drawer-shading[b-n0fa7k6q4o] {
    height: 100%;
    position: absolute;
    transition: ease 300ms;
    transition-property: opacity, visibility;
    visibility: visible;
    width: 100%;
    z-index: 99;
    background-color: var(--dxds-color-surface-backdrop-default-rest);
}

.navigation-drawer.mobile.panel-closed .navigation-drawer-shading[b-n0fa7k6q4o] {
    opacity: 0;
    visibility: hidden;
}

[b-n0fa7k6q4o] .navigation-drawer > .dxbl-drawer-panel {
    display: flex;
}

[b-n0fa7k6q4o] .navigation-drawer.mobile > .dxbl-drawer-panel {
    display: none;
}

.navigation-drawer-shading[b-n0fa7k6q4o] {
    display: none;
}

[b-n0fa7k6q4o] .panel-open:not(.mobile) .nav-buttons-container .menu-button {
    display: none;
}

@media (max-width: 768px) {
    [b-n0fa7k6q4o] .navigation-drawer > .dxbl-drawer-panel {
        display: none;
    }

    [b-n0fa7k6q4o] .navigation-drawer.mobile > .dxbl-drawer-panel {
        display: flex;
    }

    .navigation-drawer-shading[b-n0fa7k6q4o] {
        display: block;
    }

    [b-n0fa7k6q4o] .panel-open:not(.mobile) .nav-buttons-container .menu-button {
        display: flex;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-9qu03da8h9] {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

[b-9qu03da8h9] .navigation-drawer {
    --dxbl-drawer-panel-body-padding-x: 0;
    --dxbl-drawer-panel-body-padding-y: 1rem;
    --dxbl-drawer-panel-footer-bg: none;
    --dxbl-drawer-panel-header-bg: none;
    --dxbl-drawer-separator-border-width: 0;

    height: 100%;
}

[b-9qu03da8h9] .navigation-drawer > .dxbl-drawer-panel {
    background-image: linear-gradient(
            180deg,
            var(--dxds-color-surface-primary-default-rest) 0%,
            var(--dxds-primary-170) 150%
    );
}

.navigation-drawer-header[b-9qu03da8h9] {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 1.375rem 0.375rem;
    width: 100%;
}

.navigation-drawer-header .logo[b-9qu03da8h9] {
    height: 2rem;
    width: 9rem;
}

.navigation-drawer-footer[b-9qu03da8h9] {
    display: flex;
    justify-content: space-evenly;
    padding-bottom: 0.875rem;
    width: 100%;
}


/* =========================================================
   RECHTERKANT VAN DE DRAWER
   ========================================================= */

.drawer-content[b-9qu03da8h9] {
    display: flex;
    flex-direction: column;

    height: 100%;
    min-height: 0;

    overflow: hidden;

    padding: 2rem 1.5rem 1.5rem 1.5rem;
}


/* =========================================================
   BOVENSTE BALK
   Deze blijft altijd zichtbaar
   ========================================================= */

.nav-buttons-container[b-9qu03da8h9] {
    align-items: center;
    display: flex;
    gap: 0.625rem;

    min-height: 2rem;

    flex-shrink: 0;
}

[b-9qu03da8h9] .nav-buttons-container > a {
    color: inherit;
}

[b-9qu03da8h9] .nav-buttons-container .back-button {
    padding-left: 0;
    padding-right: 0.25rem;
}

[b-9qu03da8h9] .nav-buttons-container .menu-button-float-end {
    margin-left: auto;
}


/* =========================================================
   PAGINA CONTENT
   Alleen dit gedeelte scrollt
   ========================================================= */

.page-content-container[b-9qu03da8h9] {
    display: flex;
    flex-direction: column;

    flex: 1 1 auto;

    min-height: 0;
    min-width: 0;

    overflow-y: auto;
    overflow-x: hidden;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
[b-ahp4c5od84] .menu {
    --dxbl-menu-bottom-left-border-radius: 0;
    --dxbl-menu-bottom-right-border-radius: 0;
    --dxbl-menu-top-left-border-radius: 0;
    --dxbl-menu-top-right-border-radius: 0;
    --dxbl-menu-item-padding-x: 1.125rem;
    --dxbl-menu-item-padding-y: 0.5rem;
    --dxbl-menu-item-color: var(--dxds-color-content-neutral-default-static-dark-rest);
    --dxbl-menu-item-image-color: var(--dxds-color-content-neutral-default-static-dark-rest);
    --dxbl-menu-item-hover-bg: rgb(from var(--dxds-color-surface-neutral-default-static-light-rest) r g b / 0.15);
    --dxbl-menu-item-hover-color: var(--dxds-color-content-neutral-default-static-dark-hovered);
    --dxbl-menu-item-hover-image-color: var(--dxds-color-content-neutral-default-static-dark-hovered);

    background: none;
}

[b-ahp4c5od84] .menu.display-mobile {
    margin-bottom: 2rem;
}

[b-ahp4c5od84] .menu-item-active {
    background-color: rgb(from var(--dxds-color-surface-neutral-default-static-light-rest) r g b / 0.05);
}
/* /Components/Pages/AccessRegistration/Component/AccessRegistrationKiosk.razor.rz.scp.css */
/* =========================================================
   KIOSK BACKGROUND
   ========================================================= */

.access-kiosk[b-y0mmvvjopj] {
    width: 100%;
    height: calc(100vh - 50px);

    position: relative;
    overflow: hidden;
}


/* =========================================================
   SCREEN TRANSITION
   ========================================================= */

.kiosk-screen[b-y0mmvvjopj] {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    animation: kioskFadeIn-b-y0mmvvjopj 0.35s ease-out;
}

@keyframes kioskFadeIn-b-y0mmvvjopj {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   START
   ========================================================= */

.kiosk-content[b-y0mmvvjopj] {
    width: 100%;
    max-width: 820px;

    text-align: center;
}

.kiosk-header[b-y0mmvvjopj] {
    margin-bottom: 28px;

    animation: kioskHeaderIn-b-y0mmvvjopj 0.5s ease-out;
}

.kiosk-header h1[b-y0mmvvjopj] {
    margin: 0;

    font-size: 40px;
    font-weight: 700;
}

.kiosk-header p[b-y0mmvvjopj] {
    margin: 8px 0 0;

    font-size: 20px;

    opacity: 0.65;
}

@keyframes kioskHeaderIn-b-y0mmvvjopj {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   MAIN ACTION BUTTONS
   ========================================================= */

.kiosk-actions[b-y0mmvvjopj] {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 24px;
}

.kiosk-action-button[b-y0mmvvjopj] {
    height: 220px;

    border: 1px solid currentColor;
    border-radius: 20px;

    background: transparent;
    color: inherit;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 18px;

    font-size: 24px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.04),
            0 10px 30px rgba(0, 0, 0, 0.06);

    transition:
            transform 0.2s ease,
            box-shadow 0.2s ease,
            opacity 0.2s ease;
}

.kiosk-action-button i[b-y0mmvvjopj] {
    font-size: 52px;

    transition: transform 0.2s ease;
}

.kiosk-action-button:hover[b-y0mmvvjopj] {
    transform: translateY(-4px);

    box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.06),
            0 18px 40px rgba(0, 0, 0, 0.10);
}

.kiosk-action-button:hover i[b-y0mmvvjopj] {
    transform: scale(1.06);
}

.kiosk-action-button:active[b-y0mmvvjopj] {
    transform: translateY(-1px) scale(0.98);
}


/* =========================================================
   FORM CARD
   ========================================================= */

.kiosk-card[b-y0mmvvjopj] {
    width: 100%;
    max-width: 660px;

    padding: 24px;

    background: transparent;
    color: inherit;

    border: 1px solid currentColor;
    border-radius: 20px;

    box-shadow:
            0 4px 15px rgba(0, 0, 0, 0.04),
            0 20px 50px rgba(0, 0, 0, 0.08);

    animation: kioskCardIn-b-y0mmvvjopj 0.35s ease-out;
}

.kiosk-card-wide[b-y0mmvvjopj] {
    max-width: 800px;
}

@keyframes kioskCardIn-b-y0mmvvjopj {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.kiosk-card-header[b-y0mmvvjopj] {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 22px;
}

.kiosk-card-header h2[b-y0mmvvjopj] {
    margin: 0;

    font-size: 28px;
}

.kiosk-card-header p[b-y0mmvvjopj] {
    margin: 2px 0 0;

    opacity: 0.65;
}


/* =========================================================
   BACK BUTTON
   ========================================================= */

.kiosk-back-button[b-y0mmvvjopj] {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    border: 1px solid currentColor;
    border-radius: 50%;

    background: transparent;
    color: inherit;

    cursor: pointer;

    transition:
            transform 0.15s ease,
            opacity 0.15s ease;
}

.kiosk-back-button:hover[b-y0mmvvjopj] {
    opacity: 0.75;

    transform: translateX(-3px);
}

.kiosk-back-button:active[b-y0mmvvjopj] {
    transform: translateX(-3px) scale(0.94);
}

.kiosk-back-button i[b-y0mmvvjopj] {
    font-size: 20px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.kiosk-footer[b-y0mmvvjopj] {
    display: flex;

    justify-content: flex-end;

    margin-top: 22px;
}

[b-y0mmvvjopj] .kiosk-next-button,
[b-y0mmvvjopj] .kiosk-home-button {
    min-width: 180px;
    min-height: 48px;

    font-size: 16px;

    transition:
            transform 0.15s ease,
            box-shadow 0.15s ease;
}

[b-y0mmvvjopj] .kiosk-next-button:hover,
[b-y0mmvvjopj] .kiosk-home-button:hover {
    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   VISITOR LIST
   ========================================================= */

.kiosk-visitor-list[b-y0mmvvjopj] {
    display: flex;
    flex-direction: column;

    gap: 10px;

    max-height: 52vh;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 3px;
}

.kiosk-visitor[b-y0mmvvjopj] {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px;

    background: transparent;
    color: inherit;

    border: 1px solid currentColor;
    border-radius: 14px;

    text-align: left;

    cursor: pointer;

    transition:
            transform 0.15s ease,
            box-shadow 0.15s ease,
            opacity 0.15s ease;
}

.kiosk-visitor:hover[b-y0mmvvjopj] {
    transform: translateX(4px);

    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.07);
}

.kiosk-visitor:active[b-y0mmvvjopj] {
    transform: translateX(3px) scale(0.99);
}

.kiosk-visitor:disabled[b-y0mmvvjopj] {
    opacity: 0.6;

    cursor: default;

    transform: none;
}


/* =========================================================
   VISITOR AVATAR
   ========================================================= */

.kiosk-avatar[b-y0mmvvjopj] {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border: 1px solid currentColor;

    font-size: 18px;
    font-weight: 600;

    transition:
            transform 0.2s ease,
            opacity 0.2s ease;
}

.kiosk-visitor:hover .kiosk-avatar[b-y0mmvvjopj] {
    transform: scale(1.05);
}

.kiosk-visitor-details[b-y0mmvvjopj] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.kiosk-visitor-details strong[b-y0mmvvjopj] {
    font-size: 17px;
}

.kiosk-visitor-details span[b-y0mmvvjopj] {
    opacity: 0.8;
}

.kiosk-visitor-details small[b-y0mmvvjopj] {
    margin-top: 2px;

    opacity: 0.6;
}


/* =========================================================
   VISITOR ARROW
   ========================================================= */

.kiosk-visitor-arrow[b-y0mmvvjopj] {
    font-size: 20px;

    transition: transform 0.15s ease;
}

.kiosk-visitor:hover .kiosk-visitor-arrow[b-y0mmvvjopj] {
    transform: translateX(4px);
}


/* =========================================================
   EMPTY
   ========================================================= */

.kiosk-empty[b-y0mmvvjopj] {
    padding: 40px 20px;

    text-align: center;

    animation: kioskFadeIn-b-y0mmvvjopj 0.3s ease-out;
}

.kiosk-empty i[b-y0mmvvjopj] {
    font-size: 42px;
}


/* =========================================================
   SUCCESS
   ========================================================= */

.kiosk-success[b-y0mmvvjopj] {
    max-width: 600px;
}

.kiosk-success-icon[b-y0mmvvjopj] {
    width: 84px;
    height: 84px;

    margin: 0 auto 22px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #d1e7dd;

    animation: successPop-b-y0mmvvjopj 0.5s cubic-bezier(.17, .67, .32, 1.4);
}

.kiosk-success-icon i[b-y0mmvvjopj] {
    font-size: 40px;

    animation: successCheck-b-y0mmvvjopj 0.5s ease-out 0.15s both;
}

@keyframes successPop-b-y0mmvvjopj {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }

    70% {
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes successCheck-b-y0mmvvjopj {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.kiosk-success h1[b-y0mmvvjopj] {
    margin: 0;

    font-size: 36px;

    animation: kioskFadeIn-b-y0mmvvjopj 0.4s ease-out 0.15s both;
}

.kiosk-success p[b-y0mmvvjopj] {
    margin: 12px 0 24px;

    font-size: 18px;

    opacity: 0.65;

    animation: kioskFadeIn-b-y0mmvvjopj 0.4s ease-out 0.25s both;
}


/* =========================================================
   SIGNATURE DECLARATION
   ========================================================= */

.signature-declaration[b-y0mmvvjopj] {
    margin-bottom: 10px;
}

.signature-declaration p[b-y0mmvvjopj] {
    margin: 4px 0 0;

    opacity: 0.7;
}


/* =========================================================
   REGULATIONS BUTTON
   ========================================================= */

.kiosk-regulations-button[b-y0mmvvjopj] {
    position: absolute;

    left: 24px;
    bottom: 24px;

    min-width: 250px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px 14px;

    background: transparent;
    color: inherit;

    border: 1px solid currentColor;
    border-radius: 16px;

    text-align: left;

    cursor: pointer;

    box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.04),
            0 10px 30px rgba(0, 0, 0, 0.06);

    transition:
            transform 0.2s ease,
            box-shadow 0.2s ease,
            opacity 0.2s ease;

    z-index: 10;
}

.kiosk-regulations-button:hover[b-y0mmvvjopj] {
    transform: translateY(-3px);

    box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.06),
            0 16px 36px rgba(0, 0, 0, 0.10);
}

.kiosk-regulations-button:active[b-y0mmvvjopj] {
    transform:
            translateY(-1px)
            scale(0.98);
}

.kiosk-regulations-icon[b-y0mmvvjopj] {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    border: 1px solid currentColor;
}

.kiosk-regulations-icon i[b-y0mmvvjopj] {
    font-size: 21px;
}

.kiosk-regulations-text[b-y0mmvvjopj] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 1px;
}

.kiosk-regulations-text strong[b-y0mmvvjopj] {
    font-size: 15px;
    font-weight: 600;
}

.kiosk-regulations-text small[b-y0mmvvjopj] {
    font-size: 12px;

    opacity: 0.65;
}

.kiosk-regulations-arrow[b-y0mmvvjopj] {
    font-size: 16px;

    opacity: 0.6;

    transition:
            transform 0.2s ease,
            opacity 0.2s ease;
}

.kiosk-regulations-button:hover .kiosk-regulations-arrow[b-y0mmvvjopj] {
    transform: translateX(3px);

    opacity: 1;
}


/* =========================================================
   REGULATIONS PDF POPUP
   ========================================================= */

.kiosk-pdf-viewer[b-y0mmvvjopj] {
    width: 100%;
    height: 100%;

    min-height: 70vh;

    overflow: hidden;

    border-radius: 12px;
}

.kiosk-pdf-frame[b-y0mmvvjopj] {
    width: 100%;
    height: 100%;

    min-height: 70vh;

    border: 0;

    background: #ffffff;
}

.kiosk-pdf-footer[b-y0mmvvjopj] {
    width: 100%;

    display: flex;
    justify-content: flex-end;

    padding: 8px;
}

[b-y0mmvvjopj] .kiosk-pdf-close-button {
    min-width: 150px;
    min-height: 48px;

    font-size: 16px;
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 768px) {

    .access-kiosk[b-y0mmvvjopj] {
        height: calc(100vh - 50px);

        overflow: hidden;
    }

    .kiosk-screen[b-y0mmvvjopj] {
        height: 100%;

        align-items: center;

        padding: 16px;
    }

    .kiosk-actions[b-y0mmvvjopj] {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .kiosk-action-button[b-y0mmvvjopj] {
        height: 145px;
    }

    .kiosk-header[b-y0mmvvjopj] {
        margin-bottom: 20px;
    }

    .kiosk-header h1[b-y0mmvvjopj] {
        font-size: 32px;
    }

    .kiosk-header p[b-y0mmvvjopj] {
        font-size: 18px;
    }

    .kiosk-card[b-y0mmvvjopj] {
        padding: 18px;
    }

    .kiosk-card-header[b-y0mmvvjopj] {
        margin-bottom: 16px;
    }

    .kiosk-card-header h2[b-y0mmvvjopj] {
        font-size: 24px;
    }

    .kiosk-footer[b-y0mmvvjopj] {
        margin-top: 16px;
    }

    .kiosk-regulations-button[b-y0mmvvjopj] {
        left: 16px;
        bottom: 16px;

        min-width: 230px;
    }

    .kiosk-pdf-viewer[b-y0mmvvjopj],
    .kiosk-pdf-frame[b-y0mmvvjopj] {
        min-height: 65vh;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *[b-y0mmvvjopj],
    *[b-y0mmvvjopj]::before,
    *[b-y0mmvvjopj]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/AccessRegistration/Component/SignatureCanvas.razor.rz.scp.css */
/* =========================================================
   SIGNATURE CANVAS
   ========================================================= */

.signature-wrapper[b-b013splkb5] {
    width: 100%;
    margin-top: 8px;
}


/* =========================================================
   HEADER
   ========================================================= */

.signature-header[b-b013splkb5] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    margin-bottom: 10px;
}

.signature-header span[b-b013splkb5] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}


/* =========================================================
   WISSEN BUTTON
   ========================================================= */

.signature-clear-button[b-b013splkb5] {
    appearance: none;
    -webkit-appearance: none;

    border: 0;
    outline: 0;

    padding: 4px 0;
    margin: 0;

    background: transparent;

    color: #8fa6bd;

    font-family: inherit;
    font-size: 14px;
    font-weight: 500;

    cursor: pointer;

    transition:
            color 0.15s ease,
            opacity 0.15s ease;
}

.signature-clear-button:hover[b-b013splkb5] {
    color: #ffffff;
}

.signature-clear-button:active[b-b013splkb5] {
    opacity: 0.7;
}

.signature-clear-button:focus-visible[b-b013splkb5] {
    outline: 2px solid #8fa6bd;
    outline-offset: 3px;
    border-radius: 3px;
}


/* =========================================================
   HANDTEKENING CANVAS
   ========================================================= */

.signature-canvas[b-b013splkb5] {
    display: block;

    width: 100%;
    height: 180px;

    box-sizing: border-box;

    background-color: #ffffff;

    border: 1px solid #6c757d;
    border-radius: 8px;

    cursor: crosshair;

    /*
     * Erg belangrijk voor mobiel.
     * Hiermee wordt tekenen niet geïnterpreteerd
     * als scrollen of swipen.
     */
    touch-action: none;

    user-select: none;
    -webkit-user-select: none;

    /*
     * Voorkomt ongewenste mobiele browser-acties.
     */
    -webkit-touch-callout: none;

    /*
     * Zorgt ervoor dat het canvas netjes
     * binnen de container blijft.
     */
    max-width: 100%;

    /*
     * Geen inline-element ruimte onder canvas.
     */
    vertical-align: top;
}


/* =========================================================
   HOVER - ALLEEN APPARATEN MET EEN MUIS
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .signature-canvas:hover[b-b013splkb5] {
        border-color: #8c8c8c;
    }
}


/* =========================================================
   TABLET / DESKTOP
   ========================================================= */

@media (min-width: 768px) {

    .signature-wrapper[b-b013splkb5] {
        margin-top: 10px;
    }

    .signature-canvas[b-b013splkb5] {
        height: 220px;
    }
}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 767px) {

    .signature-wrapper[b-b013splkb5] {
        width: 100%;
        margin-top: 6px;
    }

    .signature-header[b-b013splkb5] {
        margin-bottom: 8px;
    }

    .signature-header span[b-b013splkb5] {
        font-size: 14px;
    }

    .signature-clear-button[b-b013splkb5] {
        font-size: 14px;

        /*
         * Iets groter klikgebied zonder dat de
         * knop visueel veel groter wordt.
         */
        padding: 6px 0 6px 12px;
    }

    .signature-canvas[b-b013splkb5] {
        width: 100%;
        height: 160px;

        border-radius: 7px;
    }
}


/* =========================================================
   KLEINE TELEFOONS
   ========================================================= */

@media (max-width: 420px) {

    .signature-canvas[b-b013splkb5] {
        height: 140px;
    }
}
/* /Components/Pages/Article/Component/MaterialImageUploader.razor.rz.scp.css */
.upload-container[b-1erpwt5c7q] {
    width: 100%;
}

.dropzone[b-1erpwt5c7q] {
    border: 2px dashed currentColor;
    border-radius: 12px;
    padding: 24px;
    min-height: 140px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;

    cursor: pointer;

    opacity: 0.75;

    transition:
            opacity 0.2s ease-in-out,
            border-color 0.2s ease-in-out,
            background 0.2s ease-in-out;
}

.dropzone:hover[b-1erpwt5c7q] {
    opacity: 1;
}

.dropzone-dragover[b-1erpwt5c7q] {
    border-color: #0d6efd !important;
    background: rgba(13, 110, 253, 0.08) !important;
    opacity: 1;
}

.dropzone-content[b-1erpwt5c7q] {
    text-align: center;
}

.preview-grid[b-1erpwt5c7q] {
    margin-top: 16px;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.preview-card[b-1erpwt5c7q] {
    border: 1px solid currentColor;
    border-radius: 10px;
    padding: 8px;

    background: transparent;

    display: flex;
    flex-direction: column;
}

.preview-image[b-1erpwt5c7q] {
    width: 100%;
    height: 110px;

    object-fit: cover;

    border-radius: 8px;

    display: block;
}

.preview-name[b-1erpwt5c7q] {
    margin-top: 8px;

    font-size: 12px;
    font-weight: 600;

    word-break: break-word;
}

.clickable[b-1erpwt5c7q] {
    cursor: pointer;
}

.popup-image-wrapper[b-1erpwt5c7q] {
    display: flex;

    justify-content: center;
    align-items: center;

    max-height: 75vh;

    overflow: auto;
}

.popup-image[b-1erpwt5c7q] {
    max-width: 100%;
    max-height: 70vh;

    object-fit: contain;

    border-radius: 8px;
}
/* /Components/Pages/Index/Index.razor.rz.scp.css */
[b-osepusb4o0] .index-gridlayout {
    container-type: inline-size;
    height: auto;
    margin-top: auto;
    margin-bottom: auto;
    padding-bottom: 9rem;
}

[b-osepusb4o0] .title {
    padding-bottom: 3rem;
    text-align: center;
}

[b-osepusb4o0] .tiles {
    --tile-column-count: 4;

    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(var(--tile-column-count), max-content);
    justify-content: center;

    @container (max-width: 60.5rem) {
        --tile-column-count: 3;
    }
    @container (max-width: 45.125rem) {
        --tile-column-count: 2;
    }
    @container (max-width: 29.75rem) {
        --tile-column-count: 1;
    }
}
/* /Components/Pages/Index/IndexTile.razor.rz.scp.css */
.tile[b-nnwcyu1dr8] {
    border-radius: 0.75rem;
    height: 7.5rem;
    transition: box-shadow 0.2s;
    width: 14.375rem;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.tile:hover[b-nnwcyu1dr8] {
    box-shadow: 0 4px 8px 0 rgba(170, 170, 170, 0.24), 0 0 2px 0 rgba(170, 170, 170, 0.2);
}

.tile[b-nnwcyu1dr8]  > a {
    text-decoration: none;
}

[b-nnwcyu1dr8] .tile-content {
    padding: 1rem;
}

[b-nnwcyu1dr8] .tile-icon {
    border-radius: 0.375rem;
    height: 2.75rem;
    padding: 0.75rem;
    width: 2.75rem;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
}

[b-nnwcyu1dr8] .tile-title {
    align-self: center;
    color: var(--dxds-color-content-neutral-default-rest);
    font-size: var(--dxds-font-size-base-md);
    font-weight: var(--dxds-font-weight-base-strong);
    letter-spacing: var(--dxds-letter-spacing-base-md);
    line-height: var(--dxds-line-height-base-md);
}

[b-nnwcyu1dr8] .tile-description {
    color: var(--dxds-color-content-neutral-subdued-rest);
    font-size: var(--dxds-font-size-base-sm);
    font-weight: var(--dxds-font-weight-base-default);
    letter-spacing: var(--dxds-letter-spacing-base-sm);
    line-height: var(--dxds-line-height-base-sm);
}
/* /Components/Pages/Machine/Component/MachineTypeImageUploader.razor.rz.scp.css */
.upload-container[b-dn7nv4no13] {
    width: 100%;
}

.dropzone[b-dn7nv4no13] {
    border: 2px dashed currentColor;
    border-radius: 12px;
    padding: 24px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.dropzone:hover[b-dn7nv4no13] {
    opacity: 0.8;
}

.dropzone-dragover[b-dn7nv4no13] {
    border-color: #0d6efd !important;
    background: rgba(13, 110, 253, 0.08) !important;
}

.dropzone-content[b-dn7nv4no13] {
    text-align: center;
}

.preview-grid[b-dn7nv4no13] {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.preview-card[b-dn7nv4no13] {
    border: 1px solid currentColor;
    border-radius: 10px;
    padding: 8px;
    background: transparent;

    display: flex;
    flex-direction: column;
}

.preview-image[b-dn7nv4no13] {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.preview-name[b-dn7nv4no13] {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    word-break: break-word;
}

.clickable[b-dn7nv4no13] {
    cursor: pointer;
}

.popup-image-wrapper[b-dn7nv4no13] {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 75vh;
    overflow: auto;
}

.popup-image[b-dn7nv4no13] {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
}
/* /Components/Pages/Machine/MachineFloorPlanPage.razor.rz.scp.css */
.floorplan-page[b-x9fw46bpsj] {
    width: 100%;
}

.floorplan-layout[b-x9fw46bpsj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.floorplan-map-panel[b-x9fw46bpsj] {
    min-width: 0;
}

/* ============================================================
   Map shell
   ============================================================ */

.map-shell[b-x9fw46bpsj] {
    width: 100%;
    overflow: hidden;
    border: 1px solid #d6d6d6;
    border-radius: 12px;
    background: #f8f8f8;
}

/* ============================================================
   Zoom toolbar
   ============================================================ */

.floorplan-toolbar[b-x9fw46bpsj] {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 8px 10px;

    border-bottom: 1px solid #d6d6d6;

    background: var(--bs-body-bg);

    box-sizing: border-box;
}

.zoom-controls[b-x9fw46bpsj] {
    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 0;
}

.zoom-value[b-x9fw46bpsj] {
    min-width: 64px;

    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 10px;

    border: 1px solid var(--bs-border-color);

    border-radius: 4px;

    background: var(--bs-tertiary-bg);

    font-size: 0.875rem;
    font-weight: 600;

    white-space: nowrap;

    user-select: none;
}

.toolbar-separator[b-x9fw46bpsj] {
    width: 1px;
    height: 24px;

    margin-left: 4px;
    margin-right: 4px;

    background: var(--bs-border-color);
}

.zoom-slider[b-x9fw46bpsj] {
    width: 180px;

    cursor: pointer;
}

.zoom-slider:disabled[b-x9fw46bpsj] {
    cursor: default;
    opacity: 0.45;
}

.zoom-hint[b-x9fw46bpsj] {
    color: var(--bs-secondary-color);

    font-size: 0.8rem;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

/* ============================================================
   Scroll container
   ============================================================ */

.map-scroll-container[b-x9fw46bpsj] {
    height: calc(100vh - 275px);

    min-height: 500px;

    width: 100%;

    overflow: auto;

    padding: 24px;

    box-sizing: border-box;

    background-color: #f3f3f3;

    /*
     * Licht raster op de achtergrond.
     * Daardoor zie je duidelijker waar de floorplan eindigt.
     */
    background-image:
            linear-gradient(
                    45deg,
                    rgba(0, 0, 0, 0.025) 25%,
                    transparent 25%
            ),
            linear-gradient(
                    -45deg,
                    rgba(0, 0, 0, 0.025) 25%,
                    transparent 25%
            ),
            linear-gradient(
                    45deg,
                    transparent 75%,
                    rgba(0, 0, 0, 0.025) 75%
            ),
            linear-gradient(
                    -45deg,
                    transparent 75%,
                    rgba(0, 0, 0, 0.025) 75%
            );

    background-size:
            20px 20px;

    background-position:
            0 0,
            0 10px,
            10px -10px,
            -10px 0;
}

/* ============================================================
   Zoom wrapper

   Deze wrapper wordt via Razor voorzien van:

   zoom: 1;
   zoom: 1.5;
   zoom: 2;
   enz.

   Hierdoor groeien zowel:
   - de afbeelding
   - de machines
   - de machine labels

   tegelijk mee.
   ============================================================ */

.map-zoom-wrapper[b-x9fw46bpsj] {
    width: max-content;

    height: max-content;

    min-width: min-content;

    margin: 0 auto;
}

/* ============================================================
   Floorplan
   ============================================================ */

.map-container[b-x9fw46bpsj] {
    position: relative;

    /*
     * Standaard breedte van de floorplan.
     *
     * Deze blijft hetzelfde, ongeacht zoom.
     * Zoom wordt door de wrapper gedaan.
     */
    width: 1600px;

    max-width: none;

    margin: 0 auto;

    user-select: none;
}

/* ============================================================
   Afbeelding
   ============================================================ */

.map-image[b-x9fw46bpsj] {
    display: block;

    width: 100%;

    height: auto;

    max-width: none;

    user-select: none;

    pointer-events: none;

    -webkit-user-drag: none;
}

/* ============================================================
   Machines
   ============================================================ */

.machine-marker[b-x9fw46bpsj] {
    position: absolute;

    box-sizing: border-box;

    border: 2px solid #333;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: 0.75rem;

    font-weight: 600;

    padding: 4px;

    user-select: none;

    z-index: 5;

    text-align: center;

    overflow: visible;

    background: rgba(
            255,
            210,
            122,
            0.9
    );

    transition:
            filter 0.1s ease,
            outline 0.1s ease;
}

.machine-marker:hover[b-x9fw46bpsj] {
    filter: brightness(0.96);
}

.machine-marker.dragging[b-x9fw46bpsj] {
    opacity: 0.85;

    cursor: grabbing;

    z-index: 1000;
}

.machine-marker.selected[b-x9fw46bpsj] {
    outline: 3px solid #007acc;

    outline-offset: 1px;

    z-index: 50;
}

/* ============================================================
   Machine label
   ============================================================ */

.machine-label[b-x9fw46bpsj] {
    width: 100%;

    line-height: 1.1;

    pointer-events: none;

    overflow: hidden;

    text-overflow: ellipsis;
}

/* ============================================================
   Resize handles
   ============================================================ */

.resize-handle[b-x9fw46bpsj] {
    position: absolute;

    width: 12px;

    height: 12px;

    background: #fff;

    border: 2px solid #007acc;

    border-radius: 2px;

    z-index: 100;
}

.resize-handle.tl[b-x9fw46bpsj] {
    top: -7px;

    left: -7px;

    cursor: nwse-resize;
}

.resize-handle.tr[b-x9fw46bpsj] {
    top: -7px;

    right: -7px;

    cursor: nesw-resize;
}

.resize-handle.bl[b-x9fw46bpsj] {
    bottom: -7px;

    left: -7px;

    cursor: nesw-resize;
}

.resize-handle.br[b-x9fw46bpsj] {
    bottom: -7px;

    right: -7px;

    cursor: nwse-resize;
}

/* ============================================================
   Popup
   ============================================================ */

.popup-grid[b-x9fw46bpsj] {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                    180px,
                    1fr
            )
        );

    gap: 16px;
}

/* ============================================================
   Scrollbars
   ============================================================ */

.map-scroll-container[b-x9fw46bpsj]::-webkit-scrollbar {
    width: 12px;

    height: 12px;
}

.map-scroll-container[b-x9fw46bpsj]::-webkit-scrollbar-track {
    background: rgba(
            0,
            0,
            0,
            0.04
    );
}

.map-scroll-container[b-x9fw46bpsj]::-webkit-scrollbar-thumb {
    background: rgba(
            0,
            0,
            0,
            0.25
    );

    border-radius: 10px;

    border: 3px solid transparent;

    background-clip: padding-box;
}

.map-scroll-container[b-x9fw46bpsj]::-webkit-scrollbar-thumb:hover {
    background: rgba(
            0,
            0,
            0,
            0.4
    );

    border: 3px solid transparent;

    background-clip: padding-box;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1200px) {

    .map-scroll-container[b-x9fw46bpsj] {
        height: calc(100vh - 300px);

        min-height: 450px;
    }

    .zoom-slider[b-x9fw46bpsj] {
        width: 140px;
    }

    .zoom-hint[b-x9fw46bpsj] {
        display: none;
    }
}

@media (max-width: 768px) {

    .floorplan-toolbar[b-x9fw46bpsj] {
        flex-wrap: wrap;
    }

    .zoom-controls[b-x9fw46bpsj] {
        width: 100%;

        flex-wrap: wrap;
    }

    .zoom-slider[b-x9fw46bpsj] {
        flex: 1 1 100px;

        width: auto;
    }

    .map-scroll-container[b-x9fw46bpsj] {
        height: calc(100vh - 330px);

        min-height: 400px;

        padding: 12px;
    }

    .map-container[b-x9fw46bpsj] {
        width: 1200px;
    }

    .machine-marker[b-x9fw46bpsj] {
        font-size: 0.65rem;

        border-width: 1px;

        padding: 2px;
    }

    .popup-grid[b-x9fw46bpsj] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Maintenance/Component/MaintenanceTaskFileUpload.razor.rz.scp.css */
.actionitem-upload-container[b-jkz05jnhjf] {
    width: 100%;
}

.actionitem-dropzone[b-jkz05jnhjf] {
    border: 2px dashed currentColor;
    border-radius: 12px;
    padding: 24px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.actionitem-dropzone:hover[b-jkz05jnhjf] {
    opacity: 0.8;
}

.actionitem-dropzone-dragover[b-jkz05jnhjf] {
    border-color: #0d6efd !important;
    background: rgba(13, 110, 253, 0.08) !important;
}

.actionitem-dropzone-content[b-jkz05jnhjf] {
    text-align: center;
}

.actionitem-preview-grid[b-jkz05jnhjf] {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.actionitem-preview-card[b-jkz05jnhjf] {
    border: 1px solid currentColor;
    border-radius: 10px;
    padding: 8px;
    background: transparent;
    display: flex;
    flex-direction: column;
}

.actionitem-preview-image[b-jkz05jnhjf] {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.actionitem-preview-name[b-jkz05jnhjf] {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    word-break: break-word;
}

.actionitem-clickable[b-jkz05jnhjf] {
    cursor: pointer;
}

.actionitem-popup-image-wrapper[b-jkz05jnhjf] {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 75vh;
    overflow: auto;
}

.actionitem-popup-image[b-jkz05jnhjf] {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
}
/* /Components/Pages/Relation/Component/RelationImageUploader.razor.rz.scp.css */
.upload-container[b-1p8cmn309t] {
    width: 100%;
}

.dropzone[b-1p8cmn309t] {
    border: 2px dashed currentColor;
    border-radius: 12px;
    padding: 24px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.dropzone:hover[b-1p8cmn309t] {
    opacity: 0.8;
}

.dropzone-dragover[b-1p8cmn309t] {
    border-color: #0d6efd !important;
    background: rgba(13, 110, 253, 0.08) !important;
}

.dropzone-content[b-1p8cmn309t] {
    text-align: center;
}

.preview-grid[b-1p8cmn309t] {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.preview-card[b-1p8cmn309t] {
    border: 1px solid currentColor;
    border-radius: 10px;
    padding: 8px;
    background: transparent;

    display: flex;
    flex-direction: column;
}

.preview-image[b-1p8cmn309t] {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.preview-name[b-1p8cmn309t] {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    word-break: break-word;
}

.clickable[b-1p8cmn309t] {
    cursor: pointer;
}

.popup-image-wrapper[b-1p8cmn309t] {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 75vh;
    overflow: auto;
}

.popup-image[b-1p8cmn309t] {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
}
/* /Components/Pages/Utils/Declaration/Component/TenantDeclarationFileUploader.razor.rz.scp.css */
.upload-container[b-1b7uk7s3b0] {
    width: 100%;
}

.dropzone[b-1b7uk7s3b0] {
    border: 2px dashed currentColor;
    border-radius: 12px;
    padding: 24px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.dropzone:hover[b-1b7uk7s3b0] {
    opacity: 0.8;
}

.dropzone-dragover[b-1b7uk7s3b0] {
    border-color: #0d6efd !important;
    background: rgba(13, 110, 253, 0.08) !important;
}

.dropzone-content[b-1b7uk7s3b0] {
    text-align: center;
}

.preview-grid[b-1b7uk7s3b0] {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.preview-card[b-1b7uk7s3b0] {
    border: 1px solid currentColor;
    border-radius: 10px;
    padding: 8px;
    background: transparent;

    display: flex;
    flex-direction: column;
}

.preview-image[b-1b7uk7s3b0] {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.preview-name[b-1b7uk7s3b0] {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    word-break: break-word;
}

.clickable[b-1b7uk7s3b0] {
    cursor: pointer;
}

.popup-image-wrapper[b-1b7uk7s3b0] {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 75vh;
    overflow: auto;
}

.popup-image[b-1b7uk7s3b0] {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
}
/* /Components/Shared/CustomPopup.razor.rz.scp.css */
/* /Components/Shared/DxThemeSwitcher.razor.rz.scp.css */
[b-n4k261r8ls] .theme-switcher-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    flex: 0 0 40px;
}