/* ============================================================
   Adsimulo — New Design System
   Layered over Default.css and grid.css.
   Does NOT rename any existing CSS class or ID.
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
    --nd-orange:     #F47C20;
    --nd-orange-d:   #dd6b13;
    --nd-orange-t:   #FDEEE2;
    --nd-orange-t2:  #FBE0CC;
    --nd-green:      #2EAA5E;
    --nd-green-d:    #258a4c;
    --nd-red:        #E0413B;
    --nd-red-t:      #FBE7E6;
    --nd-blue:       #3E7BD6;
    --nd-blue-t:     #E8F0FB;
    --nd-page:       #EEF1F5;
    --nd-card:       #FFFFFF;
    --nd-ink:        #2B2F37;
    --nd-ink-2:      #4A515C;
    --nd-muted:      #8C95A3;
    --nd-faint:      #AEB6C2;
    --nd-line:       #E7EBF1;
    --nd-line-2:     #EDF0F5;
    --nd-r-lg:       20px;
    --nd-r-md:       14px;
    --nd-r-sm:       10px;
    --nd-sh-1:       0 1px 2px rgba(28,40,64,.05), 0 2px 6px rgba(28,40,64,.04);
    --nd-sh-2:       0 2px 8px rgba(28,40,64,.06), 0 12px 28px rgba(28,40,64,.06);
    --nd-sh-3:       0 18px 50px rgba(28,40,64,.16);
    --nd-sb-w:       260px;
    --nd-top-h:      64px;
}

/* ============================================================
   GLOBAL RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    overflow: hidden;
    margin: 0;
}

body {
    font-family: 'Poppins', Arial, system-ui, sans-serif !important;
    background: var(--nd-page) !important;
    color: var(--nd-ink) !important;
    font-size: 14px !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--nd-orange); }

/* Kill the fixed-width 1004 px wrapper */
.wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left:  0 !important;
    margin-right: 0 !important;
    margin-top:   0 !important;
}

/* ============================================================
   FULL-VIEWPORT LAYOUT SHELL
   Sidebar spans full viewport height; top bar sits above the
   main content area (right of the sidebar), not above the sidebar.
   ============================================================ */
form#form1 {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#main-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* UpdatePanel becomes the app grid:
   - left sidebar spans the full height in column 1
   - top bar lives in column 2, row 1 (main-content header)
   - main content scrolls in column 2, row 2 */
#updatepanelMaster {
    flex: 1;
    min-height: 0;
    display: grid !important;
    grid-template-columns: var(--nd-sb-w) minmax(0, 1fr);
    grid-template-rows: var(--nd-top-h) minmax(0, 1fr);
    grid-template-areas:
        "sidebar topbar"
        "sidebar main";
    overflow: hidden;
}

.wrapper.head    { grid-area: topbar; }
.wrapper.content { display: contents !important; }
.console-panel   { display: contents !important; }
.left-panel      { grid-area: sidebar; }
.right-panel     { grid-area: main; }
.wrapper.footer  { display: none !important; }   /* replaced by sidebar copyright */

/* ============================================================
   MODALS & OVERLAYS  (keep functionality, update look)
   ============================================================ */
.modalMsg,
.modalWizard {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10000;
    background: rgba(28,38,58,.5) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.modalMsg > div,
.modalWizard > div {
    background: var(--nd-card) !important;
    border-radius: var(--nd-r-lg) !important;
    padding: 32px !important;
    max-width: 560px;
    width: 90%;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.35) !important;
    position: relative;
    border: 1px solid #c4ccd6 !important;
    outline: 1px solid rgba(255,255,255,0.6) !important; /* crisp edge against the dim backdrop */
    max-height: 92vh;
    overflow-y: auto;
}

.modalWizard > div { max-width: 640px; }

.modalMsg h3,
.modalWizard h2 {
    margin: 0 0 20px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--nd-ink) !important;
}

/* Modal labels */
.modalMsg .label,
.modalWizard .label {
    display: block;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--nd-ink) !important;
    margin-bottom: 5px !important;
}

/* Modal text boxes */
.modalMsg .TextBox,
.modalWizard .TextBox,
.modalMsg .MultiBox,
.modalWizard .MultiBox,
.modalMsg .ListBox,
.modalWizard .ListBox,
.modalMsg .ShortBox,
.modalWizard .ShortBox {
    width: 100% !important;
    height: 42px !important;
    padding: 0 12px !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: var(--nd-r-sm) !important;
    font-family: 'Poppins', inherit !important;
    font-size: 13.5px !important;
    color: var(--nd-ink) !important;
    background: var(--nd-card) !important;
    outline: none !important;
    transition: border-color .14s, box-shadow .14s !important;
    margin-bottom: 10px !important;
}

.modalMsg .TextBox:focus,
.modalWizard .TextBox:focus {
    border-color: var(--nd-orange) !important;
    box-shadow: 0 0 0 3px var(--nd-orange-t) !important;
}

.modalMsg .MultiBox,
.modalWizard .MultiBox {
    height: auto !important;
    min-height: 80px !important;
    padding: 10px 12px !important;
    resize: vertical !important;
}

/* Modal section headings */
.modalWizard .head {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--nd-orange-d) !important;
    border-bottom: 1px solid var(--nd-line-2) !important;
    padding-bottom: 4px !important;
    margin: 16px 0 10px !important;
    background: none !important;
}

/* Close (×) button */
button.close,
input.close,
a.close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: var(--nd-line-2) !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 0 !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .14s !important;
    color: var(--nd-muted) !important;
}
button.close::before,
input.close::before,
a.close::before { content: "✕"; font-size: 14px; color: var(--nd-muted); }
button.close:hover,
input.close:hover,
a.close:hover { background: var(--nd-line) !important; }

/* Session timeout banner */
#divSessionTimeoutWarning {
    position: fixed !important;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    background: var(--nd-card);
    border: 1px solid var(--nd-line);
    border-radius: var(--nd-r-md);
    padding: 14px 24px;
    box-shadow: var(--nd-sh-3);
    font-size: 13.5px;
    color: var(--nd-ink);
    max-width: 480px;
    width: 90%;
}

#shadow { display: none !important; }

/* UpdateProgress spinner */
#PageUpdateProgress { position: fixed !important; }
.loader { position: fixed !important; z-index: 11000 !important; }

/* ============================================================
   TOP BAR  (.wrapper.head)
   ============================================================ */
.wrapper.head {
    height: var(--nd-top-h) !important;
    background: var(--nd-card) !important;
    border-bottom: 1px solid var(--nd-line) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 20px !important;
    gap: 4px !important;
    box-shadow: var(--nd-sh-1) !important;
    margin-bottom: 0 !important;
}

/* Kill old float layout in topbar */
.wrapper.head * { float: none !important; }

/* Hide old logo — wordmark lives in sidebar */
.wrapper.head a.logo,
.wrapper.head .logo { display: none !important; }

/* Hide decorative spacer spans that existed between float groups */
.wrapper.head > span.FloatRight { display: none !important; }

/* ---- Toolbar icon buttons (SquareButton in topbar) ---- */
.wrapper.head .IconButtonColor.SquareButton,
.wrapper.head .IconButtonColor.SquareButton:hover {
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--nd-r-sm) !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .14s !important;
    margin: 0 1px !important;
    position: relative !important;
    cursor: pointer !important;
}

/* Show hidden span as tooltip-like label */
.wrapper.head .IconButtonColor.SquareButton span { display: none !important; }

.wrapper.head .IconButtonColor.SquareButton:hover { background: var(--nd-orange-t) !important; }
.wrapper.head .IconButtonColor.SquareButton.Selected { background: var(--nd-orange) !important; }

/* Icon images — keep but tint them via filter for dark look */
.wrapper.head .IconButtonColor { filter: none; }

/* ---- Inline SVG icons for new topbar buttons ---- */
.wrapper.head .IconButtonColor.SquareButton svg {
    width: 20px !important;
    height: 20px !important;
    color: var(--nd-ink-2) !important;
    pointer-events: none !important;
    flex: none !important;
}
.wrapper.head .IconButtonColor.SquareButton:hover svg {
    color: var(--nd-orange-d) !important;
}
.wrapper.head .IconButtonColor.SquareButton.Selected svg {
    color: #fff !important;
}

/* Run simulation button */
.wrapper.head .ToolbarButton {
    height: 38px !important;
    padding: 0 16px !important;
    border-radius: var(--nd-r-sm) !important;
    background: var(--nd-orange) !important;
    background-image: none !important;
    background-position: initial !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', inherit !important;
    display: inline-flex !important;
    align-items: center !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 4px 10px rgba(244,124,32,.25) !important;
    transition: background .14s, transform .12s !important;
    cursor: pointer !important;
    margin: 0 !important;
}
.wrapper.head .ToolbarButton:hover {
    background: var(--nd-orange-d) !important;
    transform: translateY(-1px) !important;
}
.wrapper.head .ToolbarButton:active { transform: none !important; }

/* Sign Out (logout) button */
.wrapper.head .logout,
.wrapper.head a.logout {
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: var(--nd-r-sm) !important;
    background: none !important;
    background-image: none !important;
    color: var(--nd-red) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', inherit !important;
    display: inline-flex !important;
    align-items: center !important;
    border: none !important;
    cursor: pointer !important;
    transition: background .14s !important;
    text-decoration: none !important;
    order: 100;
}
.wrapper.head .logout:hover,
.wrapper.head a.logout:hover {
    background: var(--nd-red-t) !important;
    color: var(--nd-red) !important;
}
/* Show the hidden span text on logout as "Sign Out" */
.wrapper.head .logout span,
.wrapper.head a.logout span {
    display: inline !important;
    font-size: 0 !important;    /* hide "button: Logout" text */
}
.wrapper.head .logout span::after,
.wrapper.head a.logout span::after {
    content: "Sign Out";
    font-size: 13.5px !important;
}

/* Spacer pushes right-side items to the right */
.nd-topbar-spacer {
    flex: 1 !important;
    order: 50;
}

/* ---- Unit Toggle (new HTML added in master page) ---- */
.nd-unit-toggle {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--nd-line-2) !important;
    border-radius: 11px !important;
    padding: 3px !important;
    height: 42px !important;
    margin: 0 4px !important;
    order: 95;
    flex: none;
}

.nd-unit-toggle .nd-seg {
    position: relative;
    z-index: 2;
    min-width: 72px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', inherit !important;
    color: var(--nd-muted) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: color .16s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.nd-unit-toggle .nd-seg.nd-on {
    background: var(--nd-orange) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(244,124,32,.32) !important;
}

.nd-unit-toggle .nd-seg:not(.nd-on):hover { color: var(--nd-ink-2) !important; }

/* Divider between unit toggle and sign-out */
.nd-bar-div {
    width: 1px !important;
    height: 28px !important;
    background: var(--nd-line) !important;
    margin: 0 6px !important;
    flex: none !important;
    order: 98;
    display: block !important;
}

/* Progress bar in topbar */
.progress-bar {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 38px !important;
    width: auto !important;
    background: transparent !important;
    padding: 0 4px !important;
    margin: 0 !important;
}

.progressBarContainer {
    background: var(--nd-line-2) !important;
    border-radius: 99px !important;
    height: 8px !important;
    width: 120px !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

.progressBarContainer > span {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--nd-ink-2) !important;
    position: static !important;
    display: block !important;
    text-align: center !important;
    margin: 0 !important;
    top: auto !important;
    line-height: 8px !important;
}

.progressBar,
.progressBar-orange {
    background: var(--nd-orange) !important;
    background-image: none !important;
    border-radius: 99px !important;
    height: 100% !important;
}
.progressBar-red {
    background: var(--nd-red) !important;
    background-image: none !important;
}

/* ============================================================
   ALERT BARS
   ============================================================ */
.alert {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--nd-line) !important;
}

.alert .wrapper {
    padding: 9px 16px 9px 48px !important;
    width: 100% !important;
    min-height: 0 !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 20px 20px !important;
}

.alert p {
    color: var(--nd-ink-2) !important;
    font-size: 13px !important;
    width: auto !important;
    margin: 0 !important;
}

.alert.info    { background: #EFF6FF !important; border-bottom-color: #BFDBFE !important; }
.alert.success { background: #F0FDF4 !important; border-bottom-color: #BBF7D0 !important; }
.alert.error   { background: #FEF2F2 !important; border-bottom-color: #FECACA !important; }
.alert.warning { background: #FFFBEB !important; border-bottom-color: #FDE68A !important; }

.alert .AlertButton {
    float: none !important;
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: rgba(0,0,0,.06) !important;
    border: 1px solid rgba(0,0,0,.1) !important;
    color: var(--nd-ink) !important;
    cursor: pointer !important;
}

.alert .CloseAlertButton {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    background-image: none !important;
    background: transparent !important;
    color: var(--nd-muted) !important;
    cursor: pointer !important;
}
.alert .CloseAlertButton::before { content: "✕"; font-size: 12px; }
.alert .CloseAlertButton:hover { background: rgba(0,0,0,.07) !important; }

/* Validation summary */
#idValidationBar { background: #FEF2F2 !important; }
.ValidationSummary {
    background: transparent !important;
    border: none !important;
    border-left: 3px solid var(--nd-red) !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    color: var(--nd-red) !important;
    width: 100% !important;
}

/* ============================================================
   MAIN LAYOUT  (.wrapper.content > .console-panel)
   The containers are display:contents so their children become
   grid items of #updatepanelMaster.
   ============================================================ */
.wrapper.content { padding: 0 !important; display: contents !important; }

.console-panel {
    display: contents !important;
}

/* ============================================================
   LEFT SIDEBAR  (.left-panel)
   ============================================================ */
.left-panel {
    width: var(--nd-sb-w) !important;
    min-height: 0 !important;
    height: 100% !important;
    float: none !important;
    background: var(--nd-card) !important;
    border-right: 1px solid var(--nd-line) !important;
    display: flex !important;
    flex-direction: column !important;
    flex: none !important;
}

/* ---- Wordmark (clickable LinkButton in master page) ---- */
a.nd-wordmark,
a.nd-wordmark:link,
a.nd-wordmark:visited,
a.nd-wordmark:hover,
a.nd-wordmark:active {
    display: block;
    padding: 20px 22px 14px;
    flex: none;
    border-bottom: 1px solid var(--nd-line-2);
    margin-bottom: 8px;
    text-decoration: none;
    cursor: pointer;
}

.nd-wordmark {
    padding: 20px 22px 14px;
    flex: none;
    border-bottom: 1px solid var(--nd-line-2);
    margin-bottom: 8px;
}

.nd-wordmark-text {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    user-select: none;
}

.nd-wm-ad     { color: var(--nd-orange); }
.nd-wm-simulo { color: var(--nd-ink); }

/* ---- V6 version badge (sidebar wordmark + login) ---- */
.nd-wm-v6 {
    display: inline-block;
    background: var(--nd-orange);
    color: #fff;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .03em;
    border-radius: 6px;
    text-transform: uppercase;
}

/* Sidebar variant — sits next to the small wordmark */
.nd-wm-v6-side {
    font-size: 11px;
    padding: 3px 6px;
    margin-left: 7px;
    vertical-align: middle;
    position: relative;
    top: -3px;
}

/* ---- Login: brand row (logo + V6) and welcome note ---- */
.nd-login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin: 0 0 10px;
}
#login-content .nd-login-brand a.logo.center,
#login-content .nd-login-brand .logo.center { margin: 0 !important; }

.nd-login-brand .nd-wm-v6 {
    font-size: 16px;
    padding: 5px 9px;
    border-radius: 8px;
    position: relative;
    top: 2px;
}

.nd-login-note {
    text-align: center;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--nd-muted);
    margin: 0 0 22px;
    max-width: 330px;
}

/* ---- ControlPanel (current project / sim info) ---- */
.ControlPanel {
    padding: 0 14px 6px;
    flex: none;
}

.ControlPanelButton {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding: 8px 12px !important;
    border-radius: var(--nd-r-sm) !important;
    background: var(--nd-orange-t) !important;
    color: var(--nd-orange-d) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-align: left !important;
    margin-bottom: 4px !important;
    border: 1px solid var(--nd-orange-t2) !important;
    cursor: pointer !important;
    transition: background .14s !important;
    text-decoration: none !important;
}

.ControlPanelButton:hover { background: var(--nd-orange-t2) !important; }

.ControlPanelButton p { margin: 0 !important; line-height: 1.4 !important; }

.ControlPanelButton p span {
    font-weight: 700 !important;
    color: var(--nd-ink) !important;
    font-size: 13px !important;
    display: block !important;
}

hr.HrLeftPanel {
    border: none !important;
    height: 1px !important;
    background: var(--nd-line-2) !important;
    margin: 6px 2px !important;
    width: auto !important;
    padding: 0 !important;
}

/* ---- Nav buttons via LongButton class ---- */
.LongButton {
    display: flex !important;
    align-items: center !important;
    width: calc(100% - 28px) !important;
    height: 44px !important;
    padding: 0 14px !important;
    margin: 2px 14px !important;
    border-radius: var(--nd-r-md) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: 'Poppins', inherit !important;
    text-align: left !important;
    text-transform: none !important;
    color: var(--nd-ink-2) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: background .14s, color .14s !important;
    text-decoration: none !important;
}

.LongButton:hover {
    background: var(--nd-orange-t) !important;
    color: var(--nd-orange-d) !important;
    border-color: transparent !important;
}

/* "New Project" gets green CTA treatment */
.LongButton.bg-orange-light,
.LongButton.fr-orange {
    background: var(--nd-green) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 16px rgba(46,170,94,.28) !important;
    margin-bottom: 8px !important;
    justify-content: center !important;
}

.LongButton.bg-orange-light:hover,
.LongButton.fr-orange:hover {
    background: var(--nd-green-d) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

/* ---- "RECENT PROJECTS" section label area ---- */
.nd-recent-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--nd-muted);
    padding: 10px 14px 6px;
}

/* ---- vertical-nav: recently-opened project list ---- */
.vertical-nav {
    list-style: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
    flex: 1 !important;
}

.vertical-nav li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: block !important;
}

/* Project link items */
.vertical-nav li a,
.vertical-nav li input[type="submit"],
.vertical-nav li span.Help_h {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 36px !important;
    padding: 5px 12px !important;
    margin: 1px 0 !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Poppins', inherit !important;
    color: var(--nd-ink-2) !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .14s, color .14s !important;
    word-break: break-word !important;
    text-align: left !important;
    line-height: 1.3 !important;
}

.vertical-nav li a:hover,
.vertical-nav li input[type="submit"]:hover {
    background: var(--nd-orange-t) !important;
    color: var(--nd-orange-d) !important;
}

.vertical-nav li a.Selected,
.vertical-nav li input[type="submit"].Selected {
    background: var(--nd-orange-t2) !important;
    color: var(--nd-orange-d) !important;
    font-weight: 600 !important;
}

/* Locked project shown as a panel/span instead of a link */
.vertical-nav li span.Help_h {
    color: var(--nd-faint) !important;
    cursor: default !important;
}

/* ---- Tree (SimulationData left panel) ---- */
ul.Tree {
    list-style: none !important;
    padding: 4px 14px !important;
    margin: 0 !important;
    overflow-y: auto !important;
    flex: 1 !important;
}

ul.Tree li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

ul.Tree li ul {
    list-style: none !important;
    padding: 0 0 0 10px !important;
    margin: 0 !important;
    border-left: 2px solid var(--nd-orange-t2) !important;
    margin-left: 8px !important;
}

/* Tenancy container row */
li.TreeTenancy { margin-bottom: 4px !important; }

/* Tenancy label/button */
.TenancyButton { display: block !important; }

.TenancyButton a,
.TenancyButton input[type="submit"] {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 40px !important;
    padding: 0 12px !important;
    border-radius: var(--nd-r-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', inherit !important;
    color: var(--nd-ink-2) !important;
    background: var(--nd-line-2) !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .14s, color .14s !important;
    text-align: left !important;
}

.TenancyButton a:hover,
.TenancyButton input[type="submit"]:hover {
    background: var(--nd-orange-t) !important;
    color: var(--nd-orange-d) !important;
}

.TenancyButton a.Selected,
.TenancyButton input[type="submit"].Selected {
    background: var(--nd-orange) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(244,124,32,.25) !important;
}

/* Delete tenancy icon button inside TenancyButton span */
.TenancyButton .TabButton.IconButton {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    background: transparent !important;
    float: none !important;
}

/* Lift group buttons */
a.GroupButton,
input.GroupButton {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 34px !important;
    padding: 5px 12px !important;
    border-radius: var(--nd-r-sm) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    font-family: 'Poppins', inherit !important;
    color: var(--nd-ink-2) !important;
    background: var(--nd-card) !important;
    border: 1px solid var(--nd-line) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .14s, color .14s, border-color .14s, box-shadow .14s !important;
    text-align: left !important;
    box-shadow: var(--nd-sh-1) !important;
}

a.GroupButton:hover,
input.GroupButton:hover {
    background: var(--nd-orange) !important;
    color: #fff !important;
    border-color: var(--nd-orange) !important;
}

a.GroupButton.Selected,
input.GroupButton.Selected {
    background: var(--nd-orange) !important;
    color: #fff !important;
    border-color: var(--nd-orange) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 10px rgba(244,124,32,.25) !important;
}

/* Add group / Add tenancy buttons */
li.TreeAddGroup input[type="submit"],
li.TreeAddTenancy input[type="submit"],
li.TreeAddGroup a,
li.TreeAddTenancy a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 32px !important;
    padding: 0 12px !important;
    margin: 4px 0 !important;
    border-radius: var(--nd-r-sm) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', inherit !important;
    color: var(--nd-orange-d) !important;
    background: var(--nd-orange-t) !important;
    background-image: none !important;
    border: 1px dashed var(--nd-orange-t2) !important;
    cursor: pointer !important;
    transition: border-color .14s, background .14s !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

li.TreeAddGroup input[type="submit"]:hover,
li.TreeAddTenancy input[type="submit"]:hover,
li.TreeAddGroup a:hover,
li.TreeAddTenancy a:hover {
    border-color: var(--nd-orange) !important;
    background: var(--nd-orange-t2) !important;
}

/* ---- Zone / lift-group list layout fixes ---- */
li.TreeGroup {
    width: 100% !important;
    position: relative !important;
    display: block !important;
    margin-bottom: 4px !important;
}

li.TreeTenancy {
    border: none !important;
    padding: 0 !important;
    margin-bottom: 4px !important;
}

.TreeGroup a.GroupButton,
.TreeGroup input.GroupButton {
    padding-right: 34px !important;
}

li.TreeGroup a.TabButton.IconButton {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    background-color: transparent !important;
}

/* ============================================================
   RIGHT PANEL / CENTER CONTENT
   ============================================================ */
.right-panel {
    flex: 1 !important;
    min-width: 0 !important;
    overflow-y: auto !important;
    background: var(--nd-page) !important;
    padding: 0 !important;
}

/* Inner container padding */
#console-container {
    position: relative !important;
    padding: 22px 28px !important;
    max-width: 100% !important;
}

/* Drag handle (orange circle) must stay anchored to its cell */
#draghandler {
    position: absolute !important;
    z-index: 100 !important;
}

/* Page name / title strip */
.PageName-panel {
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 20px 24px 6px !important;
}

.PageName-text {
    color: var(--nd-ink) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: -.01em !important;
}

/* Current project / sim info bar */
.CurrentProjectInfo-panel {
    height: auto !important;
    min-height: 0 !important;
    background: var(--nd-orange-t) !important;
    border-bottom: 1px solid var(--nd-orange-t2) !important;
    padding: 7px 24px !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    color: var(--nd-orange-d) !important;
    font-weight: 500 !important;
}

/* ============================================================
   TABS  (Toolbar / TabSelected / TabUnSelected / TabPanel)
   ============================================================ */
.Toolbar {
    display: flex !important;
    align-items: flex-end !important;
    padding: 16px 24px 0 !important;
    background: transparent !important;
    border: none !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
}

.TabUnSelected {
    height: 38px !important;
    padding: 0 16px !important;
    border-radius: var(--nd-r-sm) var(--nd-r-sm) 0 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', inherit !important;
    border: 1px solid var(--nd-line) !important;
    border-bottom: 2px solid var(--nd-line) !important;
    cursor: pointer !important;
    background: var(--nd-card) !important;
    color: var(--nd-muted) !important;
    text-transform: none !important;
    transition: background .14s, color .14s, border-color .14s !important;
    letter-spacing: 0 !important;
}

.TabUnSelected:hover {
    background: var(--nd-orange-t) !important;
    color: var(--nd-orange-d) !important;
    border-color: var(--nd-orange-t2) !important;
}

.TabSelected {
    height: 38px !important;
    padding: 0 16px !important;
    border-radius: var(--nd-r-sm) var(--nd-r-sm) 0 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: 'Poppins', inherit !important;
    background: var(--nd-orange) !important;
    color: #fff !important;
    border: 1px solid var(--nd-orange) !important;
    border-bottom: 2px solid var(--nd-orange) !important;
    cursor: default !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 -2px 8px rgba(244,124,32,.18) !important;
}

.TabPanel {
    background: var(--nd-card) !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: 0 var(--nd-r-md) var(--nd-r-md) var(--nd-r-md) !important;
    padding: 0 !important;
    margin: 0 24px 24px !important;
    box-shadow: var(--nd-sh-1) !important;
    overflow: visible !important;
}

/* Tabs-style buttons (used in some views) */
.TabsButton {
    border-bottom: 2px solid var(--nd-line) !important;
    color: var(--nd-muted) !important;
    font-size: 13.5px !important;
    text-transform: none !important;
    padding: 8px 0 !important;
    font-weight: 600 !important;
    background: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    transition: border-color .14s, color .14s !important;
    letter-spacing: 0 !important;
}
.TabsButton:hover  { border-bottom-color: var(--nd-orange) !important; color: var(--nd-orange-d) !important; }
.TabsButton.Selected {
    color: var(--nd-orange) !important;
    border-bottom-color: var(--nd-orange) !important;
    background: transparent !important;
}

/* ============================================================
   DASHBOARD TILES  (.tile)
   ============================================================ */
.tile {
    border-radius: var(--nd-r-lg) !important;
    box-shadow: var(--nd-sh-1) !important;
    overflow: hidden !important;
    transition: box-shadow .16s, transform .14s !important;
    margin: 8px !important;
}

.tile:hover { box-shadow: var(--nd-sh-2) !important; }

/* What's New tile */
.tile.news {
    background: var(--nd-card) !important;
    border: 1px solid var(--nd-line) !important;
}

.tile.news .tiletext h1 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--nd-ink) !important;
    padding: 16px 16px 8px !important;
    margin: 0 !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
}

.tile.news a.postNews {
    display: block !important;
    padding: 12px 16px !important;
    border-top: 1px solid var(--nd-line-2) !important;
    transition: background .12s !important;
    text-decoration: none !important;
    color: inherit !important;
}
.tile.news a.postNews:hover { background: var(--nd-line-2) !important; }

.tile.news a.postNews h2 {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--nd-ink) !important;
    margin: 0 0 4px !important;
}

.tile.news a.postNews .tiletext {
    font-size: 12.5px !important;
    color: var(--nd-muted) !important;
    line-height: 1.5 !important;
    display: block !important;
}

.tile.news .ReadMore {
    font-size: 12px !important;
    color: var(--nd-orange) !important;
    font-weight: 600 !important;
    display: block !important;
    margin-top: 4px !important;
}

/* Non-linked news items (no URL) */
.tile.news .tiletext h2 {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--nd-ink) !important;
    margin: 10px 16px 4px !important;
}
.tile.news > .newsScroll > .tiletext,
.tile.news .tiletext:not(h1):not(h2) {
    font-size: 12.5px !important;
    color: var(--nd-muted) !important;
    padding: 0 16px !important;
    line-height: 1.5 !important;
}

/* Scrollable news container */
.newsScroll { height: 100% !important; overflow-y: auto !important; }

/* Status tile */
.tile:not(.news) {
    background: var(--nd-card) !important;
    border: 1px solid var(--nd-line) !important;
}

.tile .tiletext h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--nd-ink) !important;
    padding: 16px !important;
    margin: 0 !important;
}

/* Colored tiles */
.tile.bg-blue {
    background: linear-gradient(135deg, var(--nd-blue), #2c63b0) !important;
    border: none !important;
    color: #fff !important;
}
.tile.bg-blue .tiletext,
.tile.bg-blue .tiletext h1 { color: #fff !important; }

.tile.tutorials { background: var(--nd-card) !important; }

/* Tile text/hover placeholders */
.tile .place { display: none !important; }
.tile:hover .place { display: block !important; }

/* ============================================================
   FORMS & INPUTS
   ============================================================ */
.formrow { margin-bottom: 12px !important; overflow: visible !important; }

.formrow label {
    color: var(--nd-ink) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Text boxes, textfields */
input.TextBox,
input.textfield,
.formrow input[type="text"],
.formrow input[type="password"],
textarea.MultiBox {
    border: 1px solid var(--nd-line) !important;
    border-radius: var(--nd-r-sm) !important;
    padding: 0 12px !important;
    height: 40px !important;
    font-family: 'Poppins', inherit !important;
    font-size: 13.5px !important;
    color: var(--nd-ink) !important;
    background: var(--nd-card) !important;
    outline: none !important;
    transition: border-color .14s, box-shadow .14s !important;
}

input.TextBox:focus,
input.textfield:focus,
.formrow input[type="text"]:focus,
.formrow input[type="password"]:focus {
    border-color: var(--nd-orange) !important;
    box-shadow: 0 0 0 3px var(--nd-orange-t) !important;
}

textarea.MultiBox {
    height: auto !important;
    min-height: 80px !important;
    padding: 10px 12px !important;
    resize: vertical !important;
}
textarea.MultiBox:focus {
    border-color: var(--nd-orange) !important;
    box-shadow: 0 0 0 3px var(--nd-orange-t) !important;
}

/* Drop-down lists */
select.ListBox,
select.ShortBox {
    border: 1px solid var(--nd-line) !important;
    border-radius: var(--nd-r-sm) !important;
    padding: 0 10px !important;
    height: 40px !important;
    font-family: 'Poppins', inherit !important;
    font-size: 13.5px !important;
    color: var(--nd-ink) !important;
    background: var(--nd-card) !important;
    outline: none !important;
    cursor: pointer !important;
    transition: border-color .14s, box-shadow .14s !important;
}

select.ListBox:focus,
select.ShortBox:focus {
    border-color: var(--nd-orange) !important;
    box-shadow: 0 0 0 3px var(--nd-orange-t) !important;
}

/* ============================================================
   TABLES
   ============================================================ */
.Table {
    border: 1px solid var(--nd-line) !important;
    border-radius: var(--nd-r-md) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

.Table th {
    background: var(--nd-line-2) !important;
    color: var(--nd-ink-2) !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--nd-line) !important;
}

.Table td {
    padding: 9px 14px !important;
    font-size: 13.5px !important;
    border-bottom: 1px solid var(--nd-line-2) !important;
    color: var(--nd-ink) !important;
    border-left: none !important;
    border-right: none !important;
}

.Table tr:last-child td { border-bottom: none !important; }

.RowSelected,
.RowSelected td { background: var(--nd-orange-t) !important; color: var(--nd-orange-d) !important; }

.Table tbody tr:hover td { background: var(--nd-line-2) !important; }
.RowSelected:hover td   { background: var(--nd-orange-t) !important; }

.TableHeader         { color: var(--nd-ink-2) !important; text-decoration: none !important; padding: 0 !important; }
.TableHeaderSelected { color: var(--nd-orange) !important; }
.TableHeader:hover   { color: var(--nd-orange) !important; }

.TableNoSimulations  { border: none !important; height: auto !important; }

/* Lift table */
.LiftTable {
    font-size: 12.5px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.LiftTable th {
    background: var(--nd-line-2) !important;
    color: var(--nd-ink-2) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    padding: 7px 10px !important;
    border-bottom: 1px solid var(--nd-line) !important;
    border-left: none !important;
    border-right: none !important;
}

.LiftTable td { padding: 6px 10px !important; }

.LiftTableSectionHeader {
    background: var(--nd-line) !important;
    color: var(--nd-ink-2) !important;
    font-weight: 700 !important;
    height: auto !important;
}

.LiftTable tr { height: auto !important; }

.LiftTable td input  { width: 88px !important; margin: 1px !important; }
.LiftTable td select { width: 96px !important; margin: 2px !important; }

/* ============================================================
   BUTTONS  (keep all class names, restyle visuals)
   ============================================================ */
.BaseButton {
    height: 38px !important;
    padding: 0 16px !important;
    border-radius: var(--nd-r-sm) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', inherit !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .14s, transform .12s, box-shadow .14s !important;
    background: var(--nd-ink-2) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.BaseButton:hover {
    background: var(--nd-ink) !important;
    border-color: transparent !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}
.BaseButton:active { transform: none !important; }

.ButtonNext {
    background: var(--nd-orange) !important;
    box-shadow: 0 4px 10px rgba(244,124,32,.28) !important;
}
.ButtonNext:hover { background: var(--nd-orange-d) !important; }

.ButtonBack {
    background: var(--nd-line-2) !important;
    color: var(--nd-ink-2) !important;
}
.ButtonBack:hover { background: var(--nd-line) !important; color: var(--nd-ink) !important; }

.ButtonCancel {
    background: transparent !important;
    color: var(--nd-muted) !important;
    border: 1px solid var(--nd-line) !important;
}
.ButtonCancel:hover {
    background: var(--nd-line-2) !important;
    color: var(--nd-ink) !important;
    border-color: var(--nd-line) !important;
}

.ButtonDelete {
    background: var(--nd-red) !important;
    border-color: var(--nd-red) !important;
}
.ButtonDelete:hover { background: #c0352f !important; }

.GenericButton,
.GenericLongButton,
.StretchButton {
    background: var(--nd-card) !important;
    color: var(--nd-ink-2) !important;
    border: 1px solid var(--nd-line) !important;
}
.GenericButton:hover,
.GenericLongButton:hover,
.StretchButton:hover {
    background: var(--nd-orange-t) !important;
    border-color: var(--nd-orange-t2) !important;
    color: var(--nd-orange-d) !important;
}

.AlertButton {
    background: var(--nd-card) !important;
    color: var(--nd-ink-2) !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: var(--nd-r-sm) !important;
}
.AlertButton:hover {
    background: var(--nd-orange-t) !important;
    border-color: var(--nd-orange-t2) !important;
    color: var(--nd-orange-d) !important;
}

.InactiveButton {
    background: var(--nd-line-2) !important;
    color: var(--nd-faint) !important;
    border: none !important;
    cursor: default !important;
}

.SwitchButton {
    background: var(--nd-line-2) !important;
    color: var(--nd-ink-2) !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: var(--nd-r-sm) !important;
    font-size: 13px !important;
    text-align: left !important;
}
.SwitchButton:hover {
    background: var(--nd-orange-t) !important;
    border-color: var(--nd-orange-t2) !important;
    color: var(--nd-orange-d) !important;
}

.ShortButton  { height: 34px !important; min-width: 80px  !important; width: auto !important; padding: 0 14px !important; }
.VeryShortButton { height: 34px !important; min-width: 70px !important; width: auto !important; padding: 0 10px !important; }

/* ControlPanel button ("Close Project") */
.CloseProjectButton {
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,.4) !important;
    color: var(--nd-orange-d) !important;
    border: none !important;
}

/* ============================================================
   NOTIFICATIONS / MESSAGE PANELS
   ============================================================ */
.Success {
    background: transparent !important;
    border: 1px solid var(--nd-green) !important;
    border-left: 3px solid var(--nd-green) !important;
    border-radius: var(--nd-r-sm) !important;
    padding: 10px 14px !important;
    color: var(--nd-green-d) !important;
    font-size: 13px !important;
    margin: 6px 0 !important;
}

.Failure {
    background: transparent !important;
    border: 1px solid var(--nd-red) !important;
    border-left: 3px solid var(--nd-red) !important;
    border-radius: var(--nd-r-sm) !important;
    padding: 10px 14px !important;
    color: var(--nd-red) !important;
    font-size: 13px !important;
    margin: 6px 0 !important;
}

.Warning {
    background: transparent !important;
    border: 1px solid var(--nd-orange) !important;
    border-left: 3px solid var(--nd-orange) !important;
    border-radius: var(--nd-r-sm) !important;
    padding: 10px 14px !important;
    color: var(--nd-orange-d) !important;
    font-size: 13px !important;
    margin: 6px 0 !important;
}

.tile .Success, .tile .Failure, .tile .Warning {
    border: none !important;
    font-size: 13px !important;
    margin: 6px !important;
}

.failureNotification,
.failureNotificationUsername,
.failureNotificationPassword,
.warningNotification {
    font-size: 12.5px !important;
}

.failureNotification,
.failureNotificationUsername,
.failureNotificationPassword { color: var(--nd-red) !important; }
.warningNotification { color: var(--nd-orange-d) !important; }

/* ============================================================
   MANAGEMENT SECTION
   ============================================================ */
.Account {
    width: auto !important;
    max-width: 520px !important;
}

.Account .Head {
    background: var(--nd-line-2) !important;
    border-radius: var(--nd-r-sm) !important;
    color: var(--nd-ink) !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
    margin-bottom: 12px !important;
    border: none !important;
    font-weight: 700 !important;
    display: block !important;
    width: auto !important;
}

.UsersMenager .Head {
    background: var(--nd-line-2) !important;
    border-radius: var(--nd-r-sm) !important;
    color: var(--nd-ink) !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
    border: none !important;
}

.UsersMenager fieldset {
    border-color: var(--nd-orange-t2) !important;
    border-radius: var(--nd-r-sm) !important;
}

/* Header strip used in some management views */
.Header {
    background: var(--nd-line-2) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--nd-ink) !important;
    padding: 8px 14px !important;
    border-radius: var(--nd-r-sm) !important;
    border: none !important;
    margin-bottom: 8px !important;
}

/* ============================================================
   SCROLLBARS (global)
   ============================================================ */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--nd-line);
    border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--nd-faint); }

/* ============================================================
   COPYRIGHT  (moved to sidebar footer)
   ============================================================ */
.nd-sidebar-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--nd-line-2);
    flex: none;
}

.CopyrightLabel,
.CopyrightLabel.home {
    color: var(--nd-faint) !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-family: 'Poppins', inherit !important;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

/* Body overrides for login page */
body.nd-login-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow: auto !important;
    background: var(--nd-page) !important;
    padding: 32px 16px !important;
}

body.nd-login-body form#form1 { height: auto !important; }

#login-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 440px;
}

#login-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Logo becomes a styled wordmark on the login page */
#login-content a.logo.center,
#login-content .logo.center {
    background-image: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 24px !important;
    float: none !important;
    display: block !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

#login-content a.logo.center::before { content: "ad";    color: var(--nd-orange); }
#login-content a.logo.center::after  { content: "simulo"; color: var(--nd-ink); }

/* Login form card */
#login-content .inner {
    width: 100% !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: var(--nd-r-lg) !important;
    padding: 34px 32px !important;
    background: var(--nd-card) !important;
    box-shadow: var(--nd-sh-2) !important;
}

#login-content .inner .formrow {
    clear: none !important;
    margin: 0 0 14px !important;
}

#login-content .inner .formrow label {
    display: block !important;
    width: auto !important;
    float: none !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--nd-ink) !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
}

#login-content .inner .formrow .textfield {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 14px !important;
    float: none !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: var(--nd-r-md) !important;
    font-size: 14.5px !important;
    font-family: 'Poppins', inherit !important;
    color: var(--nd-ink) !important;
    background: var(--nd-card) !important;
    outline: none !important;
    transition: border-color .14s, box-shadow .14s !important;
}

#login-content .inner .formrow .textfield:focus {
    border-color: var(--nd-orange) !important;
    box-shadow: 0 0 0 3px var(--nd-orange-t) !important;
}

/* Login button */
#login-content a.login-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 48px !important;
    border-radius: var(--nd-r-md) !important;
    background: var(--nd-orange) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: 'Poppins', inherit !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
    transition: background .14s, transform .12s !important;
    box-shadow: 0 6px 16px rgba(244,124,32,.28) !important;
    padding: 0 !important;
}

#login-content a.login-button:hover {
    background: var(--nd-orange-d) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

/* Password reset link */
#login-content a.reset-link {
    color: var(--nd-muted) !important;
    font-size: 13px !important;
    margin-left: 0 !important;
    display: block !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: color .14s !important;
    margin-top: 4px !important;
}
#login-content a.reset-link:hover { color: var(--nd-orange) !important; text-decoration: underline !important; }

/* Login failure / success messages */
#login-content .failureNotification {
    display: block !important;
    width: 100% !important;
    border: 1px solid var(--nd-red) !important;
    border-left: 3px solid var(--nd-red) !important;
    border-radius: var(--nd-r-sm) !important;
    padding: 10px 14px !important;
    color: var(--nd-red) !important;
    font-size: 13px !important;
    background: var(--nd-red-t) !important;
    margin-bottom: 14px !important;
}

#login-content .successNotification,
#login-content #idLoggedOut {
    display: block !important;
    width: 100% !important;
    border: 1px solid var(--nd-green) !important;
    border-left: 3px solid var(--nd-green) !important;
    border-radius: var(--nd-r-sm) !important;
    padding: 10px 14px !important;
    color: var(--nd-green-d) !important;
    font-size: 13px !important;
    background: #F0FDF4 !important;
    margin-bottom: 14px !important;
}

/* Field-level validation errors */
#login-content .failureNotificationUsername,
#login-content .failureNotificationPassword {
    padding-left: 0 !important;
    font-size: 12px !important;
    color: var(--nd-red) !important;
    display: block !important;
    margin-top: 4px !important;
}

/* Copyright under login card */
#login-content .CopyrightLabel {
    color: var(--nd-faint) !important;
    font-size: 11px !important;
    font-style: normal !important;
    text-align: center !important;
    margin-top: 18px !important;
    display: block !important;
}

/* ============================================================
   FIX: SESSION TIMEOUT MODAL VISIBILITY
   Root cause: .modalMsg { display: flex !important } above
   overrides jQuery's .hide() which sets style="display:none".
   Fix: Attribute selector + !important wins over class !important
   when JS hides the element.
   ============================================================ */
#divSessionTimeoutWarning[style*="display:none"],
#divSessionTimeoutWarning[style*="display: none"] {
    display: none !important;
}

/* When visible: show as a compact notification banner at the top,
   NOT as the full-screen overlay that .modalMsg normally creates.
   Must explicitly cancel .modalMsg's right:0 / bottom:0 / bg overlay. */
#divSessionTimeoutWarning {
    top:             calc(var(--nd-top-h) + 10px) !important;
    left:            50% !important;
    right:           auto !important;   /* cancel .modalMsg right:0  */
    bottom:          auto !important;   /* cancel .modalMsg bottom:0 */
    transform:       translateX(-50%) !important;
    max-width:       460px !important;
    width:           92% !important;
    background:      var(--nd-card) !important;
    border:          1px solid var(--nd-line) !important;
    border-top:      3px solid var(--nd-orange) !important;
    border-radius:   var(--nd-r-md) !important;
    padding:         20px 24px !important;
    box-shadow:      var(--nd-sh-3) !important;
    font-size:       13.5px !important;
    color:           var(--nd-ink) !important;
    z-index:         9100 !important;
    display:         flex !important;
    flex-direction:  column !important;
    gap:             14px !important;
    backdrop-filter: none !important;
}

/* Flatten the inner card wrapper (outer element IS the card now) */
#divSessionTimeoutWarning > div {
    background:      transparent !important;
    border:          none !important;
    border-radius:   0 !important;
    padding:         0 !important;
    box-shadow:      none !important;
    max-width:       none !important;
    width:           100% !important;
    max-height:      none !important;
    display:         flex !important;
    flex-direction:  column !important;
    gap:             12px !important;
}

/* Warning label text */
#divSessionTimeoutWarning span[id*="lblSession"] {
    font-size:   13.5px !important;
    color:       var(--nd-ink) !important;
    line-height: 1.5 !important;
    display:     block !important;
}

/* Buttons inside the session warning */
#divSessionTimeoutWarning input[type="submit"],
#divSessionTimeoutWarning input[type="button"],
#divSessionTimeoutWarning button {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    height:          38px !important;
    padding:         0 18px !important;
    border-radius:   var(--nd-r-sm) !important;
    font-family:     'Poppins', inherit !important;
    font-size:       13.5px !important;
    font-weight:     600 !important;
    cursor:          pointer !important;
    transition:      background .14s !important;
    pointer-events:  auto !important;
    position:        relative !important;
    z-index:         9101 !important;
}

/* "Continue working" — green */
[id*="btnContinueWorking"] {
    background: var(--nd-green) !important;
    color:      #fff !important;
    border:     none !important;
}
[id*="btnContinueWorking"]:hover { background: var(--nd-green-d) !important; }

/* "Logout now" — red outline */
[id*="btnLogoutNow"] {
    background: transparent !important;
    color:      var(--nd-red) !important;
    border:     1px solid var(--nd-red) !important;
}
[id*="btnLogoutNow"]:hover { background: var(--nd-red-t) !important; }

/* ============================================================
   TOPBAR BUTTONS — show icon + text labels
   ============================================================ */

/* Widen from fixed 38px square to auto-width with text */
.wrapper.head .IconButtonColor.SquareButton {
    width:   auto !important;
    padding: 0 12px !important;
    gap:     6px !important;
}

/* Show the span, hide raw "button: X" text, inject clean label */
.wrapper.head .IconButtonColor.SquareButton span {
    display:     inline !important;
    font-size:   0 !important;
    font-family: 'Poppins', inherit !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    color:       var(--nd-ink-2) !important;
    line-height: 1 !important;
}

.wrapper.head a.dashboard span::after { content: "Dashboard"; font-size: 13px; color: inherit; }
.wrapper.head a.new span::after       { content: "New";       font-size: 13px; color: inherit; }
.wrapper.head a.open span::after      { content: "Open";      font-size: 13px; color: inherit; }
.wrapper.head a.account span::after   { content: "Account";   font-size: 13px; color: inherit; }

/* White text on active (Selected) button */
.wrapper.head .SquareButton.Selected span,
.wrapper.head .SquareButton.Selected span::after {
    color: #fff !important;
}

/* Keep the hidden timeout-trigger anchor hidden */
#idToolTimeout { display: none !important; }

/* ============================================================
   DASHBOARD GRID LAYOUT — SUPERSEDED, see "DASHBOARD RAIL LAYOUT"
   further down (no longer relies on :has(), which this whole
   attempt — and the v2 flex-row attempt below — turned out to
   not reliably apply). Declarations left empty rather than
   deleted so this section header still marks the history.
   ============================================================ */

/* News panel: right column, full height */
.right-panel .tile.news-OLD-UNUSED {
    grid-column:     5 !important;
    grid-row:        1 / span 5 !important;
    margin:          0 !important;
    overflow:        hidden !important;
    display:         flex !important;
    flex-direction:  column !important;
    min-height:      calc(100vh - var(--nd-top-h) - 32px) !important;
    position:        static !important;
}

/* Status tile: full width across 4 left columns, row 1 */
.right-panel a.tile.status-s {
    grid-column:     1 / span 4 !important;
    grid-row:        1 !important;
    margin:          0 !important;
    display:         flex !important;
    flex-direction:  column !important;
    justify-content: center !important;
    padding:         14px 20px !important;
    text-decoration: none !important;
    min-height:      80px !important;
}

/* 4 small tiles: each in its own column, row 2 */
.right-panel a.tile.myqueue   { grid-column: 1 !important; grid-row: 2 !important; margin: 0 !important; }
.right-panel a.tile.about     { grid-column: 2 !important; grid-row: 2 !important; margin: 0 !important; }
.right-panel a.tile.tutorials { grid-column: 3 !important; grid-row: 2 !important; margin: 0 !important; float: none !important; }
.right-panel a.tile.contact   { grid-column: 4 !important; grid-row: 2 !important; margin: 0 !important; }

.right-panel a.tile.myqueue,
.right-panel a.tile.about,
.right-panel a.tile.tutorials,
.right-panel a.tile.contact {
    display:         flex !important;
    flex-direction:  column !important;
    padding:         16px !important;
    text-decoration: none !important;
    min-height:      130px !important;
}

/* Override old grid.css bg colors */
.tile.bg-gray  { background: var(--nd-card) !important; }
.tile.bg-white { background: var(--nd-card) !important; }

/* ---- Status tile internals ---- */
.tile.status-s .newsFixed {
    height:     auto !important;
    overflow:   visible !important;
    background: transparent !important;
    padding:    0 !important;
}

.tile.status-s .tiletext { display: block !important; }

.tile.status-s .Success {
    background:    transparent !important;
    border:        none !important;
    border-left:   3px solid var(--nd-green) !important;
    border-radius: 0 !important;
    padding:       3px 10px !important;
    margin:        2px 0 !important;
    color:         var(--nd-ink-2) !important;
    font-size:     13px !important;
}

.tile.status-s .place { display: none !important; }

/* ---- My Queue tile internals ---- */
.tile.myqueue .tiletext h1 {
    font-size:   14px !important;
    font-weight: 700 !important;
    padding:     0 !important;
    margin:      0 0 6px !important;
    color:       #fff !important;
}

.tile.myqueue .tiletext {
    display:     block !important;
    color:       rgba(255,255,255,.9) !important;
    font-size:   13px !important;
    line-height: 1.7 !important;
}

.tile.myqueue span.place {
    display:    block !important;
    font-size:  12px !important;
    color:      rgba(255,255,255,.6) !important;
    margin-top: auto !important;
}

/* ---- About tile ---- */
.tile.about .tiletext {
    display:     block !important;
    font-size:   13px !important;
    color:       var(--nd-ink-2) !important;
    line-height: 1.7 !important;
}

.tile.about span.place {
    display:    block !important;
    font-size:  12px !important;
    color:      var(--nd-orange) !important;
    margin-top: auto !important;
}

/* ---- Tutorials tile ---- */
.tile.tutorials img {
    width:         36px !important;
    height:        36px !important;
    display:       block !important;
    margin-bottom: 8px !important;
    opacity:       0.7 !important;
}

.tile.tutorials span.place {
    display:    block !important;
    font-size:  13px !important;
    color:      var(--nd-muted) !important;
    margin-top: auto !important;
}

/* ---- Contact tile ---- */
.tile.contact {
    background: linear-gradient(135deg, var(--nd-orange), var(--nd-orange-d)) !important;
    border:     none !important;
}

.tile.contact span.place {
    display:     block !important;
    font-size:   14px !important;
    font-weight: 600 !important;
    color:       #fff !important;
    margin-top:  auto !important;
}

/* ---- News tile internals ---- */
.tile.news .newsScroll {
    flex:       1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
}

.tile.news .newsScroll .tiletext h1 {
    border-bottom: 1px solid var(--nd-line) !important;
    padding-bottom: 12px !important;
}

/* Non-linked news entry rows (h2 + p inside tiletext span) */
.tile.news .newsScroll .tiletext h2 {
    padding: 10px 16px 2px !important;
    margin:  0 !important;
}

.tile.news .newsScroll .tiletext p {
    padding: 0 16px 10px !important;
    margin:  0 !important;
    font-size:   12.5px !important;
    color:       var(--nd-muted) !important;
    line-height: 1.5 !important;
}

/* No lift on hover for dashboard tiles */
.right-panel .tile:hover { transform: none !important; }

/* ============================================================
   DASHBOARD v2 — COMPLETE REDESIGN OVERRIDE
   All rules below override the grid layout above.
   ============================================================ */

/* ---- TOP-LEVEL LAYOUT: flex row so feed = right panel ---- */
/* DASHBOARD RAIL LAYOUT — position-based, no :has()/feature-detection.
   Both attempts above relied on .right-panel:has(.tile.news) to turn
   .right-panel itself into a flex/grid container so the news feed could
   sit beside the hero content. In practice that selector did not reliably
   take effect, and when it did, every OTHER direct child of .right-panel
   (alert bars, the always-rendered idValidationBar, the debug
   error-message table) got dragged into the row as phantom columns too.
   This version never touches .right-panel's own display mode: it stays
   plain block (its default), so those other children keep their normal
   full-width banner behavior automatically. Only the 2 dashboard regions
   below opt in, via plain absolute positioning. */
.right-panel { position: relative !important; }

/* ---- CENTER SCROLL AREA: hero + tiles, makes room for the rail ---- */
.nd-center-scroll {
    margin-right:   340px !important;
    min-height:     0 !important;
    overflow-y:     auto !important;
    padding:        0 28px 40px !important;
    display:        flex !important;
    flex-direction: column !important;
    transition:     margin-right .28s cubic-bezier(.4,0,.2,1) !important;
}
body.nd-feed-collapsed .nd-center-scroll { margin-right: 60px !important; }

/* ---- WHAT'S NEW FEED: pinned rail, no flex parent required ---- */
.right-panel .tile.news {
    position:        absolute !important;
    top:             0 !important;
    right:           0 !important;
    bottom:          0 !important;
    width:           340px !important;
    height:          auto !important;
    border-radius:   0 !important;
    border-top:      none !important;
    border-bottom:   none !important;
    border-right:    none !important;
    border-left:     1px solid var(--nd-line) !important;
    box-shadow:      none !important;
    margin:          0 !important;
    overflow:        hidden !important;
    display:         flex !important;
    flex-direction:  column !important;
    background:      var(--nd-card) !important;
    transition:      width .28s cubic-bezier(.4,0,.2,1) !important;
    /* cancel old grid positioning */
    grid-column:     auto !important;
    grid-row:        auto !important;
    min-height:      0 !important;
    z-index:         2 !important;
}

/* ---- FEED HEADER ---- */
.nd-feed-head {
    display:        flex !important;
    align-items:    center !important;
    gap:            10px !important;
    padding:        18px 18px 14px !important;
    border-bottom:  1px solid var(--nd-line-2) !important;
    flex:           none !important;
    background:     var(--nd-card) !important;
}

.nd-fh-ic {
    width:           30px !important;
    height:          30px !important;
    border-radius:   9px !important;
    background:      var(--nd-orange-t) !important;
    color:           var(--nd-orange) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex:            none !important;
}

.nd-feed-head h3 {
    margin:      0 !important;
    font-size:   15px !important;
    font-weight: 700 !important;
    color:       var(--nd-ink) !important;
    flex:        1 !important;
}

.nd-feed-collapse {
    width:           30px !important;
    height:          30px !important;
    border-radius:   8px !important;
    background:      transparent !important;
    border:          none !important;
    color:           var(--nd-muted) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    cursor:          pointer !important;
    transition:      background .14s, color .14s !important;
    flex:            none !important;
}
.nd-feed-collapse:hover {
    background: var(--nd-line-2) !important;
    color:      var(--nd-ink) !important;
}

/* Hide the duplicate h1 inside newsScroll (replaced by nd-feed-head) */
.tile.news .newsScroll .tiletext h1 { display: none !important; }

/* Feed scroll area */
.tile.news .newsScroll {
    flex:       1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    padding:    6px 0 18px !important;
    height:     auto !important;
}

/* ---- COLLAPSED FEED RAIL ---- */
.nd-feed-rail {
    display:         none !important;
    flex-direction:  column !important;
    align-items:     center !important;
    width:           60px !important;
    background:      var(--nd-card) !important;
    border-left:     1px solid var(--nd-line) !important;
    padding:         16px 0 0 !important;
    /* pinned the same way as .tile.news above — see DASHBOARD RAIL LAYOUT */
    position:        absolute !important;
    top:              0 !important;
    right:            0 !important;
    bottom:           0 !important;
    height:           auto !important;
    z-index:          2 !important;
}

.nd-rail-btn {
    width:           40px !important;
    height:          40px !important;
    border-radius:   10px !important;
    background:      var(--nd-orange-t) !important;
    color:           var(--nd-orange) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    border:          none !important;
    cursor:          pointer !important;
    transition:      background .14s !important;
}
.nd-rail-btn:hover { background: var(--nd-orange-t2) !important; }

.nd-rail-label {
    writing-mode:   vertical-rl !important;
    margin-top:     14px !important;
    font-size:      11px !important;
    font-weight:    700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color:          var(--nd-muted) !important;
    cursor:         pointer !important;
    user-select:    none !important;
}
.nd-rail-label:hover { color: var(--nd-orange) !important; }

/* Collapsed state: hide feed, show rail */
body.nd-feed-collapsed .right-panel .tile.news { display: none !important; }
body.nd-feed-collapsed .nd-feed-rail           { display: flex !important; }

/* ---- STATUS STRIP (tile.status-s override) ---- */
.tile.status-s,
a.tile.status-s {
    display:         flex !important;
    align-items:     center !important;
    gap:             14px !important;
    margin:          18px 0 0 !important;
    padding:         12px 16px !important;
    background:      linear-gradient(90deg, var(--nd-orange-t), #fff 70%) !important;
    border:          1px solid var(--nd-orange-t2) !important;
    border-radius:   var(--nd-r-md) !important;
    box-shadow:      none !important;
    text-decoration: none !important;
    transition:      box-shadow .14s !important;
    min-height:      0 !important;
    /* cancel old grid positioning */
    grid-column:     auto !important;
    grid-row:        auto !important;
    flex-direction:  row !important;
    justify-content: flex-start !important;
    width:           auto !important;
}
.tile.status-s:hover,
a.tile.status-s:hover { box-shadow: var(--nd-sh-1) !important; }

.nd-status-badge {
    width:           34px !important;
    height:          34px !important;
    border-radius:   9px !important;
    background:      var(--nd-orange) !important;
    color:           #fff !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex:            none !important;
}

.tile.status-s .tiletext {
    flex:      1 !important;
    min-width: 0 !important;
    display:   block !important;
}

.tile.status-s .newsFixed {
    background: transparent !important;
    height:     auto !important;
    overflow:   visible !important;
    padding:    0 !important;
}

.tile.status-s .Success,
.tile.status-s .Failure,
.tile.status-s .Warning {
    background:    transparent !important;
    border:        none !important;
    border-radius: 0 !important;
    padding:       0 !important;
    margin:        0 !important;
    font-size:     13.5px !important;
    line-height:   1.45 !important;
}
.tile.status-s .Success { color: var(--nd-green-d) !important; }
.tile.status-s .Failure { color: var(--nd-red) !important; }
.tile.status-s .Warning { color: var(--nd-orange-d) !important; }
.tile.status-s .place   { display: none !important; }

/* ---- HERO SECTION ---- */
.nd-dash-home {
    padding:        22px 0 16px !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            18px !important;
}

.nd-home-hello h1 {
    margin:         0 !important;
    font-size:      24px !important;
    font-weight:    700 !important;
    letter-spacing: -.01em !important;
    color:          var(--nd-ink) !important;
}

.nd-home-hello p {
    margin:    5px 0 0 !important;
    font-size: 14px !important;
    color:     var(--nd-muted) !important;
}

.nd-action-grid {
    display:               grid !important;
    grid-template-columns: 1.15fr 1fr !important;
    gap:                   18px !important;
}

/* Hero card */
.nd-hero-card {
    position:       relative !important;
    overflow:       hidden !important;
    padding:        28px !important;
    border-radius:  var(--nd-r-lg) !important;
    color:          #fff !important;
    background:     linear-gradient(135deg, #33b768, #23924f) !important;
    box-shadow:     0 16px 36px rgba(37,146,79,.26) !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            12px !important;
}

.nd-hero-glow {
    position:      absolute !important;
    right:         -60px !important;
    bottom:        -90px !important;
    width:         240px !important;
    height:        240px !important;
    border-radius: 50% !important;
    background:    rgba(255,255,255,.1) !important;
    pointer-events: none !important;
}

.nd-hero-card h2 {
    margin:      0 !important;
    font-size:   20px !important;
    font-weight: 700 !important;
    max-width:   18ch !important;
    line-height: 1.25 !important;
    color:       #fff !important;
    font-style:  normal !important;
}

.nd-hero-card p {
    margin:      0 !important;
    font-size:   13.5px !important;
    opacity:     .92 !important;
    max-width:   34ch !important;
    line-height: 1.5 !important;
    color:       #fff !important;
}

.nd-hero-go {
    align-self:      flex-start !important;
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             8px !important;
    height:          44px !important;
    padding:         0 20px !important;
    border-radius:   var(--nd-r-md) !important;
    background:      #fff !important;
    color:           #258a4c !important;
    font-size:       14px !important;
    font-weight:     600 !important;
    font-family:     'Poppins', inherit !important;
    border:          none !important;
    cursor:          pointer !important;
    box-shadow:      0 8px 18px rgba(0,0,0,.12) !important;
    transition:      transform .12s, box-shadow .14s !important;
    margin-top:      8px !important;
    text-decoration: none !important;
}
.nd-hero-go:hover {
    transform:  translateY(-2px) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.18) !important;
    color:      #258a4c !important;
}

/* Side card */
.nd-side-card {
    background:     var(--nd-card) !important;
    border:         1px solid var(--nd-line) !important;
    border-radius:  var(--nd-r-lg) !important;
    box-shadow:     var(--nd-sh-1) !important;
    padding:        22px !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            14px !important;
}

.nd-side-card h3 {
    margin:      0 !important;
    font-size:   15px !important;
    font-weight: 700 !important;
    color:       var(--nd-ink) !important;
}

.nd-tmpl-list {
    display:        flex !important;
    flex-direction: column !important;
    gap:            9px !important;
}

.nd-tmpl-item {
    display:       flex !important;
    align-items:   center !important;
    gap:           12px !important;
    padding:       12px 14px !important;
    border:        1px solid var(--nd-line) !important;
    border-radius: var(--nd-r-md) !important;
    background:    var(--nd-card) !important;
    font-family:   'Poppins', inherit !important;
    cursor:        pointer !important;
    transition:    border-color .14s, background .14s !important;
    text-align:    left !important;
    width:         100% !important;
}
.nd-tmpl-item:hover {
    border-color: var(--nd-orange-t2) !important;
    background:   var(--nd-orange-t) !important;
}

.nd-tmpl-ic {
    width:           36px !important;
    height:          36px !important;
    border-radius:   9px !important;
    background:      var(--nd-orange-t) !important;
    color:           var(--nd-orange) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex:            none !important;
}
.nd-ti-green {
    background: #E4F4EA !important;
    color:      var(--nd-green-d) !important;
}

.nd-tmpl-body {
    flex:           1 !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            2px !important;
    min-width:      0 !important;
}

.nd-tt {
    display:     block !important;
    font-size:   13.5px !important;
    font-weight: 600 !important;
    color:       var(--nd-ink) !important;
}

.nd-ts {
    display:   block !important;
    font-size: 12px !important;
    color:     var(--nd-muted) !important;
}

.nd-tmpl-go {
    color:      var(--nd-faint) !important;
    flex:       none !important;
    transition: transform .14s !important;
}
.nd-tmpl-item:hover .nd-tmpl-go { transform: translateX(3px) !important; color: var(--nd-orange) !important; }

/* ---- SMALL TILES GRID ---- */
.nd-small-tiles {
    display:               grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap:                   16px !important;
    margin-top:            16px !important;
}

/* Override old tile layout within nd-small-tiles */
.nd-small-tiles .tile {
    border-radius:  var(--nd-r-lg) !important;
    margin:         0 !important;
    float:          none !important;
    width:          auto !important;
    min-height:     130px !important;
    display:        flex !important;
    flex-direction: column !important;
    padding:        18px !important;
    /* cancel old grid positioning */
    grid-column:    auto !important;
    grid-row:       auto !important;
}

/* ---- SIDEBAR: divider + section label ---- */
.nd-primary-nav {
    padding: 8px 0 4px !important;
}

.nd-sb-divider {
    height:     1px !important;
    background: var(--nd-line-2) !important;
    margin:     10px 18px 4px !important;
}

/* ---- SIDEBAR LONG-BUTTON ICONS ---- */
/* New Project — already green CTA, just ensure icon */
.LongButton.bg-orange-light.fr-orange {
    gap: 8px !important;
}

/* Open Project and Recent Projects get folder/clock icons */
a[id$="btnButtonOpenProjects"]::before,
input[id$="btnButtonOpenProjects"]::before {
    content: "";
    display: inline-block !important;
    width: 17px !important;
    height: 17px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238C95A3' stroke-width='2'%3E%3Cpath d='M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

a[id$="btnButtonRecentProjects"]::before,
input[id$="btnButtonRecentProjects"]::before {
    content: "";
    display: inline-block !important;
    width: 17px !important;
    height: 17px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238C95A3' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12,6 12,12 16,14'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* ---- LANGUAGE SELECTOR (topbar) ---- */
.nd-lang-selector {
    display:       flex !important;
    align-items:   center !important;
    gap:           7px !important;
    height:        38px !important;
    padding:       0 12px !important;
    border-radius: var(--nd-r-sm) !important;
    border:        1px solid var(--nd-line) !important;
    background:    var(--nd-card) !important;
    color:         var(--nd-ink) !important;
    font-size:     13px !important;
    font-weight:   500 !important;
    font-family:   'Poppins', inherit !important;
    cursor:        default !important;
    transition:    border-color .14s, background .14s !important;
    order:         97 !important;
    flex:          none !important;
    white-space:   nowrap !important;
    user-select:   none !important;
    position:      relative !important;
    overflow:      hidden !important;
}
.nd-lang-selector:hover {
    border-color: var(--nd-orange-t2) !important;
    background:   var(--nd-orange-t) !important;
}
.nd-lang-selector > svg { color: var(--nd-orange) !important; flex: none !important; }
.nd-lang-lbl            { color: var(--nd-ink-2) !important; }
.nd-lang-chev           { color: var(--nd-faint) !important; flex: none !important; }
.nd-lang-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    outline: none;
    z-index: 2;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px;
}

/* ---- NEWS ENTRY STYLING (update items look) ---- */
.tile.news .newsScroll a.postNews {
    display:    block !important;
    padding:    13px 16px !important;
    border-top: 1px solid var(--nd-line-2) !important;
    transition: background .12s !important;
    text-decoration: none !important;
    color: inherit !important;
}
.tile.news .newsScroll a.postNews:hover { background: var(--nd-line-2) !important; }

.tile.news .newsScroll a.postNews h2 {
    font-size:   13.5px !important;
    font-weight: 600 !important;
    color:       var(--nd-ink) !important;
    margin:      0 0 4px !important;
}

.tile.news .newsScroll .tiletext {
    display:     block !important;
    font-size:   12.5px !important;
    color:       var(--nd-muted) !important;
    line-height: 1.5 !important;
    padding:     0 16px 10px !important;
}

.tile.news .newsScroll a.postNews .tiletext {
    padding: 0 !important;
}

.tile.news .newsScroll h2 {
    font-size:   13.5px !important;
    font-weight: 600 !important;
    color:       var(--nd-ink) !important;
    padding:     10px 16px 2px !important;
    margin:      0 !important;
}

.tile.news .ReadMore {
    display:     block !important;
    font-size:   12px !important;
    font-weight: 600 !important;
    color:       var(--nd-orange) !important;
    margin-top:  4px !important;
    padding:     0 !important;
}

/* ---- TOPBAR: sign out button order fix ---- */
.wrapper.head .logout,
.wrapper.head a.logout {
    order: 99 !important;
}

/* Ensure language selector comes before sign-out */
.nd-lang-selector { order: 97 !important; }
.nd-bar-div       { order: 96 !important; }
.nd-unit-toggle   { order: 95 !important; }

/* ---- BREADCRUMB AREA ---- */
.nd-topbar-spacer {
    flex:  1 !important;
    order: 50 !important;
}

/* ---- TILE hover: never lift in dashboard ---- */
.nd-small-tiles .tile:hover { transform: none !important; }
.tile.status-s:hover        { transform: none !important; }

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD v3 — SPECIFICITY & FUNCTIONALITY FIXES
   All rules use higher-specificity selectors or appear later
   to correctly override conflicting earlier rules.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOPBAR: Fix hover shrinking ──────────────────────────── */
/* Old rule ".wrapper.head .IconButtonColor.SquareButton:hover"
   (spec 0,5,0) forced width:38px. Match it here with same
   specificity + later position so this wins. */
.wrapper.head .IconButtonColor.SquareButton:hover {
    width:   auto !important;
    padding: 0 12px !important;
    gap:     6px !important;
}

/* ── 2. TOPBAR: Icons via ::before on <a> buttons ─────────────── */
.wrapper.head a.IconButtonColor.SquareButton {
    display:     inline-flex !important;
    align-items: center !important;
    gap:         6px !important;
}

.wrapper.head a.dashboard::before,
.wrapper.head a.account::before,
.wrapper.head a.open::before,
.wrapper.head a.new::before,
.wrapper.head a.logout::before {
    content:             "" !important;
    display:             inline-block !important;
    width:               16px !important;
    height:              16px !important;
    background-size:     contain !important;
    background-repeat:   no-repeat !important;
    background-position: center !important;
    flex:                none !important;
    vertical-align:      middle !important;
}

.wrapper.head a.dashboard::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234A515C' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E") !important;
}
.wrapper.head a.account::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234A515C' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}
.wrapper.head a.open::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234A515C' stroke-width='2'%3E%3Cpath d='M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z'/%3E%3C/svg%3E") !important;
}
.wrapper.head a.new::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234A515C' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='16'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E") !important;
}
.wrapper.head a.logout::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234A515C' stroke-width='2'%3E%3Cpath d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4'/%3E%3Cpolyline points='16,17 21,12 16,7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") !important;
}

/* White icon when button is in Selected (active orange) state */
.wrapper.head a.Selected.dashboard::before,
.wrapper.head a.Selected.account::before,
.wrapper.head a.Selected.open::before,
.wrapper.head a.Selected.new::before,
.wrapper.head a.Selected.logout::before {
    filter:  brightness(0) invert(1) !important;
    opacity: 1 !important;
}

/* ── 3. STATUS STRIP: force row layout with higher specificity ─── */
/* Old rule ".right-panel a.tile.status-s" has spec 0,3,1.
   ".right-panel .nd-center-scroll a.tile.status-s" has spec 0,4,1 — wins. */
.right-panel .nd-center-scroll a.tile.status-s {
    display:         flex !important;
    flex-direction:  row !important;
    align-items:     center !important;
    gap:             14px !important;
    justify-content: flex-start !important;
    min-height:      0 !important;
    grid-column:     auto !important;
    grid-row:        auto !important;
}

/* newsFixed: collapse to inline-flex row, kill <br> gaps */
.right-panel .nd-center-scroll .tile.status-s .newsFixed {
    display:     flex !important;
    flex-wrap:   wrap !important;
    gap:         0 8px !important;
    align-items: baseline !important;
    background:  transparent !important;
    height:      auto !important;
    overflow:    visible !important;
    padding:     0 !important;
}

.right-panel .nd-center-scroll .tile.status-s .newsFixed > div {
    display:    inline !important;
    font-size:  13.5px !important;
    background: transparent !important;
    border:     none !important;
    padding:    0 !important;
    margin:     0 !important;
}

.right-panel .nd-center-scroll .tile.status-s .newsFixed br {
    display: none !important;
}

/* ── 4. SMALL TILES: fix grid-row:2 empty-row gap ───────────────── */
/* Old rules forced grid-row:2 inside nd-small-tiles grid,
   leaving row 1 empty. Override with row:1 using spec 0,4,1. */
.right-panel .nd-small-tiles a.tile.myqueue,
.right-panel .nd-small-tiles a.tile.about,
.right-panel .nd-small-tiles a.tile.tutorials,
.right-panel .nd-small-tiles a.tile.contact {
    grid-row:       1 !important;
    display:        flex !important;
    flex-direction: column !important;
    min-height:     150px !important;
    padding:        18px !important;
}

/* Contact tile: always show "Contact Us" text (was display:none) */
.nd-small-tiles a.tile.contact .place,
.right-panel .nd-small-tiles a.tile.contact .place {
    display:     block !important;
    font-size:   14px !important;
    font-weight: 700 !important;
    color:       var(--nd-ink) !important;
    margin-top:  10px !important;
}

/* ── 5. TILE ICONS AND HEADINGS ──────────────────────────────────── */

/* Hide the skin image in tutorials (replaced by CSS icon) */
.nd-small-tiles .tile.tutorials img { display: none !important; }

/* Tutorials — icon badge + "Tutorials" label via ::before */
.nd-small-tiles .tile.tutorials::before {
    content:              "Tutorials" !important;
    display:              block !important;
    font-size:            13px !important;
    font-weight:          700 !important;
    color:                var(--nd-ink) !important;
    padding:              9px 12px 9px 46px !important;
    background-image:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23F47C20' stroke-width='2'%3E%3Cpath d='M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z'/%3E%3C/svg%3E") !important;
    background-size:      22px !important;
    background-repeat:    no-repeat !important;
    background-position:  10px center !important;
    background-color:     var(--nd-orange-t) !important;
    border-radius:        10px !important;
    margin-bottom:        12px !important;
    flex:                 none !important;
    line-height:          1.4 !important;
}

/* My Queue — icon badge only (h1 inside is the heading) */
.nd-small-tiles .tile.myqueue::before {
    content:              "" !important;
    display:              block !important;
    width:                42px !important;
    height:               42px !important;
    background-image:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23F47C20' stroke-width='2'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E") !important;
    background-size:      22px !important;
    background-repeat:    no-repeat !important;
    background-position:  center !important;
    background-color:     var(--nd-orange-t) !important;
    border-radius:        11px !important;
    margin-bottom:        10px !important;
    flex:                 none !important;
}

/* Style the h1 inside myqueue tile */
.nd-small-tiles .tile.myqueue .tiletext h1 {
    font-size:   14px !important;
    font-weight: 700 !important;
    color:       var(--nd-ink) !important;
    margin:      0 0 6px !important;
    padding:     0 !important;
    text-transform: uppercase !important;
}
.nd-small-tiles .tile.myqueue .tiletext {
    font-size: 12px !important;
    color:     var(--nd-muted) !important;
}

/* About — icon badge + "About" label via ::before */
.nd-small-tiles .tile.about::before {
    content:              "About AdSimulo" !important;
    display:              block !important;
    font-size:            13px !important;
    font-weight:          700 !important;
    color:                var(--nd-ink) !important;
    padding:              9px 12px 9px 46px !important;
    background-image:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23F47C20' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") !important;
    background-size:      22px !important;
    background-repeat:    no-repeat !important;
    background-position:  10px center !important;
    background-color:     var(--nd-orange-t) !important;
    border-radius:        10px !important;
    margin-bottom:        12px !important;
    flex:                 none !important;
    line-height:          1.4 !important;
}
.nd-small-tiles .tile.about .tiletext {
    font-size:   12.5px !important;
    color:       var(--nd-muted) !important;
    line-height: 1.5 !important;
}

/* Contact — icon badge (text already in .place which is now visible) */
.nd-small-tiles .tile.contact::before {
    content:              "" !important;
    display:              block !important;
    width:                42px !important;
    height:               42px !important;
    background-image:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23F47C20' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") !important;
    background-size:      22px !important;
    background-repeat:    no-repeat !important;
    background-position:  center !important;
    background-color:     var(--nd-orange-t) !important;
    border-radius:        11px !important;
    margin-bottom:        10px !important;
    flex:                 none !important;
}

/* ── 6. MODAL CLOSE BUTTON: ✕ via background-image (input has no ::before) */
input[type="button"].close,
input[type="submit"].close {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238C95A3' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") !important;
    background-size:     14px 14px !important;
    background-repeat:   no-repeat !important;
    background-position: center center !important;
    background-color:    var(--nd-line-2) !important;
}
input[type="button"].close:hover,
input[type="submit"].close:hover {
    background-color: var(--nd-line) !important;
}

/* ── 7. SIDEBAR: wider + allow vertical scroll ───────────────────── */
:root { --nd-sb-w: 280px; }
.left-panel { overflow-y: auto !important; }

/* ═══════════════════════════════════════════════════════════════
   GLOBAL LAYOUT & NAVIGATION FIXES
   Sidebar nav, breadcrumbs, slim user strip, topbar hover fixes.
   ═══════════════════════════════════════════════════════════════ */

/* ---- GLOBAL SIDEBAR NAVIGATION ---- */
.nd-global-nav {
    display: flex;
    flex-direction: column;
    padding: 8px 14px;
    flex: none;
}

.nd-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    height: 44px !important;
    padding: 0 14px !important;
    margin: 1px 0 !important;
    border-radius: var(--nd-r-md) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: 'Poppins', inherit !important;
    text-align: left !important;
    text-transform: none !important;
    color: var(--nd-ink-2) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: background .14s, color .14s !important;
    text-decoration: none !important;
}

.nd-nav-item:hover {
    background: var(--nd-orange-t) !important;
    color: var(--nd-orange-d) !important;
}

.nd-nav-item.Selected,
.nd-nav-item.dashboard.Selected {
    background: var(--nd-orange) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(244,124,32,.25) !important;
}

.nd-nav-item svg {
    flex: none !important;
    color: currentColor !important;
}

/* CTA — New Project */
.nd-nav-item.nd-nav-cta {
    background: var(--nd-green) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 16px rgba(46,170,94,.28) !important;
    margin-bottom: 6px !important;
    justify-content: center !important;
}

.nd-nav-item.nd-nav-cta:hover {
    background: var(--nd-green-d) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

/* Selected state on CTA should stay green, not orange */
.nd-nav-item.nd-nav-cta.Selected {
    background: var(--nd-green-d) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(46,170,94,.32) !important;
}

/* ---- BREADCRUMBS ---- */
.nd-breadcrumbs {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--nd-muted) !important;
    flex: none !important;
    order: -1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-right: 46px !important;
}

.nd-breadcrumbs a,
.nd-breadcrumbs span {
    color: inherit !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

.nd-breadcrumbs a {
    transition: color .14s !important;
}

.nd-breadcrumbs a:hover {
    color: var(--nd-orange-d) !important;
}

.nd-bc-current {
    color: var(--nd-ink) !important;
    font-weight: 600 !important;
}

.nd-bc-sep {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--nd-faint) !important;
    flex: none !important;
}

.nd-bc-sep svg {
    display: block !important;
}

.nd-bc-project,
.nd-bc-sim {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* ---- TOPBAR: non-interactive parts must not change colour on hover ---- */
.nd-breadcrumbs span:hover,
.nd-bc-current:hover,
.nd-bc-sep:hover {
    background: transparent !important;
    color: inherit !important;
}

.nd-breadcrumbs a:hover {
    color: var(--nd-orange-d) !important;
}

/* ---- RUN SIMULATION BUTTON: icon + text ---- */
.wrapper.head .ToolbarButton.simulation {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.wrapper.head .ToolbarButton.simulation svg {
    flex: none !important;
}

/* ---- SLIM USER STATUS STRIP ---- */
.tile.status-s,
a.tile.status-s {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 16px !important;
    padding: 10px 14px !important;
    background: #fff !important;
    border: 1px solid var(--nd-orange-t2) !important;
    border-radius: var(--nd-r-md) !important;
    box-shadow: var(--nd-sh-1) !important;
    min-height: 52px !important;
}

.tile.status-s:hover,
a.tile.status-s:hover {
    box-shadow: var(--nd-sh-2) !important;
    transform: none !important;
    background: #fff !important;
}

/* grid.css (legacy): ".tile.status-s{color:transparent}" and
   ":hover{color:#fff}" — neither !important, but nothing in here ever
   set color on the plain (non-hover) selector either, so on hover any
   text not wrapped in a protected .Success/.Failure/.Warning span
   inherits white-on-white and disappears. Cancel both states outright. */
.tile.status-s,
.tile.status-s:hover,
a.tile.status-s,
a.tile.status-s:hover {
    color: var(--nd-ink-2) !important;
}

.nd-user-close {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--nd-muted) !important;
    /* The literal "✕" character in the markup renders as mojibake (file
       encoding issue we can't fix from here — aspx edits aren't taking
       effect on this deployment). Hide that raw text node and draw the
       glyph via a CSS content string instead, which is just an ASCII
       escape and immune to the encoding problem. */
    font-size: 0 !important;
    line-height: 28px !important;
    text-align: center !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .14s, color .14s !important;
    flex: none !important;
    margin-left: auto !important;
    user-select: none !important;
}

.nd-user-close::before {
    content: "\2715" !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

.nd-user-close:hover {
    background: var(--nd-line-2) !important;
    color: var(--nd-ink) !important;
}

/* Inline licence panels into a single line */
.tile.status-s .newsFixed,
.right-panel .nd-center-scroll .tile.status-s .newsFixed {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 0 !important;
    background: transparent !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
}

.tile.status-s .newsFixed > div,
.right-panel .nd-center-scroll .tile.status-s .newsFixed > div {
    display: inline !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--nd-ink-2) !important;
}

.tile.status-s .newsFixed br,
.right-panel .nd-center-scroll .tile.status-s .newsFixed br {
    display: none !important;
}

/* Name highlight */
.tile.status-s .newsFixed .Success strong,
.tile.status-s .newsFixed .Failure strong {
    font-weight: 700 !important;
    color: var(--nd-ink) !important;
}

/* Status dot — only on the active licence panel */
[id$="idLicenceActive"].Success::before {
    content: "" !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--nd-green) !important;
    margin: 0 6px 0 2px !important;
    vertical-align: middle !important;
}

/* Override old status strip gradient */
.tile.status-s,
a.tile.status-s,
.right-panel .nd-center-scroll a.tile.status-s {
    background: #fff !important;
    border: 1px solid var(--nd-orange-t2) !important;
}

/* Hide hover placeholder in slim strip */
.tile.status-s .place {
    display: none !important;
}

/* ---- LAYOUT: sidebar / main content grid items ---- */
.left-panel {
    width: var(--nd-sb-w) !important;
    min-height: 0 !important;
    height: 100% !important;
    float: none !important;
    background: var(--nd-card) !important;
    border-right: 1px solid var(--nd-line) !important;
    display: flex !important;
    flex-direction: column !important;
    flex: none !important;
    overflow-y: auto !important;
}

.right-panel {
    flex: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    background: var(--nd-page) !important;
}

/* Footer inside sidebar */
.nd-sidebar-footer {
    margin-top: auto !important;
}

/* ---- DASHBOARD MASTER: remove extra top padding now nav lives in shared master ---- */
.nd-primary-nav {
    padding-top: 0 !important;
}

/* Recent projects divider when it immediately follows global nav */
.nd-global-nav + .nd-sb-divider,
.nd-global-nav + .ControlPanel + .nd-sb-divider {
    margin-top: 6px !important;
}

/* ---- TOPBAR ORDERING ADJUSTMENTS ---- */
.nd-breadcrumbs { order: -1 !important; }
.nd-topbar-spacer { order: 50 !important; }
.nd-unit-toggle   { order: 95 !important; }
.nd-bar-div       { order: 96 !important; }
.nd-lang-selector { order: 97 !important; }
.wrapper.head .logout,
.wrapper.head a.logout { order: 99 !important; }

/* ---- KEEP EXISTING TOPBAR ICON BUTTONS SQUARE ---- */
.wrapper.head .IconButtonColor.SquareButton {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    gap: 0 !important;
}

.wrapper.head .IconButtonColor.SquareButton span {
    display: none !important;
}

/* ============================================================
   PROJECT SCREENS & REPORTS FIXES
   ============================================================ */

/* Alerts live inside .right-panel, so they sit inside the main content area. */
.right-panel > .alert {
    border-left: none !important;
    border-bottom: 1px solid var(--nd-line) !important;
}
.right-panel > .alert .wrapper {
    padding-left: 24px !important;
    background: none !important;
}
#alertReadOnly .AlertButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: auto !important;
    min-width: 64px !important;
    margin-bottom: 8px !important;
}

/* Generic full-width project-content wrapper used inside TabPanel */
.nd-project-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}
.nd-project-content > table,
.nd-project-content > center > table {
    width: 100% !important;
}

/* ---------- FloorData / PassengerData tables ---------- */
#console-container .FloorTable,
#console-container .ServedFloorTable {
    width: 100% !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: var(--nd-r-md) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    background: var(--nd-card) !important;
}
#console-container .FloorTable th,
#console-container .FloorTable td,
#console-container .ServedFloorTable th,
#console-container .ServedFloorTable td {
    border-left: none !important;
    border-right: none !important;
}
#console-container .FloorTable th,
#console-container .ServedFloorTable th,
#console-container .FloorTableHeader,
#console-container .bg-dark-header {
    background: var(--nd-line-2) !important;
    color: var(--nd-ink-2) !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--nd-line) !important;
}
#console-container .FloorTable td {
    padding: 7px 10px !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--nd-line-2) !important;
}
#console-container .FloorTable tr:last-child td { border-bottom: none !important; }
#console-container .FloorTableFooter {
    background: var(--nd-line-2) !important;
    font-weight: 700 !important;
}
#console-container .ColumnHeader {
    background: var(--nd-line-2) !important;
    color: var(--nd-ink-2) !important;
    font-weight: 700 !important;
}
#console-container .FloorTable input[type=text],
#console-container .FloorTable select {
    border: 1px solid var(--nd-line) !important;
    border-radius: 6px !important;
    height: 30px !important;
    padding: 0 6px !important;
    font-size: 13px !important;
}
#console-container .LiftFloor input[type=text] {
    width: 22px !important;
    padding: 0 !important;
    text-align: center !important;
}
#console-container .SpareLiftFloor { width: 19px !important; }

/* ---------- Reports filters (left sidebar) ---------- */
.nd-report-filters {
    display: block !important;
    width: 100% !important;
    padding: 14px !important;
}
.nd-report-filters table { width: 100% !important; }
.nd-report-filters td { padding: 0 !important; vertical-align: top !important; }
.nd-report-filters .spaceBefore {
    display: table-cell !important;
    margin-top: 14px !important;
    margin-bottom: 4px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--nd-ink-2) !important;
}
.nd-report-filters select.ListBox,
.nd-report-filters select.ShortBox,
.nd-report-filters .ListBox,
.nd-report-filters .ShortBox {
    width: 100% !important;
    max-width: 100% !important;
}
.nd-report-filters .CheckBoxList { margin-top: 4px !important; }
.nd-report-filters .CheckBoxList input { margin-right: 6px !important; }
.nd-report-filters .CheckBoxList label {
    font-weight: 500 !important;
    color: var(--nd-ink-2) !important;
    font-size: 13px !important;
}

/* Download Report button */
.nd-report-download {
    width: 100% !important;
    background: var(--nd-orange) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(244,124,32,.25) !important;
    margin-top: 18px !important;
    justify-content: center !important;
}
.nd-report-download:hover {
    background: var(--nd-orange-d) !important;
}

/* ---------- Reports main panel ---------- */
.nd-report-main {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    background: var(--nd-card) !important;
    border-radius: var(--nd-r-md) !important;
    padding: 22px !important;
    margin: 0 24px 24px 0 !important;
    box-shadow: var(--nd-sh-1) !important;
    overflow: visible !important;
}
.nd-report-main table#tblReports,
.nd-report-main #tblReports {
    width: 100% !important;
    background: transparent !important;
}
.nd-report-main #tblReports td {
    border: none !important;
    padding: 0 !important;
    vertical-align: top !important;
}
.nd-report-main #imgChart,
.nd-report-main #simChart {
    display: block !important;
    margin: 0 auto 18px !important;
    max-width: 100% !important;
}
.nd-report-main #simTable { margin-top: 10px !important; }


/* ═══════════════════════════════════════════════════════════════
   DASHBOARD & PROJECTS FIXES
   Added to match design references:
   - image2 / image15: sidebar Recent Projects
   - image4: slim user status strip
   - image12: dashboard/workspace layout
   - image16: 4 dashboard tiles
   - image17 / image18: Projects list design
   ═══════════════════════════════════════════════════════════════ */

/* ---- DASHBOARD CENTER SCROLL PADDING ---- */
.nd-center-scroll {
    padding: 0 28px 40px !important;
}

/* ---- STATUS STRIP: slim user info strip (image4) ---- */
.tile.status-s,
a.tile.status-s,
.right-panel .nd-center-scroll a.tile.status-s {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 18px 0 0 !important;
    padding: 10px 14px !important;
    background: #fff !important;
    border: 1px solid var(--nd-orange-t2) !important;
    border-radius: var(--nd-r-md) !important;
    box-shadow: var(--nd-sh-1) !important;
    min-height: 52px !important;
    text-decoration: none !important;
    width: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
}

.tile.status-s:hover,
a.tile.status-s:hover,
.right-panel .nd-center-scroll a.tile.status-s:hover {
    background: #fff !important;
    box-shadow: var(--nd-sh-2) !important;
    transform: none !important;
}

.nd-status-badge {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: var(--nd-orange) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
}

.nd-user-close {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--nd-muted) !important;
    /* The literal "✕" character in the markup renders as mojibake (file
       encoding issue we can't fix from here — aspx edits aren't taking
       effect on this deployment). Hide that raw text node and draw the
       glyph via a CSS content string instead, which is just an ASCII
       escape and immune to the encoding problem. */
    font-size: 0 !important;
    line-height: 28px !important;
    text-align: center !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .14s, color .14s !important;
    flex: none !important;
    margin-left: auto !important;
    user-select: none !important;
}

.nd-user-close::before {
    content: "\2715" !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

.nd-user-close:hover {
    background: var(--nd-line-2) !important;
    color: var(--nd-ink) !important;
}

/* Inline the licence/role panels into a single text line */
.tile.status-s .newsFixed,
.right-panel .nd-center-scroll .tile.status-s .newsFixed {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 0 !important;
    background: transparent !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
}

.tile.status-s .newsFixed > div,
.right-panel .nd-center-scroll .tile.status-s .newsFixed > div {
    display: inline !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--nd-ink-2) !important;
    line-height: 1.5 !important;
}

.tile.status-s .newsFixed br,
.right-panel .nd-center-scroll .tile.status-s .newsFixed br {
    display: none !important;
}

.tile.status-s .newsFixed .Success strong,
.tile.status-s .newsFixed .Failure strong {
    font-weight: 700 !important;
    color: var(--nd-ink) !important;
}

/* Green status dot at the start of the active subscription line */
[id$="idLicenceActive"].Success::before {
    content: "" !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--nd-green) !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
}

/* ---- SMALL TILES (image16) ---- */
.nd-small-tiles {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-top: 16px !important;
}

.nd-small-tiles .tile {
    border-radius: var(--nd-r-lg) !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    min-height: 150px !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 18px !important;
    grid-column: auto !important;
    grid-row: auto !important;
    text-decoration: none !important;
}

.nd-small-tiles .tile:hover {
    transform: none !important;
}

/* My Queue — blue gradient */
.nd-small-tiles a.tile.myqueue {
    background: linear-gradient(135deg, var(--nd-blue), #2c63b0) !important;
    border: none !important;
    color: #fff !important;
}

.nd-small-tiles .tile.myqueue::before {
    content: "" !important;
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
    background-color: rgba(255,255,255,.18) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E") !important;
    background-size: 22px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin-bottom: 12px !important;
    flex: none !important;
}

.nd-small-tiles .tile.myqueue .tiletext h1 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.nd-small-tiles .tile.myqueue .tiletext {
    display: block !important;
    font-size: 12.5px !important;
    color: rgba(255,255,255,.9) !important;
    line-height: 1.7 !important;
}

.nd-small-tiles .tile.myqueue span.place {
    display: block !important;
    font-size: 12px !important;
    color: rgba(255,255,255,.65) !important;
    margin-top: auto !important;
}

/* About — white card with orange header pill */
.nd-small-tiles a.tile.about {
    background: var(--nd-card) !important;
    border: 1px solid var(--nd-line) !important;
}

.nd-small-tiles .tile.about::before {
    content: "About AdSimulo" !important;
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--nd-ink) !important;
    padding: 9px 12px 9px 46px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23F47C20' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") !important;
    background-size: 22px !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
    background-color: var(--nd-orange-t) !important;
    border-radius: 10px !important;
    margin-bottom: 14px !important;
    flex: none !important;
    line-height: 1.4 !important;
}

.nd-small-tiles .tile.about .tiletext {
    display: block !important;
    font-size: 12.5px !important;
    color: var(--nd-muted) !important;
    line-height: 1.6 !important;
}

.nd-small-tiles .tile.about span.place {
    display: block !important;
    font-size: 12px !important;
    color: var(--nd-orange) !important;
    margin-top: auto !important;
}

.nd-small-tiles .tile.about span.place br {
    display: none !important;
}

/* Tutorials — white card with orange header pill */
.nd-small-tiles a.tile.tutorials {
    background: var(--nd-card) !important;
    border: 1px solid var(--nd-line) !important;
}

.nd-small-tiles .tile.tutorials img {
    display: none !important;
}

.nd-small-tiles .tile.tutorials::before {
    content: "Tutorials" !important;
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--nd-ink) !important;
    padding: 9px 12px 9px 46px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23F47C20' stroke-width='2'%3E%3Cpath d='M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z'/%3E%3C/svg%3E") !important;
    background-size: 22px !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
    background-color: var(--nd-orange-t) !important;
    border-radius: 10px !important;
    margin-bottom: 14px !important;
    flex: none !important;
    line-height: 1.4 !important;
}

.nd-small-tiles .tile.tutorials .tiletext {
    display: none !important;
}

.nd-small-tiles .tile.tutorials .nd-tile-flavor {
    display: block !important;
    font-size: 12.5px !important;
    color: var(--nd-muted) !important;
    line-height: 1.6 !important;
    margin-top: auto !important;
}

.nd-small-tiles .tile.tutorials span.place {
    display: none !important;
}

/* Contact — orange gradient */
.nd-small-tiles a.tile.contact {
    background: linear-gradient(135deg, var(--nd-orange), var(--nd-orange-d)) !important;
    border: none !important;
    color: #fff !important;
}

.nd-small-tiles .tile.contact::before {
    content: "" !important;
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
    background-color: rgba(255,255,255,.18) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") !important;
    background-size: 22px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin-bottom: 12px !important;
    flex: none !important;
}

.nd-small-tiles .tile.contact .tiletext {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 8px !important;
}

.nd-small-tiles .tile.contact .nd-tile-flavor {
    display: block !important;
    font-size: 12.5px !important;
    color: rgba(255,255,255,.9) !important;
    line-height: 1.6 !important;
    margin-top: 0 !important;
}

.nd-small-tiles .tile.contact span.place {
    display: none !important;
}

/* ---- SIDEBAR RECENT PROJECTS (image2 / image15) ---- */
.nd-recent-projects.vertical-nav {
    width: 100% !important;
    padding: 6px 0 !important;
}

.nd-recent-projects.vertical-nav li {
    /* Default.css: ".left-panel li.OpenProject{width:166px}" (no !important)
       is an equal-specificity tie with the old selector here and was never
       being beaten — every row capped at 166px regardless of sidebar width. */
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Base project / simulation rows */
.nd-recent-projects.vertical-nav li a,
.nd-recent-projects.vertical-nav li input[type="submit"],
.nd-recent-projects.vertical-nav li span.Help_h {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 7px 34px 7px 42px !important;
    margin: 2px 0 !important;
    border-radius: var(--nd-r-md) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Poppins', inherit !important;
    color: var(--nd-ink-2) !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .14s, color .14s !important;
    text-align: left !important;
    line-height: 1.35 !important;
    position: relative !important;
}

/* Simulation sub-items: indented, smaller, dot icon */
.nd-recent-projects.vertical-nav li.OpenSimulation a,
.nd-recent-projects.vertical-nav li.OpenSimulation input[type="submit"],
.nd-recent-projects.vertical-nav li.OpenSimulation span.Help_h {
    width: calc(100% - 48px) !important;
    margin-left: 28px !important;
    padding-left: 36px !important;
    font-size: 12.5px !important;
    min-height: 34px !important;
}

/* Project folder icon */
.nd-recent-projects.vertical-nav li.OpenProject a::before,
.nd-recent-projects.vertical-nav li.OpenProject input[type="submit"]::before {
    content: "" !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238C95A3' stroke-width='2'%3E%3Cpath d='M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex: none !important;
}

/* Simulation dot icon */
.nd-recent-projects.vertical-nav li.OpenSimulation a::before,
.nd-recent-projects.vertical-nav li.OpenSimulation input[type="submit"]::before {
    content: "" !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--nd-faint) !important;
    flex: none !important;
}

