/* /Components/Layout/ArchNavMenu.razor.rz.scp.css */
nav[b-t3gtsalmhz] {
    background-color: var(--FRONTENDCOLOR);
    position: relative;
    z-index: 1050;
}

    .nav-link.disabled[b-t3gtsalmhz], .nav-link:disabled[b-t3gtsalmhz] {
        color: darkgrey;
    }



.navbar-toggler[b-t3gtsalmhz] {
    background-color: white;
    flex: 0 0 auto;        /* keep its size; never shrink so the flag squishes instead */
    margin-left: auto;     /* push to the right edge of the flag row */
}

/* Flag + burger share one row on mobile */
.flag-toggler-row[b-t3gtsalmhz] {
    gap: 0.5rem;
    flex: 1 1 auto;  /* Grow to fill row, pushing burger (margin-left: auto) to far right */
}

/* Bootstrap's default toggler icon draws WHITE bars, invisible on our white button.
   Redraw the bars with a dark stroke so the hamburger is visible. */
.navbar-toggler-icon[b-t3gtsalmhz] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833,37,41,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Allow the wrapper + logo to shrink instead of forcing horizontal overflow */
.brand-flag-wrap[b-t3gtsalmhz] {
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
}

/* Logo keeps its natural 340px size on desktop; never squished */
.navbar-brand[b-t3gtsalmhz] {
    flex-shrink: 0;
}

.navbar-brand img[b-t3gtsalmhz] {
    height: auto;   /* preserve aspect ratio */
}

/* Custom breakpoint: navbar-expand-flag
   Default (below 1620px): hamburger menu is shown, brand/flag are stacked
   Above 1620px: full horizontal menu when flag is present
*/

/* Base: stacked brand-flag, collapsed menu */
.navbar-expand-flag .navbar-toggler[b-t3gtsalmhz] {
    display: block;
}

.navbar-expand-flag .navbar-collapse[b-t3gtsalmhz] {
    display: none;
}

.navbar-expand-flag .navbar-collapse.show[b-t3gtsalmhz] {
    display: block;
}

/* At 1620px and above, expand the menu and put brand/flag side-by-side */
@media (min-width: 820px) {
    .navbar-expand-flag .brand-flag-wrap[b-t3gtsalmhz] {
        flex-direction: row;
        align-items: center;
        width: auto;  /* Reset to auto width; only use full-width while collapsed */
    }

    .navbar-expand-flag .navbar-toggler[b-t3gtsalmhz] {
        display: none;
    }

    .navbar-expand-flag .navbar-collapse[b-t3gtsalmhz] {
        display: flex !important;
        flex-basis: auto;
    }
}

@media (max-width: 850px) {
    /* On narrow phones where logo+flag+burger no longer fit on one row,
       they wrap with flag+burger on row 2. Restore adjacent burger layout. */
    .flag-toggler-row[b-t3gtsalmhz] {
        flex: 0 0 auto;  /* Stop growing so burger doesn't push to far right */
    }

    .navbar-toggler[b-t3gtsalmhz] {
        margin-left: 0;  /* Adjacent to flag instead of far-right */
    }
}

@media (max-width: 819.98px) {
    .navbar-expand-flag .flag-toggler-row[b-t3gtsalmhz] {
        /* tighten left edge placement */
        gap: 0.35rem;          /* was 0.5rem */
    }

    .navbar-expand-flag .flag-toggler-row[b-t3gtsalmhz]  .flag-banner {
        margin-left: -2px;     /* nudges flag left to reduce blue gap */
    }

    .navbar-expand-flag .flag-toggler-row[b-t3gtsalmhz] {
        min-height: 52px; /* row height close to logo+flag visual balance */
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
        justify-content: flex-start; /* keep flag compact on left */
        align-items: center;
        gap: 0.5rem;
    }

    .navbar-expand-flag .navbar-toggler[b-t3gtsalmhz] {
        margin-left: auto; /* burger to right edge */
        flex: 0 0 auto;
    }

    .navbar-expand-flag .flag-toggler-row[b-t3gtsalmhz]  .flag-banner {
        max-width: none; /* stop forced full-row expansion */
    }
}

@media (max-width: 1199.98px) {
    /* Only let the logo scale down on narrow phones where it's stacked */
    .navbar-brand img[b-t3gtsalmhz] {
        max-width: 100%;
    }
}

.navbar-collapse[b-t3gtsalmhz] {
    flex-grow: 0;
}

.dropend:hover .dropdown-menu[b-t3gtsalmhz] {
    display: block;
    left: 100%;
    top: 0;
}
.dropstart:hover .dropdown-menu[b-t3gtsalmhz] {
    display: block;
    right: 100%;
    top: 0;
}
/*.nav-item:last-of-type ::deep .nav-link:hover {
    color: red;
}*/

.nav-item[b-t3gtsalmhz]  .nav-link {
    color: white;
    white-space: nowrap;
}

.nav-item[b-t3gtsalmhz]  a.active {
    color: aquamarine;
}

.nav-item[b-t3gtsalmhz]  .nav-link:hover {
    color: wheat;
}
.nav-item[b-t3gtsalmhz]  .nav-link.sign-in:hover {
    color: greenyellow;
}
.nav-item.sign-out[b-t3gtsalmhz]  .nav-link:hover {
    color: red;
}
/* /Components/Layout/EmbedLayout.razor.rz.scp.css */
#blazor-error-ui[b-wdfzfviaje] {
    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 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-wdfzfviaje] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-1aobyv78wp] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-1aobyv78wp] {
    flex: 1;
}

.sidebar[b-1aobyv78wp] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-1aobyv78wp] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

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

        .top-row[b-1aobyv78wp]  a:hover, .top-row[b-1aobyv78wp]  .btn-link:hover {
            text-decoration: underline;
        }

@media (max-width: 640.98px) {
    .top-row[b-1aobyv78wp] {
        justify-content: space-between;
    }

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

@media (min-width: 641px) {
    /*    .page {
        flex-direction: row;
    }*/

    .sidebar[b-1aobyv78wp] {
        /*        width: 250px;
        height: 100vh;*/
        position: sticky;
        top: 0;
    }

    .top-row[b-1aobyv78wp] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth[b-1aobyv78wp]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

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

#blazor-error-ui[b-1aobyv78wp] {
    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 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-1aobyv78wp] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-igcc5muvlm] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-igcc5muvlm] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-igcc5muvlm] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-igcc5muvlm] {
    font-size: 1.1rem;
}

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

.bi-house-door-fill-nav-menu[b-igcc5muvlm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-igcc5muvlm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-igcc5muvlm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-igcc5muvlm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-igcc5muvlm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-igcc5muvlm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-igcc5muvlm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-igcc5muvlm] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-igcc5muvlm] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-igcc5muvlm] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-igcc5muvlm] {
        padding-bottom: 1rem;
    }

    .nav-item[b-igcc5muvlm]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-igcc5muvlm]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-igcc5muvlm]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-igcc5muvlm] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-igcc5muvlm] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-igcc5muvlm] {
        display: none;
    }

    .nav-scrollable[b-igcc5muvlm] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/NoMenuLayout.razor.rz.scp.css */
#blazor-error-ui[b-5vppgc9taw] {
    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 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-5vppgc9taw] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ShippingLayout.razor.rz.scp.css */
.page[b-sf8jjjluj9] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-sf8jjjluj9] {
    flex: 1;
}

.sidebar[b-sf8jjjluj9] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-sf8jjjluj9] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

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

        .top-row[b-sf8jjjluj9]  a:hover, .top-row[b-sf8jjjluj9]  .btn-link:hover {
            text-decoration: underline;
        }

@media (max-width: 640.98px) {
    .top-row[b-sf8jjjluj9] {
        justify-content: space-between;
    }

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

@media (min-width: 641px) {
    /*    .page {
        flex-direction: row;
    }*/

    .sidebar[b-sf8jjjluj9] {
        /*        width: 250px;
        height: 100vh;*/
        position: sticky;
        top: 0;
    }

    .top-row[b-sf8jjjluj9] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth[b-sf8jjjluj9]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

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

#blazor-error-ui[b-sf8jjjluj9] {
    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 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-sf8jjjluj9] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ShippingMenu.razor.rz.scp.css */
nav[b-y8thkaa9jp] {
    background-color: var(--FRONTENDCOLOR);
}


    .nav-link.disabled[b-y8thkaa9jp], .nav-link:disabled[b-y8thkaa9jp] {
        color: darkgrey;
    }

.navbar-toggler[b-y8thkaa9jp] {
    background-color: white;
}

.navbar-collapse[b-y8thkaa9jp] {
    flex-grow: 0;
}

.dropend:hover .dropdown-menu[b-y8thkaa9jp] {
    display: block;
    left: 100%;
    top: 0;
}

nav-item[b-y8thkaa9jp] {

}

.nav-item:first-of-type[b-y8thkaa9jp] {
   
}

.nav-item:last-of-type[b-y8thkaa9jp]  .nav-link:hover {
    color: red;
}

.nav-item[b-y8thkaa9jp]  .nav-link {
    color: white;
    white-space: nowrap;
}

.nav-item[b-y8thkaa9jp]  a.active {
    color: aquamarine;
}

.nav-item[b-y8thkaa9jp]  .nav-link:hover {
    color: wheat;
}

@media (min-width: 1839px) {
    .navbar-collapse[b-y8thkaa9jp] {
        display: none !important;
    }

    .navbar-toggler[b-y8thkaa9jp] {
        display: block;
    }
}
@media (min-width: 1840px) {
    .navbar-collapse.collapse[b-y8thkaa9jp] {
        display: flex !important;
        flex-basis: auto;
    }

    .navbar-toggler[b-y8thkaa9jp] {
        display: none;
    }
}
/* /Components/Layout/TravelerLayout.razor.rz.scp.css */
#blazor-error-ui[b-voxn3zofol] {
    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 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-voxn3zofol] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/AnyProductionBoard.razor.rz.scp.css */
table[b-tceydhizyh] {
    color: black;
    table-layout: fixed;
    width: 100%;
}

thead[b-tceydhizyh] {
    position: sticky;
    top: 0;
    z-index: 1;
}

/*td, th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}*/

td:nth-child(5)[b-tceydhizyh],
td:nth-child(10)[b-tceydhizyh] {
    text-indent: 0;
}

.job-cell[b-tceydhizyh] {
    transition: background-color 0.2s ease, transform 0.2s;
}

    .job-cell:hover[b-tceydhizyh] {
        outline: 2px dashed red; /* outline doesn't affect layout, border does */
        font-weight: bold;
        transform: scale(1.01);
        overflow: hidden;
        text-overflow: ellipsis;
       /* white-space: nowrap;*/
    }

input[type="search"]:not(:placeholder-shown)[b-tceydhizyh], 
select.form-select:has(option[value]:not([value=""]):checked)[b-tceydhizyh] {
    background-image: linear-gradient(90deg, #ffc107 50%, transparent 50%), linear-gradient(90deg, #ffc107 50%, transparent 50%), linear-gradient(0deg, #ffc107 50%, transparent 50%), linear-gradient(0deg, #ffc107 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 1rem 0.25rem, 1rem 0.25rem, 0.25rem 1rem, 0.25rem 1rem;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    animation: search-border-dance-b-tceydhizyh 8s infinite linear;
    padding: 0.375rem 0.75rem;
}

@keyframes search-border-dance-b-tceydhizyh {
    0% {
        background-position: 0 0, 0 100%, 0 0, 100% 0;
    }

    100% {
        background-position: 20rem 0, -20rem 100%, 0 -20rem, 100% 20rem;
    }
}
/* Hide Last WC (col 7) and Next WC (col 9) on phone screens */
@media (max-width: 576px) {
    td:nth-child(7)[b-tceydhizyh],
    th:nth-child(7)[b-tceydhizyh],
    td:nth-child(9)[b-tceydhizyh],
    th:nth-child(9)[b-tceydhizyh] {
        display: none;
    }
}


/* ===== MOBILE ACCORDION STYLES ===== */
@media (max-width: 575.98px) {
    .mobile-accordion[b-tceydhizyh] {
        padding: 0.5rem;
    }

    /* Job Accordion Header Styling */
    .job-accordion-header[b-tceydhizyh] {
        position: relative;
        padding: 0.75rem;
        font-weight: 600;
        font-size: 1rem;
        border: none !important;
        color: #212529 !important;
    }

    .job-name-mobile[b-tceydhizyh] {
        flex: 1;
        text-align: left;
        color: inherit;
    }

    /* Job Detail Button */
    .job-detail-btn[b-tceydhizyh] {
        position: absolute;
        right: 3rem;
        z-index: 10;
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }

    /* Make every accordion-button transparent so the parent
       .accordion-item background color shows through identically
       for both collapsed and expanded states. */
    .accordion-item .accordion-button[b-tceydhizyh],
    .accordion-item .accordion-button.collapsed[b-tceydhizyh],
    .accordion-item .accordion-button:not(.collapsed)[b-tceydhizyh] {
        background-color: transparent !important;
        background-image: none !important;
        color: #212529 !important;
        box-shadow: none !important;
    }

    .accordion-button:focus[b-tceydhizyh] {
        box-shadow: none !important;
        border-color: inherit !important;
    }

    .accordion-button[b-tceydhizyh]::after {
        filter: brightness(0.5);
    }

    /* Job Details Body — keep transparent so the item color
       matches the header exactly (no white overlay). */
    .job-details-mobile[b-tceydhizyh] {
        padding: 0.75rem;
        background-color: transparent;
    }

    .detail-row[b-tceydhizyh] {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

        .detail-row:last-child[b-tceydhizyh] {
            border-bottom: none;
        }

    .detail-label[b-tceydhizyh] {
        font-weight: 600;
        color: #212529;
        font-size: 0.9rem;
    }

    .detail-value[b-tceydhizyh] {
        color: #212529;
        text-align: right;
        font-size: 0.9rem;
    }

    /* Search Accordion Styling (keep blue branded look) */
    #searchAccordion .accordion-item[b-tceydhizyh],
    #searchAccordion .accordion-button[b-tceydhizyh],
    #searchAccordion .accordion-button.collapsed[b-tceydhizyh] {
        background-color: #0d6efd !important;
        color: white !important;
        font-weight: 600;
    }

        #searchAccordion .accordion-button:not(.collapsed)[b-tceydhizyh] {
            background-color: #0b5ed7 !important;
            color: white !important;
        }

        #searchAccordion .accordion-button[b-tceydhizyh]::after {
            filter: brightness(0) invert(1);
        }

    /* Reduce spacing in accordion */
    .accordion-item[b-tceydhizyh] {
        margin-bottom: 0.5rem;
        border-radius: 0.375rem !important;
        overflow: hidden;
    }
}
.finish-swatch[b-tceydhizyh] {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.35em;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 2px;
    vertical-align: middle;
}
.finish-swatch--custom[b-tceydhizyh] {
    background: conic-gradient(red, orange, yellow, lime, cyan, blue, magenta, red);
}
/* Desktop View - Keep table visible */
@media (min-width: 576px) {
    .mobile-accordion[b-tceydhizyh] {
        display: none !important;
    }
}

/*.table-mask-container{
    position: relative;
}
.bb8-notification{
    position: absolute;
    right: 0;
    top: 200px;
}

.bb8-notification {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: run 4s forwards;
    pointer-events: none;
}

.speech-balloon {
    position: relative;
   
    margin-bottom: -60px;*/ /* overlap the balloon tail with BB-8 */
    /*margin-left: -160px;*/ /* Move balloon to the left */
    /*display: flex;
    align-items: center;
    justify-content: center;
}

.balloon-img {
    width: 220px;
    height: 140px;
}

.balloon-text {
    position: absolute;
    top: 30px;*/ /* Reduce white space above text */
    /*left: 0;
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: black;
    padding: 0 10px;
    pointer-events: none;
}

@keyframes run {
    0% {
        transform: translateX(20vw);
    }

    25% {
        transform: translateX(-45vw);
    }

    75% {
        transform: translateX(-45vw);
    }

    100% {
        transform: translateX(-120vw);
    }
}*/

/* Subtle brightness pulse for active jobs */
/*@keyframes pulse-brightness {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(0.7);
    }
}

.active-job {
    animation: pulse-brightness 10s ease-in-out infinite;
}

.paused-job {
    border: 2px dashed red;
}*/
/* /Components/Pages/ArcCalculator.razor.rz.scp.css */
.bend-calculator-container[b-q2xhmziecz] {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;

}

.bend-calculator-container h3[b-q2xhmziecz] {

    margin-bottom: 1rem;
    border-bottom: 0.1875rem solid #3498db;
    padding-bottom: 0.5rem;
}

/* Base layout - mobile first */
.calculator-layout[b-q2xhmziecz] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

/* Left column: Inputs */
.input-column[b-q2xhmziecz] {
    padding: 1.25rem;
    border-radius: 0.375rem;
    border: 0.0625rem solid #dee2e6;
}

    .input-column h4[b-q2xhmziecz] {
        margin-bottom: 1rem;
        font-size: 1rem;
        border-bottom: 0.125rem solid #3498db;
        padding-bottom: 0.5rem;
    }

.input-group[b-q2xhmziecz] {
    margin-bottom: 1rem;
}

    .input-group label[b-q2xhmziecz] {
        display: block;
        font-weight: 500;
        margin-bottom: 0.4rem;
        font-size: 0.9rem;
    }

.input-with-unit[b-q2xhmziecz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-control[b-q2xhmziecz] {
    flex: 1;
    padding: 0.5rem;
    border: 0.0625rem solid #ced4da;
    border-radius: 0.25rem;
    font-size: 0.95rem;
}

.input-with-unit .unit[b-q2xhmziecz] {
    color: #6c757d;
    font-weight: 500;
    min-width: 1.5rem;
    font-size: 0.9rem;
}

/* Center column: SVG */
.svg-column[b-q2xhmziecz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.svg-container[b-q2xhmziecz] {
    padding: 0.75rem;
    border-radius: 0.375rem;
    border: 0.0625rem solid #dee2e6;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .svg-container svg[b-q2xhmziecz] {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        border: 0.0625rem solid #dee2e6;
        border-radius: 0.25rem;
        background: white;
    }

/* Right column: Results */
.results-column[b-q2xhmziecz] {
    padding: 1.25rem;
    border-radius: 0.375rem;
    border: 0.0625rem solid #dee2e6;
}

    .results-column h4[b-q2xhmziecz] {
        margin-bottom: 1rem;
        font-size: 1rem;
        border-bottom: 0.125rem solid #3498db;
        padding-bottom: 0.5rem;
    }

.result-item[b-q2xhmziecz] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem;
    margin-bottom: 0.75rem;
    border-radius: 0.25rem;
    border-left: 0.25rem solid #3498db;
}

    .result-item:last-child[b-q2xhmziecz] {
        margin-bottom: 0;
    }

    .result-item.highlight-angle[b-q2xhmziecz] {
        border-left: 0.25rem solid #3498db;
        box-shadow: 0 0.125rem 0.25rem rgba(52, 152, 219, 0.2);
    }

        .result-item.highlight-angle .result-label[b-q2xhmziecz] {
            font-weight: 600;
        }

        .result-item.highlight-angle .result-value[b-q2xhmziecz] {
            font-weight: 700;
        }

.result-label[b-q2xhmziecz] {
    font-weight: 500;
    font-size: 0.8rem;
}

.result-value[b-q2xhmziecz] {
    font-weight: 600;
    font-size: 1rem;
}

.result-metric[b-q2xhmziecz] {
    font-size: 0.75rem;
}

/* Formulas section */
.formulas-section[b-q2xhmziecz] {
    margin-top: 1.5rem;
    padding: 0.8rem;
    background: #e7f3ff;
    border-radius: 0.375rem;
    border-left: 0.25rem solid #3498db;
}

    .formulas-section h4[b-q2xhmziecz] {
        color: #2c3e50;
        margin-bottom: 0.8rem;
        font-size: 0.95rem;
    }

    .formulas-section ul[b-q2xhmziecz] {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .formulas-section li[b-q2xhmziecz] {
        padding: 0.5rem 0;
        margin-bottom: 0.4rem;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .formulas-section .formula-label[b-q2xhmziecz] {
        color: #495057;
        font-weight: 500;
        font-size: 0.8rem;
    }

    .formulas-section .formula-expression[b-q2xhmziecz] {
        color: #2c3e50;
        font-family: 'Courier New', monospace;
        font-size: 0.8rem;
        font-weight: 600;
    }

/* Responsive design */

/* Mobile screens (< 768px) - single column, SVG takes 60% of viewport */
@media (max-width: 47.9375rem) {
    .calculator-layout[b-q2xhmziecz] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .svg-column[b-q2xhmziecz] {
        grid-column: 1;
        max-height: clamp(200px, 60vh, 400px);
    }

    .svg-container[b-q2xhmziecz] {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .input-column[b-q2xhmziecz],
    .results-column[b-q2xhmziecz] {
        grid-column: 1;
    }
}

/* Tablet screens (768px to 1199px) - two column */
@media (min-width: 48rem) and (max-width: 74.9375rem) {
    .calculator-layout[b-q2xhmziecz] {
        grid-template-columns: 1fr 1.2fr;
        gap: 1.2rem;
    }

    .svg-column[b-q2xhmziecz] {
        grid-column: 2;
        grid-row: 1 / 3;
        position: sticky;
        top: 1rem;
        max-height: clamp(300px, calc(100vh - 8.5rem), calc(100vh - 6rem));
    }

    .svg-container[b-q2xhmziecz] {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .input-column[b-q2xhmziecz] {
        grid-column: 1;
    }

    .results-column[b-q2xhmziecz] {
        grid-column: 1;
    }
}

/* Medium screens (1200px to 1400px) - three column, moderate SVG */
@media (min-width: 75rem) and (max-width: 87.4375rem) {
    .calculator-layout[b-q2xhmziecz] {
        grid-template-columns: 0.9fr 1.5fr 0.9fr;
        gap: 1.5rem;
    }

    .input-column[b-q2xhmziecz] {
        grid-column: 1;
    }

    .svg-column[b-q2xhmziecz] {
        grid-column: 2;
        position: sticky;
        top: 1rem;
        max-height: clamp(350px, calc(100vh - 9rem), calc(100vh - 7rem));
    }

    .svg-container[b-q2xhmziecz] {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .results-column[b-q2xhmziecz] {
        grid-column: 3;
    }
}

/* Large screens (1400px to 1799px) - three column, generous SVG */
@media (min-width: 87.5rem) and (max-width: 112.4375rem) {
    .calculator-layout[b-q2xhmziecz] {
        grid-template-columns: 0.9fr 1.5fr 0.9fr;
        gap: 1.5rem;
    }

    .input-column[b-q2xhmziecz] {
        grid-column: 1;
    }

    .svg-column[b-q2xhmziecz] {
        grid-column: 2;
        position: sticky;
        top: 1rem;
        max-height: clamp(400px, calc(100vh - 9.5rem), calc(100vh - 7.5rem));
    }

    .svg-container[b-q2xhmziecz] {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .results-column[b-q2xhmziecz] {
        grid-column: 3;
    }
}

/* Ultra-wide screens (1800px+) */
@media (min-width: 112.5rem) {
    .calculator-layout[b-q2xhmziecz] {
        grid-template-columns: 1fr 2fr 1fr;
        gap: 2rem;
    }

    .input-column[b-q2xhmziecz] {
        grid-column: 1;
    }

    .svg-column[b-q2xhmziecz] {
        grid-column: 2;
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 12.5rem);
    }

    .svg-container[b-q2xhmziecz] {
        width: 100%;
        height: calc(100vh - 12.5rem);
        min-height: 0;
    }

    .results-column[b-q2xhmziecz] {
        grid-column: 3;
    }
}
/* /Components/Pages/Camera.razor.rz.scp.css */
#webcam-preview[b-e7p0j7j570] {
    width: 100%;
    max-width: 100vw;
    height: 80vh;
    object-fit: cover;
    border: 2px solid #ccc;
    border-radius: 8px;
}

.camera-container[b-e7p0j7j570] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    height: 100vh;
}

#result[b-e7p0j7j570] {
    margin-top: 15px;
    font-size: 1.2em;
    text-align: center;
}
/* /Components/Pages/CircleCalculator.razor.rz.scp.css */
.bend-calculator-container[b-tbmypjrx12] {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.bend-calculator-container h3[b-tbmypjrx12] {
    margin-bottom: 1rem;
    border-bottom: 0.1875rem solid #3498db;
    padding-bottom: 0.5rem;
}

/* Base layout - mobile first */
.calculator-layout[b-tbmypjrx12] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

/* Common column styles */
.input-column[b-tbmypjrx12],
.results-column[b-tbmypjrx12] {
    padding: 1.25rem;
    border-radius: 0.375rem;
    border: 0.0625rem solid #dee2e6;
}

    .input-column h4[b-tbmypjrx12],
    .results-column h4[b-tbmypjrx12] {
        margin-bottom: 1rem;
        font-size: 1rem;
        border-bottom: 0.125rem solid #3498db;
        padding-bottom: 0.5rem;
    }

.input-group[b-tbmypjrx12] {
    margin-bottom: 1rem;
}

    .input-group label[b-tbmypjrx12] {
        display: block;
        font-weight: 500;
        margin-bottom: 0.4rem;
        font-size: 0.9rem;
    }

.input-with-unit[b-tbmypjrx12] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-control[b-tbmypjrx12] {
    flex: 1;
    padding: 0.5rem;
    border: 0.0625rem solid #ced4da;
    border-radius: 0.25rem;
    font-size: 0.95rem;
}

.input-with-unit .unit[b-tbmypjrx12] {
    font-weight: 500;
    min-width: 1.5rem;
    font-size: 0.9rem;
}

/* SVG column */
.svg-column[b-tbmypjrx12] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.svg-container[b-tbmypjrx12] {
    padding: 0.75rem;
    border-radius: 0.375rem;
    border: 0.0625rem solid #dee2e6;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .svg-container svg[b-tbmypjrx12] {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        border: 0.0625rem solid #dee2e6;
        border-radius: 0.25rem;
    }

/* Results column */
.result-item[b-tbmypjrx12] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem;
    margin-bottom: 0.75rem;
    border-radius: 0.25rem;
    border-left: 0.25rem solid #3498db;
}

    .result-item:last-child[b-tbmypjrx12] {
        margin-bottom: 0;
    }

.result-label[b-tbmypjrx12] {
    font-weight: 500;
    font-size: 0.8rem;
}

.result-value[b-tbmypjrx12] {
    font-weight: 600;
    font-size: 1rem;
}

.result-metric[b-tbmypjrx12] {
    font-size: 0.75rem;
}

/* Formulas section */
.formulas-section[b-tbmypjrx12] {
    margin-top: 1.5rem;
    padding: 0.8rem;
    background: #e7f3ff;
    border-radius: 0.375rem;
    border-left: 0.25rem solid #3498db;
}

    .formulas-section h4[b-tbmypjrx12] {
        color: #2c3e50;
        margin-bottom: 0.8rem;
        font-size: 0.95rem;
    }

    .formulas-section ul[b-tbmypjrx12] {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .formulas-section li[b-tbmypjrx12] {
        padding: 0.5rem 0;
        margin-bottom: 0.4rem;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .formulas-section .formula-label[b-tbmypjrx12] {
        color: #495057;
        font-weight: 500;
        font-size: 0.8rem;
    }

    .formulas-section .formula-expression[b-tbmypjrx12] {
        color: #2c3e50;
        font-family: 'Courier New', monospace;
        font-size: 0.8rem;
        font-weight: 600;
    }

/* Responsive design */

/* Mobile screens (< 768px) - single column, SVG takes 60% of viewport */
@media (max-width: 47.9375rem) {
    .calculator-layout[b-tbmypjrx12] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .svg-column[b-tbmypjrx12] {
        grid-column: 1;
        max-height: clamp(200px, 60vh, 400px);
    }

    .svg-container[b-tbmypjrx12] {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .input-column[b-tbmypjrx12],
    .results-column[b-tbmypjrx12] {
        grid-column: 1;
    }
}

/* Tablet screens (768px to 1199px) - two column */
@media (min-width: 48rem) and (max-width: 74.9375rem) {
    .calculator-layout[b-tbmypjrx12] {
        grid-template-columns: 1fr 1.2fr;
        gap: 1.2rem;
    }

    .svg-column[b-tbmypjrx12] {
        grid-column: 2;
        grid-row: 1 / 3;
        position: sticky;
        top: 1rem;
        max-height: clamp(300px, calc(100vh - 8.5rem), calc(100vh - 6rem));
    }

    .svg-container[b-tbmypjrx12] {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .input-column[b-tbmypjrx12] {
        grid-column: 1;
    }

    .results-column[b-tbmypjrx12] {
        grid-column: 1;
    }
}

/* Medium screens (1200px to 1400px) - three column, moderate SVG */
@media (min-width: 75rem) and (max-width: 87.4375rem) {
    .calculator-layout[b-tbmypjrx12] {
        grid-template-columns: 0.9fr 1.5fr 0.9fr;
        gap: 1.5rem;
    }

    .input-column[b-tbmypjrx12] {
        grid-column: 1;
    }

    .svg-column[b-tbmypjrx12] {
        grid-column: 2;
        position: sticky;
        top: 1rem;
        max-height: clamp(350px, calc(100vh - 9rem), calc(100vh - 7rem));
    }

    .svg-container[b-tbmypjrx12] {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .results-column[b-tbmypjrx12] {
        grid-column: 3;
    }
}

/* Large screens (1400px to 1799px) - three column, generous SVG */
@media (min-width: 87.5rem) and (max-width: 112.4375rem) {
    .calculator-layout[b-tbmypjrx12] {
        grid-template-columns: 0.9fr 1.5fr 0.9fr;
        gap: 1.5rem;
    }

    .input-column[b-tbmypjrx12] {
        grid-column: 1;
    }

    .svg-column[b-tbmypjrx12] {
        grid-column: 2;
        position: sticky;
        top: 1rem;
        max-height: clamp(400px, calc(100vh - 9.5rem), calc(100vh - 7.5rem));
    }

    .svg-container[b-tbmypjrx12] {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .results-column[b-tbmypjrx12] {
        grid-column: 3;
    }
}

/* Ultra-wide screens (1800px+) - your 2K screen */
@media (min-width: 112.5rem) {
    .calculator-layout[b-tbmypjrx12] {
        grid-template-columns: 1fr 2fr 1fr;
        gap: 2rem;
    }

    .input-column[b-tbmypjrx12] {
        grid-column: 1;
    }

    .svg-column[b-tbmypjrx12] {
        grid-column: 2;
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 12.5rem);
    }

    .svg-container[b-tbmypjrx12] {
        width: 100%;
        height: calc(100vh - 12.5rem);
        min-height: 0;
    }

    .results-column[b-tbmypjrx12] {
        grid-column: 3;
    }
}
/* /Components/Pages/ConfiguratorBar.razor.rz.scp.css */
.tile-container[b-cfdgc2cyfs] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.tile[b-cfdgc2cyfs] {
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 1rem;
    min-width: 100px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.tile.selected[b-cfdgc2cyfs] {
    border-color: #0078d4;
    box-shadow: 0 0 8px #0078d4;
    background: #e6f2fb;
}

.tile-image[b-cfdgc2cyfs] {
    height: 60px;
    margin-bottom: 0.5rem;
    background: #eee;
    border-radius: 4px;
}
/* /Components/Pages/CoverSheetQuote.razor.rz.scp.css */
thead[b-qa5t85fojw] {
    background-color: white;
    color: black;
}
table[b-qa5t85fojw], th[b-qa5t85fojw], td[b-qa5t85fojw] {
    border: 0;
    text-indent: 0;
    font-weight: 100;
    font-size: 13px;
}
.packlist-border[b-qa5t85fojw] {
    border: 1px solid black;
    border-radius: 5px;
}
/*.company-logo {
    max-height: 100px;
}*/
.company-logo[b-qa5t85fojw] {
    max-height: 65px;
}
.disclaimer[b-qa5t85fojw] {
    font-size: 12px;
}
.lines td[b-qa5t85fojw] {
    border: 1px solid red;
    text-align: center;
}

.signature[b-qa5t85fojw] {
    border: 2px solid black;
    width: 10rem; /* Sets the width of the box */
    height: 1.2rem; /* Sets the height of the box */
}

.signature-anchor[b-qa5t85fojw] {
    position: absolute;
    top: 0;
    left: 1rem;
}

.traveler-foot[b-qa5t85fojw] {
    min-height: 80px;
}

@media print {
    .traveler-printed-by[b-qa5t85fojw] {
        position: fixed;
        bottom: 0;
    }
}
/* /Components/Pages/CurveNotchCalculator.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════
   NotchCalculator.razor.css
   --------------------------------------------------------------------
   Scoped styles for the flat curve bar notch calculator.

   Theming: a single set of CSS custom properties is declared on .ncalc
   for light mode and re-declared under [data-bs-theme="dark"] .ncalc for
   dark mode (the attribute ColorTheme.js sets on <html>). Every rule
   below reads the tokens, so only the token block changes per theme.
   Palette follows GitHub Primer to match the original inline colors.
   ════════════════════════════════════════════════════════════════════ */

.ncalc[b-3pgnab8p4z] {
    /* ── Light theme tokens ─────────────────────────────────────────── */
    --nc-text: #1f2328;
    --nc-muted: #57606a;
    --nc-label: #424a53;
    --nc-border: #d0d7de;
    --nc-border-subtle: #eaeef2;
    --nc-surface: #ffffff;
    --nc-surface-alt: #f6f8fa;
    --nc-row-alt: #fbfcfd;
    --nc-input-bg: #ffffff;
    --nc-input-text: #1f2328;
    --nc-warn-bg: #fff3cd;
    --nc-warn-border: #f0d58a;
    --nc-warn-text: #6b5300;
    --nc-accent: #1f6feb;
    --nc-accent-hover: #1a5fcf;
    --nc-accent-text: #ffffff;
    --nc-focus-ring: rgba(31, 111, 235, .35);
    color-scheme: light;
    max-width: 1000px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--nc-text);
}

/* ── Dark theme tokens — only the variables change ──────────────────── */
[data-bs-theme="dark"] .ncalc[b-3pgnab8p4z] {
    --nc-text: #e6edf3;
    --nc-muted: #9198a1;
    --nc-label: #b6c0cb;
    --nc-border: #3d444d;
    --nc-border-subtle: #2a2f37;
    --nc-surface: #161b22;
    --nc-surface-alt: #21262d;
    --nc-row-alt: #1a1f27;
    --nc-input-bg: #0d1117;
    --nc-input-text: #e6edf3;
    --nc-warn-bg: rgba(187, 128, 9, .15);
    --nc-warn-border: rgba(187, 128, 9, .4);
    --nc-warn-text: #e3b341;
    --nc-accent: #2f81f7;
    --nc-accent-hover: #4c8ef7;
    --nc-accent-text: #ffffff;
    --nc-focus-ring: rgba(47, 129, 247, .4);
    color-scheme: dark; /* native spinners / select arrow follow the theme */
}

/* ── Headings & intro ───────────────────────────────────────────────── */
.ncalc h1[b-3pgnab8p4z] {
    font-size: 1.4rem;
    margin: 0 0 .25rem;
}

.ncalc .sub[b-3pgnab8p4z] {
    color: var(--nc-muted);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

/* ── Input cards ────────────────────────────────────────────────────── */
.ncalc .grid[b-3pgnab8p4z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.ncalc fieldset[b-3pgnab8p4z] {
    border: 1px solid var(--nc-border);
    border-radius: 8px;
    padding: 1rem 1rem 1.1rem;
    margin: 0;
    background: var(--nc-surface);
}

.ncalc legend[b-3pgnab8p4z] {
    font-weight: 600;
    padding: 0 .4rem;
    color: var(--nc-text);
}

.ncalc label[b-3pgnab8p4z] {
    display: block;
    font-size: .85rem;
    color: var(--nc-label);
    margin-top: .7rem;
}

    .ncalc label.inline[b-3pgnab8p4z] {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        margin: 0;
        color: var(--nc-text);
    }

.ncalc input[type=number][b-3pgnab8p4z],
.ncalc input[type=text][b-3pgnab8p4z],
.ncalc select[b-3pgnab8p4z] {
    display: block;
    width: 100%;
    margin-top: .25rem;
    padding: .4rem .5rem;
    border: 1px solid var(--nc-border);
    border-radius: 6px;
    font-size: .95rem;
    box-sizing: border-box;
    background: var(--nc-input-bg);
    color: var(--nc-input-text);
}

.ncalc input[b-3pgnab8p4z]::placeholder {
    color: var(--nc-muted);
}

.ncalc input:focus[b-3pgnab8p4z],
.ncalc select:focus[b-3pgnab8p4z] {
    outline: none;
    border-color: var(--nc-accent);
    box-shadow: 0 0 0 2px var(--nc-focus-ring);
}

.ncalc input[type=checkbox][b-3pgnab8p4z] {
    margin: 0;
    accent-color: var(--nc-accent);
}

/* ── Options row ────────────────────────────────────────────────────── */
.ncalc .opts[b-3pgnab8p4z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin: 1rem 0 .5rem;
}

.ncalc .note[b-3pgnab8p4z] {
    font-size: .8rem;
    color: var(--nc-muted);
}

.ncalc .warn[b-3pgnab8p4z] {
    background: var(--nc-warn-bg);
    border: 1px solid var(--nc-warn-border);
    color: var(--nc-warn-text);
    padding: .6rem .8rem;
    border-radius: 6px;
    font-size: .9rem;
}

/* ── Results table ──────────────────────────────────────────────────── */
.ncalc .tablewrap[b-3pgnab8p4z] {
    overflow-x: auto;
    border: 1px solid var(--nc-border);
    border-radius: 8px;
    margin-top: .5rem;
    background: var(--nc-surface);
}

/* Override the global app.css table rules (black borders + blue/white
   thead) so the calculator keeps its own themed appearance. */
.ncalc table[b-3pgnab8p4z] {
    border-collapse: collapse;
    width: 100%;
    min-width: 0;
    font-variant-numeric: tabular-nums;
    font-size: .9rem;
    background: transparent;
}

.ncalc th[b-3pgnab8p4z],
.ncalc td[b-3pgnab8p4z] {
    padding: .45rem .6rem;
    text-align: right;
    white-space: nowrap;
    border: 0;
    border-bottom: 1px solid var(--nc-border-subtle);
    text-indent: 0;
    color: var(--nc-text);
}

.ncalc thead th[b-3pgnab8p4z] {
    background: var(--nc-surface-alt);
    color: var(--nc-text);
    position: sticky;
    top: 0;
    font-weight: 600;
}

.ncalc th .ang[b-3pgnab8p4z] {
    display: block;
    font-weight: 400;
    font-size: .72rem;
    color: var(--nc-muted);
}

.ncalc td.lbl[b-3pgnab8p4z], .ncalc th:first-child[b-3pgnab8p4z] {
    text-align: left;
}

.ncalc td.len[b-3pgnab8p4z] {
    font-weight: 600;
}

.ncalc tbody tr:nth-child(even)[b-3pgnab8p4z] {
    background: var(--nc-row-alt);
}

/* ── Actions & CSV ──────────────────────────────────────────────────── */
.ncalc .actions[b-3pgnab8p4z] {
    margin-top: 1rem;
}

.ncalc .dl[b-3pgnab8p4z] {
    display: inline-block;
    background: var(--nc-accent);
    color: var(--nc-accent-text);
    text-decoration: none;
    padding: .5rem .9rem;
    border-radius: 6px;
    font-size: .9rem;
}

    .ncalc .dl:hover[b-3pgnab8p4z] {
        background: var(--nc-accent-hover);
    }

.ncalc .csv[b-3pgnab8p4z] {
    margin-top: 1rem;
}

    .ncalc .csv summary[b-3pgnab8p4z] {
        cursor: pointer;
        font-size: .9rem;
        color: var(--nc-muted);
    }

    .ncalc .csv textarea[b-3pgnab8p4z] {
        width: 100%;
        margin-top: .5rem;
        font-family: ui-monospace, monospace;
        font-size: .8rem;
        border: 1px solid var(--nc-border);
        border-radius: 6px;
        padding: .5rem;
        box-sizing: border-box;
        background: var(--nc-input-bg);
        color: var(--nc-input-text);
    }
/* /Components/Pages/DataCollectionAddRemove.razor.rz.scp.css */
.insert-table-wrapper[b-yp8n7czhkt] {
    padding-left: 28px;
}

.insert-gap-td[b-yp8n7czhkt] {
    padding: 0;
    border: none;
}

.insert-preview[b-yp8n7czhkt] {
    background: linear-gradient(90deg, rgba(25, 135, 84, 0.15) 0%, rgba(25, 135, 84, 0.04) 100%);
    border: 2px dashed var(--bs-warning);
    border-radius: 6px;
    margin: 4px 0;
    margin-left: -24px;
}

.insert-search-panel[b-yp8n7czhkt] {
    background: rgba(255, 193, 7, 0.08);
    border: 1px dashed #ffc107;
    border-radius: 6px;
    margin: 4px 0;
    /*margin-left: -24px;*/
}

.insert-search-input[b-yp8n7czhkt] {
    max-width: 300px;
}

.insert-operations-list[b-yp8n7czhkt] {
    max-height: 200px;
    overflow-y: auto;
}

/* Green dashed top border on rows that accept an insert */
.insert-hint-row > td[b-yp8n7czhkt] {
   /* border-top: 2px dashed var(--bs-success) !important;*/
}

.insert-hint-row > td:first-child[b-yp8n7czhkt] {
    position: relative;
    overflow: visible;
}

/* Circular "+" icon sitting on the row border */
.insert-between-btn[b-yp8n7czhkt] {
    position: absolute;
    top: -14px;
    left: -28px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.insert-between-btn:hover[b-yp8n7czhkt] {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 2px 6px rgba(25, 135, 84, 0.45);
}

/* Minimal end-of-list insert indicator */
.insert-gap-end[b-yp8n7czhkt] {
    padding: 0;
    height: 0;
    border-top: 2px dashed var(--bs-success);
    border-bottom: none;
    position: relative;
    overflow: visible;
}
/* /Components/Pages/DataCollectionFloor.razor.rz.scp.css */
p[b-wmbemje3eg] {
    font-size: 5rem;
    color: red;
}

.form-control[b-wmbemje3eg] {
    border: 2px solid black;
}
input.form-control[b-wmbemje3eg] {
    border-left: none;
}

.job-info-container[b-wmbemje3eg] {
    font-size: 1.25rem;
    font-weight: 600;
    font-family: 'Century Gothic';
    margin: 5px 0;
}

.selection-container[b-wmbemje3eg] {
    display: flex;
}

.check-job[b-wmbemje3eg] {
    display: flex;
    align-items: stretch;
}
    .check-job button[b-wmbemje3eg] {
        margin-left: 5px;
    }

.operations-container[b-wmbemje3eg] {
    display: grid;
    /*grid-template-columns: 1fr auto;*/
}
.operation[b-wmbemje3eg] {
    display: flex;
    justify-content: space-between;
}
.with-button[b-wmbemje3eg] {
    display: gr;
    align-items: center;
    margin-left: 5px;
    border: none;
    padding: 0;
}
.pause[b-wmbemje3eg] {
    display: flex;
    /*flex: 1 1 auto;*/
}
    .pause button[b-wmbemje3eg] {
        width: 50%;
    }

/* Operation with info icon styling */
.operation-with-info[b-wmbemje3eg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-icon[b-wmbemje3eg] {
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.info-icon:hover[b-wmbemje3eg] {
    color: #0b5ed7 !important;
}
.clear-job-btn[b-wmbemje3eg] {
    position: relative;
    z-index: 10000;
}

/* Ensure proper touch targets for accessibility */
@media (pointer: coarse) {
    .info-icon[b-wmbemje3eg] {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
/* /Components/Pages/InventoryAdjustmentsBoard.razor.rz.scp.css */
table[b-frb8xd279g], th[b-frb8xd279g], td[b-frb8xd279g] {
    text-indent: 0;
}

table[b-frb8xd279g] {
    table-layout: fixed;
    width: 100%;
}

/*td {
    padding: 0 0.25rem 0 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

th {
    white-space: nowrap;
}*/

/* Summary view column widths */
/*table th:nth-child(1) { width: 8rem; }*/ /* Material */
/*table th:nth-child(2) { width: auto; }*/ /* Description - flexible */
/*table th:nth-child(3) { width: 7rem; }*/ /* Location */
/*table th:nth-child(4) { width: 6rem; }*/ /* Total */
/*table th:nth-child(5) { width: 9rem; }*/ /* Last updated by */
/*table th:nth-child(6) { width: 10rem; }*/ /* Date */

/* Regular view column widths (when there are more columns) */
/*table th:nth-child(7) { width: 6rem; }*/ /* Before */
/*table th:nth-child(8) { width: 6rem; }*/ /* Change */
/*table th:nth-child(9) { width: 6rem; }*/ /* After */
/*table th:nth-child(10) { width: 7rem; }*/ /* Action */
/*table th:nth-child(11) { width: 6rem; }*/ /* Status */
/*table th:nth-child(12) { width: 7rem; }*/ /* Job */
/*table th:nth-child(13) { width: 6rem; }*/ /* SO */
/*table th:nth-child(14) { width: 4rem; }*/ /* Line */
/*table th:nth-child(15) { width: auto; }*/ /* Notes - flexible */

.sortable[b-frb8xd279g] {
    cursor: pointer;
    user-select: none;
}

/* Date controls container */
.date-controls[b-frb8xd279g] {
    width: auto;
}

/* Date input fields - using relative width */
.date-input[b-frb8xd279g] {
    width: 10rem;
}

/* Page size selector - using relative width */
.page-size-select[b-frb8xd279g] {
    width: 4.5rem;
}

/* Error status cell */
.error-status[b-frb8xd279g] {
    text-decoration: underline;
    cursor: pointer;
}

/* Summary section styling */
.material-summary[b-frb8xd279g] {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.summary-item[b-frb8xd279g] {
    border-bottom: 1px solid #dee2e6;
}

.summary-item:last-child[b-frb8xd279g] {
    border-bottom: none;
}

.summary-badge[b-frb8xd279g] {
    font-size: 0.875rem;
    min-width: 3rem;
    text-align: center;
}
/* /Components/Pages/InvoiceDummy.razor.rz.scp.css */
thead[b-7twjd6fzpw] {
    background-color: white;
    color: black;
}

table[b-7twjd6fzpw], th[b-7twjd6fzpw], td[b-7twjd6fzpw] {
    border: 0;
    text-indent: 0;
    font-weight: 100;
    font-size: 13px;
}

.packlist-border[b-7twjd6fzpw] {
    border: 1px solid black;
    border-radius: 5px;
}

td[b-7twjd6fzpw] {
    padding: 0;
}

.desc[b-7twjd6fzpw] {
    line-height: 1rem;
}

.company-logo[b-7twjd6fzpw] {
    max-height: 130px;
}

.grey-back[b-7twjd6fzpw] {
    background-color: lightgray;
}

.text-justify[b-7twjd6fzpw] {
    text-align: justify;
}

.lines th[b-7twjd6fzpw], .lines td[b-7twjd6fzpw] {
    border: 1px solid black;
    page-break-inside: avoid;
}

.lines .customer-name[b-7twjd6fzpw] {
    border-width: 0;
}

.quote-accepted[b-7twjd6fzpw] {
    page-break-inside: avoid;
    page-break-after: always;
}

.signature-container[b-7twjd6fzpw] {
    position: relative;
    min-width: 350px;
}

.signature-anchor[b-7twjd6fzpw] {
    position: absolute;
    top: 0;
    left: 0;
}

.technical-considerations[b-7twjd6fzpw] {
    font-size: 11px;
    page-break-after: always;
    text-align: justify;
}

.signature-line[b-7twjd6fzpw] {
    border-bottom: 1px solid #000;
    display: inline-block;
    width: 300px;
    margin-left: 10px;
}

.border-fix[b-7twjd6fzpw] {
    padding: 0.5px;
}

.signature-line-block[b-7twjd6fzpw] {
    font-size: 11pt;
    white-space: nowrap;
}

.signature-line[b-7twjd6fzpw] {
    display: inline-block;
    width: 320px; /* adjust desired line length */
    border-bottom: 1px solid #000;
    height: 18px;
    vertical-align: baseline;
    margin-left: 6px;
}

.traveler-foot[b-7twjd6fzpw] {
    min-height: 10px;
}
.terms[b-7twjd6fzpw] {
   /* width: 33%;*/
    border: 1px solid black;
    text-indent: 5px;
}

@media print {
    .traveler-printed-by[b-7twjd6fzpw] {
        position: fixed;
        bottom: 0;
        right: 0;
    }
}
/* /Components/Pages/OrderHistory.razor.rz.scp.css */
/* Order History Page Styles */

td>span[b-b0kidf687n]{
    text-indent: 0;
}



/* Order header styling */
.order-header-container[b-b0kidf687n] {
    margin-left: 0;
    margin-right: 0;
}

/* Orders container styling */
.orders-container[b-b0kidf687n] {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

/* Order accordion styling */
.order-accordion[b-b0kidf687n] {
    margin-top: 0;
}

/* Accordion button styling */
.order-accordion-button[b-b0kidf687n] {
    padding: 1rem;
}

.order-accordion-content[b-b0kidf687n] {
    margin-left: 0;
    margin-right: 0;
}

/* Table styling */
.order-history-table[b-b0kidf687n] {
    max-height: 50vh;
    overflow-y: auto;
}

.job-accordion-container[b-b0kidf687n] {
    max-height: 50vh;
    overflow-y: auto;
}

/* Job progress bar styling */
.job-progress-bar[b-b0kidf687n] {
    height: 20px;
}

/* Operation status badge styling */
.operation-status-badge[b-b0kidf687n] {
    color: white;
}

/* Job info section styling */
.job-info[b-b0kidf687n] {
    margin-bottom: 1rem;
    padding: 1rem;
/*    background-color: var(--bs-light);*/
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
}

/* Highlighted row styles for special notes */
.table .table-info[b-b0kidf687n] {
    background-color: #d1ecf1;
}

.table .table-warning[b-b0kidf687n] {
    background-color: #fff3cd;
}

.table .table-danger[b-b0kidf687n] {
    background-color: #f8d7da;
}

/* Ensure text readability on colored backgrounds */
.table .table-info td[b-b0kidf687n],
.table .table-warning td[b-b0kidf687n],
.table .table-danger td[b-b0kidf687n] {
    color: #212529;
}

/* Clickable replacement order row styling */
.replacement-order-link[b-b0kidf687n] {
    cursor: pointer;
    /*transition: all 0.2s ease-in-out;*/
}

/*.replacement-order-link:hover {
    opacity: 0.8;
    transform: scale(1.01);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.replacement-order-link:active {
    transform: scale(0.99);
}*/

/* Job Travelers table styling */
.table-travelers[b-b0kidf687n] {
    table-layout: fixed;
    width: 100%;
}

/* No-wrap styling for most columns */
.nowrap[b-b0kidf687n] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Description column - allow wrapping and set wider width */
.description-col[b-b0kidf687n] {
    width: 50%;
    word-wrap: break-word;
    white-space: normal;
}

/* Set specific widths for other columns */
.table-travelers th:nth-child(1)[b-b0kidf687n], /* Job Name */
.table-travelers td:nth-child(1)[b-b0kidf687n] {
    width: 15%;
}

.table-travelers th:nth-child(3)[b-b0kidf687n], /* Actions */
.table-travelers td:nth-child(3)[b-b0kidf687n] {
    width: 20%;
}

.table-travelers th:nth-child(4)[b-b0kidf687n], /* Printed By */
.table-travelers td:nth-child(4)[b-b0kidf687n] {
    width: 10%;
}

.table-travelers th:nth-child(5)[b-b0kidf687n], /* Printed On */
.table-travelers td:nth-child(5)[b-b0kidf687n] {
    width: 15%;
}

.text-muted[b-b0kidf687n] {
    opacity: 0.6;
}

.text-decoration-line-through[b-b0kidf687n] {
    text-decoration: line-through;
}

.removed-operation[b-b0kidf687n] {
    background-color: #f8f9fa;
    opacity: 0.7;
}
/* /Components/Pages/OrderPDF.razor.rz.scp.css */
thead[b-2psuu3i3rk] {
    background-color: white;
    color: black;
}

table[b-2psuu3i3rk], th[b-2psuu3i3rk], td[b-2psuu3i3rk] {
    border: 0;
    text-indent: 0;
    font-weight: 100;
    font-size: 13px;
}

.packlist-border[b-2psuu3i3rk] {
    border: 1px solid black;
    border-radius: 5px;
}

td[b-2psuu3i3rk] {
    padding: 0;
}

.desc[b-2psuu3i3rk] {
    line-height: 1rem;
}

.company-logo[b-2psuu3i3rk] {
    max-height: 130px;
}

.grey-back[b-2psuu3i3rk] {
    background-color: lightgray;
}

.text-justify[b-2psuu3i3rk] {
    text-align: justify;
}

.lines th[b-2psuu3i3rk], .lines td[b-2psuu3i3rk] {
    border: 1px solid black;
    page-break-inside: avoid;
}

.lines .customer-name[b-2psuu3i3rk] {
    border-width: 0;
}

.quote-accepted[b-2psuu3i3rk] {
    page-break-inside: avoid;
    page-break-after: always;
}

.pdf-footer[b-2psuu3i3rk] {
    page-break-before: always;
    page-break-inside: avoid;
}

.signature-container[b-2psuu3i3rk] {
    position: relative;
    min-width: 350px;
}

.signature-anchor[b-2psuu3i3rk] {
    position: absolute;
    top: 0;
    left: 0;
}

.technical-considerations[b-2psuu3i3rk] {
    font-size: 11px;
    /*page-break-after: always;*/
    text-align: justify;
}

.signature-line[b-2psuu3i3rk] {
    border-bottom: 1px solid #000;
    display: inline-block;
    width: 300px;
    margin-left: 10px;
}

.border-fix[b-2psuu3i3rk] {
    padding: 0.5px;
}

.signature-line-block[b-2psuu3i3rk] {
    font-size: 11pt;
    white-space: nowrap;
}

.signature-line[b-2psuu3i3rk] {
    display: inline-block;
    width: 320px; /* adjust desired line length */
    border-bottom: 1px solid #000;
    height: 18px;
    vertical-align: baseline;
    margin-left: 6px;
}

.traveler-foot[b-2psuu3i3rk] {
    min-height: 10px;
}

@media print {
    .traveler-printed-by[b-2psuu3i3rk] {
        position: fixed;
        bottom: 0;
        right: 0;
    }
}
/* /Components/Pages/PackageLabelStock.razor.rz.scp.css */
thead[b-nbkun0zpyc] {
    background-color: white;
    color: black;
}
.lines-table[b-nbkun0zpyc] {
    border: 0;
    font-size: 0.7rem;
}

    .lines-table td[b-nbkun0zpyc], th[b-nbkun0zpyc] {
        border: 0;
    }


.label-container[b-nbkun0zpyc] {
    width: 4in;
    height: 8.2in;
    font-family: Arial, sans-serif;
    font-weight: bold;
    /* page-break-after: always; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bottom-section[b-nbkun0zpyc] {
    max-height: 1.75in;
    font-size: 0.7rem;
}

.report-table[b-nbkun0zpyc] {
    width: 100%;
    border-collapse: collapse;
   /* font-size: 0.7rem;*/
}

.package-details-subheader[b-nbkun0zpyc] {
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
    text-align: left;
   /* padding: 1px;*/
/*    font-size: 12px;*/
}

.rotated-text[b-nbkun0zpyc] {
    writing-mode: vertical-rl;
    text-align: center;
    font-weight: bold;
/*    font-size: 13px;*/
    border: 2px solid black;
    /*   width: 50px; */
}

.customer-name[b-nbkun0zpyc] {
    font-size: 2rem;
    overflow: hidden;
    max-width: 300px;
}
.customer-name-rotated[b-nbkun0zpyc] {
    max-height: 120px;
    /*max-width: 80px;*/
   /* width: 200px;*/
   
    overflow: hidden;
}
.order-name[b-nbkun0zpyc] {
    font-size: 1.3rem;
}
.cust-name[b-nbkun0zpyc]{
    font-size: 1.2rem;
}
/* /Components/Pages/PackerScreen.razor.rz.scp.css */
/* ── Layout dimensions ──────────────────────────── */
.packer-screen[b-4gs0sriwus] {
    --letter-w: 8.5in;
    --video-w: 560px;
    --body-gap: 1rem;

    box-sizing: border-box;
    padding: 0.5rem 1rem;
}

/* ── Header ─────────────────────────────────────── */
.packer-header[b-4gs0sriwus] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--FRONTENDCOLOR);
    color: white;
    border-radius: 0.375rem;
}

.packer-title[b-4gs0sriwus] {
    margin: 0;
    white-space: nowrap;
}

.pin-input[b-4gs0sriwus] {
    max-width: 72px;
    flex: 0 0 72px;
}

/* ── Camera selection row ──────────────────────── */
.camera-selection-row[b-4gs0sriwus] {
    margin-bottom: 0.75rem;
}

.camera-selection-row select[b-4gs0sriwus] {
    min-width: 200px;
}

/* ── Scan row ───────────────────────────────────── */
.scan-row[b-4gs0sriwus] {
    margin-bottom: 0.75rem;
}

/* ── Two-column body (mobile-first: stacked) ────── */
.packer-body[b-4gs0sriwus] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--body-gap);
    align-items: start;
}

.packlist-column[b-4gs0sriwus] {
    min-width: 0;
}

.packlist-content[b-4gs0sriwus] {
    width: var(--letter-w);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 0.25rem;
}

/* ── Video column (mobile: on top, compact) ─────── */
.video-column[b-4gs0sriwus] {
    order: -1;
    text-align: center;
}

.dual-preview[b-4gs0sriwus] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.preview-slot[b-4gs0sriwus] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.video-preview[b-4gs0sriwus] {
    width: 100%;
    max-width: 270px;
    border-radius: 0.375rem;
}

.recording-controls[b-4gs0sriwus] {
    margin-top: 0.25rem;
}

/* ── Large screens: side-by-side fixed layout ───── */
@media (min-width: 1440px) {
    .packer-screen[b-4gs0sriwus] {
        width: calc(var(--letter-w) + var(--body-gap) + var(--video-w) + 2rem);
    }

    .scan-row[b-4gs0sriwus] {
        max-width: var(--letter-w);
    }

    .packer-body[b-4gs0sriwus] {
        grid-template-columns: var(--letter-w) var(--video-w);
    }

    .packlist-content[b-4gs0sriwus] {
        max-height: 75vh;
    }

    .video-column[b-4gs0sriwus] {
        order: 0;
        position: sticky;
        top: 0.5rem;
    }
}
/* /Components/Pages/PacklistFinePrint.razor.rz.scp.css */
#packlistFooter[b-i044iaywej] {
    min-height: 500px;
}
/* /Components/Pages/PacklistPDF.razor.rz.scp.css */
thead[b-sjrr6bvf7s] {
    background-color: white;
    color: black;

}
table[b-sjrr6bvf7s], th[b-sjrr6bvf7s], td[b-sjrr6bvf7s] {
    border: 0;
    text-indent: 0;
    font-weight: 100;
    font-size: 13px;
}
.packlist-border[b-sjrr6bvf7s] {
    border: 1px solid black;
    border-radius: 5px;
}
td[b-sjrr6bvf7s] {
    padding: 0;
}

.top-barcode[b-sjrr6bvf7s]{
    width: 255px;
    height: 50px;
}

.desc[b-sjrr6bvf7s] {
    padding-left: 5px;
}
.line-qty[b-sjrr6bvf7s] {
    max-width: 30px;
}

.company-logo[b-sjrr6bvf7s] {
    max-height: 140px;
}

.grey-back[b-sjrr6bvf7s]{
    background-color: darkgray;
}

.fine-print[b-sjrr6bvf7s] {
    page-break-inside: avoid;
    padding: 10px 5px 10px 5px;
    border-width: 0 1px 0 0;
    text-align: justify;
}
    .fine-print ul[b-sjrr6bvf7s], li[b-sjrr6bvf7s] {
        padding: 0;
    }
    ul[b-sjrr6bvf7s]{
        margin: 0;
    }

.terms[b-sjrr6bvf7s] {
    width: 33%;
    border: 1px solid black;
}
    .lines th[b-sjrr6bvf7s], .lines td[b-sjrr6bvf7s] {
        border: 1px solid black;
    }

.lines .customer-name[b-sjrr6bvf7s] {
    border-width: 0;
}

.traveler-foot[b-sjrr6bvf7s] {
    align-self: end;
    min-height: 132px;
    display: flex;
    justify-content: space-between;
}

p[b-sjrr6bvf7s] {
    font-size: 5rem;
    color: red;
}
@media print {

    .traveler-container[b-sjrr6bvf7s] {
        position: relative;
        top: 85px;
    }

    .traveler-printed-by[b-sjrr6bvf7s] {
        position: fixed;
        bottom: 0;
    }

    .thickness[b-sjrr6bvf7s] {
        justify-self: end;
    }

    .barcode417[b-sjrr6bvf7s] {
        position: fixed;
        bottom: 0;
        right: 0;
    }

    @page {
        size: 4in 8in;

        @bottom-center {
            content: "Page " counter(page) " of " counter(pages);
            margin-bottom: 1rem;
        }
    }
}
/* /Components/Pages/Partials.razor.rz.scp.css */
table[b-0ceuqf5iz3], th[b-0ceuqf5iz3], td[b-0ceuqf5iz3] {
    border: 3px solid black;
}
/* /Components/Pages/PDFpage.razor.rz.scp.css */
.print[b-g7c18bj1jk] {
    justify-self: end;
}    
.pdf[b-g7c18bj1jk] {
    overflow-y: hidden;
    height: 100vh;
}

p[b-g7c18bj1jk] {
    font-size: 5rem;
    color: red;
}
button[b-g7c18bj1jk], a[b-g7c18bj1jk] {
    font-size: 3rem;
}
/* /Components/Pages/PerforatedCalculator.razor.rz.scp.css */
/* Perforated Calculator Styles */

/* Pattern Grid */
.pattern-grid-optimized[b-sjlg5kfr7o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.4rem;
    padding: 0.5rem;
}

/* Pattern Items */
.pattern-item-mini[b-sjlg5kfr7o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.2rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 60px;
}

.pattern-item-mini:hover[b-sjlg5kfr7o] {
    border-color: #0d6efd;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pattern-item-mini.active[b-sjlg5kfr7o] {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
    box-shadow: 0 2px 4px rgba(13,110,253,0.3);
}

.pattern-item-mini i[b-sjlg5kfr7o] {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
}

.pattern-label-mini[b-sjlg5kfr7o] {
    font-size: 0.7rem;
    text-align: center;
    line-height: 1.1;
    font-weight: 500;
    word-break: break-word;
    hyphens: auto;
}

/* Size Selection Grid */
.size-grid[b-sjlg5kfr7o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 0.5rem;
    padding: 0.5rem;
    max-height: 250px;
    overflow-y: auto;
}

.size-tile[b-sjlg5kfr7o] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.4rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    min-height: 50px;
}

.size-tile:hover[b-sjlg5kfr7o] {
    border-color: #0d6efd;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.size-tile.active[b-sjlg5kfr7o] {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
    box-shadow: 0 2px 4px rgba(13,110,253,0.3);
    font-weight: 600;
}

/* Result Display */
.result-display-compact[b-sjlg5kfr7o] {
    font-size: 1.5rem;
    font-weight: bold;
    color: #0d6efd;
    text-align: center;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

/* Pattern Image Container */
.pattern-image-container[b-sjlg5kfr7o] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: 8px;
    min-height: 300px;
}

.pattern-diagram-image[b-sjlg5kfr7o] {
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (min-width: 1400px) {
    .pattern-grid-optimized[b-sjlg5kfr7o] {
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
        gap: 0.5rem;
    }
    
    .size-grid[b-sjlg5kfr7o] {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    }
}

@media (max-width: 991px) {
    .pattern-grid-optimized[b-sjlg5kfr7o] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    
    .size-grid[b-sjlg5kfr7o] {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
}
/* /Components/Pages/Picklist.razor.rz.scp.css */
p[b-00bsrajw2l] {
    font-size: 5rem;
    color: red;
}

/* ── Page container (same pattern as PackageLabelStock) ── */
.label-container[b-00bsrajw2l] {
    width: 4in;
    height: 8.2in;
    font-family: Arial, sans-serif;
    /*font-weight: bold;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.label-container:last-child[b-00bsrajw2l] {
    page-break-after: auto;
}

/* ── Top section: flex column so sign-off can push to bottom ── */
/* padding-bottom offsets content ABOVE the pre-printed UPS text at the
   bottom of the top label portion (just above the tear-off perforation) */
.top-section[b-00bsrajw2l] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 0.35in;
}

/* ── Header (first page) ── */
.picklist-header[b-00bsrajw2l] {
    font-size: 0.85rem;
    font-weight: bold;
    padding-bottom: 0.05in;
    line-height: 1.4;
    padding-left: 5px;
}

.header-customer[b-00bsrajw2l] {
    font-size: 1rem;
}

.field-label[b-00bsrajw2l] {
    font-weight: bold;
    text-decoration: underline;
    color: black;
}

/* ── Items table ── */
.report-table[b-00bsrajw2l] {
    border-collapse: collapse;
    border: none;
}

    .report-table th[b-00bsrajw2l],
    .report-table td[b-00bsrajw2l] {
        border: none;
        text-indent: 0;
        padding-left: 5px;
        padding-right: 3px;
    }

    .report-table thead[b-00bsrajw2l] {
        background-color: white;
        font-size: 0.75rem;
        color: black;
        text-align: left;
    }

.col-qty[b-00bsrajw2l] {
    width: 14%;
}

.col-line[b-00bsrajw2l] {
    width: 14%;
}

.col-job[b-00bsrajw2l] {
    width: 72%;
}

.item-group[b-00bsrajw2l] {
    page-break-after: avoid;
    font-size: 0.85rem;
}

.descr[b-00bsrajw2l] {
    font-size: 0.85rem;
    padding-bottom: 2px;
    overflow-wrap: break-word;
}

/* ── Sign-off boxes ── */
.signoff-section[b-00bsrajw2l] {
    margin-top: 0.1in;
    display: flex;
    flex-direction: column;
    gap: 0.06in;
    break-inside: avoid;
    page-break-inside: avoid;
}

.signoff-box[b-00bsrajw2l] {
    border: 2px solid black;
    padding: 0.04in 0.1in;
    min-height: 0.35in;
    font-size: 0.65rem;
    font-weight: bold;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}
.ups-text[b-00bsrajw2l] {
    padding-top: 0.5in;
}
/* ── Tear-off ── */
.traveler-foot[b-00bsrajw2l] {
    align-self: end;
    min-height: 1.75in;
    display: flex;
    justify-content: space-between;
}
.tear-off[b-00bsrajw2l] {
    padding-left: 5px;
    padding-top: 0.25in;
    height: 1.5in;
}

.summary-so[b-00bsrajw2l] {
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: underline;
}

.summary-customer[b-00bsrajw2l] {
    font-size: 1.3rem;
    font-weight: bold;
}

.report-table tr[b-00bsrajw2l] {
    page-break-inside: avoid;
}

hr[b-00bsrajw2l]{
    margin: 0;
    font-weight: bold;
}

/* ── Striped table rows (every other item) ── */
.report-table tbody tr.stripe[b-00bsrajw2l] {
    background-color: #f0f0f0;
}

@media print {
    .tear-off[b-00bsrajw2l] {
        position: fixed;
        bottom: 0;
    }
}
/* /Components/Pages/PrepareShipment.razor.rz.scp.css */
/*.input-group > .form-control {
    min-width: fit-content;
}*/
.form-floating > input[b-bxlxej35zq] {
    min-width: fit-content;
}
.form-floating > .form-control:focus ~ label[b-bxlxej35zq]::after, .form-floating > .form-control:not(:placeholder-shown) ~ label[b-bxlxej35zq]::after, 
.form-floating > .form-control-plaintext ~ label[b-bxlxej35zq]::after, .form-floating > .form-select ~ label[b-bxlxej35zq]::after {
    background-color: inherit;
}
#ship_via[b-bxlxej35zq], #shipping_action_note[b-bxlxej35zq], #declared_value[b-bxlxej35zq], #shipping_charged[b-bxlxej35zq], #Packlist[b-bxlxej35zq], #total_travelers[b-bxlxej35zq], #total_grilles[b-bxlxej35zq], #chosen_name[b-bxlxej35zq] {
    background-color: aliceblue;
}

/* Dark theme overrides */
[data-bs-theme="dark"] #ship_via[b-bxlxej35zq],
[data-bs-theme="dark"] #shipping_action_note[b-bxlxej35zq],
[data-bs-theme="dark"] #declared_value[b-bxlxej35zq],
[data-bs-theme="dark"] #shipping_charged[b-bxlxej35zq],
[data-bs-theme="dark"] #total_travelers[b-bxlxej35zq],
[data-bs-theme="dark"] #total_grilles[b-bxlxej35zq],
[data-bs-theme="dark"] #chosen_name[b-bxlxej35zq],
[data-bs-theme="dark"] #Packlist[b-bxlxej35zq] {
    background-color: #23272b; /* deep gray-blue */
    color: #e0e0e0;
    border-color: #343a40;
}

[data-bs-theme="dark"] .form-floating > input[b-bxlxej35zq] {
    background-color: #23272b;
    color: #e0e0e0;
    border-color: #343a40;
}

[data-bs-theme="dark"] .modal-content[b-bxlxej35zq] {
    background-color: #181a1b;
    color: #e0e0e0;
    opacity: 98%;
}

/* Example for a warning/error cell */
[data-bs-theme="dark"] .error-status[b-bxlxej35zq],
[data-bs-theme="dark"] .bg-danger[b-bxlxej35zq] {
    background-color: #b23c3c !important; /* muted red */
    color: #fff !important;
}

/* Example for a success cell */
[data-bs-theme="dark"] .bg-success[b-bxlxej35zq] {
    background-color: #388e3c !important; /* softer green */
    color: #fff !important;
}

.tooltip[b-bxlxej35zq] {
    position: relative;
    display: inline-block;
}

    .tooltip .tooltiptext[b-bxlxej35zq] {
        visibility: hidden;
        width: 140px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: -75px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .tooltip .tooltiptext[b-bxlxej35zq]::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .tooltip:hover .tooltiptext[b-bxlxej35zq] {
        visibility: visible;
        opacity: 1;
    }
.modal-content[b-bxlxej35zq] {
    opacity: 95%;
}
/* /Components/Pages/PrepareShipmentCopyBox.razor.rz.scp.css */
.form-floating > .form-control:focus ~ label[b-yem0cw81dl]::after, .form-floating > .form-control:not(:placeholder-shown) ~ label[b-yem0cw81dl]::after,
.form-floating > .form-control-plaintext ~ label[b-yem0cw81dl]::after, .form-floating > .form-select ~ label[b-yem0cw81dl]::after {
    background-color: inherit;
}

#Declared_value[b-yem0cw81dl], #Packlist[b-yem0cw81dl], .input-group-text[b-yem0cw81dl] {
    background-color: aliceblue;
}
[data-bs-theme="dark"] #Packlist[b-yem0cw81dl],
[data-bs-theme="dark"] #Declared_value[b-yem0cw81dl],
[data-bs-theme="dark"] .input-group-text[b-yem0cw81dl] {
    background-color: #23272b; /* deep gray-blue */
    color: #e0e0e0;
    border-color: #343a40;
}
/* /Components/Pages/Production_Welding.razor.rz.scp.css */
/* Fix height and enable scrolling */
.grid[b-8wwlk52b1z] {
    height: 95vh;
    overflow-y: auto;
/*    font-size: 0.9rem;*/
}

    .grid[b-8wwlk52b1z]  table {
        min-width: 100%;
    }

/* Sticky header while scrolling */
[b-8wwlk52b1z] thead {
    position: sticky;
    top: 0;
    background-color: var(--FRONTENDCOLOR);
    color: white;
    outline: 1px solid gray;
    z-index: 1;
}

/* For virtualized grids, it's essential that all rows have the same known height */
[b-8wwlk52b1z] tr {
    height: 30px;
    border-bottom: 0.5px solid silver;
}

[b-8wwlk52b1z] tbody td {
    white-space: nowrap;
    overflow: hidden;
/*    max-width: 0;*/
/*    min-width: 100%;*/
    text-overflow: ellipsis;
}
[b-8wwlk52b1z] td:nth-child(4),
[b-8wwlk52b1z] td:nth-child(6) {
/*    min-width: 50px;
    max-width: 0;*/
}
[b-8wwlk52b1z] .col-title {
    justify-content: center;
}
/* /Components/Pages/QuotePDF.razor.rz.scp.css */
thead[b-cgxdx1la2u] {
    background-color: white;
    color: black;
}

table[b-cgxdx1la2u], th[b-cgxdx1la2u], td[b-cgxdx1la2u] {
    border: 0;
    text-indent: 0;
    font-weight: 100;
    font-size: 13px;
}

.packlist-border[b-cgxdx1la2u] {
    border: 1px solid black;
    border-radius: 5px;
}

td[b-cgxdx1la2u] {
    padding: 0;
}

.desc[b-cgxdx1la2u] {
    line-height: 1rem;
}

.company-logo[b-cgxdx1la2u] {
    max-height: 130px;
}

.grey-back[b-cgxdx1la2u] {
    background-color: lightgray;
}

.text-justify[b-cgxdx1la2u] {
    text-align: justify;
}

.lines th[b-cgxdx1la2u], .lines td[b-cgxdx1la2u] {
    border: 1px solid black;
    page-break-inside: avoid;
}

.lines .customer-name[b-cgxdx1la2u] {
    border-width: 0;
}

.quote-accepted[b-cgxdx1la2u] {
    page-break-inside: avoid;
    page-break-after: always;
}

.signature-container[b-cgxdx1la2u] {
    position: relative;
    min-width: 350px;
}
.signature-anchor[b-cgxdx1la2u] {
    position: absolute;
    top: 0;
    left: 0;
}

.technical-considerations[b-cgxdx1la2u] {
    /*font-size: 11px;*/
/*    page-break-after: always;*/
    text-align: justify;
}
.footer-segment[b-cgxdx1la2u] {
    white-space: pre-wrap; /* keep the author's \r\n and \t */
    tab-size: 4;
    overflow-wrap: break-word;
}

.manual-page-break[b-cgxdx1la2u] {
    page-break-before: always; /* legacy engines (wkhtmltopdf) */
    break-before: page; /* modern engines (Chromium/Playwright) */
}

/*.technical-considerations {
    font-size: 11px;
    page-break-after: always;
    white-space: pre-wrap;*/ /* keep newlines, blank lines, and leading spaces */
    /*tab-size: 4;*/ /* render the tab after each • compactly (default is 8) */
    /*overflow-wrap: break-word;*/ /* still wrap long URLs/words inside the box */
/*}*/

.signature-line[b-cgxdx1la2u] {
    border-bottom: 1px solid #000;
    display: inline-block;
    width: 300px;
    margin-left: 10px;
}
.border-fix[b-cgxdx1la2u] {
    padding: 0.5px;
}

.signature-line-block[b-cgxdx1la2u] {
    font-size: 11pt;
    white-space: nowrap;
}

.signature-line[b-cgxdx1la2u] {
    display: inline-block;
    width: 320px; /* adjust desired line length */
    border-bottom: 1px solid #000;
    height: 18px;
    vertical-align: baseline;
    margin-left: 6px;
}

.traveler-foot[b-cgxdx1la2u] {
    min-height: 10px;
}

@media print {
    .traveler-printed-by[b-cgxdx1la2u] {
        position: fixed;
        bottom: 0;
        right: 0;
    }
}
/* /Components/Pages/QuotePDFfooter.razor.rz.scp.css */
.ship-page-break[b-wqvl4thwo6] {
    page-break-before: always;
}
.spacing[b-wqvl4thwo6]{
    text-align: left;
}
/* /Components/Pages/ReprintPacklistModal.razor.rz.scp.css */


.ship-via__icon[b-ejf64ex89y] {
    line-height: 1;
}
/* /Components/Pages/ShippingAuthorizedToShip.razor.rz.scp.css */
.standings-table__item[b-eb4g1cwfob]{
    font-size: 0.8rem;
}
.btn-primary[b-eb4g1cwfob]{
    background-color: var(--FRONTENDCOLOR);
}
.button-row[b-eb4g1cwfob]{
    display: flex;
    justify-content: space-evenly;
}
.panel[b-eb4g1cwfob]{
    margin-bottom: 20px;
    
}
.panel-arch[b-eb4g1cwfob] {
    border-color: var(--FRONTENDCOLOR);
    border: 1px solid;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.panel-heading[b-eb4g1cwfob]{
    background-color: var(--FRONTENDCOLOR);
    padding: 10px 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.panel-body[b-eb4g1cwfob] {
    padding: 15px;
    

}
.table-responsive[b-eb4g1cwfob]{
    overflow: auto; 
}

.picklist.btn-outline-success:hover[b-eb4g1cwfob] {
    color: blue;
    /*font-weight: bold;*/
    background-color: transparent;
    border-color: blue;
}
/* /Components/Pages/ShippingBundleScreen.razor.rz.scp.css */
h6[b-uj8bl5zjp8] {
    color: white;
}

.standings-table__item[b-uj8bl5zjp8] {
    font-size: 0.8rem;
}

.btn-primary[b-uj8bl5zjp8] {
    background-color: var(--FRONTENDCOLOR);
}

.button-row[b-uj8bl5zjp8] {
    display: flex;
    justify-content: space-evenly;
}

.panel[b-uj8bl5zjp8] {
    margin-bottom: 20px;
}

.panel-arch[b-uj8bl5zjp8] {
    border-color: var(--FRONTENDCOLOR);
    border: 1px solid;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.panel-heading[b-uj8bl5zjp8] {
    background-color: var(--FRONTENDCOLOR);
    padding: 10px 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.panel-body[b-uj8bl5zjp8] {
    padding: 15px;
}

.table-responsive[b-uj8bl5zjp8] {
    overflow: auto;
}
/* /Components/Pages/TravelerSFpage.razor.rz.scp.css */
.do-not-cover[b-n3tm9dxn5r] {
    font-size: 0.5rem;
    justify-self: center;
}

table[b-n3tm9dxn5r] {
    font-family: 'Century Gothic';
    max-width: 865px;
}

ul[b-n3tm9dxn5r] {
    padding-left: 25px;
    margin-bottom: 0;
}

li[b-n3tm9dxn5r] {
    /*white-space: nowrap;*/
    margin-right: 5px;
}

table[b-n3tm9dxn5r], th[b-n3tm9dxn5r], td[b-n3tm9dxn5r] {
    border: 0;
    text-indent: 0;
}

thead[b-n3tm9dxn5r] {
    text-align: justify;
    background-color: white;
    color: black;
}

tbody > tr:last-child[b-n3tm9dxn5r] {
    border-bottom: 0;
}

.traveler-header[b-n3tm9dxn5r] {
    display: flex;
    /*flex: 2 1 240px;*/
    justify-content: space-between;
    margin-bottom: 1rem;
}

.customer-name[b-n3tm9dxn5r] {
    font-size: 1.5rem;
    padding-right: 10px;
    overflow: hidden;
    max-width: 350px;
}

.job-name[b-n3tm9dxn5r] {
    font-size: 1rem;
    padding-left: 10px;
}
.sleeve[b-n3tm9dxn5r] {
    font-weight: bold;
    opacity: 0.5;
}
.watermark[b-n3tm9dxn5r] {
    position: fixed;
    bottom: 50%;
    /*left: -8%;*/
    font-size: 5rem;
    transform: rotate(328deg);
    text-wrap: nowrap;
    opacity: 0.3;
}

.info-and-image[b-n3tm9dxn5r] {
    display: flex;
    justify-content: space-between;
}

figure img[b-n3tm9dxn5r] {
    vertical-align: top;
}

figure figcaption[b-n3tm9dxn5r] {
    text-align: center;
    font-size: 1.375rem;
}

.order-info[b-n3tm9dxn5r] {
    display: flex;
}

.estimator[b-n3tm9dxn5r] {
    padding-left: 20px;
    max-width: 200px;
}

.job-notes[b-n3tm9dxn5r] {
    border: 2px solid black;
    padding: 5px;
}

.mater[b-n3tm9dxn5r] {
    min-width: 100px;
}

.mid-container[b-n3tm9dxn5r] {
    display: grid;
    margin: 0.5rem 0 0.5rem 0;
    font-size: 1.375rem;
    align-items: center;
}

.mid-row[b-n3tm9dxn5r] {
    display: flex;
    justify-content: space-between;
}

.mid-row-content[b-n3tm9dxn5r] {
    display: flex;
}

.mat-text[b-n3tm9dxn5r], .fin-text[b-n3tm9dxn5r], .mou-text[b-n3tm9dxn5r], .add-text[b-n3tm9dxn5r], .due-date-text[b-n3tm9dxn5r], .thickness-text[b-n3tm9dxn5r] {
    padding-left: 10px;
}
    .mou-text[b-n3tm9dxn5r]{
        padding-right: 5px;
    }

    .thickness[b-n3tm9dxn5r] {
        justify-self: center;
        display: flex;
    }

.due-date[b-n3tm9dxn5r] {
    justify-self: end;
    display: flex;
}

.last-due-date[b-n3tm9dxn5r] {
    justify-self: end;
}

.lines[b-n3tm9dxn5r] {
    border-top: 2px solid black;
    border-left: 0px;
    border-right: 0;
    text-align: center;
}

    .lines thead[b-n3tm9dxn5r] {
        text-align: center;
    }

    .lines th[b-n3tm9dxn5r] {
        min-width: 50px;
    }

    .lines tr[b-n3tm9dxn5r] {
        border-top: 1px solid lightgrey;
        page-break-inside: avoid;
    }

        .lines tr:first-child[b-n3tm9dxn5r] {
            border-top: 2px solid black;
        }
        .lines td:last-child[b-n3tm9dxn5r] {
            max-width: 100px;
        }
        /*.lines td:nth-child(n+2) {
            page-break-after: avoid;
        }*/
.instructions[b-n3tm9dxn5r] {
    page-break-before: avoid;
}

.dimensions[b-n3tm9dxn5r] {
    text-indent: 5px;
    display: flex;
    justify-content: center;
}

/*.dimensions-right {
    max-width: 100px;
    text-align: left;
    width: 100%;
}

.dimensions-left {
    max-width: 100px;
    text-align: right;
    min-width: max-content;
    width: 100%;
}*/

.tags[b-n3tm9dxn5r] {
    max-width: 100px;
    overflow: hidden;
}

.line-instructions[b-n3tm9dxn5r] {
    text-align: left;
    text-indent: -5px;
    margin-left: 10px;
}

.traveler-printed-by[b-n3tm9dxn5r] {
    padding-top: 1.9rem;
    width: 368px;
    height: 132px;
}

.traveler-printed-on[b-n3tm9dxn5r] {
    border-top: 2px solid black;
    text-wrap-mode: nowrap;
}

.traveler-foot[b-n3tm9dxn5r] {
    align-self: end;
    min-height: 132px;
    display: flex;
    justify-content: space-between;
}

.cutsheets[b-n3tm9dxn5r] {
    page-break-before: always;
}
    .cutsheets thead[b-n3tm9dxn5r] {
        font-weight: 600;
        text-align: center;
    }
    .cutsheets thead tr:first-child td[b-n3tm9dxn5r] {
        font-weight: 600;
        font-size: 1.5rem;
    }
    .cutsheets td[b-n3tm9dxn5r] {
        border: 1px solid black;
        padding: 0 0.25rem 0 0.25rem;
    }

.vertical-text[b-n3tm9dxn5r] {
    writing-mode: vertical-lr;
    text-orientation: upright;
}

@media print {

    /*table {
        table-layout: fixed;
    }*/
    /*header {
        position: fixed;
        top: 0;
        white-space: nowrap;
    }*/

    /*.traveler-container {
        position: relative;
        top: 85px;
    }*/

    .traveler-printed-by[b-n3tm9dxn5r] {
        position: fixed;
        bottom: 0;
    }

    .thickness[b-n3tm9dxn5r] {
        justify-self: end;
    }

    .barcode417[b-n3tm9dxn5r] {
        position: fixed;
        bottom: 0;
        right: 0;
    }

    @page {
        size: letter;

        @bottom-center {
            /* margin-top: 132px;*/
            /*font-size: .875rem;*/
            content: "Page " counter(page) " of " counter(pages);
            margin-bottom: 1rem;
            text-wrap: nowrap;
        }
    }
}
/* /Components/Shared/DualListModal.razor.rz.scp.css */
.dual-list-modal[b-v5ns0x9knx] {
    min-height: 60vh;
}

.dual-list-modal .row[b-v5ns0x9knx] {
    position: relative;
}

.current-steps-section[b-v5ns0x9knx] {
    margin-bottom: 1.5rem;
}

.steps-container[b-v5ns0x9knx] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 200px;
    padding: 8px 0;
}

/* Show drop zones more prominently when operation is selected */
.steps-container.show-targets .drop-zone-compact[b-v5ns0x9knx] {
    opacity: 0.9;
    border-color: #0d6efd;
    animation: pulse-border-b-v5ns0x9knx 1.5s ease-in-out infinite;
}

@keyframes pulse-border-b-v5ns0x9knx {
    0%, 100% {
        border-color: #0d6efd;
        opacity: 0.7;
    }
    50% {
        border-color: #0a58ca;
        opacity: 1;
    }
}

/* Wrapper for each step + its drop zone */
.step-with-dropzone[b-v5ns0x9knx] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
    position: relative;
}

/* Compact drop zones - positioned to the RIGHT of steps - DOUBLED SIZE */
.drop-zone-compact[b-v5ns0x9knx] {
    width: 100px;
    height: auto;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.4;
    cursor: pointer;
    flex-shrink: 0;
    background: transparent;
    border-radius: 8px;
    border: 2px dashed transparent;
    padding: 8px;
    order: 2;
}

.drop-zone-compact.clickable[b-v5ns0x9knx] {
    cursor: pointer;
}

.drop-zone-compact.dragging-active[b-v5ns0x9knx] {
    opacity: 0.8;
    border-color: var(--bs-border-color);
}

.drop-zone-compact.active[b-v5ns0x9knx] {
    opacity: 1;
    background: rgba(40, 167, 69, 0.2);
    border: 3px solid #28a745;
    transform: scale(1.15);
    box-shadow: 0 0 16px rgba(40, 167, 69, 0.6);
}

.drop-indicator[b-v5ns0x9knx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
}

.drop-sequence[b-v5ns0x9knx] {
    font-weight: 700;
    color: var(--bs-secondary-color);
    font-size: 1rem;
    line-height: 1;
    transition: all 0.2s ease;
}

.drop-zone-compact.active .drop-sequence[b-v5ns0x9knx] {
    color: #28a745;
    font-size: 1.1rem;
}

.drop-line[b-v5ns0x9knx] {
    width: 60px;
    height: 4px;
    background: var(--bs-border-color);
    border-radius: 2px;
    transition: all 0.2s ease;
}

.drop-zone-compact.active .drop-line[b-v5ns0x9knx] {
    width: 70px;
    height: 5px;
    background: #28a745;
}

.drop-zone-compact:hover:not(.active) .drop-line[b-v5ns0x9knx] {
    background: #0d6efd;
    width: 70px;
    height: 5px;
}

.drop-zone-compact:hover:not(.active) .drop-sequence[b-v5ns0x9knx] {
    color: #0d6efd;
    font-size: 1.05rem;
}

.step-row[b-v5ns0x9knx] {
    transition: transform 0.2s ease;
    flex: 1;
    order: 1;
}

.step-item[b-v5ns0x9knx] {
    padding: 10px 15px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.step-sequence[b-v5ns0x9knx] {
    font-weight: 600;
    color: var(--bs-body-color);
    flex-shrink: 0;
}

.step-name[b-v5ns0x9knx] {
    font-weight: 500;
    color: var(--bs-body-color);
    flex-shrink: 0;
}

.step-operation[b-v5ns0x9knx] {
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
}

/* Newly added step styling with dark/light mode support */
.step-row.newly-added[b-v5ns0x9knx] {
    animation: slideIn-b-v5ns0x9knx 0.4s ease-out;
}

.step-row.newly-added .step-item[b-v5ns0x9knx] {
    background: rgba(40, 167, 69, 0.15);
    border-left: 4px solid #28a745;
    padding: 12px 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
    cursor: move;
}

.step-row.newly-added .step-sequence[b-v5ns0x9knx],
.step-row.newly-added .step-name[b-v5ns0x9knx],
.step-row.newly-added .step-operation[b-v5ns0x9knx] {
    color: var(--bs-success-text-emphasis) !important;
    font-weight: 600;
    pointer-events: none;
}

.step-row.newly-added .drag-handle[b-v5ns0x9knx] {
    color: #28a745;
    cursor: move;
    pointer-events: none;
}

@keyframes slideIn-b-v5ns0x9knx {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.available-operations-section[b-v5ns0x9knx] {
    padding: 0;
    min-height: 120px;
}

.operation-buttons-container[b-v5ns0x9knx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: none;
    overflow-y: visible;
}

.operation-button[b-v5ns0x9knx] {
    cursor: grab;
    font-weight: 500;
    border-width: 2px;
    transition: all 0.2s;
    white-space: nowrap;
    width: 100%;
    text-align: left;
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
    min-height: 48px;
}

.operation-button:active[b-v5ns0x9knx] {
    cursor: grabbing;
}

.operation-button:hover[b-v5ns0x9knx] {
    transform: translateX(4px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Selected state for click-to-select */
.operation-button.selected[b-v5ns0x9knx] {
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.4);
    transform: translateX(4px) scale(1.03);
    background: rgba(13, 110, 253, 0.15);
    border-color: #0d6efd;
    animation: pulse-selected-b-v5ns0x9knx 1.5s ease-in-out infinite;
}

@keyframes pulse-selected-b-v5ns0x9knx {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(13, 110, 253, 0.6);
    }
}

.workcenter-group[b-v5ns0x9knx] {
    margin-bottom: 0.5rem;
}

.workcenter-group-button[b-v5ns0x9knx] {
    width: 100%;
    text-align: left;
    font-weight: 500;
    margin-bottom: 0;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.workcenter-group-button.expanded[b-v5ns0x9knx] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}

.workcenter-items[b-v5ns0x9knx] {
    border: 2px solid;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.05);
}

.workcenter-items .operation-button[b-v5ns0x9knx] {
    margin-bottom: 0.5rem;
}

.workcenter-items .operation-button:last-child[b-v5ns0x9knx] {
    margin-bottom: 0;
}

.nested-workcenter-group[b-v5ns0x9knx] {
    margin-bottom: 0.5rem;
}

.nested-workcenter-group .workcenter-group-button[b-v5ns0x9knx] {
    font-size: 0.9rem;
}

/* Restore drop zone */
.restore-drop-zone[b-v5ns0x9knx] {
    margin-top: 20px;
    padding: 20px;
    border: 2px dashed #dc3545;
    border-radius: 8px;
    text-align: center;
    color: #dc3545;
    font-weight: 500;
    background: rgba(220, 53, 69, 0.05);
    transition: all 0.3s ease;
    opacity: 0.7;
}

.restore-drop-zone.active[b-v5ns0x9knx] {
    background: rgba(220, 53, 69, 0.15);
    border-color: #c82333;
    border-style: solid;
    opacity: 1;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.restore-drop-zone i[b-v5ns0x9knx] {
    font-size: 1.2em;
    pointer-events: none;
}

/* Operation buttons */
.operation-button[b-v5ns0x9knx] {
    transition: opacity 0.3s ease, transform 0.2s ease;
    cursor: move;
}

.operation-button:active[b-v5ns0x9knx] {
    cursor: grabbing;
}

.operation-button.dragging[b-v5ns0x9knx] {
    opacity: 0.5;
    transform: scale(0.95);
}

.operation-button i[b-v5ns0x9knx] {
    pointer-events: none;
}

/* Critical iOS touch-action rules */
[draggable="true"][b-v5ns0x9knx] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
}

.drag-handle[b-v5ns0x9knx] {
    cursor: grab;
    touch-action: none;
}

.dragging .drag-handle[b-v5ns0x9knx] {
    cursor: grabbing;
}

/* Prevent text selection during drag */
.dragging *[b-v5ns0x9knx] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Prevent child elements from capturing touch events */
.step-row.newly-added .step-sequence[b-v5ns0x9knx],
.step-row.newly-added .step-name[b-v5ns0x9knx],
.step-row.newly-added .step-operation[b-v5ns0x9knx],
.step-row.newly-added .drag-handle[b-v5ns0x9knx],
.operation-button i[b-v5ns0x9knx],
.restore-drop-zone i[b-v5ns0x9knx] {
    pointer-events: none;
}
/* /Components/Shared/Halloween.razor.rz.scp.css */
.halloween[b-x78356dt5z] {
    position: fixed;
    bottom: 0;
    right: 0;
    transition: 5s ease-out 1s;
}

    .halloween:hover[b-x78356dt5z] {
        /* animation: dissapear 0.5s 1;*/
        transition: all 1s linear;
        opacity: 0;
    }
img[b-x78356dt5z] {
    max-width: 100%;
    max-height: 20vh;
}
@keyframes dissapear-b-x78356dt5z {
    0% {
        opacity: 1;
    }
   /* 30% {
        opacity: 0.7;
    }*/
    50% {
        opacity: 0.5;
    }
    /*70% {
        opacity: 0.3;
    }*/
    100% {
        opacity: 0;
    }
}


html:hover .spider[b-x78356dt5z] {
    top: -200%;
    transition-delay: 0s;
}

.spider[b-x78356dt5z] {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 30%;
    /* 4. Animatie */
    animation: swing-b-x78356dt5z 2s infinite;
    transform-origin: top;
    /* Bonus */
    transition: 1s ease-in-out 60s;
}

    .spider .spiderweb[b-x78356dt5z] {
        width: 2px;
        height: 200px;
        margin-left: 49px;
        background: rgba(255,255,255, .7);
    }

    .spider .body[b-x78356dt5z] {
        width: 100px;
        height: 80px;
        background: #000;
        position: relative;
        border-radius: 50%;
    }

        .spider .body .eye[b-x78356dt5z] {
            width: 33px;
            height: 33px;
            position: absolute;
            bottom: 20px;
            background: #fff;
            border-radius: 50%;
        }

            .spider .body .eye.left[b-x78356dt5z] {
                left: 15px;
            }

            .spider .body .eye.right[b-x78356dt5z] {
                right: 15px;
            }

            .spider .body .eye[b-x78356dt5z]:after {
                background: #000;
                width: 7px;
                height: 7px;
                content: '';
                display: block;
                margin: 55%;
                border-radius: 50%;
                /* 3. Animatie */
                animation: look-b-x78356dt5z 8s infinite;
            }

    .spider .legs .leg[b-x78356dt5z] {
        width: 80px;
        height: 40px;
        margin-top: -20px;
        border: 5px solid transparent;
        border-top-color: #000;
        border-radius: 40px 40px 0 0;
    }

    .spider .legs[b-x78356dt5z] {
        position: absolute;
        bottom: -10%;
        z-index: -1;
    }

        .spider .legs.left[b-x78356dt5z] {
            left: -70%;
        }

        .spider .legs.right[b-x78356dt5z] {
            right: -60%;
        }
        .spider.active


.legs.left .leg:nth-child(1)[b-x78356dt5z] {
    transform: rotate(10deg);
    margin-left: 10px;
}

.legs.right .leg:nth-child(1)[b-x78356dt5z] {
    transform: rotate(-10deg);
    margin-left: -10px;
}


.legs.left .leg:nth-child(2)[b-x78356dt5z] {
    transform: rotate(-20deg);
    margin-left: 20px;
}

.legs.right .leg:nth-child(2)[b-x78356dt5z] {
    transform: rotate(20deg);
    margin-left: -20px;
}


.legs.left .leg:nth-child(3)[b-x78356dt5z] {
    transform: rotate(-50deg);
    margin-left: 30px;
}

.legs.right .leg:nth-child(3)[b-x78356dt5z] {
    transform: rotate(50deg);
    margin-left: -30px;
}

/* 1. Animatie */
@keyframes look-b-x78356dt5z {
    0%, 40%, 100% {
        transform: translateX(0);
    }

    45%, 95% {
        transform: translateX(-110%);
    }
}


/* 3. Animatie */
@keyframes swing-b-x78356dt5z {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}
/* /Components/Shared/Independence.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════
   Independence.razor.css
   --------------------------------------------------------------------
   Styling for the Independence Day banner + the fireworks system.
   Animations are driven by CSS variables set inline in the .razor:
     • --tx / --ty    : XY-shape particle destination (px)
     • --angle        : polar angle for spray particles (deg)
     • --distance     : polar distance for spray particles (px)
     • --speed        : per-particle animation duration (ms)
     • --color        : primary color
     • --secondary    : alternate color (for double rings, scatter, spray)
     • --rotation     : burst container rotation (deg)
     • --gx / --gy    : gravity vector derived from --rotation
     • --gf           : per-particle gravity weight [0..1]
     • --target-y / --travel-ms / --trail-color : projectile trail params
   ════════════════════════════════════════════════════════════════════ */

/* ── Banner wrapper ─────────────────────────────────────────────────
   Holds the flag background (::before) and the gold script text.
   `user-select: none` prevents the text from getting selected when
   users rapidly multi-click to spawn many fireworks. */
.flag-banner[b-nt3rotixnn] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 410px;
    max-width: 100%; /* never overflow its container on small screens */
    box-sizing: border-box;
    border-radius: 6px;
    flex-shrink: 0; /* Don't shrink on large screens */
    min-width: 0; /* Allow shrink on small screens */
    overflow: hidden;
    padding: 4px 12px;
    cursor: pointer;
    user-select: none;
}

    /* American flag image rendered as the banner background.
       `mix-blend-mode: screen` lets the dark navbar show through and
       brightens the flag rather than overlaying it as a solid sticker. */
    .flag-banner[b-nt3rotixnn]::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('/image/flag2.png');
        background-size: cover;
        background-position: center;
        /*opacity: 0.95;*/
        mix-blend-mode: screen;
    }

/* ── Banner text ────────────────────────────────────────────────────
   "Great Vibes" cursive in gold, skewed for an italic look (the font
   itself isn't italic). Multiple text-shadows create a glow + drop
   shadow stack so the script stays readable on the busy flag bg. */
.flag-text[b-nt3rotixnn] {
    position: relative;
    font-family: 'Great Vibes', cursive;
    font-weight: 400;
    font-size: clamp(1.1rem, 5vw, 1.8rem); /* scales with viewport, full size on desktop */
    color: #FFEF00;
    white-space: nowrap;
    letter-spacing: 0.04em;
    display: inline-block;       /* required for transform to work */
    transform: skewX(39deg);     /* fakes an italic lean */
    text-shadow: 1px 1px 0px rgba(0,0,0,0.95),
                 0 0 10px rgba(0,0,0,0.85),
                 0 0 20px rgba(0,0,0,0.5);
}

    /* Smaller superscript for the "th" in "250th". */
    .flag-text sup[b-nt3rotixnn] {
        font-size: 0.5em;
    }

/* ── (Old experimental flag-clipped text — kept for reference) ──────
.flag-text {
    font-weight: bold;
    font-size: 1.1rem;
    background-image: url('/image/flag.png');
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: brightness(1.4) contrast(1.2);
}
.flag-text sup { font-size: 0.6em; }
*/

/* ── Firework container ─────────────────────────────────────────────
   A zero-size anchor positioned at the burst point. Particles are
   absolutely positioned children, so they explode outward from (0,0).
   `transform: translate(-50%,-50%)` centers the anchor on (left, top).
   --gx / --gy convert the burst rotation into a gravity vector so the
   "droop" always falls in a consistent screen direction regardless of
   how the burst is rotated. */
.firework[b-nt3rotixnn] {
    position: fixed;
    width: 0;
    height: 0;
    pointer-events: none;     /* never block clicks on real UI */
    z-index: 9999;
    transform: translate(-50%, -50%) rotate(var(--rotation, 0deg));
    --gx: calc(sin(var(--rotation, 0deg)) * 55px);
    --gy: calc(cos(var(--rotation, 0deg)) * 55px);
}

/* ── Shared shape-fly animation for ALL parametric XY shapes ────────
   Every shape-based particle uses the same two animations:
     1. shape-fly    — translate from center to (tx, ty), shrink + fade
     2. gravity-droop — small delayed downward drift for natural sag */
.firework-circle .particle[b-nt3rotixnn],
.firework-circle-ring .particle[b-nt3rotixnn],
.firework-circle-double .particle[b-nt3rotixnn],
.firework-star5 .particle[b-nt3rotixnn],
.firework-star6 .particle[b-nt3rotixnn],
.firework-star8 .particle[b-nt3rotixnn],
.firework-star-scatter .particle[b-nt3rotixnn],
.firework-ray-tips-stars .particle[b-nt3rotixnn],
.firework-star-dome .particle[b-nt3rotixnn],
.firework-flag250 .particle[b-nt3rotixnn] {
    position: absolute;
    transform-origin: center;
    animation: shape-fly-b-nt3rotixnn var(--speed, 2200ms) cubic-bezier(0.05, 0.9, 0.15, 1) forwards, gravity-droop-b-nt3rotixnn 900ms ease-in calc(var(--speed, 2200ms) * 0.5) both;
}

/* Particle travels from origin to its precomputed (--tx, --ty), shrinking
   and fading. The 75% keyframe holds opacity high to keep bursts crisp,
   then fades quickly at the end. */
@keyframes shape-fly-b-nt3rotixnn {
    0%   { transform: translate(0, 0)                scale(1.4); opacity: 1; }
    75%  { opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0.35); opacity: 0; }
}

/* Independent translate (not transform) so it stacks on top of the
   shape-fly transform without overriding it. --gf is per-particle so
   embers droop at slightly different rates → more natural look. */
@keyframes gravity-droop-b-nt3rotixnn {
    0%   { translate: 0px 0px;  }
    100% { translate: calc(var(--gf, 0.5) * var(--gx, 0px))
                      calc(var(--gf, 0.5) * var(--gy, 40px)); }
}
/* ── Circle — solid glowing dots ─────────────────────────────────── */
.firework-circle .particle[b-nt3rotixnn] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color);
    box-shadow: 0 0 6px 2px var(--color);   /* halo glow */
}

/* ── Circle-ring — hollow border circles ─────────────────────────── */
.firework-circle-ring .particle[b-nt3rotixnn] {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: transparent;
    border: 2.5px solid var(--color);
    box-shadow: 0 0 5px 1px var(--color);
    transform-origin: center;
    /* Re-declared without gravity-droop on purpose: rings look better
       holding their shape rather than sagging. */
    animation: shape-fly-b-nt3rotixnn var(--speed, 2200ms) cubic-bezier(0.05, 0.9, 0.15, 1) forwards;
}

/* ── Circle-double — alternating large/small dots ─────────────────
   Two concentric rings are produced by ComputeCircleDouble. We use
   nth-child(odd/even) to give the outer/inner ring different looks. */
.firework-circle-double .particle:nth-child(odd)[b-nt3rotixnn] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color);
    box-shadow: 0 0 7px 3px var(--color);
}
.firework-circle-double .particle:nth-child(even)[b-nt3rotixnn] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 5px 2px var(--secondary);
}

/* ── Stars — diamond-shaped particles via clip-path ───────────────
   Same diamond clip for all star variants; the C# helpers control
   the geometry by placing particles at outer/inner radii. */
.firework-star5 .particle[b-nt3rotixnn],
.firework-star6 .particle[b-nt3rotixnn],
.firework-star8 .particle[b-nt3rotixnn] {
    width: 6px;
    height: 6px;
    background: var(--color);
    box-shadow: 0 0 5px 2px var(--color);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* ── Star-scatter — alternating long/short diamond spokes ────────
   Long spokes (odd) use --color, short spokes (even) use --secondary. */
.firework-star-scatter .particle:nth-child(odd)[b-nt3rotixnn] {
    width: 7px;
    height: 7px;
    background: var(--color);
    box-shadow: 0 0 6px 2px var(--color);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.firework-star-scatter .particle:nth-child(even)[b-nt3rotixnn] {
    width: 5px;
    height: 5px;
    background: var(--secondary);
    box-shadow: 0 0 4px 2px var(--secondary);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* ── Spray — angle-based fireworks (the only non-XY shape) ───────
   Particles are positioned by polar coords (--angle, --distance)
   and animated with a custom keyframe that adds a downward arc. */
.firework-spray .particle[b-nt3rotixnn] {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color);
    box-shadow: 0 0 4px 2px var(--color);
    transform-origin: center;
    animation: spray-b-nt3rotixnn 2400ms cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}
@keyframes spray-b-nt3rotixnn {
    /* Each step rotates by --angle then translates outward.
       The translateY(-20px) at 40% gives a slight upward arc
       before gravity pulls it back down to translateY(0). */
    0%   { transform: rotate(var(--angle)) translateX(0px)                           translateY(0px)   scale(1.2); opacity: 1; background: var(--color);     }
    40%  { transform: rotate(var(--angle)) translateX(calc(var(--distance,95px)*.7)) translateY(-20px) scale(0.9); opacity: 1;                               }
    75%  { opacity: 1; }
    100% { transform: rotate(var(--angle)) translateX(var(--distance, 95px))         translateY(0px)   scale(0.1); opacity: 0; background: var(--secondary); }
}

/* ── Spiral — same animation as spray (rotate around center +
   translate outward with a small upward arc and color shift).
   Geometry comes from the polar form of the spiral's (tx, ty)
   points, emitted as --angle / --distance in the .razor.        */
.firework-spiral .particle[b-nt3rotixnn] {
    position: absolute;
    transform-origin: center;
    animation: spray-b-nt3rotixnn var(--speed, 2400ms) cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

    .firework-spiral .particle:nth-child(odd)[b-nt3rotixnn] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--color);
        box-shadow: 0 0 6px 2px var(--color);
    }

    .firework-spiral .particle:nth-child(even)[b-nt3rotixnn] {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--secondary);
        box-shadow: 0 0 5px 2px var(--secondary);
    }
/* ── R1-T2: spokes ending in mini-stars + center dot ────────────── */
.firework-ray-tips-stars .particle.kind-ray[b-nt3rotixnn] {
    width: 3px;
    height: 12px;
    background: var(--color);
    box-shadow: 0 0 4px 1px var(--color);
    border-radius: 50%;
    rotate: var(--rot, 0deg);
}

.firework-ray-tips-stars .particle.kind-ministar[b-nt3rotixnn] {
    width: 14px;
    height: 14px;
    background: var(--secondary);
    clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
    /* drop-shadow respects the clip-path; box-shadow doesn't. */
    filter: drop-shadow(0 0 2px var(--secondary)) drop-shadow(0 0 5px rgba(255,255,255,0.5));
}

.firework-ray-tips-stars .particle.kind-core[b-nt3rotixnn] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 8px 3px var(--color), 0 0 18px 6px rgba(255, 255, 255, 0.6);
}
/* ── Star-dome: upward fan of twinkling mini-stars ────────────────
   Reuses the same shape-fly + gravity-droop animation chain via the
   shared selector list at the top of this file (we add the parent
   class there too). Two ministar sizes (odd/even) give the “big +
   small twinkle” density seen in the reference image. */
.firework-star-dome .particle.kind-ministar[b-nt3rotixnn] {
    background: var(--color);
    clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
    filter: drop-shadow(0 0 2px var(--color)) drop-shadow(0 0 5px rgba(255,255,255,0.55));
}

    .firework-star-dome .particle.kind-ministar:nth-child(odd)[b-nt3rotixnn] {
        width: 14px;
        height: 14px;
    }

    .firework-star-dome .particle.kind-ministar:nth-child(even)[b-nt3rotixnn] {
        width: 9px;
        height: 9px;
        filter: drop-shadow(0 0 1.5px var(--color)) drop-shadow(0 0 3px rgba(255,255,255,0.45));
    }

.firework-star-dome .particle.kind-core[b-nt3rotixnn] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 10px 4px var(--color), 0 0 22px 8px rgba(255, 255, 255, 0.65);
}
/* All flag particles drift with the wind. We use the CSS `translate:`
   property (independent from `transform:` used by shape-fly) so the
   two animations compose without overriding each other — same trick
   `gravity-droop` uses for the other firework shapes.

   Wind magnitude:
     • base 40px rightward for every particle (steady gust)
     • + 0..55px extra scaled by --gf  (per-particle gustiness)
     • + −10..+10px vertical jitter from (--gf − 0.5) (cloth ripple)

   Delay 1500ms ≈ when shape-fly has finished forming the flag, so the
   wind starts blowing only once the flag is fully visible. Same delay
   for every particle → no row-by-row staggering. */
.firework-flag250 .particle[b-nt3rotixnn] {
    animation: shape-fly-b-nt3rotixnn var(--speed, 4200ms) cubic-bezier(0.05, 0.9, 0.15, 1) forwards, wind-drift-b-nt3rotixnn 2600ms ease-out 1500ms forwards;
}

@keyframes wind-drift-b-nt3rotixnn {
    0% {
        translate: 0px 0px;
    }

    100% {
        translate: calc(40px + var(--gf, 0.5) * 55px) calc((var(--gf, 0.5) - 0.5) * 20px);
    }
}

/* Background stripe pixel. */
.firework-flag250 .particle.kind-stripe[b-nt3rotixnn] {
    width: 15px;
    height: 15px;
    background: var(--color);
    box-shadow: 0 0 4px 1px var(--color);
    opacity: 0.9;
}

/* Canton (blue field) pixel. */
.firework-flag250 .particle.kind-canton[b-nt3rotixnn] {
    width: 17px;
    height: 17px;
    background: var(--color);
    box-shadow: 0 0 6px 1px var(--color);
    opacity: 0.95;
}

/* Star — white 5-point on the canton. */
.firework-flag250 .particle.kind-star[b-nt3rotixnn] {
    width: 13px;
    height: 13px;
    background: var(--color);
    clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
    filter: drop-shadow(0 0 3px #FFFFFF);
    z-index: 1;
}

/* Digit pixel — starts as bright glowing gold-white "250", morphs
   mid-burst into the underlying flag color (var(--secondary), set
   by C# to the stripe/canton color at that cell), then fades with
   the rest of the flag particles. The morph runs alongside shape-fly:
     0–40%  : full bright gold glow
     40–65% : transition glow → flat flag color
     65–100%: holds at flag color until shape-fly fades opacity */
.firework-flag250 .particle.kind-digit[b-nt3rotixnn] {
    width: 16px;
    height: 16px;
    background: #FFFFFF;
    z-index: 2;
    animation: shape-fly-b-nt3rotixnn var(--speed, 4200ms) cubic-bezier(0.05, 0.9, 0.15, 1) forwards, 
            digit-morph-b-nt3rotixnn var(--speed, 4200ms) ease-in-out forwards, 
            wind-drift-b-nt3rotixnn 2600ms ease-out 1500ms forwards;
}

@keyframes digit-morph-b-nt3rotixnn {
    0%, 40% {
        background: #FFFFFF;
        box-shadow: 0 0 7px 2px #FFD700, 0 0 16px 5px rgba(255, 215, 0, 0.55);
    }

    65%, 100% {
        background: var(--secondary);
        /* Match the neighbor (.kind-stripe / .kind-canton) shadow profile
           so the digit becomes visually indistinguishable from the flag. */
        box-shadow: 0 0 4px 1px var(--secondary), 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

/* ── Projectile trail ──────────────────────────────────────────────
   Thin glowing dot that rises from the bottom of the viewport up to
   the burst position. The tail effect is faked by animating `height`
   (taller in the middle of the flight, shrinking at the ends). */
.projectile[b-nt3rotixnn] {
    position: fixed;
    bottom: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--trail-color);
    pointer-events: none;
    z-index: 9998;                /* sits just below the burst */
    transform: translateX(-50%);
    box-shadow: 0 0 3px 1px var(--trail-color),
                0 0 6px 2px rgba(255,255,255,0.5);
    animation: launch-b-nt3rotixnn var(--travel-ms) cubic-bezier(0.15, 0.7, 0.4, 1) forwards;
}

/* `bottom` rises from 0 to (100vh − target-y), placing the trail
   tip exactly at the burst origin when the C# code flips Arrived. */
@keyframes launch-b-nt3rotixnn {
    0%   { bottom: 0vh;  opacity: 1;   height: 2px;  }
    20%  { height: 12px; opacity: 1;   }   /* tail at full length */
    80%  { height: 7px;  opacity: 0.9; }   /* shortening as it slows */
    100% { bottom: calc(100vh - var(--target-y)); opacity: 0; height: 2px; }
}
/* ── "250" projectile — heavier, fatter, stronger glow ────────────
   Visually telegraphs that something big is incoming. The C# also
   slows the flight (TravelMs × 1.7) for added anticipation. */
.projectile.projectile-flag250[b-nt3rotixnn] {
    width: 6px;
    height: 6px;
    background: #FFD700;
    box-shadow: 0 0 6px 2px #FFD700, 0 0 14px 4px #FF6347, 0 0 24px 8px rgba(255, 255, 255, 0.45);
    animation: launch-heavy-b-nt3rotixnn var(--travel-ms) cubic-bezier(0.25, 0.55, 0.45, 1) forwards;
}

/* Same trajectory as `launch`, but with a longer, fatter tail and a
   smoother ease (no late acceleration) so it reads as "heavy". */
@keyframes launch-heavy-b-nt3rotixnn {
    0% {
        bottom: 0vh;
        opacity: 1;
        height: 6px;
        width: 6px;
    }

    25% {
        height: 22px;
        width: 6px;
        opacity: 1;
    }

    80% {
        height: 16px;
        width: 5px;
        opacity: 0.95;
    }

    100% {
        bottom: calc(100vh - var(--target-y));
        opacity: 0;
        height: 6px;
        width: 5px;
    }
}

@media (max-width: 819.98px) {
    .flag-banner[b-nt3rotixnn] {
        width: min(410px, calc(100vw - 96px)); /* keep room for burger */
        height: 50px;                           /* keep logo-like visual height */
        min-height: 50px;
        max-width: none;
        padding: 0 6px 0 0; /* less left inset, keeps slight right breathing room */
        flex: 0 1 auto;
        overflow: hidden;
    }

    .flag-banner[b-nt3rotixnn]::before {
        background-size: cover;                 /* fill full banner box */
        background-position: center;
        background-repeat: no-repeat;
    }

   /* .flag-text {
        font-size: clamp(1.05rem, 3.6vw, 1.25rem);
        transform: skewX(22deg);
        line-height: 1;
        letter-spacing: 0.015em;
    }*/
}
/* /Components/Shared/LoadingBall.razor.rz.scp.css */
/* loading-ball.css — styles for the LoadingBall overlay */

.loading-ball-overlay[b-ui25kr5y30] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    /* frosted dim of whatever is underneath */
    background: rgba(15, 17, 21, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.loading-ball-viewer[b-ui25kr5y30] {
    width: 240px;
    height: 240px;
    background: transparent;
    --poster-color: transparent;
    pointer-events: none; /* it's decoration, not a control */
}

.loading-ball-message[b-ui25kr5y30] {
    color: #e8e8ea;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    margin: 0;
    animation: loading-ball-pulse-b-ui25kr5y30 1.6s ease-in-out infinite;
}

@keyframes loading-ball-pulse-b-ui25kr5y30 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

/* hidden state: element stays mounted (model-viewer keeps its WebGL context
   and internal state alive), overlay just becomes invisible and untouchable */
.loading-ball-hidden[b-ui25kr5y30] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
/* /Components/Shared/LoadingMessage.razor.rz.scp.css */
/* LoadingMessage.razor.css — the "breathing" text, extracted from the
   ball overlay so it works under any loading visual. Color and font are
   inherited from the surrounding context, so it adapts to whatever
   container (dark overlay, light page, bb8 corner) it lands in. */

.loading-message[b-igp8hcw341] {
    color: inherit;
    font: inherit;
    font-size: 1.95rem;
    letter-spacing: 0.02em;
    margin: 0;
    text-align: center;
    animation: loading-message-breathe-b-igp8hcw341 2s ease-in-out infinite;
}

@keyframes loading-message-breathe-b-igp8hcw341 {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
/* /Components/Shared/LoadingScreen.razor.rz.scp.css */
.wasting-time-container[b-aw62w383cd] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.wasting-time[b-aw62w383cd] {
    font-size: 4rem;
    font-weight: bold;
    color: red;
    letter-spacing: 0.1em;
}

.spinner[b-aw62w383cd] {
    display: inline-block;
    animation: slide-b-aw62w383cd 1.5s infinite;
}

.spinner:nth-child(2)[b-aw62w383cd] {
    animation-delay: 0.2s;
}

.spinner:nth-child(3)[b-aw62w383cd] {
    animation-delay: 0.4s;
}

.spinner:nth-child(4)[b-aw62w383cd] {
    animation-delay: 0.6s;
}

/* Frosted full-screen overlay so ANY loading visual (not just the ball)
   blurs the page behind it — same look LoadingBall already uses. */
.loading-overlay[b-aw62w383cd] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: #e8e8ea; /* inherited by LoadingMessage so text stays readable on the dim */
    background: rgba(15, 17, 21, 0.55);
    backdrop-filter: blur(3px);
}

@keyframes slide-b-aw62w383cd {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(1.5rem);
        opacity: 0;
    }
}
/* /Components/Shared/ModalDialog.razor.rz.scp.css */
.modal-content[b-wj36y7nfcg] {
    opacity: 95%;
}
/* /Components/Shared/Snow.razor.rz.scp.css */
snowfall-container[b-c7afe13bjy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

@keyframes fall-b-c7afe13bjy {
    0% {
        transform: translateY(-10px) translateX(0) rotate(0deg);
    }

    100% {
        transform: translateY(100vh) translateX(100px) rotate(360deg);
    }
}

.snow[b-c7afe13bjy] {
    position: absolute;
    top: 0;
    background: white;
    border-radius: 50%;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}

/* Make snow slightly more visible in dark mode */
[data-bs-theme="dark"] .snow[b-c7afe13bjy] {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95));
}
/* /Components/Shared/Thanksgiving.razor.rz.scp.css */
.running-turkey[b-7ybkanz54x] {
    position: fixed;
    bottom: 0;
    /*right: -250px;*/
    right: 0;
    animation: run-b-7ybkanz54x 2s forwards;
    /*transition: transform 0.5s;*/
}

@keyframes run-b-7ybkanz54x {
    0% {
        transform: translateX(20vw);
    }

/*    50% {
        transform: translateX(-50vw);
    }*/
    100% {
        transform: translateX(-120vw);
    }
}
/* /Components/Shared/WinterVeil.razor.rz.scp.css */
.winter-veil-page[b-tzbxu2jkz0] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(ellipse at bottom, #C9EEF7 0%, #C9EEF7 100%);
    overflow: hidden;
    z-index: -1;
}

/* Dark mode variant - darker winter night sky */
[data-bs-theme="dark"] .winter-veil-page[b-tzbxu2jkz0] {
    background: radial-gradient(ellipse at bottom, #1a2332 0%, #0d1117 100%);
}