/* NXW Intranet: additions to the VTPWEB look (css/vtp.css) for the intranet pages */

/* layout: full-width bands, padded pages */
nav.navbar + .container-fluid { padding: 0; }
.nx-page { max-width: 1440px; margin: 0 auto; padding: 34px clamp(16px, 4vw, 56px) 40px; }
.nx-head { margin-bottom: 18px; } .nx-head .mk-title { font-size: 40px; }
.nx-sub { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; }
.nx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; margin-bottom: 0; }
.nx-grid2 > .mk-card { margin-bottom: 18px; }
@media (max-width: 1000px) { .nx-grid2 { grid-template-columns: 1fr; } }
.nx-tag { display: inline-flex; flex-direction: column; justify-content: center; margin-left: 6px; padding: 4px 4px; line-height: 1; align-self: center; }
.nx-tag b { font-size: 22px; font-weight: 700; letter-spacing: .08em; background: linear-gradient(180deg, #F3D58A, #D4A440 55%, #A87A22);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.nx-tag small { margin-top: 5px; font-size: 8.5px; font-weight: 700; letter-spacing: .26em; color: #6FA8FF; }
html[data-mode="light"] .nx-tag b { background: linear-gradient(180deg, #B8862A, #8A6414); -webkit-background-clip: text; background-clip: text; }
html[data-mode="light"] .nx-tag small { color: #0A4DB8; }
.brandwrap { display: inline-flex; align-items: center; gap: 10px; }

/* Home band */
.nx-hero { padding: 46px 22px 50px; }
.nx-hero img.logo { width: 230px; margin-bottom: 16px; }
.nx-hero h1 { font-size: 38px; margin-bottom: 6px; }
.nx-hero p { margin-bottom: 0; font-size: 16.5px; }
.nx-cards { margin-top: 10px; }

/* manager / admin only */
html:not(.mgr) .mgr-only, html:not(.mgr) .navbar .mgr-item { display: none !important; }

/* KPIs */
.nx-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 18px; }
.nx-kpis .adm-kpi b { font-size: 24px; white-space: nowrap; }
.nx-kcol .nx-kpis { grid-template-columns: repeat(2, 1fr); }
.nx-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.nx-quick a { padding: 8px 14px; border-radius: 9px; border: 1px solid rgba(212,164,64,.5); color: var(--gold2) !important; text-decoration: none; font-weight: 600; font-size: 13px; }
.nx-quick a:hover { background: rgba(212,164,64,.14); }
html[data-mode="light"] .nx-quick a { color: #8A6414 !important; }
.nx-mini { display: flex; gap: 16px; align-items: center; font-size: 13.5px; color: var(--muted); } .nx-mini b { color: var(--ink); font-size: 16px; }

/* check in / out */
.nx-checkin .rt-clock, .nx-clock { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold2); display: inline-flex; align-items: center; gap: 8px; }
.nx-clock i { width: 9px; height: 9px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 4px rgba(52,211,153,.2); }
.nx-ci-row { display: grid; grid-template-columns: 180px 1fr; gap: 10px; }
.nx-ci-row .form-group { margin-bottom: 10px; }
.nx-big { padding: 12px 26px !important; font-size: 15px; font-weight: 700; }
.btn-gold.nx-big { color: #0A1530 !important; }
.nx-ci-done { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.nx-ci-done > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.nx-ci-done span { display: block; font-size: 11px; letter-spacing: .12em; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.nx-ci-done b { font-size: 18px; }
.nx-help { display: block; color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.nx-empty { color: var(--muted); padding: 14px 0; margin: 0; }
.mk-card.nx-empty { padding: 22px; }
.nx-link { color: var(--sky) !important; font-weight: 600; text-decoration: none; font-size: 13.5px; }

/* chips, progress bars, late dates */
.nx-chip { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  background: rgba(157,176,204,.14); color: #B8C6DD; border: 1px solid rgba(157,176,204,.3); }
.c-active, .c-approved, .c-done, .c-paid, .c-office, .c-yes, .c-permanent, .c-go { background: rgba(52,211,153,.13); color: #34D399; border-color: rgba(52,211,153,.4); }
.c-pending, .c-submitted, .c-review, .c-high, .c-business-trip, .c-probation, .c-on-leave { background: rgba(212,164,64,.14); color: #E9C46A; border-color: rgba(212,164,64,.45); }
.c-banned, .c-rejected, .c-blocked, .c-urgent, .c-absent, .c-sick, .c-left, .c-not-go, .c-not-selected { background: rgba(248,113,113,.13); color: #F87171; border-color: rgba(248,113,113,.4); }
.c-in-progress, .c-remote, .c-manager, .c-normal, .c-leave { background: rgba(46,155,255,.13); color: #7FB2FF; border-color: rgba(46,155,255,.4); }
.c-admin { background: rgba(139,92,246,.15); color: #C4B5FD; border-color: rgba(139,92,246,.45); }
html[data-mode="light"] .nx-chip { filter: saturate(1.3) brightness(.8); }
.nx-bar { display: inline-block; vertical-align: middle; width: 90px; height: 7px; border-radius: 4px; background: rgba(157,176,204,.2); overflow: hidden; }
.nx-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--royal), var(--sky)); border-radius: 4px; }
.nx-pct { margin-left: 8px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.nx-late { color: #F87171 !important; font-weight: 600; }
.nx-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* list action buttons */
.nx-acts { white-space: nowrap; }
.nx-ib { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 7px; width: 30px; height: 30px; margin-left: 4px; cursor: pointer; font-size: 14px; line-height: 1; }
.nx-ib:hover { border-color: var(--gold); color: var(--gold2); }
.nx-ib.del:hover { border-color: #F87171; color: #F87171; }
.nx-dl { margin-left: 6px; text-decoration: none; }

/* forms in modals */
.modal-content { border-radius: 16px; }
html[data-mode="dark"] .modal-content { background: #10224A; color: var(--ink); border: 1px solid #2A4475; }
html[data-mode="dark"] .modal-header, html[data-mode="dark"] .modal-footer { border-color: #22355C; }
html[data-mode="dark"] .btn-close { filter: invert(1); }
.modal-title { font-weight: 700; }
.modal-footer .btn-gold { color: #0A1530 !important; font-weight: 700; }
.nx-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.nx-f.wide { grid-column: 1 / -1; }
.nx-f label { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.nx-f label i, .ct-form label i { color: var(--gold); font-style: normal; }
.nx-err { color: #F87171; font-weight: 600; margin-right: 12px; font-size: 13.5px; }
@media (max-width: 700px) { .nx-form { grid-template-columns: 1fr; } }
.nx-vrow b { white-space: pre-wrap; max-width: 75%; }
.nx-vrow .nx-md { text-align: left; font-weight: 400; }
.nx-md p:last-child { margin-bottom: 0; } .nx-md h1, .nx-md h2, .nx-md h3 { font-size: 17px; margin: 10px 0 6px; } .nx-md ul { padding-left: 20px; margin-bottom: 6px; }
.nx-md code { background: rgba(157,176,204,.15); padding: 1px 6px; border-radius: 4px; color: var(--gold2); }
.nx-tmp { font-size: 22px; letter-spacing: .1em; padding: 14px; background: rgba(212,164,64,.12); border: 1px dashed var(--gold); border-radius: 10px; text-align: center; color: var(--gold2); }

/* filters bar */
.nx-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .nx-filter .form-group { margin: 0; }
.nx-bar-tools .mk-ctop { margin-bottom: 0; align-items: center; }
.nx-addrow { margin: -6px 0 18px; }
.nx-addrow .btn-gold { color: #0A1530 !important; }

/* Directory */
.nx-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.nx-person { display: flex; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); }
.nx-person b { display: block; font-size: 15.5px; } .nx-person span, .nx-person em, .nx-person small { display: block; font-size: 13px; color: var(--muted); font-style: normal; }
.nx-person em { color: var(--gold2); font-size: 12px; letter-spacing: .04em; } .nx-person a { font-size: 13px; word-break: break-all; }
.nx-av { position: relative; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 17px;
  color: #fff; background: linear-gradient(135deg, var(--royal), var(--sky)); }
.nx-av i { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: #64748B; border: 2px solid #10224A; }
.nx-av i.on { background: #34D399; }
.nx-av.sm { flex-basis: 26px; width: 26px; height: 26px; font-size: 10.5px; }
.nx-av.lg { flex-basis: 64px; width: 64px; height: 64px; font-size: 22px; }
html[data-mode="light"] .nx-person { background: #fff; } html[data-mode="light"] .nx-person em { color: #8A6414; }

/* Task board */
.nx-board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 18px; }
.nx-col { background: rgba(16,34,74,.6); border: 1px solid #22355C; border-radius: 14px; padding: 12px; min-height: 160px; border-top: 3px solid #64748B; }
.nx-col.c-in-progress { border-top-color: var(--sky); } .nx-col.c-review { border-top-color: var(--gold); } .nx-col.c-done { border-top-color: #34D399; } .nx-col.c-blocked { border-top-color: #F87171; }
.nx-col-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.nx-col-h b { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; } .nx-col-h em { font-style: normal; color: var(--muted); font-weight: 700; }
.nx-col-empty { color: var(--muted); font-size: 12.5px; text-align: center; padding: 18px 0; }
.nx-task { display: block; text-decoration: none; color: var(--ink) !important; background: #0E1C3D; border: 1px solid #22355C; border-radius: 11px; padding: 11px 12px; margin-bottom: 10px;
  transition: transform .15s, border-color .15s; }
.nx-task:hover { transform: translateY(-2px); border-color: var(--gold); }
.nx-task.late { border-left: 3px solid #F87171; }
.nx-task > b { display: block; font-size: 14px; margin: 6px 0 8px; line-height: 1.3; }
.nx-task-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; } .nx-task-top small { color: var(--muted); font-size: 11.5px; }
.nx-task-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.nx-due { font-size: 12px; color: var(--muted); } .nx-task.late .nx-due { color: #F87171; font-weight: 600; }
.nx-task .nx-bar { width: calc(100% - 44px); }
html[data-mode="light"] .nx-col { background: #F3F6FB; border-color: #DCE3EE; } html[data-mode="light"] .nx-task { background: #fff; border-color: #DCE3EE; }

/* Home lists */
.nx-news { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07); } .nx-news:last-child { border-bottom: 0; }
.nx-news.pin { border-left: 3px solid var(--gold); padding-left: 12px; }
.nx-news-h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .nx-news-h small { color: var(--muted); }
.nx-trow { display: grid; grid-template-columns: 1fr auto 140px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07);
  text-decoration: none; color: var(--ink) !important; }
.nx-trow:hover b { color: var(--gold2); } .nx-trow small { display: block; color: var(--muted); font-size: 12px; } .nx-trow.late small { color: #F87171; }
.nx-tbar .nx-bar { width: 80px; }

/* Videos and gallery */
.nx-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; margin-bottom: 18px; }
.nx-vcard { background: #10224A; border: 1px solid #22355C; border-radius: 14px; overflow: hidden; padding-bottom: 12px; }
.nx-vcard video, .nx-vcard iframe { width: 100%; aspect-ratio: 16 / 9; display: block; background: #000; border: 0; }
.nx-vcard > b, .nx-vcard > small, .nx-vcard > p { display: block; padding: 0 14px; } .nx-vcard > b { margin-top: 10px; } .nx-vcard small { color: var(--muted); }
.nx-vcard > p { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.nx-vlink { display: grid; place-items: center; aspect-ratio: 16 / 9; background: #0A1530; color: var(--gold2) !important; text-decoration: none; font-weight: 600; }
.nx-vlink svg { width: 42px; height: 42px; }
.nx-gallery { columns: 4 240px; column-gap: 14px; margin-bottom: 18px; }
.nx-gallery figure { break-inside: avoid; margin: 0 0 14px; border-radius: 12px; overflow: hidden; border: 1px solid #22355C; background: #10224A; }
.nx-gallery img { width: 100%; display: block; cursor: zoom-in; transition: transform .25s; } .nx-gallery figure:hover img { transform: scale(1.03); }
.nx-gallery figcaption { padding: 8px 12px; font-size: 13px; }
.nx-lightbox { display: none; position: fixed; inset: 0; z-index: 9500; background: rgba(5,11,26,.92); align-items: center; justify-content: center; flex-direction: column; cursor: zoom-out; padding: 30px; }
.nx-lightbox.on { display: flex; } .nx-lightbox img { max-width: 94vw; max-height: 84vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.nx-lightbox p { color: #DCE4F2; margin-top: 14px; }
html[data-mode="light"] .nx-vcard, html[data-mode="light"] .nx-gallery figure { background: #fff; border-color: #DCE3EE; }

/* FAQ */
.nx-faq { margin-top: 16px; } .nx-faq .mk-kick { margin-bottom: 6px; }
.nx-faq details { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; padding: 0 16px; }
.nx-faq summary { cursor: pointer; padding: 13px 0; font-weight: 600; list-style: none; } .nx-faq summary::-webkit-details-marker { display: none; }
.nx-faq summary::before { content: "+"; display: inline-block; width: 22px; color: var(--gold); font-weight: 700; }
.nx-faq details[open] summary::before { content: "\2212"; } .nx-faq details .nx-md { padding: 0 0 14px 22px; color: var(--muted); }

/* Search page and top-bar results */
.nx-sres a { display: block; padding: 12px 14px; border-radius: 10px; text-decoration: none; color: var(--ink) !important; border: 1px solid transparent; }
.nx-sres a:hover { border-color: var(--line); background: rgba(46,155,255,.06); }
.nx-sres em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--gold); text-transform: uppercase; }
.nx-sres b { display: block; font-size: 15px; } .nx-sres span { display: block; color: var(--muted); font-size: 13px; } .nx-sres small { color: var(--sky); font-size: 12px; }
.sres a.nx-all b { color: var(--sky); font-size: 13px; }

/* Shiny apps */
.nx-apps { margin-top: 0; margin-bottom: 22px; }
.nx-appview { padding: 0; }
.nx-apphead { display: flex; gap: 18px; align-items: center; padding: 12px 22px; border-bottom: 1px solid var(--line); }
.nx-apphead .mk-back { margin: 0; } .nx-apphead a:last-child { margin-left: auto; }
.nx-iframe { width: 100%; height: calc(100vh - 140px); border: 0; display: block; background: #fff; }

/* Profile and user menu */
.nx-pf-top { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; } .nx-pf-top > div > b, .nx-pf-top > div > span { display: block; } .nx-pf-top > div > span { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.u-head .nx-role { display: inline-block; margin-top: 6px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--gold); text-transform: uppercase; }
.nx-badge:not(:empty) { margin-left: auto; background: #DC2626; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 11px; font-weight: 700; }
.u-ini { font-weight: 700; font-size: 14px; }

/* data tables inside modals and cards: keep the select of the role readable */
.adm-plan { background: #0A1530; color: #DCE4F2; border: 1px solid #2A4475; border-radius: 6px; padding: 3px 6px; font-size: 12.5px; }
html[data-mode="light"] .adm-plan { background: #fff; color: var(--navy); border-color: #C9D3E3; }
.adm-b { margin: 2px 0 2px 6px; } .adm-b:not(.ok):not(.ban) { color: var(--sky); border-color: rgba(46,155,255,.5); }

/* search box opens wide at every screen size (vtp.css fixes the icons at 42 px below 1750 px) */
.sbox.open { width: 300px !important; flex-basis: 300px !important; }
.sres { width: 420px; }
/* DataTables with horizontal scroll: the hidden sizing header of the body stays hidden */
.dataTables_scrollBody thead th, .dataTables_scrollBody thead td { padding-top: 0 !important; padding-bottom: 0 !important; border: 0 !important; height: 0 !important; }
.dataTables_scrollBody thead tr { height: 0 !important; }
/* DT scrollX copy of the header inside the body: collapse it */
.dataTables_wrapper .dataTables_scrollBody table.dataTable > thead > tr > th,
.dataTables_wrapper .dataTables_scrollBody table.dataTable > thead > tr > td { padding-top: 0 !important; padding-bottom: 0 !important; border-top: 0 !important; border-bottom: 0 !important; height: 0 !important; line-height: 0 !important; }
.dataTables_wrapper .dataTables_scrollBody table.dataTable > thead { visibility: collapse; }

/* Starter page = Home hero, as in VTPWEB (vtp.css: .vtp-name, .home-auth, .home-user). Signed out, only the hero shows. */
html:not(.signed) .nx-dash { display: none !important; }
/* no section boxes on the starter page: a larger logo and a hero that fills the screen */
.home-band .hero { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 22px 64px; }
html:not(.signed) .home-band .hero { min-height: 100vh; }
.home-band .hero img.logo { width: 550px; max-width: 86%; margin-bottom: 30px; }
.home-band .hero .home-auth { margin-top: 18px; }
@media (max-width: 760px) { .home-band .hero img.logo { width: 350px; } .home-band .hero { min-height: auto; padding: 44px 16px 52px; } }
.home-user p { margin-top: 6px !important; }

/* Documents: Grid (cards, default) or List (table) */
.nx-docs.view-grid .nx-crud .dataTables_wrapper { display: none; }
.nx-docs.view-grid .nx-crud { padding-bottom: 6px; margin-bottom: 18px; }
.nx-docs.view-list [id$="_grid"], .nx-docs.view-list .nx-gq { display: none !important; }
.nx-gq { height: 38px; width: 220px; padding: 0 12px; border-radius: 9px; border: 1px solid #2A4475; background: #0B1A3A; color: inherit; font-size: 14px; }
.nx-view { display: inline-flex; border: 1px solid #2A4475; border-radius: 9px; padding: 3px; gap: 2px; }
.nx-view button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--muted); padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; }
.nx-view button svg { width: 16px; height: 16px; }
.nx-view button.on { background: var(--gold); color: #0B1A3A; }
.nx-dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.nx-dcard { display: flex; flex-direction: column; gap: 9px; padding: 18px; border-radius: 14px; background: #10224A; border: 1px solid #22355C; transition: transform .15s, border-color .15s; }
.nx-dcard:hover { transform: translateY(-3px); border-color: var(--gold); }
.nx-dtop { display: flex; justify-content: space-between; align-items: center; }
.nx-dtype { display: inline-grid; place-items: center; min-width: 52px; height: 30px; padding: 0 8px; border-radius: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #fff; background: #5B6B84; }
.nx-dtype.t-pdf { background: #DC2626; } .nx-dtype.t-doc, .nx-dtype.t-docx { background: #2563EB; } .nx-dtype.t-xls, .nx-dtype.t-xlsx, .nx-dtype.t-csv { background: #16A34A; }
.nx-dtype.t-ppt, .nx-dtype.t-pptx { background: #EA580C; } .nx-dtype.t-link { background: #7C3AED; } .nx-dtype.t-zip { background: #A16207; }
.nx-dtitle { font-size: 16px; font-weight: 700; line-height: 1.3; color: inherit !important; text-decoration: none; }
.nx-dtitle:hover { color: var(--gold) !important; }
.nx-ddesc { margin: 0; font-size: 13.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nx-dtags { display: flex; flex-wrap: wrap; gap: 5px; }
.nx-dtags span { font-size: 11.5px; padding: 2px 8px; border-radius: 20px; background: rgba(46,155,255,.12); color: #7FB2FF; border: 1px solid rgba(46,155,255,.3); }
.nx-dmeta { font-size: 12px; color: var(--muted); margin-top: auto; }
.nx-dacts { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid #22355C; }
.nx-dbtn { font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 7px; border: 1px solid #2A4475; background: transparent; color: inherit !important; text-decoration: none; }
.nx-dbtn:hover { border-color: var(--gold); }
.nx-dbtn.main { background: var(--gold); border-color: var(--gold); color: #0B1A3A !important; }
html[data-mode="light"] .nx-dcard { background: #fff; border-color: #DCE3EE; }
html[data-mode="light"] .nx-dacts { border-color: #E1E7F0; }
html[data-mode="light"] .nx-gq, html[data-mode="light"] .nx-view, html[data-mode="light"] .nx-dbtn:not(.main) { background: #fff; border-color: #C9D4E6; }
@media (max-width: 760px) { .nx-gq { width: 100%; } }
/* Tasks grid */
.nx-tcard { border-top: 3px solid #5B6B84; }
.nx-tcard.in-progress { border-top-color: var(--sky); } .nx-tcard.review { border-top-color: var(--gold); } .nx-tcard.done { border-top-color: #34D399; opacity: .8; }
.nx-tcard.blocked, .nx-tcard.late { border-top-color: #F87171; }
.nx-tcard .nx-dtop { gap: 6px; justify-content: flex-start; }
.nx-tproj { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.nx-tfoot { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-top: auto; }
.nx-tfoot .nx-due { margin-left: auto; }
/* Projects grid */
.nx-pcard { border-top: 3px solid var(--sky); } .nx-pcard.late { border-top-color: #F87171; } .nx-pcard.done { border-top-color: #34D399; }
.nx-pbig { display: flex; align-items: center; gap: 12px; } .nx-pbig b { font-size: 26px; font-weight: 800; color: var(--gold); min-width: 70px; }
.nx-pbig > :last-child { flex: 1; }
.nx-pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.nx-pstats span { display: flex; flex-direction: column; font-size: 11.5px; color: var(--muted); padding: 6px 0; border-radius: 8px; background: rgba(255,255,255,.03); }
.nx-pstats b { font-size: 18px; color: inherit; } .nx-pstats .nx-late b { color: #F87171; }
html[data-mode="light"] .nx-pstats span { background: #F3F6FB; }
.nx-pbig .nx-pct { display: none; }
.nx-dgrid { margin-bottom: 22px; }
.nx-tbar { display: flex; align-items: center; } .nx-tbar .nx-bar { flex: 1; width: auto; }
/* name of the table below each list */
.nx-tname { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--muted); }
.nx-tname svg { width: 14px; height: 14px; }
.nx-tname code { font-size: 12px; color: var(--gold); background: rgba(212,164,64,.1); padding: 1px 6px; border-radius: 5px; }
.nx-docs.view-grid .nx-crud .nx-tname { margin-top: 4px; }
.nx-dl-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }

/* Profile pictures (NXW_USERS.AVATAR) */
.nx-av.img { overflow: hidden; padding: 0; background: #0B1A3A; }
.nx-av.img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.nx-av.xl { flex-basis: 112px; width: 112px; height: 112px; font-size: 36px; }
.nx-pf-av { display: flex; align-items: center; gap: 18px; margin: 6px 0 10px; flex-wrap: wrap; }
.nx-pf-av > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 320px; }
.nx-pf-av .nx-help { flex-basis: 100%; }
.nx-upl { cursor: pointer; margin: 0; }
.nx-hidden { display: none !important; }
.nx-pf-h { margin-top: 22px !important; }
.ubtn .u-ini.img { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; }
.ubtn .u-ini.img img { width: 100%; height: 100%; object-fit: cover; }

/* Shiny apps: a screen capture on each card (NXW_SHINY_APPS.SHOT, or a live preview) */
.nx-apps .nx-appcard { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nx-apps .nx-appcard > .hcard { flex: 1; padding-top: 14px; }
.nx-shot { position: relative; aspect-ratio: 16 / 10; margin: 0 0 14px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(157,176,204,.22);
  background: radial-gradient(circle at 50% 40%, rgba(46,155,255,.18), rgba(11,26,58,.9)); display: grid; place-items: center; }
.nx-shot .ic { margin: 0; }
.nx-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .35s ease; }
.hcard:hover .nx-shot img { transform: scale(1.03); }
.nx-shot-d { position: absolute; right: 8px; bottom: 8px; z-index: 1; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: rgba(11,26,58,.78); color: #DCE4F2; }
.nx-shot-acts { display: flex; gap: 6px; justify-content: flex-end; }

/* Menu text +2px (top menu and its dropdowns), at every screen width */
.navbar .nav-link { font-size: 15.8px; }
.navbar .dropdown-item { font-size: 15px; }
@media (max-width: 1750px) { .navbar .nav-link { font-size: 15px; } }
@media (max-width: 1450px) { .navbar .nav-link { font-size: 14px; } }

/* Space between menu items +25% (padding 11 -> 13.75px, 8 -> 10px, 6 -> 7.5px); the gold underline follows */
@media (min-width: 992px) {
  .navbar .nav-link { padding: 0 13.75px !important; } .navbar .nav-link::after { left: 13.75px; right: 13.75px; }
}
@media (min-width: 992px) and (max-width: 1750px) {
  .navbar .nav-link { padding: 0 10px !important; } .navbar .nav-link::after { left: 10px; right: 10px; }
}
@media (min-width: 992px) and (max-width: 1450px) {
  .navbar .nav-link { padding: 0 7.5px !important; } .navbar .nav-link::after { left: 7.5px; right: 7.5px; }
}

/* Home in the menu: a house icon (the word Home only in the phone menu) */
.nx-home-ic { display: inline-flex; align-items: center; gap: 8px; }
.nx-home-ic svg { width: 22px; height: 22px; display: block; }
.nx-home-t { display: none; }
@media (max-width: 991.98px) { .nx-home-t { display: inline; } }

/* My profile: three columns, one card each, same height */
.pf3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.pf3 .pf-card { display: flex; flex-direction: column; padding: 26px 28px 28px; }
.pf3 .pf-card .form-group, .pf3 .pf-card .shiny-input-container { margin-bottom: 12px; }
.pf-h { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid rgba(157,176,204,.16); }
.pf-h h3 { margin: 0 !important; font-size: 18px !important; } .pf-h p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.pf-hi { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--gold);
  background: rgba(212,164,64,.12); border: 1px solid rgba(212,164,64,.35); }
.pf-hi svg { width: 20px; height: 20px; }
.pf-id { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-bottom: 14px; }
.pf-avwrap { position: relative; display: inline-block; }
.pf-avwrap .nx-av.xl { box-shadow: 0 0 0 4px rgba(212,164,64,.35), 0 12px 30px rgba(0,0,0,.35); }
.pf-cam { position: absolute; right: 2px; bottom: 2px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--gold); color: #0A1530; border: 3px solid #10224A; margin: 0; transition: transform .15s; }
.pf-cam:hover { transform: scale(1.08); } .pf-cam svg { width: 17px; height: 17px; }
.pf-who b { display: block; font-size: 19px; } .pf-who span { display: block; color: var(--muted); font-size: 13.5px; margin: 2px 0 8px; }
.pf-avbtns { display: flex; gap: 8px; justify-content: center; }
.pf-id .nx-help { max-width: 280px; }
.pf-rows { margin-top: 4px; } .pf-rows .pf-row { padding: 10px 0; }
.pf-rows .pf-row b { text-align: right; overflow-wrap: anywhere; max-width: 62%; }
.pf-sec { font-size: 11.5px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 6px 0 10px !important; }
.pf-sec:not(:first-of-type) { margin-top: 14px !important; }
.pf-foot { margin-top: auto; padding-top: 10px; } .pf-c3 .pf-foot { margin-top: 4px; }
.pf-foot .btn { width: 100%; padding: 11px 16px; }
.pf-c3 .pf-sec { margin-top: 24px !important; padding-top: 18px; border-top: 1px solid rgba(157,176,204,.16); }
html[data-mode="light"] .pf-cam { border-color: #fff; } html[data-mode="light"] .pf-h { border-color: #E1E7F0; }
@media (max-width: 1200px) { .pf3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf3 .pf-c3 { grid-column: 1 / -1; } }
@media (max-width: 760px) { .pf3 { grid-template-columns: 1fr; } }

/* Cards (Home, Shiny apps): the title beside its icon, more compact */
.hcard { padding: 20px 22px; }
.hcard .hc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; min-width: 0; }
.hcard .hc-head .ic { flex: 0 0 44px; margin: 0; }
.hcard .hc-head h3 { margin: 0 !important; line-height: 1.25; overflow-wrap: anywhere; }
.hcard p { margin-bottom: 10px; line-height: 1.5; }
.nx-cards { gap: 18px; }
.nx-shot .ic { width: 56px; height: 56px; }
.hcard small { display: block; margin-bottom: 12px; overflow-wrap: anywhere; }

/* Tools & links */
.nx-lk-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.nx-lk-bar small { white-space: nowrap; }
.nx-lk-bar .form-group { margin: 0; flex: 0 1 360px; }
.nx-lk-grp { margin-bottom: 22px; }
.nx-lk-grp h4 { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; margin: 0 0 10px; }
.nx-lk-grp h4 small { font-size: 11px; padding: 1px 8px; border-radius: 10px; background: rgba(255,255,255,.08); }
.nx-lk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.nx-lk { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; text-decoration: none; color: inherit;
  background: var(--cardbg); border: 1px solid var(--line); transition: transform .15s, border-color .15s, background .15s; min-width: 0; }
.nx-lk:hover { transform: translateY(-2px); border-color: rgba(96,165,250,.55); background: rgba(96,165,250,.08); color: inherit; }
.nx-lk-ic { position: relative; flex: 0 0 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: #1d4ed8; overflow: hidden; }
.nx-lk-ic svg { width: 22px; height: 22px; }
.nx-lk-ic img { position: absolute; inset: 6px; width: 28px; height: 28px; object-fit: contain; background: #fff; }
.nx-lk-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nx-lk-t b { line-height: 1.3; overflow-wrap: anywhere; }
.nx-lk-t span { font-size: 12.5px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-lk-go { opacity: .45; font-size: 16px; }
.nx-lk:hover .nx-lk-go { opacity: 1; color: #60a5fa; }

/* Directory: avatar initials centred (".nx-person span" made the avatar a block), Grid (default) or List */
.nx-person > .nx-av { display: grid; place-items: center; color: #fff; font-size: 17px; line-height: 1; }
.nx-person > .nx-av.img { padding: 0; }
.nx-dir-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nx-docs.view-grid .nx-dir-list { display: none; }
.nx-dl-who { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.nx-dl-who .nx-av { display: grid; place-items: center; line-height: 1; }
.nx-dl-st { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--muted); }
.nx-dl-st i { width: 9px; height: 9px; border-radius: 50%; background: #64748B; }
.nx-dl-st.on { color: inherit; } .nx-dl-st.on i { background: #34D399; }
.nx-person { position: relative; }
.nx-dl-edit { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(212,164,64,.55);
  background: transparent; color: var(--gold2); font-size: 12px; font-weight: 700; cursor: pointer; }
.nx-dl-edit svg { width: 13px; height: 13px; } .nx-dl-edit:hover { background: var(--gold); color: #0B1A3A; }
.nx-person > .nx-dl-edit { position: absolute; top: 10px; right: 10px; padding: 4px 8px; }
.nx-person > .nx-dl-edit span { display: none; }
.nx-person:hover > .nx-dl-edit span { display: inline; }
.nx-de .nx-2c { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 700px) { .nx-de .nx-2c { grid-template-columns: 1fr; } }

/* Starter page: "Internal Use Only" label, top right of the hero */
.home-band { position: relative; }
.nx-hero-tr { position: absolute; top: 26px; right: 32px; z-index: 2; display: flex; align-items: center; gap: 10px; }
.nx-internal { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border: 1px solid rgba(212,164,64,.75); border-radius: 999px; background: rgba(11,26,58,.72); color: var(--gold2); backdrop-filter: blur(4px);
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: default; user-select: none; }
.nx-internal svg { width: 15px; height: 15px; }
@media (max-width: 760px) { .nx-hero-tr { position: static; justify-content: center; margin: 18px auto 0; } .nx-internal { font-size: 11px; padding: 6px 12px; } }
html[data-mode="light"] .nx-internal { background: rgba(255,255,255,.85); color: #8A6414; }

/* Administration icon (icon bar) and administrator sign-in */
.nx-admbtn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 8px; border: 0;
  background: #DC2F2F; color: #fff !important; font-weight: 700; font-size: 13.5px; letter-spacing: .1em; text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(220,47,47,.28); transition: background .15s, transform .15s; white-space: nowrap; }
.nx-admbtn:hover { background: #B91F1F; transform: translateY(-1px); }
.nx-admbtn svg { width: 20px; height: 20px; }
html.admin .nx-admbtn { box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 4px 14px rgba(220,47,47,.35); }
/* Administrator sign-in: red card, so it cannot be taken for the normal sign-in (light and dark mode) */
#vtp_login.adm-mode .lg-card { background: linear-gradient(165deg, #7A1420 0%, #4E0B14 100%) !important; border-color: #E0444F !important; color: #FFF1F1 !important;
  box-shadow: 0 0 0 1px rgba(224,68,79,.45), 0 30px 80px rgba(0,0,0,.55) !important; }
#vtp_login.adm-mode .lg-card h1, #vtp_login.adm-mode .lg-card h2, #vtp_login.adm-mode .lg-card h3, #vtp_login.adm-mode #lg_title { color: #FFFFFF !important; }
#vtp_login.adm-mode .lg-card p, #vtp_login.adm-mode .lg-card small, #vtp_login.adm-mode .lg-card label, #vtp_login.adm-mode #lg_sub { color: #FFD9DC !important; }
#vtp_login.adm-mode .lg-card input.form-control, #vtp_login.adm-mode .lg-card input[type=email], #vtp_login.adm-mode .lg-card input[type=password], #vtp_login.adm-mode .lg-card input[type=text] {
  background: rgba(30,4,8,.55) !important; border-color: rgba(255,170,175,.35) !important; color: #FFFFFF !important; }
#vtp_login.adm-mode .lg-card .btn-close, #vtp_login.adm-mode .lg-card .lg-x { border-color: rgba(255,170,175,.45) !important; color: #FFFFFF !important; }
#vtp_login.adm-mode .lg-alt-up, #vtp_login.adm-mode .lg-rem { display: none; }
#vtp_login.adm-mode #lg_title::before { content: ""; display: inline-block; width: 26px; height: 26px; margin-right: 10px; vertical-align: -4px; background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l9 3.4v6.5c0 5-3.7 9.2-9 10.1-5.3-.9-9-5.1-9-10.1V5.4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l9 3.4v6.5c0 5-3.7 9.2-9 10.1-5.3-.9-9-5.1-9-10.1V5.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Options: sign-up closed */
html.no-signup .ha-up, html.no-signup .ha-sep, html.no-signup .lg-alt-up { display: none !important; }
/* CMS Navigation: who sees a page */
html:not(.mgr) .navbar .nx-acc-mgr, html:not(.admin) .navbar .nx-acc-adm, html:not(.admin) .navbar .nx-acc-hid,
html:not(.mgr) .navbar li.nx-acc-li:has(.nx-acc-mgr), html:not(.admin) .navbar li.nx-acc-li:has(.nx-acc-adm), html:not(.admin) .navbar li.nx-acc-li:has(.nx-acc-hid) { display: none !important; }
html.admin .navbar .nx-acc-hid { opacity: .45; font-style: italic; }
/* Announcement bar */
.nx-banner { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%); z-index: 1080; display: flex; align-items: center; gap: 14px;
  max-width: min(920px, calc(100vw - 32px)); padding: 12px 14px 12px 20px; border-radius: 14px; font-size: 14.5px; font-weight: 500; color: #fff;
  background: #0E2145; border: 1px solid var(--sky); box-shadow: 0 18px 40px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: transform .3s, opacity .3s; }
.nx-banner.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.nx-banner.k-warning { border-color: #F59E0B; background: #3A2A08; } .nx-banner.k-success { border-color: #34D399; background: #0B3328; }
.nx-banner button { flex: 0 0 auto; border: 0; background: rgba(255,255,255,.12); color: inherit; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; }
html[data-mode="light"] .nx-banner { background: #fff; color: #13203A; } html[data-mode="light"] .nx-banner.k-warning { background: #FFF7E6; } html[data-mode="light"] .nx-banner.k-success { background: #ECFDF5; }

/* Administration page */
.adm-who { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid rgba(212,164,64,.5); border-radius: 12px; }
.adm-who .nx-av { display: grid; place-items: center; line-height: 1; }
.adm-who b { display: block; font-size: 14px; } .adm-who > div > span { display: block; font-size: 12px; color: var(--gold2); letter-spacing: .06em; text-transform: uppercase; }
#adm_tab { gap: 8px; flex-wrap: wrap; margin: 4px 0 20px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--cardbg); }
#adm_tab .nav-link { border-radius: 10px; color: var(--muted); font-weight: 600; font-size: 14px; padding: 9px 16px; }
#adm_tab .nav-link.active { background: var(--gold); color: #0B1A3A; }
.adm-tab { display: inline-flex; align-items: center; gap: 8px; } .adm-tab svg { width: 17px; height: 17px; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; align-items: start; }
.adm-grid > .adm-sec { margin: 0; }
.adm-sec .form-group { margin-bottom: 12px; } .adm-sec .shiny-input-container { width: 100% !important; }
.nx-2c { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.adm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 12px; }
.adm-col { display: flex; align-items: flex-end; gap: 8px; } .adm-col .form-group { flex: 1; min-width: 0; }
.adm-pick { flex: 0 0 40px; width: 40px; height: 38px; margin-bottom: 12px; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: transparent; cursor: pointer; }
.adm-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 8px; }
.adm-foot .lg-msg { margin: 0; }
.adm-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.adm-dl .btn { flex: 1 1 200px; }
.cn-wrap { display: flex; flex-direction: column; }
.cn-row { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(200px, 1.4fr) 200px; gap: 14px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.cn-row .form-group { margin: 0; }
.cn-th { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom-width: 2px; }
.cn-menu { padding-top: 10px; } .cn-mrow { background: rgba(212,164,64,.06); border-radius: 10px; padding: 8px 10px; border-bottom: 0; }
.cn-def { display: flex; flex-direction: column; font-weight: 600; } .cn-def em { font-style: normal; font-size: 11px; color: var(--gold2); letter-spacing: .1em; text-transform: uppercase; }
.cn-def small { font-weight: 400; font-size: 11.5px; color: var(--muted); }
.cn-row:not(.cn-mrow):not(.cn-th) .cn-def { padding-left: 14px; }
@media (max-width: 760px) { .adm-grid { grid-template-columns: 1fr; } .nx-2c, .adm-cols { grid-template-columns: 1fr; } .cn-row { grid-template-columns: 1fr; gap: 6px; } .cn-th { display: none; } }
.nx-admbtn2 { height: 36px; }
/* Backup: two zips side by side */
.adm-bk { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.adm-bk-i { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 10px; }
.adm-bk-i small { opacity: .8; flex: 1; }
.adm-bk-i .btn { align-self: flex-start; }
.adm-bk-i .btn-gold, .adm-bk-i .btn-gold:hover { color: #0A1530 !important; font-weight: 700; }
.adm-bk-i .form-group { margin: 4px 0 0; }
/* Admin users table: names and dates on one line, the actions two per line on two lines */
#adm_users td.nx-nw, #adm_users th.nx-nw { white-space: nowrap; }
#adm_users td.nx-acts { white-space: nowrap; }
#adm_users td .rt-clock { margin-top: 4px; display: inline-flex; }
.adm-actg { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.adm-actg .adm-b { margin: 0 !important; width: 100%; text-align: center; white-space: nowrap; }
.adm-actg .adm-b.wide { grid-column: 1 / -1; }
/* Documents: thumbnail at the top of each card */
.nx-dthumb { position: relative; display: block; height: 170px; margin: -4px -4px 14px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(160deg, #1B3266, #0E1D40); border: 1px solid var(--line); text-decoration: none !important; }
.nx-dthumb-ty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800;
  letter-spacing: .08em; color: rgba(255,255,255,.18); }
.nx-dthumb.th-pdf .nx-dthumb-ty { color: rgba(239,68,68,.35); } .nx-dthumb.th-csv .nx-dthumb-ty, .nx-dthumb.th-xlsx .nx-dthumb-ty { color: rgba(34,197,94,.35); }
.nx-dthumb > canvas, .nx-dthumb > img { position: relative; display: block; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top; }
.nx-dthumb.has-pdf, .nx-dthumb:has(> .nx-mini), .nx-dthumb:has(> .nx-mtxt) { background: #fff; }
.nx-dthumb.has-pdf .nx-dthumb-ty, .nx-dthumb:has(> img) .nx-dthumb-ty, .nx-dthumb:has(> .nx-mini) .nx-dthumb-ty, .nx-dthumb:has(> .nx-mtxt) .nx-dthumb-ty { display: none; }
table.nx-mini { position: relative; width: 100%; border-collapse: collapse; font-size: 10.5px; color: #1F2A44; background: #fff; }
table.nx-mini th { background: #E8F5EC; color: #14532D; font-weight: 700; text-align: left; padding: 5px 6px; border: 1px solid #D5E3DA; white-space: nowrap; }
table.nx-mini td { padding: 4px 6px; border: 1px solid #E3E8F0; white-space: nowrap; overflow: hidden; max-width: 90px; text-overflow: ellipsis; }
.nx-mtxt { position: relative; margin: 0; padding: 10px 12px; font-size: 10.5px; line-height: 1.45; color: #1F2A44; background: #fff; white-space: pre-wrap; border: 0; }
.nx-dcard:hover .nx-dthumb { border-color: var(--gold); }
table.nx-mini { display: table !important; table-layout: fixed; } table.nx-mini thead { display: table-header-group !important; } table.nx-mini tbody { display: table-row-group !important; }
table.nx-mini tr { display: table-row !important; } table.nx-mini th, table.nx-mini td { display: table-cell !important; height: 22px; }
table.nx-mini th:first-child, table.nx-mini td:first-child { width: 36%; }
/* Header like the CCPE site: tagline line on top, menu centred under it, square icon buttons top right, red ADMIN under them */
.nx-tagline { display: none; }
@media (min-width: 1200px) {
  .navbar { min-height: 124px; }
  .navbar .container-fluid { min-height: 124px; position: relative; }
  .navbar-brand .brand img { height: 64px; }
  .nx-tagline { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; white-space: nowrap;
    color: #e9b54a; font-size: 17px; font-weight: 600; letter-spacing: .2em; pointer-events: none; }
  .nx-tagline i { display: block; width: 150px; height: 1px; background: linear-gradient(90deg, transparent, rgba(233,181,74,.75)); position: relative; }
  .nx-tagline i:last-child { background: linear-gradient(270deg, transparent, rgba(233,181,74,.75)); }
  .nx-tagline i::after { content: ""; position: absolute; right: -4px; top: -3.5px; width: 8px; height: 8px; background: #e9b54a; transform: rotate(45deg); }
  .nx-tagline i:last-child::after { right: auto; left: -4px; }
  .navbar .navbar-collapse { padding-top: 54px; }
  .navbar .navbar-nav { justify-content: center; }
  .navbar .nav-link { height: 70px; font-size: 16.5px !important; font-weight: 700; letter-spacing: .04em; color: #fff !important; padding: 0 13px !important; }
  .navbar .nav-link:hover, .navbar .nav-link.active { color: #e9b54a !important; }
  .navbar .nav-link::after { left: 13px !important; right: 13px !important; top: calc(50% + 15px); }
  .navbar .bslib-nav-spacer { display: none; }
  .navbar .nav-item:has(.nx-right) { position: absolute; top: 12px; right: 28px; }
  .navbar .nav-item:has(> .nx-admbtn) { position: absolute; top: 70px; right: 28px; }
  .nx-right { display: flex; align-items: center; gap: 14px; } .nx-right .opts, .nx-right .tools { margin: 0; }
  .navbar .sbox, .navbar .obtn, .navbar .cbtn { width: 50px; height: 50px; flex: 0 0 50px; border-radius: 8px; }
  .navbar .obtn { padding: 0; } .navbar .obtn svg, .navbar .cbtn svg { width: 22px; height: 22px; flex: 0 0 22px; }
  .navbar .nx-right .ubox { margin: 0; }
  .navbar .nav-item:has(> .nx-admbtn) { height: auto; align-items: center; }
  html .navbar .nx-admbtn { height: 44px; padding: 0 22px !important; margin: 0 !important; font-size: 15px; align-self: center; line-height: 1; }
}
@media (min-width: 1200px) and (max-width: 1599px) {
  .navbar .nav-link { font-size: 14.5px !important; padding: 0 9px !important; } .navbar .nav-link::after { left: 9px !important; right: 9px !important; }
  .nx-tagline { font-size: 14px; } .nx-tagline i { width: 80px; }
}
html.signed .nx-admbtn2 { display: none; }
html[data-mode="light"] .navbar .nav-link { color: var(--navy) !important; }
html[data-mode="light"] .navbar .nav-link:hover, html[data-mode="light"] .navbar .nav-link.active { color: #b8862a !important; }
html[data-mode="light"] .nx-tagline { color: #b8862a; }
.nx-right { display: flex; align-items: center; gap: 10px; } .navbar .nx-right .ubox, .nx-right .opts { margin: 0; }
.navbar .nx-admbtn { padding: 0 14px !important; margin: 0 0 0 10px !important; align-self: center; }
@media (max-width: 1199px) { .navbar .navbar-nav { flex-wrap: nowrap; } .navbar .nx-admbtn { width: 46px; height: 46px; padding: 0 !important; justify-content: center; } .navbar .nx-admbtn span { display: none; } }
@media (min-width: 992px) and (max-width: 1199px) {
  .navbar .container-fluid { gap: 12px; padding: 0 14px; }
  .navbar .nav-link { padding: 0 6px !important; font-size: 12.5px !important; letter-spacing: .02em; } .navbar .nav-link::after { left: 6px !important; right: 6px !important; }
  .navbar .sbox, .navbar .cbtn, .navbar .obtn { width: 40px; height: 40px; flex: 0 0 40px; } .navbar .nx-admbtn { width: 40px; height: 40px; margin-left: 8px !important; }
  .nx-right { gap: 8px; } .nx-tag b { font-size: 17px; } .nx-tag small { font-size: 7px; }
}
/* Starter page: two ways in, USER (gold) and ADMIN (red) */
.home-band .hero .st-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 22px; justify-content: center; margin: 40px auto 0;
  border: 0; padding: 0; background: none; box-shadow: none; }
.st-door { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 26px 24px 22px; border-radius: 16px;
  background: rgba(11,26,58,.72); border: 1px solid rgba(212,164,64,.45); backdrop-filter: blur(6px); }
.st-adm { border-color: rgba(220,47,47,.6); }
.st-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(212,164,64,.14); color: #e9b54a; }
.st-adm .st-ic { background: rgba(220,47,47,.16); color: #FF6B6B; } .st-ic svg { width: 28px; height: 28px; }
.home-band .hero .st-door h3 { margin: 4px 0 0; font-size: 20px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.home-band .hero .st-door p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #AFC0DA; min-height: 40px; }
.st-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 46px; margin-top: 8px; border-radius: 8px;
  font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none !important;
  background: linear-gradient(135deg, #D4A440, #F0C766); color: #0A1530 !important; transition: transform .15s, filter .15s; }
.st-adm .st-btn { background: #DC2F2F; color: #fff !important; box-shadow: 0 4px 14px rgba(220,47,47,.3); }
.st-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.st-up { font-size: 12.5px; color: #8FB4FF !important; }
html[data-mode="light"] .st-door { background: rgba(255,255,255,.92); } html[data-mode="light"] .home-band .hero .st-door h3 { color: var(--navy); }
html[data-mode="light"] .home-band .hero .st-door p { color: #5B6B84; }
@media (max-width: 680px) { .home-band .hero .st-doors { grid-template-columns: 1fr; max-width: 320px; } }
/* Floating bar: INTERNAL USE ONLY, on every page */
.nx-ibar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 1060; pointer-events: none; }
.nx-ibar:not(:has(.nx-internal:not([style*="none"]))) { display: none; }
.nx-ibar .nx-internal { pointer-events: auto; padding: 8px 20px; border-radius: 999px; background: rgba(7,15,34,.88); border: 1px solid rgba(212,164,64,.7);
  color: #e9b54a; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; box-shadow: 0 8px 24px rgba(0,0,0,.35); backdrop-filter: blur(8px); }
html[data-mode="light"] .nx-ibar .nx-internal { background: rgba(255,255,255,.94); color: #8A6414; }
@media print { .nx-ibar { display: none; } }
.home-band .hero .st-doors { align-items: stretch; } .st-door .st-btn { margin-top: auto; }
html:not(.signed) .home-band .hero img.logo { width: 400px; margin-bottom: 18px; }
html:not(.signed) .home-band .hero { padding-top: 40px; }
html:not(.signed) .home-band .hero .vtp-name { margin-bottom: 14px; }
body { padding-bottom: 64px; }
.home-band .hero .st-upp { margin-top: 6px !important; } html.signed .st-upp { display: none !important; }

/* ======================================================================================================
   Standard design (VTPWEB_DESIGN_SPEC, CCPR model): colours, header, starter page, login box, floating bar
   ====================================================================================================== */
:root { --midnight: #070F22; --navy: #0B1A3A; --royal: #0A4DB8; --gold: #D4A440; --gold2: #F0D890; --gold-t: #E1BB64;
  --red: #D32F2F; --red-h: #E53935; --hdr-bg: rgba(5,12,28,.94); --hdr-line: #16294D; --radius: 14px; }
html:not([data-mode="light"]) body { background: var(--midnight); }
body { font-size: 14.5px; }
/* page titles: Georgia italic */
.nx-page h1, .page-head h1, .ph h1, .nx-title { font-family: Georgia, "Times New Roman", serif; font-style: italic; }
/* header: 114 px, logo 50 px, tagline, icons 48 x 46, menu 17 / 16 / 15 px weight 800, red ADMIN 40 px */
@media (min-width: 1200px) {
  .navbar { min-height: 114px; background: var(--hdr-bg) !important; border-bottom: 1px solid var(--hdr-line) !important; }
  .navbar .container-fluid { min-height: 114px; }
  .navbar-brand .brand img { height: 50px; }
  .nx-tagline { top: 22px; font-size: clamp(12px, 1vw, 17px); letter-spacing: .145em; font-weight: 700; color: var(--gold-t); }
  .navbar .navbar-collapse { padding-top: 50px; }
  .navbar .nav-link { height: 64px; font-size: 17px !important; font-weight: 800; letter-spacing: .04em; padding: 0 13px !important; }
  .navbar .nav-link::after { left: 13px !important; right: 13px !important; background: var(--gold) !important; }
  .navbar .navbar-nav > .nav-item:first-child .nav-link svg { width: 27px; height: 27px; color: var(--gold); }
  .navbar .nav-item:has(.nx-right) { top: 10px; } .nx-right { gap: 12px; }
  .navbar .sbox, .navbar .obtn, .navbar .cbtn { width: 48px; height: 46px; flex: 0 0 48px; border-radius: 9px; }
  .navbar .nav-item:has(> .nx-admbtn) { top: 64px; }
  html .navbar .nx-admbtn { height: 40px; padding: 0 20px !important; border-radius: 9px; }
}
@media (min-width: 1200px) and (max-width: 1559px) { .navbar .nav-link { font-size: 16px !important; } }
@media (min-width: 1200px) and (max-width: 1339px) { .navbar .nav-link { font-size: 15px !important; padding: 0 9px !important; } }
.nx-admbtn { background: var(--red) !important; font-family: Montserrat, Poppins, sans-serif; font-weight: 800; border-radius: 9px; }
.nx-admbtn:hover { background: var(--red-h) !important; }
html.admin .navbar .ubox { display: none; }   /* no user icon for the admin: the Admin page shows the account */
/* starter page: SIGN UP | SIGN IN | ADMIN */
.home-auth .ha-adm { background: var(--red); color: #fff !important; font-family: Montserrat, Poppins, sans-serif; font-weight: 800; margin-left: 6px; }
.home-auth .ha-adm:hover { background: var(--red-h); }
.home-auth .ha-sep2 { display: none; }
html:not(.signed) .home-band .hero img.logo { width: 460px; }
/* login box: compact navy card 400 px, gold top bar (USER) or red top bar (ADMIN), USER / ADMIN switch */
#vtp_login .lg-card, #vtp_login.adm-mode .lg-card { max-width: 400px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 26px 28px 20px;
  background: var(--navy) !important; border: 1px solid #22396A !important; border-top: 4px solid var(--gold) !important; border-radius: var(--radius); color: #fff !important; }
#vtp_login.adm-mode .lg-card { border-top-color: var(--red) !important; }
#vtp_login.adm-mode .lg-card p, #vtp_login.adm-mode .lg-card small, #vtp_login.adm-mode .lg-card label, #vtp_login.adm-mode #lg_sub { color: #C9D6EE !important; }
#vtp_login.adm-mode .lg-card input.form-control, #vtp_login.adm-mode .lg-card input[type=email], #vtp_login.adm-mode .lg-card input[type=password] { background: #0A1630 !important; border-color: #2A4475 !important; color: #fff !important; }
#vtp_login.adm-mode #lg_go { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
#vtp_login.adm-mode .lg-card .lg-x { border-color: #2A4475 !important; }
.lg-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 34px 16px 0; border: 1px solid #2A4475; border-radius: 10px; background: #0A1630; }
.lg-sw button { height: 36px; border: 0; border-radius: 7px; background: transparent; color: #9FB0CF; font: inherit; font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
#vtp_login:not(.adm-mode) .lg-sw-u { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #0A1530; }
#vtp_login.adm-mode .lg-sw-a { background: var(--red); color: #fff; font-family: Montserrat, Poppins, sans-serif; }
#lg_up:not([style*="none"]) ~ * .lg-sw, html.locked #vtp_login:has(#lg_up:not([style*="none"])) .lg-sw { display: none; }
#vtp_login .lg-logo { height: 44px; }
html[data-mode="light"] #vtp_login .lg-card { background: #fff !important; color: var(--navy) !important; border-color: #DCE3EE !important; }
html[data-mode="light"] .lg-sw { background: #F1F4FA; border-color: #DCE3EE; }
/* floating bar: gold label with stripes and a sentence, at the bottom of every page */
.nx-ibar { display: flex; align-items: center; gap: 0; left: 50%; bottom: 14px; border-radius: 999px; overflow: hidden; pointer-events: auto;
  background: rgba(7,15,34,.92); border: 1px solid rgba(212,164,64,.7); box-shadow: 0 8px 24px rgba(0,0,0,.35); backdrop-filter: blur(8px); max-width: calc(100vw - 24px); }
.nx-ibar .nx-internal { border: 0; border-radius: 0; box-shadow: none; padding: 8px 16px; color: #0A1530; font-size: 11.5px; letter-spacing: .18em;
  background: repeating-linear-gradient(135deg, var(--gold) 0 10px, #C69432 10px 20px); }
.nx-ibar-txt { padding: 8px 18px; color: #DDE6F5; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-mode="light"] .nx-ibar { background: rgba(255,255,255,.95); } html[data-mode="light"] .nx-ibar-txt { color: var(--navy); }
html[data-mode="light"] .nx-ibar .nx-internal { color: #0A1530; }
@media (max-width: 640px) { .nx-ibar-txt { display: none; } }
/* footer: one line */
.vtp-footer.nx-foot1 { padding: 18px 16px 74px; text-align: center; border-top: 1px solid var(--hdr-line); background: transparent; }
.vtp-footer.nx-foot1 small { color: #8FA2C0; font-size: 12.5px; }
/* panels: 14 px corners */
.nx-card, .card, .panel, .nx-panel { border-radius: var(--radius); }
/* login box, CCPR model: two columns */
#vtp_login .lg-card.lg-2c { max-width: 860px; width: 100%; display: grid; grid-template-columns: 300px 1fr; gap: 0; padding: 30px 32px 28px;
  border: 1px solid #22396A !important; border-top: 3px solid #2E7BFF !important; text-align: left; }
#vtp_login.adm-mode .lg-card.lg-2c { border-top-color: var(--red) !important; }
.lg-left { padding-right: 30px; border-right: 1px solid #22396A; display: flex; flex-direction: column; }
.lg-right { padding-left: 34px; padding-top: 4px; }
.lg-brand { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid #22396A; }
.lg-bname b { display: block; font-size: 30px; font-weight: 800; letter-spacing: .08em; line-height: 1; background: linear-gradient(180deg, #F3D58A, #D4A440 55%, #A87A22); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-bname span { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; letter-spacing: .26em; color: #6FA8FF; }
#vtp_login .lg-brand .lg-logo { height: 46px; margin: 0; }
.lg-kick { font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #6FA8FF; }
#vtp_login .lg-k-a, #vtp_login.adm-mode .lg-k-u { display: none; } #vtp_login.adm-mode .lg-k-a { display: block; color: #FF7A7A; }
#vtp_login .lg-card h2#lg_title { text-align: left; font-size: 26px; margin: 6px 0 6px; }
#vtp_login.adm-mode #lg_title::before { display: none !important; }
#vtp_login .lg-sub { text-align: left; font-size: 13.5px; color: #C9D6EE; margin: 0 0 14px; }
.lg-pts { list-style: none; padding: 0; margin: 4px 0 16px; } .lg-pts li { position: relative; padding-left: 20px; margin: 9px 0; font-size: 13.5px; color: #DDE6F5; }
.lg-pts li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 8px; height: 8px; background: #2E7BFF; transform: rotate(45deg); }
#vtp_login.adm-mode .lg-pts li::before { background: var(--red); }
#vtp_login .lg-alt { text-align: left; font-size: 13px; color: #DDE6F5; margin-top: auto; } #vtp_login .lg-note { display: block; text-align: left; margin-top: 10px; color: #8FA2C0; font-size: 11.5px; }
.lg-sw { margin: 0 34px 18px 0; }
.lg-right label, .lg-capl { font-size: 12px !important; font-weight: 700; letter-spacing: .16em !important; text-transform: uppercase; color: #C9D6EE !important; }
.lg-capl { margin: 2px 0 8px; }
.lg-cap { display: grid; grid-template-columns: 150px 36px 1fr; gap: 8px; align-items: stretch; margin-bottom: 14px; }
.lg-capq { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 8px; background: #F4F6FB; color: #0A1530;
  font-family: Georgia, serif; font-size: 24px; letter-spacing: .06em; user-select: none; }
.lg-capr { border: 1px solid #2A4475; border-radius: 8px; background: #0A1630; color: #e9b54a; font-size: 18px; cursor: pointer; }
#vtp_login .lg-capa { height: 44px; text-align: center; background: #0A1630; border: 1px solid #2A4475; color: #fff; border-radius: 8px; }
#vtp_login .lg-rem { display: flex !important; align-items: center; gap: 10px; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400; font-size: 13.5px !important; color: #DDE6F5 !important; margin-bottom: 18px; }
#vtp_login .lg-btn.lg-blue, #vtp_login.adm-mode #lg_go { width: 100%; height: 44px; border: 0; border-radius: 8px; background: #2E6FD8 !important; color: #fff !important;
  font-weight: 700; letter-spacing: .08em; font-size: 15px; }
#vtp_login .lg-btn.lg-blue:hover { background: #3B7FEA !important; }
#vtp_login.adm-mode #lg_go { background: var(--red) !important; } #vtp_login.adm-mode #lg_go:hover { background: var(--red-h) !important; }
#vtp_login .lg-right input.form-control { height: 44px; background: #0A1630; border: 1px solid #2A4475; color: #fff; border-radius: 8px; }
#vtp_login .lg-right input.form-control:focus { border-color: #2E7BFF; box-shadow: 0 0 0 2px rgba(46,123,255,.25); }
#vtp_login #lg_up h3 { font-size: 20px; margin: 0 0 4px; color: #fff; }
html[data-mode="light"] .lg-left { border-color: #DCE3EE; } html[data-mode="light"] .lg-brand { border-color: #DCE3EE; }
html[data-mode="light"] #vtp_login .lg-sub, html[data-mode="light"] .lg-pts li, html[data-mode="light"] #vtp_login .lg-alt, html[data-mode="light"] #vtp_login .lg-rem { color: #44546E !important; }
html[data-mode="light"] #vtp_login .lg-right input.form-control, html[data-mode="light"] #vtp_login .lg-capa, html[data-mode="light"] .lg-capr { background: #fff; color: var(--navy); border-color: #C9D3E3; }
html[data-mode="light"] .lg-right label, html[data-mode="light"] .lg-capl { color: #44546E !important; }
@media (max-width: 820px) { #vtp_login .lg-card.lg-2c { grid-template-columns: 1fr; padding: 24px 20px; } .lg-left { padding: 0 0 14px; border-right: 0; border-bottom: 1px solid #22396A; margin-bottom: 16px; }
  .lg-pts, #vtp_login .lg-left .lg-note { display: none; } .lg-right { padding: 0; } .lg-cap { grid-template-columns: 120px 36px 1fr; } }
/* menu chevrons, like CCPE */
.navbar .dropdown-toggle::after { border: 0 !important; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor !important; border-bottom: 2px solid currentColor !important;
  transform: rotate(45deg) translateY(-3px); vertical-align: middle; }
/* floating bar: full width at the bottom, stripes, gold label then the sentence (CCPR model) */
.nx-ibar { left: 0 !important; right: 0; bottom: 0 !important; transform: none !important; max-width: none; border-radius: 0 !important; border: 0 !important; border-top: 1px solid rgba(212,164,64,.35) !important;
  justify-content: center; gap: 18px; padding: 7px 16px; box-shadow: none;
  background: repeating-linear-gradient(135deg, rgba(7,15,34,.96) 0 14px, rgba(20,32,60,.96) 14px 28px) !important; }
.nx-ibar .nx-internal { border-radius: 5px !important; padding: 5px 14px; }
html[data-mode="light"] .nx-ibar { background: repeating-linear-gradient(135deg, rgba(255,255,255,.97) 0 14px, rgba(238,242,249,.97) 14px 28px) !important; }
.navbar .nav-link.dropdown-toggle::after { content: "" !important; display: inline-block !important; position: static !important; width: 8px !important; height: 8px !important;
  margin: 0 0 0 9px !important; background: none !important; border: 0 !important; border-right: 2.2px solid currentColor !important; border-bottom: 2.2px solid currentColor !important;
  transform: rotate(45deg) translateY(-4px) !important; opacity: .9; }
/* one sign-in for users and administrators (CCPR model): password eye, fingerprint button; the red ADMIN button shows
   signed out (it opens the same sign-in) and for administrators, never for other signed-in accounts */
html.signed:not(.admin) .navbar .nav-item:has(> .nx-admbtn), html.signed:not(.admin) .nx-admbtn { display: none !important; }
#vtp_login .lg-pwg { margin-bottom: 14px; }
.lg-pww { position: relative; }
#vtp_login .lg-pww input.form-control { padding-right: 46px; }
.lg-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 6px; background: transparent;
  color: #9FB0CF; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lg-eye svg, .lg-fp svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lg-eye:hover, .lg-eye.on { color: #fff; } .lg-eye.on svg { opacity: .7; }
#vtp_login .lg-btn.lg-fp { width: 100%; height: 42px; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #2A4475;
  border-radius: 8px; background: transparent !important; color: #DDE6F5 !important; font-weight: 700; letter-spacing: .06em; font-size: 14px; cursor: pointer; }
#vtp_login .lg-btn.lg-fp span { color: inherit !important; }
#vtp_login .lg-btn.lg-fp svg { color: #6FA8FF; width: 20px; height: 20px; }
#vtp_login .lg-btn.lg-fp:hover { border-color: #2E7BFF; background: rgba(46,123,255,.08) !important; color: #fff !important; }
.lg-fpmsg { font-size: 12.5px; color: #9FB0CF; margin-top: 8px; min-height: 0; } .lg-fpmsg:empty { display: none; }
#vtp_login .lg-right input.form-control::placeholder { color: #5E7194; }
html[data-mode="light"] #vtp_login .lg-btn.lg-fp { color: var(--navy); border-color: #C9D3E3; }
/* header rows placed as in CCPE (122 px): tagline centred at 40 px, menu at 90 px, icons from 14 px, ADMIN under them */
@media (min-width: 1200px) {
  .navbar, .navbar .container-fluid { min-height: 122px; }
  .nx-tagline { top: 29px; }
  .navbar .navbar-collapse { padding-top: 58px; }
  .navbar .nav-item:has(.nx-right) { top: 14px; }
  .navbar .nav-item:has(> .nx-admbtn) { top: 68px; }
  html .navbar .nx-admbtn { height: 42px; }
}
/* header: tagline and menu centred in the space between the logo block and the right block (icons + ADMIN);
   www/js/intranet.js measures both blocks (--nx-hl, --nx-hr) and sets the menu size that fits (--nx-mf, --nx-mp) */
@media (min-width: 1200px) {
  html.nx-fit .navbar .navbar-collapse { margin-right: var(--nx-hr); }
  html.nx-fit .navbar .navbar-nav { justify-content: center; flex-wrap: nowrap; }
  html.nx-fit .nx-tagline { left: var(--nx-hl); right: var(--nx-hr); transform: none; justify-content: center; overflow: hidden; }
  html.nx-fit .navbar .navbar-nav .nav-link { font-size: var(--nx-mf) !important; padding: 0 var(--nx-mp) !important; }
  html.nx-fit .navbar .navbar-nav .nav-link::after { left: var(--nx-mp) !important; right: var(--nx-mp) !important; }
}
@media (max-width: 1199px) { .navbar .navbar-nav { padding-left: 0 !important; padding-right: 0 !important; } }
/* Employee file (page Person): header card, then one card per section; edit form in the same cards */
a.nx-plink { color: inherit; font-weight: 700; text-decoration: none; border-bottom: 1px dashed rgba(212,164,64,.6); cursor: pointer; }
a.nx-plink:hover { color: var(--gold-t, #E1BB64); border-bottom-color: currentColor; }
.ps-head { display: flex; align-items: center; gap: 26px; padding: 26px 28px; margin-bottom: 18px; flex-wrap: wrap; }
.ps-head .nx-av.xl { box-shadow: 0 0 0 4px rgba(212,164,64,.35); }
.ps-hid { flex: 1 1 320px; min-width: 0; }
.ps-hid h2 { margin: 0 0 4px; font-size: 28px; font-weight: 800; }
.ps-job { margin: 0 0 10px; color: #C9D6EE; font-size: 15.5px; }
.ps-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ps-contact { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14.5px; } .ps-contact a { color: #6FA8FF; }
.ps-hbtn { display: flex; gap: 10px; flex-wrap: wrap; align-self: flex-start; }
.ps-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; margin-top: 18px; }
.ps-sec { padding: 20px 22px; } .ps-sec h3 { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-t, #E1BB64); margin: 0 0 12px; font-weight: 800; }
.ps-rows { display: grid; gap: 0; }
.ps-row { display: grid; grid-template-columns: 46% 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 14px; }
.ps-row:last-child { border-bottom: 0; } .ps-row span { color: #9FB0CF; } .ps-row b { font-weight: 600; overflow-wrap: anywhere; white-space: pre-line; }
.ps-wide2 { grid-column: 1 / -1; }
.ps-tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .ps-tbl th { text-align: left; font-size: 11.5px; letter-spacing: .14em; color: #9FB0CF; padding: 6px 8px; }
.ps-tbl td { padding: 8px; border-top: 1px solid rgba(255,255,255,.07); }
.ps-form { display: grid; gap: 18px; margin-top: 18px; }
.ps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 18px; }
.ps-grid .ps-wide { grid-column: 1 / -1; }
.ps-ro { opacity: .55; pointer-events: none; }
.ps-save { position: sticky; bottom: 56px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 14px 0; z-index: 5; }
html[data-mode="light"] .ps-job, html[data-mode="light"] .ps-row span { color: #44546E; }
html[data-mode="light"] .ps-row { border-color: #E3E8F1; }

/* ==== Sign-in box as in CCPI (2026-10-21): navy box with a blue top line, blue labels, Password | Fingerprint switch ==== */
#vtp_login .lg-card.lg-2c, html[data-mode="light"] #vtp_login .lg-card.lg-2c { background: #0a1a3c !important; color: #D5DEEC !important;
  border: 1px solid #1d3463 !important; border-top: 3px solid #2f6fd8 !important; border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.55);
  max-width: 900px; grid-template-columns: 330px 1fr; }
#vtp_login .lg-left, html[data-mode="light"] .lg-left { border-right-color: #1d3463; }
#vtp_login .lg-brand, html[data-mode="light"] #vtp_login .lg-brand { border-bottom-color: #1d3463; }
#vtp_login .lg-kick { color: #7fa9f2; font-size: 11.5px; letter-spacing: .25em; }
#vtp_login .lg-card h2#lg_title { color: #fff !important; font-size: 24px; }
#vtp_login .lg-sub, html[data-mode="light"] #vtp_login .lg-sub { color: #aab6cc !important; font-size: 13px; }
#vtp_login .lg-pts { margin-top: 22px; } #vtp_login .lg-pts li, html[data-mode="light"] #vtp_login .lg-pts li { color: #d6deec !important; font-size: 13px; }
#vtp_login .lg-pts li::before { content: "\25C6"; background: none; transform: none; width: auto; height: auto; left: 0; top: 0; color: #2f6fd8; font-size: 11px; }
#vtp_login .lg-alt, html[data-mode="light"] #vtp_login .lg-alt { color: #aab6cc !important; } #vtp_login .lg-alt a { color: #7fa9f2; font-weight: 700; }
#vtp_login .lg-right label, #vtp_login .lg-capl, html[data-mode="light"] #vtp_login .lg-right label, html[data-mode="light"] #vtp_login .lg-capl {
  color: #9cbcf5 !important; font-size: 11px !important; letter-spacing: .16em !important; }
#vtp_login .lg-right input.form-control, #vtp_login .lg-capa, #vtp_login .lg-capr,
html[data-mode="light"] #vtp_login .lg-right input.form-control, html[data-mode="light"] #vtp_login .lg-capa, html[data-mode="light"] #vtp_login .lg-capr {
  background: #050c1c !important; border: 1px solid #1d3463 !important; color: #fff !important; height: 42px; }
#vtp_login .lg-capr { color: #e1bb64 !important; }
#vtp_login .lg-right input.form-control:focus, #vtp_login .lg-capa:focus { border-color: #5b8fe8 !important; box-shadow: none; }
#vtp_login .lg-rem, html[data-mode="light"] #vtp_login .lg-rem { color: #c9d3e6 !important; font-size: 13px !important; }
#vtp_login .lg-rem input { accent-color: #2f6fd8; }
#vtp_login .lg-btn.lg-blue { height: 42px; background: #2f6fd8 !important; font-family: Montserrat, Poppins, sans-serif; letter-spacing: .08em; }
#vtp_login .lg-btn.lg-blue:hover { background: #3d7ee6 !important; }
#vtp_login .lg-x { border: 0 !important; background: none !important; color: #8394b3 !important; font-size: 24px; }
#vtp_login .lg-x:hover { color: #fff !important; }
#vtp_login .lg-how { display: inline-flex; gap: 0; margin: 0 0 14px; border: 1px solid #2B4374; border-radius: 8px; padding: 3px; }
#vtp_login .lg-how button { background: transparent; border: 0; color: #9cbcf5; font: 700 11px Montserrat, Poppins, sans-serif; letter-spacing: .12em;
  text-transform: uppercase; padding: 6px 14px; border-radius: 6px; cursor: pointer; }
#vtp_login .lg-how button.on { background: #2f6fd8; color: #fff; }
/* the fingerprint button only on the Fingerprint tab; there it stands alone, big and blue */
html:not(.lg-fpm) #vtp_login .lg-btn.lg-fp { display: none !important; }
html.lg-fpm #vtp_login #lg_in .lg-urow, html.lg-fpm #vtp_login #lg_in .lg-pwg, html.lg-fpm #vtp_login #lg_in .lg-capl, html.lg-fpm #vtp_login #lg_in .lg-cap,
html.lg-fpm #vtp_login #lg_in .lg-rem, html.lg-fpm #vtp_login #lg_in #lg_go { display: none !important; }
html.lg-fpm #vtp_login .lg-btn.lg-fp { height: 64px; margin-top: 18px; font-size: 15px; background: #2f6fd8 !important; border-color: #2f6fd8 !important; color: #fff !important; }
html.lg-fpm #vtp_login .lg-btn.lg-fp svg { width: 28px; height: 28px; color: #fff; }
html.lg-fpm #vtp_login .lg-btn.lg-fp:hover { background: #3d7ee6 !important; }
@media (max-width: 820px) { #vtp_login .lg-card.lg-2c, html[data-mode="light"] #vtp_login .lg-card.lg-2c { grid-template-columns: 1fr; max-width: 420px; } }
#vtp_login .lg-right label.lg-rem, html[data-mode="light"] #vtp_login .lg-right label.lg-rem { letter-spacing: 0 !important; text-transform: none; font-size: 13px !important; font-weight: 500; color: #c9d3e6 !important; }
html[data-mode="light"] #vtp_login .lg-capr { color: #e1bb64 !important; }
/* version of this build, right end of the floating bar */
.nx-ibar-ver { padding: 2px 10px; border-left: 1px solid rgba(212,164,64,.45); color: #E1BB64; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
html[data-mode="light"] .nx-ibar-ver { color: #8A6414; }
/* Pattern sign-in (as in CCPI): the 3x3 pad replaces the password on the Pattern tab */
#vtp_login .lg-patrow { display: none; margin-bottom: 12px; }
html.lg-pat #vtp_login .lg-patrow { display: block; } html.lg-pat #vtp_login #lg_in .lg-pwg { display: none !important; }
.pat-pad { width: 190px; height: 190px; margin: 6px 0 4px; background: #050c1c; border: 1px solid #1d3463; border-radius: 12px; touch-action: none; user-select: none; -webkit-user-select: none; }
.pat-pad svg { width: 100%; height: 100%; display: block; cursor: pointer; }
.pat-dot { fill: #1d3463; stroke: #5b8fe8; stroke-width: 2; transition: fill .1s, r .1s; }
.pat-dot.on { fill: #2f6fd8; stroke: #cfe0ff; r: 16px; }
.pat-line { fill: none; stroke: #5b8fe8; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.pat-pad.ok .pat-line, .pat-pad.ok .pat-dot.on { stroke: #34D399; } .pat-pad.ok .pat-dot.on { fill: #10B981; }
.pat-pad.bad .pat-line, .pat-pad.bad .pat-dot.on { stroke: #F87171; } .pat-pad.bad .pat-dot.on { fill: #DC2626; }
.pat-hint { display: block; font-size: 11.5px; color: #9DB0CC; }
.lg-patset { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #e1bb64; text-decoration: none; } .lg-patset:hover { text-decoration: underline; }
.pat-pf { width: 220px; height: 220px; } .pf-patbtns { margin: 8px 0 4px; }
.pf-pat-st { display: inline-block; padding: 4px 12px; border: 1px solid #2B4374; border-radius: 999px; font-size: 12px; font-weight: 600; color: #9DB0CC; margin-bottom: 6px; }
.pf-pat-st.on { border-color: #10B981; color: #34D399; }
.lg-fpmsg.ok { color: #34D399; }
html[data-mode="light"] .pat-pf { background: #F4F6FB; border-color: #C9D4E6; } html[data-mode="light"] .pat-pf .pat-dot { fill: #DCE5F3; }
/* Shiny apps: "Open in a new tab" is a real button (filled blue), on every app card and above an embedded app */
.nx-openbtn, .hcard .more.nx-openbtn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; align-self: flex-start;
  margin-top: 12px; padding: 9px 18px; border-radius: 8px; background: #2f6fd8; border: 1px solid #2f6fd8; color: #fff !important;
  font-family: Montserrat, Poppins, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(47,111,216,.28); transition: background .15s, transform .15s; }
.hcard:hover .more.nx-openbtn, .nx-openbtn:hover { background: #3d7ee6; border-color: #3d7ee6; transform: translateY(-1px); }
.nx-apphead .nx-openbtn { margin: 0 0 0 auto; padding: 7px 14px; }
/* header (2026-10-21): tagline and menu closer, read as one block: the tagline sits low in its row, the menu high in its row;
   logo height from Administration > CMS Visual (--nx-logo-h, set by www/js/intranet.js) */
@media (min-width: 1200px) {
  .nx-tagline { top: 40px; }
  .navbar .navbar-collapse { padding-top: 52px; }
  .navbar-brand .brand img { height: var(--nx-logo-h, 50px) !important; width: auto; }
}
/* Administration: Scan media, always in view above the tabs */
.adm-scan { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 20px !important; margin-bottom: 16px; border-left: 3px solid var(--gold); }
.adm-scan-t { display: flex; align-items: center; gap: 14px; } .adm-scan-t svg { width: 28px; height: 28px; color: var(--gold); flex: none; }
.adm-scan-t b { display: block; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; } .adm-scan-t span { font-size: 13px; color: #9FB0CF; }
.adm-scan-b { white-space: nowrap; flex: none; }
.nx-scan-t { width: 100%; border-collapse: collapse; margin-bottom: 12px; } .nx-scan-t th, .nx-scan-t td { padding: 8px 10px; border-bottom: 1px solid rgba(127,148,190,.25); text-align: right; }
.nx-scan-t th:first-child, .nx-scan-t td:first-child { text-align: left; }
@media (max-width: 760px) { .adm-scan { flex-direction: column; align-items: stretch; } }
.adm-scan-bs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* Folder filter of Documents, Shared, Videos, Gallery (media subfolders) */
.nx-tg { display: inline-block; vertical-align: middle; }
.nx-tg .form-group { margin: 0; }
.nx-tg .selectize-input, .nx-tg select { min-height: 38px; border-radius: 9px; }
/* Gallery enlarged view: links to the original picture */
.nx-lb-orig { margin-left: 10px; padding: 3px 10px; border: 1px solid currentColor; border-radius: 7px; font-size: 13px; color: #F5C451 !important; text-decoration: none; }
/* Lists: room for the sort arrows, no wrapping of short values; HR records: picture + LAST First */
table.dataTable.mk-dt thead > tr > th.sorting, table.dataTable.mk-dt thead > tr > th.sorting_asc, table.dataTable.mk-dt thead > tr > th.sorting_desc { padding-right: 26px !important; white-space: nowrap; }
.nx-empn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.nx-empn .nx-av.sm { flex: 0 0 30px; width: 30px; height: 30px; font-size: 11px; }
.nx-empn .nx-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.nx-empn b { font-weight: 700; letter-spacing: .02em; }
#emp-tbl td { white-space: nowrap; }
.mk-tools .dt-buttons { display: inline-flex; margin-right: 10px; }
.mk-tools .dt-button { height: 38px; padding: 0 14px; border-radius: 9px; border: 1px solid #2A4475 !important; background: #0B1A3A !important; color: inherit !important; font-size: 14px; }
html[data-mode="light"] .mk-tools .dt-button { background: #fff !important; border-color: #C9D4E6 !important; }
div.dt-button-collection { background: #0F2148 !important; border: 1px solid #2A4475 !important; border-radius: 10px; padding: 6px !important; }
div.dt-button-collection .dt-button { display: block; width: 100%; text-align: left; margin: 2px 0; background: transparent !important; color: #C8D3EA !important; border: 0 !important; }
div.dt-button-collection .dt-button.dt-button-active, div.dt-button-collection .dt-button.active { color: #F5C451 !important; font-weight: 700; }
html[data-mode="light"] div.dt-button-collection { background: #fff !important; border-color: #C9D4E6 !important; }
html[data-mode="light"] div.dt-button-collection .dt-button { color: #1E2A44 !important; }
/* Shiny apps: opened from the apps icon of the header (and Home), no longer in the menu bar */
.navbar .nav-link[data-value="Shiny apps"], .navbar .nav-item:has(> .nav-link[data-value="Shiny apps"]) { display: none !important; }
.mk-tools .buttons-colvis { height: 38px; padding: 0 16px; border-radius: 9px !important; border: 1px solid #2A4475 !important; background: #0B1A3A !important;
  color: #E8EBF7 !important; font-size: 14px; font-weight: 600; text-decoration: none !important; box-shadow: none !important; }
.mk-tools .buttons-colvis span { text-decoration: none !important; }
.mk-tools .buttons-colvis:hover { border-color: #D4A440 !important; color: #F5C451 !important; }
html[data-mode="light"] .mk-tools .buttons-colvis { background: #fff !important; border-color: #C9D4E6 !important; color: #1E2A44 !important; }
.dt-button-collection .dropdown-item, .dt-button-collection a { color: #C8D3EA !important; text-decoration: none !important; }
.dt-button-collection .dropdown-item.active, .dt-button-collection a.active { color: #F5C451 !important; background: rgba(212,164,64,.12) !important; font-weight: 700; }
/* My room */
.nx-myroom { display: inline-flex; align-items: center; gap: 7px; }
.nx-myroom svg { width: 17px; height: 17px; }
.mr-head { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; border-left: 4px solid #D4A440 !important; }
.mr-head .nx-av.mr-av { flex: 0 0 96px; width: 96px; height: 96px; font-size: 32px; }
.mr-head .nx-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mr-who { flex: 1 1 360px; min-width: 0; }
.mr-who h2 { margin: 0; font-family: 'Playfair Display', serif; font-style: italic; font-size: 30px; }
.mr-pos { margin: 2px 0 10px; color: #F5C451; font-weight: 600; letter-spacing: .04em; }
.mr-info { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
.mr-info em { display: block; font-style: normal; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.mr-acts { display: flex; flex-direction: column; gap: 8px; min-width: 190px; }
.mr-acts .btn { width: 100%; }
.mr-grid { margin-top: 18px; }
.mr-card .mk-ctop { margin-bottom: 8px; }
.mr-list { display: flex; flex-direction: column; }
.mr-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 6px; border-bottom: 1px solid rgba(255,255,255,.07);
  color: inherit !important; text-decoration: none !important; border-radius: 8px; }
.mr-row:hover { background: rgba(212,164,64,.08); }
.mr-row b { display: block; font-weight: 600; }
.mr-row small { opacity: .7; }
.mr-row.late b { color: #F87171; }
.mr-r { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; font-size: 13px; }
.mr-r .nx-tbar { width: 90px; }
.mr-apps { display: flex; flex-wrap: wrap; gap: 10px; }
.mr-app { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid #2A4475; border-radius: 10px; color: inherit !important; text-decoration: none !important; }
.mr-app svg { width: 16px; height: 16px; color: #F5C451; }
.mr-app:hover { border-color: #D4A440; }
html[data-mode="light"] .mr-row { border-bottom-color: #E3E8F2; }
html[data-mode="light"] .mr-app { border-color: #C9D4E6; }
@media (max-width: 760px) { .mr-acts { flex-direction: row; flex-wrap: wrap; min-width: 0; } .mr-acts .btn { width: auto; } }
.mr-acts .btn-gold, .mr-acts .btn-gold:hover { color: #0A1530 !important; text-decoration: none !important; font-weight: 700; }
/* Scan media result: compact, always fits on screen */
.modal-dialog:has(.nx-scan) { max-width: 520px; }
.modal-dialog:has(.nx-scan) .modal-content { max-height: calc(100vh - 140px); }
.modal-dialog:has(.nx-scan) .modal-body { overflow-y: auto; padding-top: 4px; }
.modal-dialog:has(.nx-scan) .modal-header { padding-bottom: 6px; }
.nx-scan-head { margin: 0 0 6px; font-size: 13.5px; opacity: .85; }
.nx-scan-sum { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: rgba(127,148,190,.12); font-weight: 600; }
.nx-scan-sum.ok { background: rgba(52,211,153,.14); color: #6EE7B7; }
.nx-scan-sum.warn { background: rgba(245,196,81,.14); color: #F5C451; }
.nx-scan-t th, .nx-scan-t td { padding: 6px 8px !important; font-size: 14px; white-space: nowrap; }
.nx-scan-t tr.zero td { opacity: .38; }
.nx-scan details { margin-top: 8px; font-size: 13.5px; }
.nx-scan summary { cursor: pointer; font-weight: 600; color: #F5C451; }
.nx-scan-um ul { margin: 6px 0; padding-left: 18px; }
.nx-scan small { display: block; opacity: .75; line-height: 1.45; margin-top: 4px; }
/* Every pop-up above the header and the bottom bar, centred in the screen, its content scrolling inside so the
   buttons always show */
.modal { z-index: 10050 !important; }
.modal-backdrop { z-index: 10040 !important; }
.modal-dialog { margin: 24px auto !important; min-height: calc(100vh - 48px); display: flex; align-items: center; }
.modal-dialog > .modal-content { width: 100%; max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.modal-dialog > .modal-content > .modal-body { overflow-y: auto; }
.modal-dialog > .modal-content > .modal-header, .modal-dialog > .modal-content > .modal-footer { flex: 0 0 auto; }
.modal-dialog:has(.nx-scan) .modal-content { max-height: calc(100vh - 48px); }
/* My profile > Sign-in methods */
.pf-methods { margin-top: 22px; }
.pf-mhelp { margin: 4px 0 14px; }
.pf-mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pf-m { border: 1px solid rgba(157,176,204,.18); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.pf-m h4 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 16px; font-weight: 700; }
.pf-m h4 svg { width: 20px; height: 20px; color: #F5C451; }
.pf-m .nx-help { margin: 0; }
.pf-m .pf-patbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-devs { margin: 2px 0 0; padding-left: 18px; font-size: 12.5px; opacity: .8; }
@media (max-width: 1000px) { .pf-mgrid { grid-template-columns: 1fr; } }
.lg-fpset { display: block; margin-top: 8px; text-align: center; }
.adm-meth { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.adm-meth span { font-size: 11px; padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(157,176,204,.25); opacity: .45; white-space: nowrap; }
.adm-meth span.on { opacity: 1; border-color: rgba(52,211,153,.5); color: #6EE7B7; }
.adm-meth .adm-b.mx { min-width: 0; padding: 0 6px; height: 20px; line-height: 18px; font-size: 13px; margin-left: -2px; }
html:not(.lg-fpm) .lg-fpset { display: none !important; }
.adm-meth { min-width: 250px; flex-wrap: nowrap; }
.pf-m .pf-pat-st, .pf-m > .btn { align-self: flex-start; }

/* start page like the CCPR / CCPE start page (2026-10-30): on a screen held across (PC, tablet in landscape) the start page is the
   CCPE stage, design size 1520 x 696 scaled to fit the screen (--k, set by js/intranet.js): background with the big NXW logo
   (img/starter_bg.jpg, the CCPE bg.jpg), gold name line at the top, headline, text and the button box at the CCPE places and sizes.
   Phones and tablets held upright (html.st-portrait) keep the stacked start page. Same as NXWWEB, CCPS, CCPI and VTP. Why: user "APPS OK = CCPR, CCPE, NXW, CCPS, CCPI, VTP, APPS NOT OK = INTRANET". */
html:not(.signed):not(.st-portrait), html:not(.signed):not(.st-portrait) body { overflow: hidden !important; background: #060f22 !important; }
html:not(.signed):not(.st-portrait) .home-band { position: fixed !important; inset: 0 !important; min-height: 0 !important; padding: 0 !important; display: block !important; background: radial-gradient(ellipse at 50% 55%, #0c224b 0%, #08142d 55%, #050a17 100%) !important; }
html:not(.signed):not(.st-portrait) .home-band::before { content: "" !important; position: absolute !important; left: calc(50vw - 760px * var(--k, .84)) !important; top: calc(50vh - 348px * var(--k, .84)) !important;
  width: calc(1520px * var(--k, .84)) !important; height: calc(696px * var(--k, .84)) !important; background: url("../img/starter_bg.jpg") center/100% 100% no-repeat !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 98.5%, transparent 100%), linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%) !important;
  -webkit-mask-composite: source-in !important; mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 98.5%, transparent 100%), linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%) !important;
  mask-composite: intersect !important; pointer-events: none !important; }
html:not(.signed):not(.st-portrait) .home-band .hero { position: static !important; max-width: none !important; padding: 0 !important; }
:where(html:not(.signed):not(.st-portrait) .home-band .hero) > :where(:not(.st-tools)) { position: absolute !important; left: 0 !important; right: 0 !important; margin: 0 !important; }
html:not(.signed):not(.st-portrait) .home-band .hero img.logo { display: none !important; }   /* the logo is in the background, as on CCPE */
html:not(.signed):not(.st-portrait) .vtp-name { top: calc(50vh + (84.8px - 348px) * var(--k, .84)) !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 0 !important; }
html:not(.signed):not(.st-portrait) .vtp-name span { font-size: calc(20.5px * var(--k, .84)) !important; font-weight: 700 !important; letter-spacing: .145em !important; line-height: 1 !important; color: #e1bb64 !important;
  padding: 0 !important; margin: 0 calc(26px * var(--k, .84) - .145em) 0 calc(26px * var(--k, .84)) !important; }
html:not(.signed):not(.st-portrait) .vtp-name i { width: calc(110px * var(--k, .84)) !important; height: calc(1.6px * var(--k, .84)) !important; flex: none !important; }
html:not(.signed):not(.st-portrait) .vtp-name i::after { width: calc(7px * var(--k, .84)) !important; height: calc(7px * var(--k, .84)) !important; top: 50% !important; margin-top: calc(-3.5px * var(--k, .84)) !important; }
html:not(.signed):not(.st-portrait) .home-band .hero h1 { top: calc(50vh + (437.4px - 348px) * var(--k, .84)) !important; width: auto !important; max-width: none !important; white-space: nowrap !important;
  font-size: calc(44.7px * var(--k, .84)) !important; font-weight: 700 !important; letter-spacing: -.02em !important; line-height: 1.2 !important; color: #fff !important; }
html:not(.signed):not(.st-portrait) .home-band .hero h1 b { color: #d4a440 !important; font-weight: 700 !important; }
html:not(.signed):not(.st-portrait) .home-band .hero h1 + p { top: calc(50vh + (503.6px - 348px) * var(--k, .84)) !important; left: calc(50vw - 550px * var(--k, .84)) !important; right: auto !important; transform: none !important;
  width: calc(1100px * var(--k, .84)) !important; max-width: none !important; font-size: calc(17px * var(--k, .84)) !important; line-height: calc(24.8px * var(--k, .84)) !important; font-weight: 300 !important; color: #d5deec !important; }
/* the button box: the CCPE pill (SIGN UP | SIGN IN), SIGN IN gold on the right as on CCPE */
html:not(.signed):not(.st-portrait) .home-auth { top: calc(50vh + (582.5px - 348px) * var(--k, .84)) !important; left: calc(50vw - 158px * var(--k, .84) - 1px) !important; right: auto !important; transform: none !important; width: max-content !important;
  display: flex !important; align-items: center !important; gap: calc(6px * var(--k, .84)) !important; padding: calc(4px * var(--k, .84)) !important; border: 1px solid rgba(212,164,64,.35) !important;
  border-radius: calc(12px * var(--k, .84)) !important; background: rgba(5,12,28,.65) !important; backdrop-filter: none !important; }
html:not(.signed):not(.st-portrait) .home-auth .ha-div, html:not(.signed):not(.st-portrait) .home-auth .ha-sep { display: none !important; }
html:not(.signed):not(.st-portrait) .home-auth .ha-up { order: 1 !important; } html:not(.signed):not(.st-portrait) .home-auth .ha-in { order: 2 !important; }
html:not(.signed):not(.st-portrait) .ha-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; min-width: 0 !important;
  width: calc(150px * var(--k, .84)) !important; height: calc(38px * var(--k, .84)) !important; padding: 0 !important; border-radius: calc(8px * var(--k, .84)) !important; border: 0 !important;
  font-size: calc(13px * var(--k, .84)) !important; font-weight: 800 !important; letter-spacing: .2em !important; line-height: 1 !important; }
html:not(.signed):not(.st-portrait) .ha-up { background: transparent !important; color: #fff !important; }
html:not(.signed):not(.st-portrait) .ha-up:hover { color: #e8c979 !important; }
html:not(.signed):not(.st-portrait) .ha-in { background: linear-gradient(180deg, #e8c979, #d4a440) !important; color: #0a1a3c !important; }
html:not(.signed):not(.st-portrait) .hero p.home-auth-p { top: calc(50vh + (640px - 348px) * var(--k, .84)) !important; left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; text-align: center !important; font-size: calc(13.5px * var(--k, .84)) !important; white-space: nowrap !important; color: #9DB0CC !important; }

/* start page like the CCPR / CCPE start page, step 2 (2026-10-30): phones and tablets held upright (html.st-portrait) get the
   stacked CCPE start page: name line without the gold rules, the NXW logo (img/starter_logo.png, the CCPE nxw-logo.png), headline,
   text and the CCPE button pill under it. Same as NXWWEB and CCPS. */
.st-logo-m { display: none; }
html:not(.signed).st-portrait .home-band { min-height: 100vh !important; min-height: 100svh !important; padding: 40px 18px !important; box-sizing: border-box !important; background: #08142d !important; display: block !important; }
html:not(.signed).st-portrait .home-band .hero { padding: 0 !important; }
html:not(.signed).st-portrait .vtp-name { margin: 0 !important; gap: 0 !important; justify-content: center !important; }
html:not(.signed).st-portrait .vtp-name i { display: none !important; }
html:not(.signed).st-portrait .vtp-name span { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .25em !important; padding-left: .25em !important; line-height: 1.4 !important; color: #e1bb64 !important; }
html:not(.signed).st-portrait .home-band .hero img.logo { display: none !important; }
html:not(.signed).st-portrait .st-logo-m { display: block !important; width: 86% !important; max-width: 420px !important; margin: 28px auto 0 !important; }
html:not(.signed).st-portrait .home-band .hero h1 { font-size: 30px !important; font-weight: 700 !important; letter-spacing: -.02em !important; line-height: 1.2 !important; white-space: normal !important; width: auto !important; margin: 36px auto 0 !important; color: #fff !important; }
html:not(.signed).st-portrait .home-band .hero h1 b { color: #d4a440 !important; font-weight: 700 !important; }
html:not(.signed).st-portrait .home-band .hero h1 + p { font-size: 15px !important; line-height: 1.5 !important; font-weight: 300 !important; margin: 12px auto 0 !important; color: #d5deec !important; }
html:not(.signed).st-portrait .home-auth { display: flex !important; width: max-content !important; max-width: 100% !important; box-sizing: border-box !important; margin: 19.5px auto 0 !important; gap: 6px !important; padding: 4px !important;
  border: 1px solid rgba(212,164,64,.35) !important; border-radius: 12px !important; background: rgba(5,12,28,.65) !important; backdrop-filter: none !important; }
html:not(.signed).st-portrait .home-auth .ha-div, html:not(.signed).st-portrait .home-auth .ha-sep { display: none !important; }
html:not(.signed).st-portrait .home-auth .ha-up { order: 1 !important; } html:not(.signed).st-portrait .home-auth .ha-in { order: 2 !important; }
html:not(.signed).st-portrait .ha-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; flex: 0 1 150px !important; min-width: 0 !important; width: 150px !important;
  height: 38px !important; padding: 0 6px !important; border-radius: 8px !important; border: 0 !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .2em !important; line-height: 1 !important; white-space: nowrap !important; }
html:not(.signed).st-portrait .ha-up { background: transparent !important; color: #fff !important; }
html:not(.signed).st-portrait .ha-in { background: linear-gradient(180deg, #e8c979, #d4a440) !important; color: #0a1a3c !important; }
html:not(.signed).st-portrait .hero p.home-auth-p { font-size: 13px !important; margin: 14px auto 0 !important; white-space: normal !important; color: #9DB0CC !important; }
@media (max-width: 520px) { html:not(.signed).st-portrait .ha-btn { font-size: 12px !important; letter-spacing: .12em !important; } }
@media (max-width: 699px) { html:not(.signed).st-portrait .home-band { padding-top: 72px !important; } }   /* phones: the name line under the Share and Language buttons */
@media (min-width: 700px) {
  html:not(.signed).st-portrait .home-band { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; padding: 60px 48px 110px !important; }
  html:not(.signed).st-portrait .vtp-name span { font-size: 17px !important; }
  html:not(.signed).st-portrait .st-logo-m { width: 70% !important; max-width: 540px !important; margin-top: 40px !important; }
  html:not(.signed).st-portrait .home-band .hero h1 { font-size: 46px !important; margin-top: 44px !important; }
  html:not(.signed).st-portrait .home-band .hero h1 + p { font-size: 19px !important; max-width: 660px !important; margin-top: 16px !important; }
  html:not(.signed).st-portrait .home-auth { margin-top: 36px !important; }
}

html:not(.signed):not(.st-portrait) .home-band .hero > .assets, html:not(.signed) .home-band .hero > .home-user { display: none !important; }
html:not(.signed):not(.st-portrait) .home-band .hero > .vtp-name, html:not(.signed):not(.st-portrait) .home-band .hero > h1,
html:not(.signed):not(.st-portrait) .home-band .hero > p, html:not(.signed):not(.st-portrait) .home-band .hero > .home-auth { margin: 0 !important; }   /* the 2026-10-29 margins would move the blocks */

/* INTRANET start page (signed out), as CCPE: no menu bar, no footer; only the SHARE button at the top right (INTRANET has no
   language menu). The share menu itself is placed by nxw/nxw_share.js next to the button. */
html:not(.signed) nav.navbar.navbar { display: block !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: visible !important; }
html:not(.signed) nav.navbar [data-nxw-share] { visibility: visible !important; position: fixed !important; top: 18px !important; right: 22px !important; z-index: 1050 !important;
  width: 46px !important; height: 46px !important; margin: 0 !important; border-radius: 8px !important; border: 1px solid rgba(255,255,255,.3) !important; background: transparent !important; color: #fff !important; }
@media (max-width: 699px) { html:not(.signed) nav.navbar [data-nxw-share] { top: 14px !important; right: 16px !important; width: 40px !important; height: 40px !important; } }
html:not(.signed) footer.vtp-footer { display: none !important; }
html:not(.signed) body { padding-bottom: 0 !important; }
html:not(.signed) .home-band .hero > .st-doors { display: none !important; }

/* INTRANET start page: language button EN VN FR CN JP next to Share (js/intranet.js, 2026-10-30), same size as on CCPI:
   Language 76 x 46 at the corner, Share 46 x 46 on its left, 10 px apart. Signed in: no language button. Why: user "INTRANET, MISS LANGUE ICO". */
.nx-st-lang { display: none; }
html:not(.signed) .nx-st-lang { display: block; position: fixed; top: 18px; right: 22px; z-index: 1050; }
html:not(.signed) nav.navbar [data-nxw-share] { right: 108px !important; }
.nx-st-lbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 76px; height: 46px; padding: 0; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; cursor: pointer; }
.nx-st-lbtn svg { width: 18px; height: 18px; } #nx_st_lang_lbl { font: 800 14px/1 "Poppins", "Segoe UI", Arial, sans-serif; letter-spacing: .06em; color: #e9b54a; }
.nx-st-lbtn:hover, .nx-st-lang.open .nx-st-lbtn { border-color: #e9b54a; color: #e9b54a; }
.nx-st-lmenu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px; padding: 6px; border-radius: 12px; background: #0b1a3d;
  border: 1px solid rgba(212,164,64,.4); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.nx-st-lang.open .nx-st-lmenu { display: block; }
.nx-st-lmenu a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; color: #e6ecf7 !important; text-decoration: none !important; font-size: 14px; }
.nx-st-lmenu a b { width: 26px; color: #e9b54a; font-size: 12.5px; } .nx-st-lmenu a:hover, .nx-st-lmenu a.on { background: rgba(255,255,255,.07); }
html[data-mode="light"] .nx-st-lbtn { border-color: #C9D3E3; color: var(--navy); } html[data-mode="light"] .nx-st-lmenu { background: #fff; border-color: #DCE3EE; }
html[data-mode="light"] .nx-st-lmenu a { color: #1b2a44 !important; }
@media (max-width: 699px) {
  html:not(.signed) .nx-st-lang { top: 14px; right: 16px; }
  html:not(.signed) nav.navbar [data-nxw-share] { right: 98px !important; }
  .nx-st-lbtn { width: 72px; height: 40px; }
}

/* Library by folder (2026-11-02): a gold title with the count above each folder of cards (Videos, Documents, Gallery) */
.nx-sec { margin: 0 0 8px; }
.nx-sec-h { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(212,164,64,.25);
  font: 700 14px/1.2 Poppins, "Segoe UI", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #E2B95A; }
.nx-sec-h span { padding: 2px 9px; border-radius: 999px; background: rgba(212,164,64,.15); color: #E2B95A; font-size: 11px; letter-spacing: .04em; }
.nx-sec:first-child .nx-sec-h { margin-top: 4px; }
.nx-sec .nx-gallery { columns: 6 170px; }   /* logos and covers: smaller tiles, more per line */
.nx-sec .nx-media { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }