/* /Layout/MainLayout.razor.rz.scp.css */
/* ============================
   Algemeen (Base)
   ============================ */
.page[b-wvpzi7ue15] {
    display: flex;
    flex-direction: column;
    position: relative;
}

main[b-wvpzi7ue15] {
    flex: 1;
    height: 100vh;
    overflow-y: auto; /* Zorg dat main scrollbaar is */
}

/* ============================
   Wrapper & Toggle
   ============================ */
#wrapper[b-wvpzi7ue15] {
    max-width: 100vw;
    padding-left: 0;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
}

    #wrapper.toggled[b-wvpzi7ue15] {
        padding-left: 18rem;
    }

/* ============================
   Sidebar
   ============================ */
#sidebar-wrapper[b-wvpzi7ue15] {
    background-color: #1c2c58;
    bottom: 0;
    height: 100%;
    margin-left: -18rem;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 5rem;
    width: 0;
    z-index: 1000;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper[b-wvpzi7ue15] {
    width: 18rem;
}

.sidebar-nav[b-wvpzi7ue15] {
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 18rem;
}

/* ============================
   Pagina-inhoud
   ============================ */
#page-content-wrapper[b-wvpzi7ue15] {
    margin-top: 5rem;
    /*    position: absolute;
*/ width: calc(100vw - 18rem);
}

#wrapper.toggled #page-content-wrapper[b-wvpzi7ue15] {
    margin-left: 0;
/*    position: absolute;
*/    width: 100vw;
}

/* ============================
   Top Row (Header)
   ============================ */
.top-row[b-wvpzi7ue15] {
    align-items: center;
    background-color: #f47934;
    display: flex;
    height: 5rem;
    justify-content: space-between;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 50;
    color: #fff;
}

    .top-row .logo[b-wvpzi7ue15] {
        height: 4rem;
    }

    .top-row .top-row-side[b-wvpzi7ue15],
    .top-row-right[b-wvpzi7ue15] {
        align-items: center;
        display: flex;
        justify-content: center;
        position: sticky;
        top: 0;
        z-index: 50;
    }

.top-row-right[b-wvpzi7ue15] {
    gap: 1rem;
}

.top-row[b-wvpzi7ue15]  a,
.top-row[b-wvpzi7ue15]  .btn-link {
    color: #1c2c58;
    margin-left: 1.5rem;
    text-decoration: none;
    white-space: nowrap;
}

    .top-row[b-wvpzi7ue15]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .top-row[b-wvpzi7ue15]  a:hover,
    .top-row[b-wvpzi7ue15]  .btn-link:hover {
        border-bottom: solid 0.1rem #f47934;
    }

/* ============================
   Navbar Toggler (Mobile icon)
   ============================ */
.navbar-toggler[b-wvpzi7ue15] {
    appearance: none;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb%2848,%2063,%2075%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem;
    color: white;
    border: none !important;
    cursor: pointer;
    height: 2.5rem;
    width: 3.5rem;
    box-shadow: none;
}

        .navbar-toggler:checked ~ .sidebar[b-wvpzi7ue15] {
            display: none;
        }

/* ============================
   Winkelmandje (Cart)
   ============================ */
.cart-container[b-wvpzi7ue15] {
    cursor: pointer;
    display: inline-block;
    margin-left: 1rem;
    position: relative;
}

.cart-icon[b-wvpzi7ue15] {
    height: 24px;
    vertical-align: middle;
    width: 24px;
}

.cart-badge[b-wvpzi7ue15] {
    background-color: #1c2c58;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #1c2c58;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1;
    padding: 3px 6px;
    position: absolute;
    right: -12px;
    top: -10px;
}

/* ============================
   Deep/Global Overrides
   ============================ */
[b-wvpzi7ue15] .logout-link {
    background-color: #1c2c58 !important;
    border: none;
    border-radius: 12px;
}

[b-wvpzi7ue15] .dxbl-btn:not(.dxbl-disabled):not(:disabled):hover {
    border: none;
}

/* ============================
   Foutmelding UI (Blazor)
   ============================ */
#blazor-error-ui[b-wvpzi7ue15] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-wvpzi7ue15] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ============================
   Responsief: Mobiel (<768px)
   ============================ */
@media (max-width: 640.98px) {
    .top-row[b-wvpzi7ue15] {
        align-items: center;
        display: flex;
        flex-flow: column;
        gap: 0.5rem;
        height: 6rem;
        justify-content: start;
        padding: 0.5rem;
    }

        .top-row .logo[b-wvpzi7ue15] {
            height: 2rem;
        }

        .top-row[b-wvpzi7ue15]  a,
        .top-row[b-wvpzi7ue15]  .btn-link {
            margin-left: 0;
        }

    #page-content-wrapper[b-wvpzi7ue15] {
        margin-top: 6rem;
    }

    #sidebar-wrapper[b-wvpzi7ue15] {
        top: 6rem;
    }

    #wrapper #page-content-wrapper[b-wvpzi7ue15] {
        width: 100%;
    }

    #wrapper.toggled[b-wvpzi7ue15] {
        padding-left: 0 !important;
    }

        #wrapper.toggled #sidebar-wrapper[b-wvpzi7ue15] {
            width: 0 !important;
        }

        #wrapper.toggled #page-content-wrapper[b-wvpzi7ue15] {
            margin-left: 0 !important;
            width: 100% !important;
        }
}

/* ============================
   Responsief: Tablet/Desktop (≥768px)
   ============================ */
@media only screen and (min-width: 768px) {
    #wrapper[b-wvpzi7ue15] {
        padding-left: 18rem;
    }

        #wrapper.toggled[b-wvpzi7ue15] {
            padding-left: 0;
        }

    #sidebar-wrapper[b-wvpzi7ue15] {
        width: 18rem;
    }

    #wrapper.toggled #sidebar-wrapper[b-wvpzi7ue15] {
        width: 0;
    }

    #wrapper.toggled #page-content-wrapper[b-wvpzi7ue15] {
        margin-left: 0;
        margin-right: 0;
        position: relative;
        width: 100vw;
    }
}

/* ============================
   Responsief: Groot (>1024px)
   ============================ */
@media (min-width: 1024px) {
    .page[b-wvpzi7ue15] {
        flex-direction: row;
    }

    .top-row[b-wvpzi7ue15],
    article[b-wvpzi7ue15] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .top-row[b-wvpzi7ue15] {
        position: fixed;
        z-index: 55;
    }

        .top-row.auth[b-wvpzi7ue15]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }
}
/* /Layout/NavMenu.razor.rz.scp.css */
[b-yzo9hz3752] .bi {
    display: inline-block;
    position: relative;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    top: -1px;
    background-size: cover;
}

.nav-scrollable[b-yzo9hz3752] {
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    max-width: max-content;
    width: 15rem;
    padding-bottom: 5rem;
    padding-left: 0.5rem;
}

[b-yzo9hz3752] .bi-boeken {
    background-image: url("Icons/KalenderIcon.svg");
}

[b-yzo9hz3752] .bi-ens {
    background-image: url("Icons/DocumentIcon.svg");
}

[b-yzo9hz3752] .dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container:not(.dxbl-disabled):not(:disabled).dxbl-active::before {
    background-color: transparent;
    padding: 0;
}

[b-yzo9hz3752] .dxbl-expandable-container .dxbl-treeview-item-content .dxbl-image {
    width: 0.2rem; /* Zorgt ervoor dat de insprong minder groot is bij de subitems*/
}

[b-yzo9hz3752] .dxbl-treeview-item.dxbl-active .dxbl-treeview-item-text {
    border-bottom: solid 0.15rem #f47934;
    color: white;
    font-weight: bold;
    width: auto;
}

[b-yzo9hz3752] .dxbl-image:not(.dxbl-image-fill) {
    fill: White;
}

[b-yzo9hz3752] .dxbl-treeview-item-text {
    font-size: 1rem;
    color: #fff;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    width: 100%;
}

.logo[b-yzo9hz3752] {
    width: 35%;
}

.hidden[b-yzo9hz3752] {
    display: none;
}

.versie[b-yzo9hz3752] {
    margin: 0;
    font-size: 0.6rem;
    color: white;
    padding: 0.2rem;
}

.flexContainerNav[b-yzo9hz3752] {
    display: flex; 
    justify-content: center; 
    align-items: end;
}
/* /Pages/Boeking/BoekingDetail.razor.rz.scp.css */
.buttons[b-l87v47sh25] {
    display: flex;
    justify-content: space-between;
    padding-bottom: 3rem;
}

.buttonGroup[b-l87v47sh25] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

[b-l87v47sh25] .noBackground {
    background: none !important;
    background-color: transparent !important;
}

.opm[b-l87v47sh25] {
    font-weight: bold;
    text-transform: uppercase;
}

.info-container[b-l87v47sh25] {
    display: flex; 
    justify-content: space-between;
}


.info[b-l87v47sh25] {
    font-size: 1.15rem;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* /Pages/Boeking/BoekingSucces.razor.rz.scp.css */
.boot-overlay[b-w3a2icliih] {
    height: 40vh;
    background: linear-gradient(rgba(250,151,92,0.25), rgba(250,151,92,0.25)), url('Images/FerryBoot.jpg') top/cover no-repeat;
    border-radius: .25rem;
}

.checkmark[b-w3a2icliih] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 32px rgba(34, 197, 94, 0.3);
    z-index: 2;
    animation: pop 0.4s cubic-bezier(.8,2,.3,.7);
}

    .checkmark svg[b-w3a2icliih] {
        width: 40px;
        height: 40px;
        stroke: #fff;
        stroke-width: 6;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }

.checkmark-confetti[b-w3a2icliih] {
    position: relative;
    display: inline-block;
    margin: 24px 0 16px 0;
}


.confetti-explosion-chaos[b-w3a2icliih] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 1;
}

    .confetti-explosion-chaos span[b-w3a2icliih] {
        position: absolute;
        left: 50%;
        top: 50%;
        width: var(--size, 8px);
        height: var(--size, 8px);
        border-radius: 50%;
        opacity: 0.95;
        background: #f47934;
        /* Voeg random start rotatie toe als je wilt: rotateZ(var(--spin, 0deg)) */
        transform: rotate(var(--angle)) translateY(var(--dist)) scale(1.13) rotateZ(var(--spin, 0deg));
        animation: confetti-explode-chaos-b-w3a2icliih 1.3s cubic-bezier(.24,.84,.41,1.01) forwards;
        animation-delay: var(--delay, 0s);
    }

        /* Drie kleuren mooi verdeeld */
        .confetti-explosion-chaos span:nth-child(3n+1)[b-w3a2icliih] {
            background: #f47934;
        }

        .confetti-explosion-chaos span:nth-child(3n+2)[b-w3a2icliih] {
            background: #1c2c58;
        }

        .confetti-explosion-chaos span:nth-child(3n)[b-w3a2icliih] {
            background: #181818;
        }

@keyframes confetti-explode-chaos-b-w3a2icliih {
    0% {
        opacity: 1;
        transform: rotate(var(--angle)) translateY(0) scale(1);
    }

    80% {
        opacity: 1;
        transform: rotate(var(--angle)) translateY(var(--dist)) scale(1.13);
    }

    81% {
        opacity: 0;
        transform: rotate(var(--angle)) translateY(var(--dist)) scale(1.13);
    }

    100% {
        opacity: 0;
        transform: rotate(var(--angle)) translateY(var(--dist)) scale(1.13);
    }
}


/*.
.success-container {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 32px auto;
}

.checkmark {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 32px rgba(34, 197, 94, 0.3);
    z-index: 2;
    animation: pop 0.4s cubic-bezier(.8,2,.3,.7);
}

    .checkmark svg {
        width: 40px;
        height: 40px;
        stroke: #fff;
        stroke-width: 6;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }

@keyframes pop {
    0% {
        transform: scale(0.6);
    }

    80% {
        transform: scale(1.15);
    }

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

.firework {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    pointer-events: none;
}

    .firework span {
        position: absolute;
        width: 6px;
        height: 30px;
        background: linear-gradient(to top, #fff 0%, transparent 100%);
        border-radius: 3px;
        opacity: 0.8;
        transform-origin: 50% 100%;
        animation: explode 0.8s cubic-bezier(.7,1.8,.6,1) forwards;
    }

         Kleuren voor vuurwerk 
        .firework span:nth-child(1) {
            transform: rotate(0deg);
            background: linear-gradient(to top, #eab308 70%, transparent 100%);
        }

        .firework span:nth-child(2) {
            transform: rotate(40deg);
            background: linear-gradient(to top, #f59e42 70%, transparent 100%);
        }

        .firework span:nth-child(3) {
            transform: rotate(80deg);
            background: linear-gradient(to top, #6366f1 70%, transparent 100%);
        }

        .firework span:nth-child(4) {
            transform: rotate(120deg);
            background: linear-gradient(to top, #a21caf 70%, transparent 100%);
        }

        .firework span:nth-child(5) {
            transform: rotate(160deg);
            background: linear-gradient(to top, #06b6d4 70%, transparent 100%);
        }

        .firework span:nth-child(6) {
            transform: rotate(200deg);
            background: linear-gradient(to top, #f43f5e 70%, transparent 100%);
        }

        .firework span:nth-child(7) {
            transform: rotate(240deg);
            background: linear-gradient(to top, #84cc16 70%, transparent 100%);
        }

        .firework span:nth-child(8) {
            transform: rotate(280deg);
            background: linear-gradient(to top, #f87171 70%, transparent 100%);
        }

        .firework span:nth-child(9) {
            transform: rotate(320deg);
            background: linear-gradient(to top, #38bdf8 70%, transparent 100%);
        }

@keyframes explode {
    0% {
        height: 0;
        opacity: 1;
    }

    70% {
        height: 32px;
        opacity: 1;
    }

    100% {
        height: 40px;
        opacity: 0;
    }
}


.confetti-radial {
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    transform: translate(-50%, -50%);
    z-index: 1;
}

    .confetti-radial span {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 10px;
        height: 18px;
        border-radius: 3px;
        opacity: 0.8;
        background: #f43f5e;  Default kleur, wordt per span overschreven 
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        animation: confetti-burst 1s cubic-bezier(.42,1.47,.52,1.01) forwards;
    }

         Confetti kleuren en richtingen 
        .confetti-radial span:nth-child(1) {
            background: #f43f5e;
            animation-delay: 0.05s;
            --angle: 0deg;
        }

        .confetti-radial span:nth-child(2) {
            background: #f59e42;
            animation-delay: 0.10s;
            --angle: 24deg;
        }

        .confetti-radial span:nth-child(3) {
            background: #6366f1;
            animation-delay: 0.15s;
            --angle: 48deg;
        }

        .confetti-radial span:nth-child(4) {
            background: #22c55e;
            animation-delay: 0.19s;
            --angle: 72deg;
        }

        .confetti-radial span:nth-child(5) {
            background: #38bdf8;
            animation-delay: 0.24s;
            --angle: 96deg;
        }

        .confetti-radial span:nth-child(6) {
            background: #eab308;
            animation-delay: 0.28s;
            --angle: 120deg;
        }

        .confetti-radial span:nth-child(7) {
            background: #f87171;
            animation-delay: 0.32s;
            --angle: 144deg;
        }

        .confetti-radial span:nth-child(8) {
            background: #84cc16;
            animation-delay: 0.36s;
            --angle: 168deg;
        }

        .confetti-radial span:nth-child(9) {
            background: #a21caf;
            animation-delay: 0.41s;
            --angle: 192deg;
        }

        .confetti-radial span:nth-child(10) {
            background: #06b6d4;
            animation-delay: 0.45s;
            --angle: 216deg;
        }

        .confetti-radial span:nth-child(11) {
            background: #f43f5e;
            animation-delay: 0.51s;
            --angle: 240deg;
        }

        .confetti-radial span:nth-child(12) {
            background: #f59e42;
            animation-delay: 0.55s;
            --angle: 264deg;
        }

        .confetti-radial span:nth-child(13) {
            background: #6366f1;
            animation-delay: 0.59s;
            --angle: 288deg;
        }

        .confetti-radial span:nth-child(14) {
            background: #22c55e;
            animation-delay: 0.63s;
            --angle: 312deg;
        }

        .confetti-radial span:nth-child(15) {
            background: #38bdf8;
            animation-delay:
*/
/* /Pages/Boeking/Booking.razor.rz.scp.css */
/* ---- container alleen flex op desktop ---- */
.container-bookings[b-sjj09gjexn] {
    display: block; /* mobile first */
}