/* Chevron / arrow for project rows */
.nd-recent-projects.vertical-nav li.OpenProject a::after,
.nd-recent-projects.vertical-nav li.OpenProject input[type="submit"]::after {
    content: "" !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 14px !important;
    height: 14px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238C95A3' stroke-width='2.5'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex: none !important;
    transition: transform .14s, background-image .14s !important;
}

/* Hover states */
.nd-recent-projects.vertical-nav li.OpenProject a:hover::after,
.nd-recent-projects.vertical-nav li.OpenProject input[type="submit"]:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23F47C20' stroke-width='2.5'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
    transform: translateY(-50%) translateX(2px) !important;
}

.nd-recent-projects.vertical-nav li a:hover,
.nd-recent-projects.vertical-nav li input[type="submit"]:hover {
    background: var(--nd-orange-t) !important;
    color: var(--nd-orange-d) !important;
}

.nd-recent-projects.vertical-nav li.OpenProject a:hover::before,
.nd-recent-projects.vertical-nav li.OpenProject input[type="submit"]:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23F47C20' stroke-width='2'%3E%3Cpath d='M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z'/%3E%3C/svg%3E") !important;
}

.nd-recent-projects.vertical-nav li.OpenSimulation a:hover::before,
.nd-recent-projects.vertical-nav li.OpenSimulation input[type="submit"]:hover::before {
    background: var(--nd-orange) !important;
}

/* Current / selected project */
.nd-recent-projects.vertical-nav li.OpenProject.Current a,
.nd-recent-projects.vertical-nav li.OpenProject.Current input[type="submit"] {
    background: var(--nd-orange) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(244,124,32,.25) !important;
}

.nd-recent-projects.vertical-nav li.OpenProject.Current a::before,
.nd-recent-projects.vertical-nav li.OpenProject.Current input[type="submit"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z'/%3E%3C/svg%3E") !important;
}

.nd-recent-projects.vertical-nav li.OpenProject.Current a::after,
.nd-recent-projects.vertical-nav li.OpenProject.Current input[type="submit"]::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    transform: translateY(-50%) !important;
}

/* Current / selected simulation */
.nd-recent-projects.vertical-nav li.OpenSimulation.Current a,
.nd-recent-projects.vertical-nav li.OpenSimulation.Current input[type="submit"] {
    background: var(--nd-orange-t2) !important;
    color: var(--nd-orange-d) !important;
    font-weight: 600 !important;
}

.nd-recent-projects.vertical-nav li.OpenSimulation.Current a::before,
.nd-recent-projects.vertical-nav li.OpenSimulation.Current input[type="submit"]::before {
    background: var(--nd-orange) !important;
}

/* Locked project item */
.nd-recent-projects.vertical-nav li span.Help_h {
    color: var(--nd-faint) !important;
    cursor: default !important;
}

.nd-recent-projects.vertical-nav li.OpenProject span.Help_h {
    padding-left: 42px !important;
}

.nd-recent-projects.vertical-nav li.OpenProject span.Help_h::before {
    content: "" !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23AEB6C2' stroke-width='2'%3E%3Cpath d='M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.nd-recent-projects.vertical-nav li.OpenSimulation span.Help_h {
    padding-left: 36px !important;
    margin-left: 28px !important;
}

.nd-recent-projects.vertical-nav li.OpenSimulation span.Help_h::before {
    content: "" !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--nd-faint) !important;
}

/* ---- PROJECTS PAGE (Console/Projects.aspx) ---- */
.nd-projects-shell {
    display: block !important;
    padding: 20px !important;
    overflow: hidden !important;
}

.nd-projects-shell > table.ProjectList {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.nd-projects-shell td.wide-ProjectList,
.nd-projects-shell td.wide-PanelDetails {
    padding: 0 !important;
    vertical-align: top !important;
}

.nd-projects-shell td.wide-ProjectList {
    padding-right: 18px !important;
}

/* Pagination buttons */
.nd-projects-shell .RepeaterButton,
.nd-projects-shell .Selected.RepeaterButton {
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    margin: 0 2px !important;
    border-radius: var(--nd-r-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', inherit !important;
    border: none !important;
    cursor: pointer !important;
    transition: background .14s !important;
}

.nd-projects-shell .RepeaterButton {
    background: var(--nd-ink-2) !important;
    color: #fff !important;
}

.nd-projects-shell .RepeaterButton:hover {
    background: var(--nd-orange) !important;
    color: #fff !important;
}

.nd-projects-shell .Selected.RepeaterButton {
    background: var(--nd-orange) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(244,124,32,.25) !important;
}

/* Project grid */
.nd-projects-shell .TableProjectList {
    width: 100% !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: var(--nd-r-md) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    margin-top: 12px !important;
}

.nd-projects-shell .TableProjectList th,
.nd-projects-shell .TableProjectList .FixedHeader {
    background: var(--nd-line-2) !important;
    color: var(--nd-ink-2) !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--nd-line) !important;
    text-align: left !important;
}

.nd-projects-shell .TableProjectList td {
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    border-bottom: 1px solid var(--nd-line-2) !important;
    color: var(--nd-ink) !important;
}

.nd-projects-shell .TableProjectList tr:last-child td {
    border-bottom: none !important;
}

.nd-projects-shell .TableProjectList .RowUnSelected {
    background: var(--nd-card) !important;
    transition: background .12s !important;
}

.nd-projects-shell .TableProjectList .RowUnSelected:hover {
    background: var(--nd-orange-t) !important;
}

.nd-projects-shell .TableProjectList .RowSelected,
.nd-projects-shell .TableProjectList .RowSelected td {
    background: var(--nd-orange-t) !important;
    color: var(--nd-orange-d) !important;
}

.nd-projects-shell .TableProjectList .TableHeader,
.nd-projects-shell .TableProjectList .TableHeaderSelected {
    text-decoration: none !important;
    font-weight: 700 !important;
}

.nd-projects-shell .TableProjectList .TableHeaderSelected {
    color: var(--nd-orange) !important;
}

/* Scrollable list container */
.nd-projects-shell .scroll {
    max-height: calc(100vh - var(--nd-top-h) - 220px) !important;
    overflow-y: auto !important;
    border-radius: var(--nd-r-md) !important;
}

/* Project details panel */
.nd-projects-shell .PanelDetails {
    background: var(--nd-card) !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: var(--nd-r-md) !important;
    padding: 20px !important;
    box-shadow: var(--nd-sh-1) !important;
    min-height: 100% !important;
}

.nd-projects-shell .PanelDetails h2 {
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--nd-ink) !important;
}

.nd-projects-shell .PanelDetails .label {
    display: inline-block !important;
    min-width: 130px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--nd-ink-2) !important;
    margin-bottom: 6px !important;
}

.nd-projects-shell .PanelDetails .text-box {
    font-size: 13.5px !important;
    color: var(--nd-ink) !important;
}

.nd-projects-shell .PanelDetails hr {
    border: none !important;
    height: 1px !important;
    background: var(--nd-line-2) !important;
    margin: 14px 0 !important;
}

.nd-projects-shell .PanelDetails .GenericButton,
.nd-projects-shell .PanelDetails .StretchButton {
    height: 36px !important;
    padding: 0 18px !important;
    margin: 3px !important;
    border-radius: var(--nd-r-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* ---- PROJECT DETAILS PAGE (Console/ProjectDetails.aspx) ---- */
.nd-projectdetails-card {
    background: var(--nd-card) !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: var(--nd-r-lg) !important;
    box-shadow: var(--nd-sh-1) !important;
    padding: 28px 32px !important;
    max-width: 720px !important;
    margin: 20px auto 24px !important;
}

.nd-projectdetails-card table.transparenttable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.nd-projectdetails-card table.transparenttable th.Header {
    background: var(--nd-line-2) !important;
    color: var(--nd-ink) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 14px !important;
    border-radius: var(--nd-r-sm) !important;
    text-align: left !important;
    margin-bottom: 10px !important;
}

.nd-projectdetails-card table.transparenttable td {
    padding: 8px 14px !important;
    font-size: 13.5px !important;
    color: var(--nd-ink-2) !important;
    vertical-align: middle !important;
}

.nd-projectdetails-card table.transparenttable td:first-child {
    font-weight: 600 !important;
    color: var(--nd-ink) !important;
    white-space: nowrap !important;
    width: 160px !important;
}

.nd-projectdetails-card input[type="text"],
.nd-projectdetails-card select {
    width: 280px !important;
    height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: var(--nd-r-sm) !important;
    font-family: 'Poppins', inherit !important;
    font-size: 13.5px !important;
    color: var(--nd-ink) !important;
    background: var(--nd-card) !important;
    outline: none !important;
    transition: border-color .14s, box-shadow .14s !important;
}

.nd-projectdetails-card input[type="text"]:focus,
.nd-projectdetails-card select:focus {
    border-color: var(--nd-orange) !important;
    box-shadow: 0 0 0 3px var(--nd-orange-t) !important;
}

.nd-projectdetails-card .BaseButton.LongButton.TextCenter {
    margin-top: 16px !important;
    background: var(--nd-line-2) !important;
    color: var(--nd-ink-2) !important;
    border: 1px solid var(--nd-line) !important;
}

.nd-projectdetails-card .BaseButton.LongButton.TextCenter:hover {
    background: var(--nd-orange-t) !important;
    color: var(--nd-orange-d) !important;
    border-color: var(--nd-orange-t2) !important;
}

/* ---- TAB PANEL STYLING (ProjectList.master) ---- */
.panToolbar .Toolbar {
    padding: 16px 24px 0 !important;
}

.panTabPanel.TabPanel {
    background: var(--nd-card) !important;
    border: 1px solid var(--nd-line) !important;
    border-radius: 0 var(--nd-r-md) var(--nd-r-md) var(--nd-r-md) !important;
    padding: 0 !important;
    margin: 0 24px 24px !important;
    box-shadow: var(--nd-sh-1) !important;
    /* Wider/taller working area so advanced settings (e.g. Passenger tab) fit
       without an inner scrollbar. Grows with content, capped to the viewport. */
    width: auto !important;
    min-width: 1120px !important;
    max-width: calc(100vw - 320px) !important;
    min-height: 660px !important;
}

/* ============================================================
   WIZARD FIXES
   Consistent bottom action bar, loading state, and Comments box.
   Added 2026-06-16.
   ============================================================ */

/* ---- Wizard footer = a SEPARATE box detached below the form box, so the dimmed
   backdrop shows in the gap (per the requested design). The form box no longer
   scrolls internally (which would clip an outside footer); instead the overlay
   scrolls for tall forms, and the footer is absolutely placed just below the box. ---- */
.modalWizard {
    align-items: flex-start !important;     /* top-align so tall forms don't clip at the top */
    overflow-y: auto !important;            /* the overlay scrolls, not the box */
    padding: 4vh 12px 140px !important;     /* top offset + room below for the detached footer */
    box-sizing: border-box !important;
}
.modalWizard > div {
    overflow: visible !important;           /* don't clip the footer that sits below */
    max-height: none !important;
    height: auto !important;
    margin: 0 auto !important;
}
.nd-wizard-actions {
    position: absolute !important;
    top: 100% !important;                   /* directly below the form box */
    left: 0 !important;
    right: 0 !important;
    margin-top: 12px !important;            /* gap shows the dimmed backdrop */
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 14px 24px !important;
    background: #eef1f5 !important;
    border: 1px solid #d8dee8 !important;
    border-radius: var(--nd-r-lg) !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18) !important;
}

/* Comments / multiline boxes were absolutely positioned in the old layout
   (left:343px), which pushed them off to the side and under the buttons. */
.modalWizard .MultiBox,
.modalWizard .solution .MultiBox {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    min-height: 100px !important;
    height: auto !important;
    margin-top: 6px !important;
    box-sizing: border-box !important;
}

/* The old layout positioned these buttons absolutely; force them back into the
   action-bar grid flow so they sit in the navigation box, not over the form. */
.modalWizard .ButtonBack,
.modalWizard .ButtonNext,
.modalWizard .ButtonCreate,
.modalWizard .ButtonCancel {
    position: static !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    margin-top: 0 !important;
    width: auto !important;
    min-width: 96px !important;
    background-image: none !important;
    padding: 9px 18px !important;
}

.nd-wizard-actions-left   { justify-self: start !important; }
.nd-wizard-actions-center { justify-self: center !important; display: flex !important; gap: 10px !important; }
.nd-wizard-actions-right  { justify-self: end !important; }

/* Ensure primary (Next/Create) stays orange even with extra helper classes */
.BaseButton.ButtonCreate,
.BaseButton.ButtonCreate.bg-orange-light,
.BaseButton.ButtonCreate.fr-orange {
    background: var(--nd-orange) !important;
    box-shadow: 0 4px 10px rgba(244,124,32,.28) !important;
}
.BaseButton.ButtonCreate:hover,
.BaseButton.ButtonCreate.bg-orange-light:hover,
.BaseButton.ButtonCreate.fr-orange:hover {
    background: var(--nd-orange-d) !important;
}

/* ---- Loading state while creating ---- */
.nd-wizard-loading .nd-wizard-actions input[type="submit"],
.nd-wizard-loading .nd-wizard-actions input[type="button"],
.nd-wizard-loading .nd-wizard-actions button {
    pointer-events: none !important;
    opacity: 0.65 !important;
}

.nd-wizard-loading .nd-wizard-actions-center {
    position: relative !important;
}

.nd-wizard-loading .nd-wizard-actions-center::after {
    content: "" !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid var(--nd-orange) !important;
    border-top-color: transparent !important;
    border-radius: 50% !important;
    animation: nd-spin 1s linear infinite !important;
    display: inline-block !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
}

@keyframes nd-spin {
    to { transform: rotate(360deg); }
}

/* ---- Cost-function reminder note (Passenger scenarios) ---- */
.nd-cf-note {
    margin: 10px 2px 4px !important;
    padding: 9px 12px !important;
    background: #fff6e9 !important;
    border: 1px solid #f4c987 !important;
    border-left: 4px solid var(--nd-orange, #f47c20) !important;
    border-radius: 6px !important;
    color: #5b4327 !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
}

/* ---- Global navigation/postback loading overlay ---- */
.nd-loading {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(1px) !important;
    z-index: 99999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}
.nd-loading.on { display: flex !important; }
.nd-loading-spinner {
    width: 46px !important;
    height: 46px !important;
    border: 4px solid rgba(244, 124, 32, 0.25) !important;
    border-top-color: var(--nd-orange, #f47c20) !important;
    border-radius: 50% !important;
    animation: nd-spin 0.8s linear infinite !important;
}

/* ---- New Simulation Comments box alignment ---- */
.modalWizard .solution .MultiBox {
    width: 100% !important;
    min-height: 100px !important;
    margin-top: 6px !important;
}

.modalWizard .solution #lblComments {
    display: block !important;
    margin-bottom: 0 !important;
}

/* ── PROJECT SCREENS & REPORTS — refinement overrides ── */

/* Alert sits inside .right-panel so it should span its full width */
#alertReadOnly,
#alertProgress,
#alertSuccess {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
}
#alertReadOnly .wrapper,
#alertProgress .wrapper,
#alertSuccess .wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* Floor diagram lift-floor cells stay compact */
#console-container .FloorTable td.LiftFloor,
#console-container .FloorTable td.SpareLiftFloor,
#console-container .FloorTable th.LiftFloor,
#console-container .FloorTable th.SpareLiftFloor {
    padding: 1px !important;
    text-align: center !important;
}

/* Reports filter label cells */
.nd-report-filters td { padding: 0 !important; }
.nd-report-filters td.spaceBefore {
    padding-top: 14px !important;
    padding-bottom: 4px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--nd-ink-2) !important;
}

/* ============================================================
   LAYOUT HELPER: error / info message table now lives inside
   .right-panel at the bottom of the main content area.
   ============================================================ */
.right-panel > table.error-message {
    width: 100% !important;
    padding: 12px 24px !important;
    background: transparent !important;
}
.right-panel > table.error-message td {
    text-align: center !important;
}


/* ============================================================
   TOPBAR TOOLBAR ICON BUTTONS — clean override
   Removes hover width-flicker and ensures active icon is visible.
   ============================================================ */
