:root {
    /*color scheme*/
    --nx-bg-red: #ffadad;
    --nx-fg-red: red;
    --nx-bg-blue: #93c2ff;
    --nx-fg-blue: blue;
    --nx-bg-green: #74c22f;
    --nx-fg-green: green;
    --nx-bg-orange: #d1a63e;
    --nx-fg-orange: orange;
    --nx-bg-black: #343434;
    --nx-fg-black: #151515;
    --nx-bg-white: #ffffff;
    --nx-fg-white: white;
    --nx-bg-grey: #eeeeee;
    --nx-fg-grey: #2a2a2a;
    /*Highight sectionds or text.*/
    --nx-bg-highlight: hsl(203deg 87.15% 83.15%);
    --nx-fg-highlight: var(--nx-fg-black);
    /*Most top level for controls that need to stand out e.g. input and buttons*/
    --nx-bg-accent: var(--nx-bg-white);
    --nx-fg-accent: var(--nx-fg-black);
    /*Page Html*/
    --nx-font: 'Roboto', system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial;
    /*Default Theme  used for all controls */
    --nx-bg: hsl(204, 22%, 95%);
    --nx-bg-menu: color-mix(in srgb, var(--nx-bg) 95%, black 5%);
    --nx-fg: hsl(210, 9%, 31%);
    --nx-muted: #6b7280;
    --nx-border: #e5e7eb;
    --nx-border-radius: 5px;
    --nx-border-width: 0.5px;
    --nx-box-shadow: 0px 1px 2px 1px color-mix(in srgb, var(--nx-bg) 80%, black 20%);
    --nx-margin: 0px 10px 10px 0px;
}

html, body {
    background: var(--nx-bg);
    font-family: var(--nx-font);
    color: var(--nx-fg);
    margin: 0px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

}

body *:focus{
    border-style:none; /*Fix: Auto borders on many items for focus without cause*/
}


/* general layout styles */
.nx-layout-fitbox {
    display: grid;
    grid-template-columns: repeat(4, minmax(0px, 1fr));
    grid-gap: 0.5rem;
}

.nx-layout-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}



.nx-layout-flexrow {
    text-decoration: none;
    display: flex;
    align-items: center;

    gap: 0.5rem; /* slight spacing between children */
}

.nx-layout-flexcolumn {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* slight spacing between children */
    align-items: stretch; /* children stretch across the cross-axis (horizontal for column) */
    justify-content: flex-start;
}


.nx-layout-centeredbox {
    text-align: center;
    display: block;
}





/*themes - used for color overrides*/
.nx-theme-red {
    --nx-bg: var(--nx-bg-red);
}
.nx-theme-green {
    --nx-bg: var(--nx-bg-green);
}
.nx-theme-orange {
    --nx-bg: var(--nx-bg-orange);
}
.nx-theme-blue {
    --nx-bg: var(--nx-bg-blue);
}


/* Make box-sizing predictable */
*, *::before, *::after {
    box-sizing: inherit;
}

/* Headings & paragraphs */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

p {
    margin: 0 0 1rem 0;
}

/* Links */
a {

    text-decoration: none;
    display: flex;
 
    align-items: center;
    gap: 0.5rem; /* slight spacing between children */
}



    a:hover {
        text-decoration: underline;
    }

/* Buttons */
button, a {
    display:flex;
    justify-content:center;
    box-shadow: var(--nx-box-shadow);
    background: var(--nx-bg-accent);
    color: var(--nx-fg);
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: var(--nx-border-radius);
    cursor: pointer;
    box-sizing: border-box;
    border-style: none;
    margin: var(--nx-margin);
    text-decoration: none;

    align-items: center;
   
    gap: 0.5rem;
    vertical-align: middle;
    overflow:hidden;
}

    button:hover, a:hover {
        --nx-bg: var(--nx-bg-accent);
        text-decoration: none;
    }

    button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    button > *, a > * {
        display: inline-flex;
        align-items: center; /* vertically center inner <i> / svg */
        justify-content: center;
    }


/*generic nx control*/
.nx-input {
    /*Override */

    --nx-bg: var(--nx-bg-accent);
    --nx-fg: var(--nx-fg-accent);
    background-color: var(--nx-bg);
    color: var(--nx-fg);
    position: relative;
    min-width: 150px;
    border-radius: var(--nx-border-radius);
    display: inline-flex;
    flex-direction: column;
    page-break-inside: avoid;
    padding-right: 3px;
    padding-left: 3px;
    box-sizing: border-box;
    border-style: solid;
    border-width: var(--nx-border-width);
    border-color: color-mix(in srgb, var(--nx-bg-accent) 80%, black 20%);
    margin: var(--nx-margin);
}

.nx-input:focus-within {

}

.nx-input.readonly {
    filter: brightness(0.9);
}


/* scoped / namespaced child classes for safety */
    .nx-input .nx-input-content {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        /* ensure children respect parent's width when flexing */
        min-width: 0;
    }

    .nx-input input {
        display: block;
        padding: 5px;
        margin: 0px;
        font-size: inherit;
        font-family: inherit;
        background-color: transparent;
        resize: none;
        outline: 0;
        height: 100%;
        border-style: none;
        min-height: 25px;
        flex: 1 1 auto; /* grow and shrink, take remaining space */
        min-width: 0; /* critical to allow flex children to shrink instead of overflowing */
        width: 100%;
        box-sizing: border-box;
    }

    /* Textarea: default compact, expand to 400px on focus and enable scrollbar */
    .nx-input textarea {
        display: block;
        padding: 5px;
        margin: 0px;
        font-size: inherit;
        font-family: inherit;
        background-color: transparent;
        resize: none;
        outline: 0;
        border-style: none;
        min-height: 80px; /* default visible height */
        max-height: 200px; /* default max so layout stays compact */
        height: auto;
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden; /* hide scrollbar until expanded */
        transition: max-height 180ms ease, height 180ms ease;
    }

        /* When user focuses (starts typing), expand to 400px and allow scrolling */
        .nx-input:focus-within textarea,
        .nx-input textarea:focus {
            max-height: 300px;
            height: 300px;
            overflow: auto; /* show scrollbar when content exceeds 400px */
        }

    .nx-input label {
        display: block;
        font-size: small;
        flex: 1;
        padding: 0.2rem;
    }



    .nx-input input::placeholder, .nx-input textarea::placeholder {
        opacity: 0.5;
        font-style: italic;
    }

    .nx-input.required {
        border-left-style: solid;
        border-left-width: 3px;
        border-left-color: #ff4444;
    }



    .nx-input .nx-input-dropdown {
        position: absolute; /* Position the dropdown relative to the .nx-lookup container */
        top: 100%; /* Place the dropdown just below the input */
        left: 0;
        right: 0;
        max-height: 200px; /* Limit the height of the dropdown */
        overflow-y: auto; /* Add a scrollbar if the content exceeds the max height */
        background-color: var(--nx-bg); /* Match the background color */

        border-radius: var(--nx-border-radius); /* Add rounded corners */
        z-index: 1000; /* Ensure the dropdown overlays other elements */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for better visibility */
        padding: var(--nx-spacing-small); /* Add some padding inside the dropdown */
    }

    .nx-input .nx-input-dropdown li {
        padding: 5px 10px; /* Add padding to each dropdown item */
        cursor: pointer; /* Change the cursor to indicate the item is clickable */
        list-style: none; /* Remove default list styling */
    }

    .nx-input .nx-input-dropdown .highlighted {
        background-color: var(--nx-bg-highlight);
        font-weight: bold;
    }

        .nx-input .nx-input-dropdown li:hover {
            background-color: var(--nx-bg-blue); /* Highlight the item on hover */
            color: var(--Color); /* Ensure the text color contrasts with the background */
        }

        .nx-input .nx-input-dropdown .nx-item-main {
     
        }


        .nx-input .nx-input-dropdown .nx-item-caption {
            font-size: 0.8rem;
            font-style: italic;
            padding-left:5px;
            padding-right:5px;
            font-weight: normal;
            opacity:0.7;
        }

/* Multiline editor styled like input; auto-height because contenteditable grows with content */
/*.nx-multiline-editor {
    min-height: 3rem;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    border-radius: var(--nx-border-radius);
    border: 0.5px solid color-mix(in srgb, var(--nx-bg-accent) 80%, black 20%);
    background: var(--nx-bg-accent);
    color: var(--nx-fg);
    white-space: pre-wrap;*/ /* preserve newlines */
    /*word-break: break-word;
    overflow: visible;*/ /* allow growth */
    /*outline: none;
    resize: none;*/ /* not needed but keeps appearance consistent */
    /*-webkit-user-modify: read-write;
}*/

    /* Placeholder effect for contenteditable (optional) */
    /*.nx-multiline-editor:empty:before {
        content: attr(data-placeholder);
        color: rgba(0,0,0,0.35);
        pointer-events: none;
    }*/




        
        /* Prevent vertical stretching but allow horizontal stretch inside the page content grid */
            /* Scope paragraph/heading rules so they don't affect controls globally */