@media (min-width: 768px) {
    .container-bookings[b-sjj09gjexn] {
        display: flex;
        align-content: start;
        gap: 2rem;
        padding-right: 1.5rem;
    }
}

/* ---- wrapper voor mobile filters ---- */
.mobile-filter-wrapper[b-sjj09gjexn] {
    position: relative;
    margin-bottom: 1rem;
/*    margin-top: -5rem;
*/}

/* header met close-knop */
.mobile-filters-header[b-sjj09gjexn] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 2;
}

.close-mobile-filters[b-sjj09gjexn] {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: gray;
    cursor: pointer;
    text-align: right;
    padding: 0 !important;
}

/* ---- overlay panel ---- */
.mobile-filters-panel[b-sjj09gjexn] {
    position: absolute;
    top: 0%;
    width: 85%;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 4px;
    padding: 0 1rem 1rem 1rem;
    transform: translateY(-10px) scaleY(0);
    transform-origin: top center;
    transition: transform .2s ease-out;
    z-index: 1000;
    margin-top: -5rem;
}

    .mobile-filters-panel.open[b-sjj09gjexn] {
        transform: translateY(0) scaleY(1);
    }

/* ---- de blokken daaronder ---- */
.routes-small-container[b-sjj09gjexn] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.route-blok[b-sjj09gjexn] {
    flex: 1 1 calc((100% - 4rem) / 2);
    border: 1px solid green;
    padding: .5rem;
    border-radius: 4px;
    box-sizing: border-box;
}

    .route-blok .route-time[b-sjj09gjexn] {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

    .route-blok .route-header[b-sjj09gjexn] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .route-blok .route-header p[b-sjj09gjexn] {
            margin: 0 !important; 
            padding: 0 !important;
        }

        .route-blok .route-header button[b-sjj09gjexn] {
            width: auto;
        }

.filterButtons[b-sjj09gjexn] {
    margin-top: 1rem;
    display: flex;
/*    flex-direction: column;
*/    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}


[b-sjj09gjexn] .noBackground {
    background: none !important;
    background-color: transparent !important;
}

[b-sjj09gjexn] .bi {
    display: inline-block;
    position: relative;
    width: 1rem;
    height: 1rem;
    background-size: cover;
}

[b-sjj09gjexn] .bi-basket {
    background-image: url("Icons/BasketIcon.svg");
}

.btn-nohov[b-sjj09gjexn]{
    padding: .5rem !important;
}

.errormsg[b-sjj09gjexn] {
    color: red; 
}

@font-face {
    font-family: 'Poppins';
    src: url('Fonts/Poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

[b-sjj09gjexn] .dxbl-grid-header {
    background-color: #1c2c58 !important;
    color: white !important;
    font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
/* /Pages/Boeking/ShoppingBasket.razor.rz.scp.css */
.error[b-xh6ehxmkra]  {
    color: red; 
    font-weight: bold;
    font-size: 0.8rem;
}


.boeking-container[b-xh6ehxmkra] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.boeking-blok[b-xh6ehxmkra] {
    flex: 1 1 calc((100% - 4rem) / 2);
    border: 1px #f47934 solid;
    border-radius: 4px;
    padding: .5rem;
    box-sizing: border-box;
    position: relative;
}

    .boeking-blok.selected[b-xh6ehxmkra] {
        background-color: #e6f7ff; /*FIENY: aanpassen? */
    }

    .boeking-blok input[type="checkbox"][b-xh6ehxmkra] {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }

.boeking-header[b-xh6ehxmkra] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time-icon[b-xh6ehxmkra] {
    width: 1.25rem;
}

[b-xh6ehxmkra] .bi {
    display: inline-block;
    position: relative;
    width: 1rem;
    height: 1rem;
    top: -1px;
    background-size: cover;
}


[b-xh6ehxmkra] .mb {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    top: -1px;
    background-size: cover;
}

.bi-open[b-xh6ehxmkra] {
    background-image: url("Icons/OpenIcon.svg");
}

.edit-btn[b-xh6ehxmkra] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    position: absolute; 
    right: 0; 
    bottom: 0;
}

@font-face {
    font-family: 'Poppins';
    src: url('Fonts/Poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

[b-xh6ehxmkra] .dxbl-grid-header {
    background-color: #1c2c58 !important;
    color: white !important;
    font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
/* /Pages/ENS/ENS.razor.rz.scp.css */
/*.top {
    background: #fcb040;
    height: 20vh;
    width: 50vw;
    position: relative;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.bottom {
    background: #1a134e;
    height: 10vh;
    width: 50vw;
    position: relative;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
}

.boat img {
    width: 100%;
}

.boat {
    width: 280px;
    margin: 0 auto;
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    animation: bob 2s infinite;
}

.waves {
    width: 100%;
    position: absolute;
    bottom: -4px;
    height: 16px;
    background: url(https://i.imgur.com/7CAWN1e.png);
    background-size: cover;
    animation: bgscroll 8s infinite linear;
}

.center-ens {
    display: flex;
    justify-content: center;
}

.float {
    display: block;
    width: 100%;
    text-align: center;
    color: white; 
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 1rem;
    letter-spacing:3px;
}


@keyframes bgscroll {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -339px 0px;
    }
}

@keyframes bob {
    0%,100% {
        transform: translate(-50%, 3px);
    }

    50% {
        transform: translate(-50%, -6px);
    }
}
*/
/* /Pages/LoginPage.razor.rz.scp.css */
.page-container[b-2w00qq3636] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    padding: 1.5rem;
}

.content-container[b-2w00qq3636] {
    background-color: #1c2c58;
    padding: 20px;
    border-radius: 10px;
    max-width: 400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.input-group[b-2w00qq3636] {
    margin-bottom: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
}

[b-2w00qq3636] .dxbl-text-edit {
    width: 100%
}

[b-2w00qq3636] .dxbl-text {
    color: white;
}

.logo[b-2w00qq3636] {
    width: 15rem;
}

.logoJorosoft[b-2w00qq3636] {
    width: 10rem;
}

.content-container img:first-of-type[b-2w00qq3636] {
    width: 10rem;
    margin-bottom: 2rem;
}

.button-container[b-2w00qq3636] {
    margin-top: 15px;
}

button[b-2w00qq3636] {
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: #1c2c58;
    font-size: 16px;
    cursor: pointer;
    text-transform: uppercase;
}

.dropdown-container[b-2w00qq3636] {
    position: fixed;
    bottom: 0;
    left: 0;
    align-self: start;
}

    .dropdown-container img[b-2w00qq3636] {
        width: 50px;
        height: 50px;
        object-fit: contain;
    }
/* /Pages/Profiel/Usersettings.razor.rz.scp.css */
.toolbar[b-8yafxpu0e5] {
    margin-bottom: 1rem;
}

[b-8yafxpu0e5] .bi {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

[b-8yafxpu0e5] .bi-encrypt {
    background-image: url("Images/lock.png");
}

[b-8yafxpu0e5] .bi-language {
    background-image: url("Icons/TranslateIcon.svg");
}
/* /Shared/Dialogs/DlgFileUpload.razor.rz.scp.css */

[b-gvk4wxx2tb] .preview {
    background-color: lightgray;

}

[b-gvk4wxx2tb] .preview img {
    width: 25px;
}
/* /Shared/Toolbar/ToolbarDetail.razor.rz.scp.css */
.toolbar[b-nsc3lpvsdv]{
    margin-bottom: 1rem;
}

[b-nsc3lpvsdv] .bi {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

[b-nsc3lpvsdv] .bi-new {
    background-image: url("Icons/NewIcon.svg");
}

[b-nsc3lpvsdv] .bi-save {
    background-image: url("Icons/SaveIcon.svg");
}

[b-nsc3lpvsdv] .bi-save-close {
    background-image: url("Icons/SaveIcon.svg");
}

[b-nsc3lpvsdv] .bi-undo-close {
    background-image: url("Icons/UndoIcon.svg");
}

[b-nsc3lpvsdv] .bi-close {
    background-image: url("Icons/CloseIcon.svg");
}

[b-nsc3lpvsdv] .bi-actions {
    background-image: url("Icons/ActionsIcon.svg");
}

[b-nsc3lpvsdv] .bi-delete {
    background-image: url("Icons/DeleteIcon.svg");
}
/* /Shared/Toolbar/ToolbarDetailNavigation.razor.rz.scp.css */
[b-d54cdm405b] .bi {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

[b-d54cdm405b] .bi-new {
    background-image: url("Icons/NewIcon.svg");
}

[b-d54cdm405b] .bi-save {
    background-image: url("Icons/SaveIcon.svg");
}

[b-d54cdm405b] .bi-undo-close {
    background-image: url("Icons/UndoIcon.svg");
}

[b-d54cdm405b] .bi-close {
    background-image: url("Icons/CloseIcon.svg");
}

[b-d54cdm405b] .bi-previous {
    background-image: url("Icons/ArrowPreviousIcon.svg");
}

[b-d54cdm405b] .bi-next {
    background-image: url("Icons/ArrowNextIcon.svg");
}

[b-d54cdm405b] .bi-delete {
    background-image: url("Icons/DeleteIcon.svg");
}

[b-d54cdm405b] .bi-goedkeuren {
    background-image: url("Icons/CheckIcon.svg");
}



/* /Shared/Toolbar/ToolbarGrid.razor.rz.scp.css */
.toolbar[b-jkgiao762k] {
    margin-bottom: 1rem;
}

[b-jkgiao762k] .bi {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

[b-jkgiao762k] .bi-new {
    background-image: url("Icons/NewIcon.svg");
}

[b-jkgiao762k] .bi-edit {
    background-image: url("Icons/EditIcon.svg");
}

[b-jkgiao762k] .bi-delete {
    background-image: url("Icons/DeleteIcon.svg");
}

[b-jkgiao762k] .bi-save {
    background-image: url("Icons/SaveIcon.svg");
}

[b-jkgiao762k] .bi-actions {
    background-image: url("Icons/ActionsIcon.svg");
}

[b-jkgiao762k] .bi-filter {
    background-image: url("Icons/IconFilter.svg");
}

[b-jkgiao762k] .bi-exportExcel {
    background-image: url("Icons/IconExcel.svg");
}