.wrapper.head a.IconButtonColor.SquareButton,
.wrapper.head a.IconButtonColor.SquareButton:hover,
.wrapper.head a.IconButtonColor.SquareButton.Selected {
    width:          38px !important;
    height:         38px !important;
    padding:        0 !important;
    gap:            0 !important;
    border-radius:  var(--nd-r-sm) !important;
    background:     transparent !important;
    border:         none !important;
    display:        inline-flex !important;
    align-items:    center !important;
    justify-content:center !important;
    transition:     background .14s !important;
    margin:         0 1px !important;
    position:       relative !important;
    cursor:         pointer !important;
    box-shadow:     none !important;
    transform:      none !important;
}

.wrapper.head a.IconButtonColor.SquareButton:hover {
    background: var(--nd-orange-t) !important;
}

.wrapper.head a.IconButtonColor.SquareButton.Selected {
    background: var(--nd-orange) !important;
}

.wrapper.head a.IconButtonColor.SquareButton svg {
    width:          20px !important;
    height:         20px !important;
    color:          var(--nd-ink-2) !important;
    pointer-events: none !important;
    flex:           none !important;
    display:        block !important;
}

.wrapper.head a.IconButtonColor.SquareButton:hover svg {
    color: var(--nd-orange-d) !important;
}

.wrapper.head a.IconButtonColor.SquareButton.Selected svg {
    color: #fff !important;
}

/* Hide the raw ASP.NET button-label spans */
.wrapper.head a.IconButtonColor.SquareButton span {
    display: none !important;
}

/* ============================================================
   RUN SIMULATION BUTTON — ensure text + icon are visible
   ============================================================ */
.wrapper.head a.ToolbarButton.simulation,
.wrapper.head a.ToolbarButton.simulation:hover,
.wrapper.head a.ToolbarButton.simulation:active {
    height:          38px !important;
    padding:         0 16px !important;
    border-radius:   var(--nd-r-sm) !important;
    background:      var(--nd-orange) !important;
    background-image:none !important;
    color:           #fff !important;
    font-size:       13px !important;
    font-weight:     600 !important;
    font-family:     'Poppins', inherit !important;
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             8px !important;
    border:          none !important;
    text-transform:  none !important;
    letter-spacing:  0 !important;
    box-shadow:      0 4px 10px rgba(244,124,32,.25) !important;
    cursor:          pointer !important;
    margin:          0 !important;
    width:           auto !important;
    min-width:       0 !important;
    white-space:     nowrap !important;
    float:           right !important;
}

.wrapper.head a.ToolbarButton.simulation:hover {
    background: var(--nd-orange-d) !important;
}

.wrapper.head a.ToolbarButton.simulation svg {
    width:  16px !important;
    height: 16px !important;
    flex:   none !important;
    color:  #fff !important;
    fill:   currentColor !important;
}


/* ============================================================
   ISSUE FIXES — alert bars, lift specs layout, toolbar active icon
   ============================================================ */

/* ---- 1. Alert bars: span full width of main content, no side margins ---- */
.right-panel > .alert,
#alertReadOnly,
#alertProgress,
#alertSuccess,
#idValidationBar {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-sizing: border-box !important;
}

.right-panel > .alert .wrapper,
#alertReadOnly .wrapper,
#alertProgress .wrapper,
#alertSuccess .wrapper,
#idValidationBar .wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* ---- 2. Lift tabs: keep the specs form tight against the info block ---- */
.nd-project-content > center > table.nd-lift-specs {
    width: auto !important;
    margin: 0 !important;
}
.nd-project-content > center > table.nd-lift-specs > tbody > tr > td {
    padding: 0 !important;
    vertical-align: top !important;
}

/* ---- 3. Toolbar: active icon white on orange, even on hover ---- */
.wrapper.head a.IconButtonColor.SquareButton.Selected,
.wrapper.head a.IconButtonColor.SquareButton.Selected:hover {
    background: var(--nd-orange) !important;
}
.wrapper.head a.IconButtonColor.SquareButton.Selected svg,
.wrapper.head a.IconButtonColor.SquareButton.Selected:hover svg {
    color: #fff !important;
}


/* ============================================================
   DASHBOARD POLISH — news feed cards + recent projects tree
   Added to match reference design (home.png).
   ============================================================ */

/* ---- NEWS FEED: clean card entries ---- */

/* Scroll area horizontal padding so cards don't touch edges */
.tile.news .newsScroll {
    padding: 8px 10px 18px !important;
}

/* Remove old hover overlay and Read More text inside the feed */
.tile.news .newsScroll .place,
.tile.news .newsScroll .ReadMore {
    display: none !important;
}

/* Linked and non-linked news items share the same card look */
.tile.news .newsScroll a.postNews,
.tile.news .newsScroll .nd-news-card {
    display: block !important;
    padding: 14px 14px !important;
    margin: 2px 0 !important;
    border-radius: var(--nd-r-md) !important;
    border-top: none !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: background .12s !important;
}

.tile.news .newsScroll a.postNews {
    cursor: pointer !important;
}

.tile.news .newsScroll a.postNews:hover,
.tile.news .newsScroll .nd-news-card:hover {
    background: var(--nd-line-2) !important;
}

/* Title: dark ink, not orange */
.tile.news .newsScroll a.postNews h2,
.tile.news .newsScroll .nd-news-card h2 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--nd-ink) !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    line-height: 1.35 !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
}

/* Description: muted */
.tile.news .newsScroll a.postNews .tiletext,
.tile.news .newsScroll .nd-news-card .tiletext {
    display: block !important;
    font-size: 12.5px !important;
    color: var(--nd-muted) !important;
    line-height: 1.5 !important;
    padding: 0 !important;
}


/* ---- RECENT PROJECTS SIDEBAR: tree with expand/collapse ---- */

.nd-recent-projects.vertical-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 6px 0 !important;
    width: 100% !important;
}

.nd-recent-projects.vertical-nav li {
    /* Default.css: ".left-panel li.OpenProject{width:166px}" (no !important)
       is an equal-specificity tie with the old selector here and was never
       being beaten — every row capped at 166px regardless of sidebar width. */
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Project folder header */
.nd-recent-projects.vertical-nav li.OpenProject {
    border-radius: var(--nd-r-md) !important;
    overflow: hidden !important;
}

.nd-recent-projects.vertical-nav li.OpenProject > a,
.nd-recent-projects.vertical-nav li.OpenProject > input[type="submit"],
.nd-recent-projects.vertical-nav li.OpenProject > span.Help_h {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 42px !important;
    padding: 0 34px 0 42px !important;
    margin: 0 !important;
    border-radius: var(--nd-r-md) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--nd-ink-2) !important;
    background: var(--nd-line-2) !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .14s, color .14s !important;
    text-align: left !important;
    position: relative !important;
}

.nd-recent-projects.vertical-nav li.OpenProject > a:hover,
.nd-recent-projects.vertical-nav li.OpenProject > input[type="submit"]:hover {
    background: var(--nd-orange-t) !important;
    color: var(--nd-orange-d) !important;
}

/* Remove the old chevron on the project link (toggle button provides it now) */
.nd-recent-projects.vertical-nav li.OpenProject > a::after,
.nd-recent-projects.vertical-nav li.OpenProject > input[type="submit"]::after {
    display: none !important;
}

/* Folder icon */
.nd-recent-projects.vertical-nav li.OpenProject > a::before,
.nd-recent-projects.vertical-nav li.OpenProject > input[type="submit"]::before,
.nd-recent-projects.vertical-nav li.OpenProject > span.Help_h::before {
    content: "" !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238C95A3' stroke-width='2'%3E%3Cpath d='M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex: none !important;
}

.nd-recent-projects.vertical-nav li.OpenProject > a:hover::before,
.nd-recent-projects.vertical-nav li.OpenProject > input[type="submit"]:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23F47C20' stroke-width='2'%3E%3Cpath d='M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z'/%3E%3C/svg%3E") !important;
}

/* Toggle / chevron button */
.nd-recent-projects.vertical-nav li.OpenProject .nd-proj-toggle {
    position: absolute !important;
    right: 14px !important;
    top: 0 !important;
    width: 36px !important;
    height: 42px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.nd-recent-projects.vertical-nav li.OpenProject .nd-proj-toggle::after {
    content: "" !important;
    width: 14px !important;
    height: 14px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238C95A3' stroke-width='2.5'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: transform .26s cubic-bezier(.4,0,.2,1) !important;
    flex: none !important;
}

.nd-recent-projects.vertical-nav li.OpenProject.nd-open > .nd-proj-toggle::after {
    transform: rotate(90deg) !important;
}

.nd-recent-projects.vertical-nav li.OpenProject > a:hover ~ .nd-proj-toggle::after,
.nd-recent-projects.vertical-nav li.OpenProject > input[type="submit"]:hover ~ .nd-proj-toggle::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23F47C20' stroke-width='2.5'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
}

/* Kids container with smooth expand/collapse */
.nd-recent-projects.vertical-nav li.OpenProject .nd-proj-kids {
    display: grid !important;
    grid-template-rows: 0fr !important;
    transition: grid-template-rows .28s cubic-bezier(.4,0,.2,1) !important;
}

.nd-recent-projects.vertical-nav li.OpenProject.nd-open .nd-proj-kids {
    grid-template-rows: 1fr !important;
}

.nd-recent-projects.vertical-nav li.OpenProject .nd-proj-kids-list {
    overflow: hidden !important;
    min-height: 0 !important;
    list-style: none !important;
    padding: 6px 0 4px 14px !important;
    margin: 0 0 0 20px !important;
    border-left: 2px solid var(--nd-orange-t2) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

/* Simulation items */
.nd-recent-projects.vertical-nav li.OpenSimulation {
    position: relative !important;
}

.nd-recent-projects.vertical-nav li.OpenSimulation > a,
.nd-recent-projects.vertical-nav li.OpenSimulation > input[type="submit"],
.nd-recent-projects.vertical-nav li.OpenSimulation > span.Help_h {
    display: flex !important;
    align-items: center !important;
    width: calc(100% - 28px) !important;
    min-height: 34px !important;
    padding: 5px 12px 5px 36px !important;
    margin: 1px 14px !important;
    border-radius: 9px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--nd-ink-2) !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .14s, color .14s !important;
    text-align: left !important;
    position: relative !important;
}

.nd-recent-projects.vertical-nav li.OpenSimulation > a:hover,
.nd-recent-projects.vertical-nav li.OpenSimulation > input[type="submit"]:hover {
    background: var(--nd-orange-t) !important;
    color: var(--nd-orange-d) !important;
}

/* Status dot */
.nd-recent-projects.vertical-nav li.OpenSimulation > a::before,
.nd-recent-projects.vertical-nav li.OpenSimulation > input[type="submit"]::before,
.nd-recent-projects.vertical-nav li.OpenSimulation > span.Help_h::before {
    content: "" !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--nd-faint) !important;
    flex: none !important;
}

/* Cycling dot colors: green, blue, orange, gray */
.nd-proj-kids-list > li:nth-child(4n+1) > a::before,
.nd-proj-kids-list > li:nth-child(4n+1) > input[type="submit"]::before { background: var(--nd-green) !important; }

.nd-proj-kids-list > li:nth-child(4n+2) > a::before,
.nd-proj-kids-list > li:nth-child(4n+2) > input[type="submit"]::before { background: var(--nd-blue) !important; }

.nd-proj-kids-list > li:nth-child(4n+3) > a::before,
.nd-proj-kids-list > li:nth-child(4n+3) > input[type="submit"]::before { background: var(--nd-orange) !important; }

.nd-proj-kids-list > li:nth-child(4n+4) > a::before,
.nd-proj-kids-list > li:nth-child(4n+4) > input[type="submit"]::before { background: var(--nd-faint) !important; }

/* Current / selected project */
.nd-recent-projects.vertical-nav li.OpenProject.Current > a,
.nd-recent-projects.vertical-nav li.OpenProject.Current > input[type="submit"] {
    background: var(--nd-orange) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(244,124,32,.25) !important;
}

.nd-recent-projects.vertical-nav li.OpenProject.Current > a::before,
.nd-recent-projects.vertical-nav li.OpenProject.Current > input[type="submit"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z'/%3E%3C/svg%3E") !important;
}

.nd-recent-projects.vertical-nav li.OpenProject.Current > .nd-proj-toggle::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
}

/* Current / selected simulation */
.nd-recent-projects.vertical-nav li.OpenSimulation.Current > a,
.nd-recent-projects.vertical-nav li.OpenSimulation.Current > input[type="submit"] {
    background: var(--nd-orange-t2) !important;
    color: var(--nd-orange-d) !important;
    font-weight: 600 !important;
}

.nd-recent-projects.vertical-nav li.OpenSimulation.Current > a::before,
.nd-recent-projects.vertical-nav li.OpenSimulation.Current > input[type="submit"]::before {
    background: var(--nd-orange) !important;
}

/* Locked project / simulation rows */
.nd-recent-projects.vertical-nav li.OpenProject > span.Help_h,
.nd-recent-projects.vertical-nav li.OpenSimulation > span.Help_h {
    color: var(--nd-faint) !important;
    cursor: default !important;
}

/* ---- Fix: grid.css legacy hover turns banner black and hides tiletext ---- */
.tile.status-s:hover,
a.tile.status-s:hover {
    background-color: #f5f5f5 !important;
    background-image: none !important;
    color: var(--nd-ink-2) !important;
    font-size: 1em !important;
}
.tile.status-s:hover span.tiletext,
a.tile.status-s:hover span.tiletext {
    display: block !important;
    visibility: visible !important;
    color: var(--nd-ink-2) !important;
}

/* ---- Fix: grid-row-1 { height:204px; overflow:hidden } makes banner too tall
   and clips small tile content ---- */
.tile.status-s.grid-row-1,
a.tile.status-s.grid-row-1 {
    height: auto !important;
    min-height: 52px !important;
    overflow: visible !important;
}
.nd-small-tiles .tile.grid-row-1,
.nd-small-tiles .tile.grid-column-1 {
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
}

/* ---- Fix: newsFixed margin-top:40px (grid.css) adds whitespace inside banner ---- */
.tile.status-s .newsFixed,
a.tile.status-s .newsFixed,
.right-panel .nd-center-scroll .tile.status-s .newsFixed {
    margin-top: 0 !important;
}

/* ---- Fix: span.tiletext margin-top:90px/50px (grid.css) pushes about/myqueue text out ---- */
.nd-small-tiles .tile.about .tiletext,
.nd-small-tiles .tile.about span.tiletext,
.nd-small-tiles .tile.myqueue .tiletext,
.nd-small-tiles .tile.myqueue span.tiletext {
    margin-top: 0 !important;
}

/* ---- Fix: small tiles hover goes black (grid.css legacy) ---- */
.nd-small-tiles .tile.about:hover,
.nd-small-tiles a.tile.about:hover {
    background: var(--nd-card) !important;
    color: var(--nd-ink) !important;
    font-size: inherit !important;
}
.nd-small-tiles .tile.tutorials:hover,
.nd-small-tiles a.tile.tutorials:hover {
    background: var(--nd-card) !important;
    color: var(--nd-ink) !important;
    font-size: inherit !important;
}
.nd-small-tiles .tile.myqueue:hover,
.nd-small-tiles a.tile.myqueue:hover {
    background: linear-gradient(135deg, var(--nd-blue), #2c63b0) !important;
    color: #fff !important;
    font-size: inherit !important;
}
.nd-small-tiles .tile.contact:hover,
.nd-small-tiles a.tile.contact:hover {
    background: linear-gradient(135deg, var(--nd-orange), var(--nd-orange-d)) !important;
    color: #fff !important;
    font-size: inherit !important;
}

/* ---- Fix: span.tiletext hidden on hover for about/myqueue (grid.css) ---- */
.nd-small-tiles .tile.about:hover .tiletext,
.nd-small-tiles .tile.about:hover span.tiletext,
.nd-small-tiles .tile.myqueue:hover .tiletext,
.nd-small-tiles .tile.myqueue:hover span.tiletext {
    display: block !important;
    visibility: visible !important;
}

/* ---- Fix: hr inside error-message debug table renders as visible border ---- */
table.error-message hr {
    display: none !important;
}