p, hr, h1, h2, h3, h4, pre {
    grid-column: 1 / -1;
    width: 100%;
}





table {
    width: 100%;
    border-collapse: collapse;
    grid-column: -1/1;
    overflow: auto;
    border: 2px solid var(--nx-bg-accent);
    border-radius: var(--nx-border-radius);
}

th, td {
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--nx-bg-accent);
    text-align: left;
    vertical-align: top;
}

thead th {
    background: var(--nx-bg-accent);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}




/* Basic data table styles used by the DataTable component */
.nx-datatable {
    grid-column: 1 / -1;
    font-family: var(--nx-font, system-ui, -apple-system, "Segoe UI", Roboto);
    margin: 0.5rem 0;
}

.nx-datatable-toolbar {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.5rem;
}







.nx-pre-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 30rem;
    display: block;
}

.muted {
    color: #6c757d;
}










/* Utilities */
.muted {
    color: var(--nx-muted);
}



/* Nexus icon defaults for .nx-icon */
.nx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    overflow: visible;
    vertical-align: middle;
    line-height: 0;
    box-sizing: border-box;
}


 

    /* Accessibility focus (optional if element becomes focusable) */
    .nx-icon:focus,
    .nx-icon:focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.18);
        outline-offset: 2px;
    }





/* |||||||||||||| PAGE LAYOUT |||||||||||||| */
/* Page layout: sticky header + scrollable content */
.nx-pagelayout {
    display: grid;
    grid-template-rows: auto auto 1fr; /* header + scrollable content */

    height: 100vh;
    min-height: 0; /* allow inner scrolling */

    box-sizing: border-box;

    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Header */
.nx-pagelayout-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(16,24,40,0.06);
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--nx-header-bg, #fff);
    min-height: 40px; /*shared with main menu*/
    background: var(--nx-bg-menu);
    margin-bottom:1rem;
}


/* Title / Menu / Control box */
.nx-pagelayout-title {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    font-weight: 600;
}

.nx-pagelayout-menu {
    flex-wrap: wrap;
    width: auto;
    flex:1;
}

    .nx-pagelayout-menu  * {
        margin: 0px ;
    }

.nx-pagelayout-controlbox {
    margin-left: auto; /* push controls to right */
    align-items: center;
    white-space: nowrap;
    width:auto;
    justify-content:right;
    flex:0;
}

.nx-pagelayout-closebutton {
    background: none;
    border: none;
    box-shadow: none;
    font-size: 1.2rem;
}



/* Scrollable content wrapper */
.nx-pagelayout-scroll {
    overflow: auto;
    min-height: 0; /* critical for correct inner scrolling */
    -webkit-overflow-scrolling: touch;
    background: transparent;
    box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding:0.1rem; /*Fix: Required to not cut of shadows*/
}

    /* Custom lightweight scrollbar (WebKit) for the scroll container */
    .nx-pagelayout-scroll::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    .nx-pagelayout-scroll::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.12);
        border-radius: 8px;
    }

        .nx-pagelayout-scroll::-webkit-scrollbar-thumb:hover {
            background: rgba(0,0,0,0.18);
        }

/* Firefox scrollbar hint */
.nx-pagelayout-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.12) transparent;
}




/* Inner content area: center and constrain width */
.nx-pagelayout-content {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;

}







/* Notification / status bar shown by PageLayout */
/* Use child selector for higher specificity and isolated css compatibility */

.nx-notification-container {
    position: fixed;
    bottom: 0.5rem;
    right: 0.5rem;
    min-width: 50%;
    max-width: 80%;
    display: grid;
    grid-template-columns: auto;
    z-index: 2001;
}
.nx-notification {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem !important;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    border-left-width: 4px;
    border-bottom: 1px solid transparent;
    transition: transform 180ms ease, opacity 180ms ease;
    opacity: 1;
    height: fit-content;
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* top-align so close button is at the top-right */
    gap: 0.75rem;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    background: var(--nx-bg-accent);
    animation: nx-pop 220ms cubic-bezier(.2,.9,.2,1) both;
}


/* allow message to grow/shrink and wrap; min-width:0 is essential inside flex containers */
    .nx-notification .nx-notification-message {
        flex: 1;
        min-width: 0;
        white-space: normal;
        word-break: break-word;
        line-height: 1.4;
        margin: 0;
        color: inherit;
        background: var(--nx-bg-accent);
   
    }


/* pop animation for notification message (scale 1.2 -> 1) */
@keyframes nx-pop {
    0% {
        transform: scale(1.2);
        opacity: 0;
    }

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

/* keep close button compact and anchored top-right of the inner wrapper */
.nx-notification .nx-notification-close {
    flex: 0 0 auto;
    align-self: flex-start;
    margin: 0px;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem;
}


/* Type modifiers (use these classes on the notification element) */
.nx-notification-success {

    border-color: var(--nx-fg-green);
}

.nx-notification-warning {
    border-color: var(--nx-fg-orange);
}

.nx-notification-error {
    border-color: var(--nx-fg-red);
}



/*||||||||||| MAIN MENU |||||||||||||||*/
/* Mobile-first: collapsed menu by default, toggler visible, overlay only used on small screens */

/* Main container becomes a column flex that fills viewport height */
.nx-mainmenu {
    --nx-mainmenu-width: 14rem;
    --nx-mainmenu-closed-width: 0rem;
    display: flex;
    flex-direction: column;
    height: 100vh; /* fill viewport */
    min-height: 0; /* allow inner flex children to shrink properly */
    width: var(--nx-mainmenu-closed-width);
    box-sizing: border-box;
    background: var(--nx-bg-accent, var(--nx-bg));
    color: var(--nx-fg-accent, var(--nx-fg));
    border-right: 1px solid color-mix(in srgb, var(--nx-border) 90%, black 10%);
    transition: width 200ms ease-in-out, border-color 200ms;
    overflow: visible;
    z-index: 20;
    background: var(--nx-bg-menu);



}


    /* Expanded state (used on small screens when open) */
    .nx-mainmenu.open {
        width: var(--nx-mainmenu-width);
    }


/* Content wrapper is a column flex; it grows to fill available space */
.nx-mainmenu-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto; /* take remainder */
    min-height: 0; /* required so children can scroll correctly */
}

/* Header and footer should size to their content only */
.nx-mainmenu .nx-mainmenu-header,
.nx-mainmenu .nx-mainmenu-footer {
    flex: 0 0 auto; /* do not grow; size to content */
    width: 100%;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
}


/* Scrollable area fills remaining space inside the content wrapper */
.nx-mainmenu .nx-scrollable {
    display: none; /* hidden by default on small (collapsed) state */
    padding: 0.5rem;
    flex: 1 1 auto; /* grow to fill remaining space */
    min-height: 0; /* critical for flexbox scrolling */
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.12) transparent;
}



/*.nx-mainmenu:not(.open) .nx-brand {
    opacity: 0;
    width:0px;
    pointer-events: none;
  
}*/

/* Toggler (visible on small screens only) */
.nx-mainmenu-toggle {
    width: 50px;
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    top: 0rem;
    right: -60px;
    border-radius: 6px;
    display: inline-block;
    box-sizing: border-box;
    z-index: 1110;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    visibility: hidden; /*hide on big screen*/
    position: absolute;
    background: inherit !important;
    border-style: none !important;
    box-shadow: none !important;
    border-right-style:solid;
    border-width:1px;

}




/* Scrollable area (hidden by default; revealed when .open on small screens) */
.nx-mainmenu .nx-scrollable {
    display: none;
    padding: 0.5rem;
    flex: 1;
}

.nx-mainmenu.open .nx-scrollable {
    display: block;

    overflow-y: auto;
}

/* Overlay (default hidden). On small screens overlay covers viewport when menu is open. */
.nx-mainmenu .nx-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    left: var( --nx-mainmenu-width);
    transition: opacity 160ms ease;
    opacity: 1;
}

/* --- Large screens: always show expanded menu; hide toggler and overlay --- */
@media (min-width: 800px) {
    .nx-mainmenu {
        width: var(--nx-mainmenu-width); /* always expanded on large screens */
        position: relative; /* ensure it participates in layout */
    }

        .nx-mainmenu .nx-scrollable {
            display: block;
            height: calc(100vh - 3.5rem);
            overflow-y: auto;
        }

        .nx-mainmenu .nx-toggler {
            display: none; /* no toggle on large screens */
        }

        /* Explicitly hide overlay on large screens */
        .nx-mainmenu .nx-overlay {
            display: none !important;
        }
}

@media (max-width:801px)
{

    .nx-mainmenu {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100vh;
        width: var(--nx-mainmenu-closed-width);
    }

    .nx-mainmenu-toggle {
        visibility: visible;
    }



    /* overlay visible only when .open */
    .nx-mainmenu.open .nx-overlay {
        display: block;
    }
}

/*@media (max-width: 1000px) {
    .nx-brand {
      display:none;
    }

}
*/


/* Keep .nx-item list-style isolated for component consumers */
.nx-mainmenu ::deep .nx-item {
    list-style: none;
}



/* Add near the doc styles or at end of file */

/* Layout: place control box to the right of the page content */
.nx-doc {
    grid-column: -1/1;
    display: flex;
    flex-direction: row; /* side-by-side */
    align-items: flex-start; /* top-align control box with page */
    justify-content: center; /* center the group horizontally */
    gap: 0px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;

    padding: 16px;
}

/* Control box sits beside the content (not absolutely positioned) */
.nx-doc-controlbox {

    position: static; /* remove absolute positioning so it flows in the flex row */

    align-self: flex-start; /* keep it aligned to the top of the content */
    margin-left: -10px;
    z-index:1;
}

/* Keep the existing page content size but allow it to shrink on small screens */
.nx-doc-content {
    width: 210mm;
    min-height: 297mm;
    box-sizing: border-box;
    background: white;
    border-radius: 4px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    overflow: hidden;
    position: relative;
    padding: 10mm 10mm;
    display: block;
}


.nx-layout-stretch {
    grid-column: -1/1;
    width:100%;
}

@media print{


    .nx-doc-content {
        min-height: min-content;
        box-shadow: none;
        
    }
}


/* Print-specific adjustments */
@media print {
    body {
        background: white;
    }

    /* Put each page on its own printed page */
    .nx-doc-page {
        box-shadow: none;
        margin: 0;
        border-radius: 0;
        page-break-after: always;
    }

    /* Ensure measuring container is not printed */
    .nx-doc-measure {
        display: none !important;
    }

    /* Make pages occupy full printable area when printing */
    .nx-doc-pages {
        gap: 0;
        padding: 0;
    }
}



/* Full-page container with tint — .nx-dialog is the single top-level class */
.nx-dialog {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45); /* page tint like PermissionRouteView */
    z-index: 2000;
    padding: 1rem;
}

/* Centered panel holding the dialog content */
.nx-dialog-panel {
    position: relative;
    width: 100%;
    max-width: 720px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--nx-bg);
}

/* Header */
.nx-dialog-header {
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Body / content */
.nx-dialog-body {
    padding: 1rem;
    max-height: 70vh;
    overflow: auto;
}

.nx-dialog-controlbox{
    padding:0.5rem;
    justify-content: right;
    width: auto; /*Fix*/
}








/*override layout children (should be bottom of css) */
    .nx-layout-fitbox > * {
        min-width: auto;
        width: auto;
        margin: 0;
    }


    .nx-layout-grid > * {
        min-width: auto;
        width: auto;
        margin: 0;
    }

    .nx-layout-flexrow > * {
        margin: 0px;
    }



    .nx-layout-flexcolumn > * {
        margin: 0px;
        min-width: 0; /* allow children to shrink without overflow */
        width: 100%; /* force children to fill the available width */
        box-sizing: border-box; /* include padding/border in width */
        margin-left: 0;
        margin-right: 0;
    }







/* Compact on small screens */
@media (max-width: 800px) {
    .nx-table {
        min-width: 480px;
    }

        .nx-table thead th,
        .nx-table td {
            padding: 0.45rem;
            font-size: 0.92rem;
        }





 

    .nx-pagelayout-title 
    {
        margin-left: 40px; /*allowance for menu button */
    }

    .nx-layout-fitbox {
        grid-template-columns: repeat(2, minmax(0px, 1fr));
    }


    /* Scrollable content region */
    .nx-pagelayout .content {
        grid-template-columns: repeat(2, minmax(0px, 1fr));
    }
}
                




/* Suggest zero margins and portrait A4 for printing */
@page {
    size: A4 portrait;
    margin: 0;
}

@media print {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }


    .nx-mainmenu {
       display:none;
    }


}