/* === NPS DIGITAL BRANDING CSS FOR POWER PAGES === */ /* 0. Load Inter Font (include this in your site if not loaded globally) */ /* 1. Typography: Inter as primary, Times New Roman for emphasis */ body, h1, h2, h3, h4, h5, h6, button, input, select, textarea { font-family: 'Inter', sans-serif; line-height: 1.6; color: #3E3E3E; margin: 0; padding: 0; } /* Optional serif use */ blockquote, .serif, .formal-text { font-family: 'Times New Roman', serif; font-style: italic; color: #2B3E50; margin: 1em 0; padding-left: 1em; border-left: 4px solid #8C684C; } /* 2. Color Palette */ :root { --nps-dark-brown: #5A3E27; --nps-medium-brown: #8C684C; --nps-light-brown: #CBB199; --nps-forest-green: #2F4F4F; --nps-sky-blue: #91B3D3; --nps-accent-gold: #D9A21C; --nps-light-gray: #F9F9F7; --nps-text-dark: #3E3E3E; /* Semantic Colors */ --nps-danger-color: #e52207; /* red-50v */ --nps-warning-color: #ffbe2e; /* gold-20v */ --nps-accessible-color: #0076d6; /* blue-50v */ /* Base Colors */ --nps-gray-90: #1b1b1b; --nps-gray-70: #454545; --nps-gray-60: #5c5c5c; --nps-gray-50: #757575; --nps-gray-30: #adadad; --nps-gray-10: #e6e6e6; --nps-gray-5: #f0f0f0; --nps-black: #000; --theme-color-base: var(--nps-gray-50); --theme-color-base-ink: var(--nps-gray-90); /* Primary Colors */ --nps-green-cool-80v: #19311e; --nps-green-cool-70v: #154c21; --nps-green-cool-60: #446443; --nps-green-cool-30: #86b98e; --nps-green-cool-10: #dbebde; --theme-color-primary: var(--nps-green-cool-60); --theme-color-primary-vivid: #216e1f; /* green-cool-60v */ /* Secondary Colors */ --nps-orange-70v: #5f3617; --nps-orange-60v: #8c471c; --nps-orange-50: #a86437; --nps-orange-30: #f09860; --nps-orange-10: #f2e4d4; --theme-color-secondary: var(--nps-orange-50); --theme-color-secondary-vivid: #c05600; /* orange-50v */ /* Accent Warm */ --nps-gold-60: #6b5947; --nps-gold-50: #8e704f; --nps-gold-30: #c7a97b; --nps-gold-20: #dec69a; --nps-gold-10: #f1e5cd; --theme-color-accent-warm: var(--nps-gold-30); /* Accent Cool */ --nps-blue-cool-60: #2e6276; --nps-blue-cool-50: #3a7d95; --nps-blue-cool-30: #82b4c9; --nps-blue-cool-20: #adcfdc; --nps-blue-cool-10: #dae9ee; --theme-color-accent-cool: var(--nps-blue-cool-30); /* Map Marker Colors */ --nps-map-mint-70: #204e34; --nps-map-orange-60: #775540; --nps-map-blue-cool: var(--nps-blue-cool-60); /* #2e6276 */ --nps-map-orange-50: var(--nps-orange-50); /* #a86437 */ /* Accent ties into your palette; adjust here if desired */ --btn-accent: var(--nps-green-cool-60, #446443); --btn-accent-hover: #35533a; --btn-accent-active: #2a4330; } /* Global Bootstrap button theme (compact) */ .btn:not(.btn-link), a.btn:not(.btn-link), button.btn:not(.btn-link), input.btn[type="button"]:not(.btn-link), input.btn[type="submit"]:not(.btn-link), input.btn[type="reset"]:not(.btn-link) { background: #000 !important; color: #fff !important; border: 2px solid var(--btn-accent) !important; border-radius: .75rem; box-shadow: 0 2px 0 rgba(0,0,0,.25); transition: background-color .12s ease, box-shadow .12s ease, transform .06s ease, border-color .12s ease, color .12s ease; text-decoration: none; } .btn:not(.btn-link):hover { background: #0a0a0a !important; border-color: var(--btn-accent-hover) !important; box-shadow: 0 0 0 .25rem rgba(68,100,67,.25), 0 3px 0 rgba(0,0,0,.35); } .btn:not(.btn-link):active, .btn:not(.btn-link).active, .show > .btn:not(.btn-link).dropdown-toggle { transform: translateY(1px) scale(0.99); background: #000 !important; border-color: var(--btn-accent-active) !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.4), 0 0 0 .25rem rgba(68,100,67,.35); } .btn:not(.btn-link):focus, .btn:not(.btn-link):focus-visible { outline: 2px solid var(--btn-accent); outline-offset: 2px; box-shadow: 0 0 0 .3rem rgba(68,100,67,.35) !important; } .btn:disabled, .btn.disabled { background: #333 !important; color: #bbb !important; border-color: #444 !important; box-shadow: none !important; cursor: not-allowed; opacity: 1; } .btn-link { background: transparent !important; border: 0 !important; color: var(--bs-link-color, var(--nps-accessible-color)) !important; box-shadow: none !important; } /* Dropdown caret stays visible on dark buttons */ .btn.dropdown-toggle::after { border-top-color: currentColor; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .btn { transition: none !important; } } /* Styling for Attach a file control */ .file-cell.cell .deleteicondiv { background-color: var(--nps-green-cool-10) !important; } .file-cell.cell .cancelIconDiv { background-color: var(--nps-green-cool-10) !important; } .file-cell.cell .cancelIconDiv img { display: flex !important } /* Styling for Lookup Modal*/ .modal-lookup.show .modal-header h1 { color:#000 !important; font-size: 30px !important; font-weight: 600 !important; } .modal-lookup.show .modal-footer button.remove-value { display: none !important; background: #fff !important; color: #fff !important; border: none !important; pointer-events: none !important; opacity: 0.5 !important; } .modal-body .entity-grid .view-grid.view-grid.table-responsive { font-size: 100% !important; } .alert-danger { --bs-alert-color: #fff; --bs-alert-bg: var(--nps-danger-color); --bs-alert-border-color: #f5c2c7; /* Optional direct overrides if variables don’t work */ color: #fff; background-color: var(--nps-danger-color); border-color: #f5c2c7; } .validation-summary a { color: #fff !important; } /* 3. Headings */ h1, h2, h3 { color: var(--nps-dark-brown); margin-top: 1.2em; margin-bottom: 0.5em; } h4, h5, h6 { color: var(--nps-medium-brown); margin-top: 1em; margin-bottom: 0.5em; } /* 4. Links & Buttons */ a { color: var(--nps-accessible-color) !important; text-decoration: underline; } a:hover { color: var(--nps-accent-gold); } a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 3px solid var(--nps-sky-blue); outline-offset: 2px; } /* 5. Layout & Content Boxes */ .container { max-width: 100% !important; margin: 0 auto; padding: 1em; } .card { background: white; border: 1px solid var(--nps-light-brown); padding: 1.5em; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 1.5em; } /* 6. Tables */ table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.5em 0; box-shadow: 0 5px 8px rgba(0, 0, 0, 0.05); border-radius: 6px; overflow: hidden; font-family: 'Inter', sans-serif !important; } table thead { background-color: #444; color: white; font-weight: 600; font-size: 1rem; letter-spacing: 0.5px; } table th, table td { padding: 0.85em 1em; text-align: left; vertical-align: top; font-size: 1.05rem; font-weight: 400; } table a { font-size: 1.05rem; } /* First and last cell rounding if desired */ table tr:first-child th:first-child { border-top-left-radius: 6px; } table tr:first-child th:last-child { border-top-right-radius: 6px; } table tr:last-child td:first-child { border-bottom-left-radius: 6px; } table tr:last-child td:last-child { border-bottom-right-radius: 6px; } /* 7. Grid & Responsive Layout */ .row { display: flex; flex-wrap: wrap; margin: -0.5em; } .col { flex: 1 0 0; padding: 0.5em; } /* === Subgrid header alignment fix (matches console JS) === */ .view-grid.table-responsive table thead th { vertical-align: top !important; /* top-align header cells */ text-align: center !important; /* center header text horizontally */ } /* Make inner header wrapper fill width, wrap nicely, and center text. If a theme makes it flex, align to top and center horizontally. */ .view-grid.table-responsive table thead th > a, .view-grid.table-responsive table thead th > span, .view-grid.table-responsive table thead th > div { width: 100% !important; white-space: normal !important; line-height: 1.2 !important; margin: 0 auto !important; text-align: center !important; /* Has effect only when the element is flex (safe on non-flex too) */ align-items: flex-start !important; /* top vertically when flex */ justify-content: center !important; /* center horizontally when flex */ } /* Form View*/ .crmEntityFormView { padding: 1em; border-radius: 30px; box-shadow: 0 10px 5px rgba(0, 0, 0, 0.5); margin-bottom: 1.5em; } .crmEntityFormView .section-title h3 { color:var(--nps-black) !important; } @media (max-width: 768px) { body { font-size: 0.95rem; } .row { flex-direction: column; } .btn { width: 100%; margin-bottom: 1em; } } /* 8. Header & Footer */ .site-header, .site-footer { background-color: var(--nps-forest-green); color: #fff; padding: 1em; text-align: center; } /* keep brand links white in the masthead only */ .site-header :is(a, .btn-link) { color: #fff !important; } .footer-bottom.d-print-none { background-color: var(--nps-green-cool-60) !important; } /* 9. Utility Classes */ .text-center { text-align: center; } .mt-1 { margin-top: 1rem; } .mb-1 { margin-bottom: 1rem; } .p-1 { padding: 1rem; } .serif { font-family: 'Times New Roman', serif; } /* 10. Dark Mode Support */ @media (prefers-color-scheme: dark) { body { background-color: #1e1e1e; color: #f4f4f4; } a { color: var(--nps-sky-blue); } .header, .footer { background-color: #333; } .card { background-color: #2a2a2a; border-color: #444; } table thead { background-color: #444; } } /* table within a modal that shows when the user is doing a lookup */ .view-grid.table-responsive table thead th a { /* background-color: var(--nps-forest-green) !important; */ /* Header background */ color: white !important; /* Header text color */ } /* Modal search box*/ .page-item.active .page-link { background-color: var(--nps-accessible-color) !important; /* Blue background */ color: #fff !important; /* White text */ border-color: var(--nps-accessible-color) !important; } /* === NAVBAR STYLES === */ .navbar-brand a, .navbar-brand a:hover { text-decoration: none !important; } /* Black background + shadow */ .static-top.navbar-dark { background-color: #000 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* Base link color */ .static-top.navbar-dark .navbar-brand, .static-top.navbar-dark .navbar-nav .nav-link { color: #fff !important; } /* Hover and active top-level nav links */ .static-top.navbar-dark .navbar-nav .nav-link:hover, .static-top.navbar-dark .navbar-nav .nav-link.active, .static-top.navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav a.show, .navbar-dark .navbar-nav a.dropdown-toggle.show { color: #fff !important; background-color: var(--nps-medium-brown) !important; text-decoration: underline !important; } /* Navbar toggler styles */ .navbar-dark .navbar-toggler { border: 1px solid var(--nps-medium-brown) !important; background-color: var(--nps-medium-brown) !important; } .navbar-dark .navbar-toggler:hover, .navbar-dark .navbar-toggler:focus { background-color: var(--nps-dark-brown) !important; border-color: var(--nps-dark-brown) !important; } /* Dropdown menu (shown state) */ .navbar-dark .show > .dropdown-menu { background-color: var(--nps-forest-green) !important; border: none !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important; } /* Dropdown items */ .navbar-dark .navbar-nav .dropdown-menu .dropdown-item { color: #fff !important; } .navbar-dark .navbar-nav .dropdown-menu .dropdown-item:hover, .navbar-dark .navbar-nav .dropdown-menu .dropdown-item:focus { background-color: var(--nps-medium-brown) !important; color: #fff !important; } .dropdown-menu.show { background-color: var(--nps-forest-green) !important; color: #fff !important; border: none !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important; } .dropdown-menu .dropdown-item { color: #fff !important; } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background-color: var(--nps-medium-brown) !important; color: #fff !important; } .dropdown-menu .dropdown-divider { border-top: 1px solid rgba(255, 255, 255, 0.3); } /* Fix top-level dropdown links retaining default theme color on click */ .navbar-dark .navbar-nav .nav-link.dropdown-toggle.active, .navbar-dark .navbar-nav .nav-link.dropdown-toggle:focus, .navbar-dark .navbar-nav .nav-link.dropdown-toggle.show { background-color: var(--nps-medium-brown) !important; color: #fff !important; text-decoration: underline !important; } /* === END NAVBAR STYLES === */ /* === NPS STYLING FOR POWER PAGES MODERN ENTITY LIST === */ /* Magnifying glass icon */ .ms-SearchBox .ms-SearchBox-iconContainer{ color: #000 !important; } .ms-SearchBox.is-active { border-color: var(--nps-black) !important; } .ms-CommandBar { background-color: var(--nps-gray-10) !important; /* Gray-10 for command bar in light theme */ padding: 8px; /* Consistent padding */ border-radius: 4px; /* Slight rounding */ border: 1px solid var(--nps-gray-30); /* Gray-30 border for definition */ } /* Target the header row */ .ms-DetailsHeader-cell.is-actionable[class*="root-"]:hover { background-color: var(--nps-green-cool-60) !important; color: white !important; } /* Style links in the InquiryID column */ .ms-DetailsRow-cell a.ms-Link { color: var(--nps-accessible-color); /* Green-cool-60v for links */ text-decoration: underline !important; /* Remove underline */ } /* Hover state for links */ .ms-DetailsRow-cell a.ms-Link:hover { text-decoration: underline; /* Underline on hover */ color: var(--nps-warning-color); /* Gold-20v for hover */ } /* Focus state for links */ .ms-DetailsRow-cell a.ms-Link:focus { outline: 2px solid var(--nps-accessible-color); /* Blue-50v for accessible focus */ outline-offset: 2px; } /* De-dupe three dots ONLY on the overflow button inside DetailsList rows */ .ms-DetailsRow button.ms-Button.ms-Button--icon .ms-Button-icon[data-icon-name="More"] ~ .ms-Button-menuIcon, .ms-DetailsRow-cell button.ms-Button.ms-Button--icon .ms-Button-icon[data-icon-name="More"] ~ .ms-Button-menuIcon, .ms-DetailsRow button.ms-Button.ms-Button--icon .ms-Button-icon[data-icon-name="MoreVertical"] ~ .ms-Button-menuIcon, .ms-DetailsRow-cell button.ms-Button.ms-Button--icon .ms-Button-icon[data-icon-name="MoreVertical"] ~ .ms-Button-menuIcon { display: none !important; } /* Keep icon centered with no phantom spacing */ .ms-DetailsRow .ms-Button.ms-Button--icon .ms-Button-icon, .ms-DetailsRow-cell .ms-Button.ms-Button--icon .ms-Button-icon { margin: 0 !important; } /* Global Fluent .ms-Button theme (compact) */ .ms-Button:not(.ms-Button--link) { background: #000 !important; color: #fff !important; border: 2px solid var(--btn-accent) !important; border-radius: .75rem !important; box-shadow: 0 2px 0 rgba(0,0,0,.25); transition: background-color .12s ease, box-shadow .12s ease, transform .06s ease, border-color .12s ease, color .12s ease; text-decoration: none !important; } .ms-Button.ms-Button--link { background: transparent !important; border: 0 !important; color: var(--bs-link-color, var(--nps-accessible-color)) !important; box-shadow: none !important; } .ms-Button .ms-Button-label, .ms-Button .ms-Button-icon, .ms-Button .ms-Button-menuIcon { color: inherit !important; fill: currentColor !important; } .ms-Button:hover:not(.is-disabled):not(.ms-Button--link) { background: #0a0a0a !important; border-color: var(--btn-accent-hover) !important; box-shadow: 0 0 0 .25rem rgba(68,100,67,.25), 0 3px 0 rgba(0,0,0,.35); } .ms-Button:active:not(.is-disabled):not(.ms-Button--link), .ms-Button.is-expanded:not(.ms-Button--link), .ms-Button.is-checked:not(.ms-Button--link) { transform: translateY(1px) scale(0.99); background: #000 !important; border-color: var(--btn-accent-active) !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.4), 0 0 0 .25rem rgba(68,100,67,.35); } .ms-Button:focus-visible:not(.ms-Button--link), .ms-Button.is-focused:not(.ms-Button--link) { outline: 2px solid var(--btn-accent) !important; outline-offset: 2px !important; box-shadow: 0 0 0 .3rem rgba(68,100,67,.35) !important; } .ms-Button.is-disabled, .ms-Button[disabled] { background: #333 !important; color: #bbb !important; border-color: #444 !important; box-shadow: none !important; cursor: not-allowed !important; opacity: 1 !important; } /* Optional: common size for icon-only buttons */ .ms-Button.ms-Button--icon { padding: .5rem !important; min-width: 2.25rem !important; min-height: 2.25rem !important; border-radius: .75rem !important; } /* CommandBar buttons pick up the same look automatically */ .ms-CommandBar .ms-Button { /* keeps sizing consistent in the bar */ line-height: 1.25 !important; padding: .375rem .625rem !important; } /* Ensure responsiveness */ @media (max-width: 768px) { .ms-DetailsRow-cell { font-size: 12px; /* Smaller font for mobile */ padding: 6px 8px; /* Reduced padding */ } .ms-DetailsHeader-cell { font-size: 14px; /* Slightly smaller header text */ padding: 6px 8px; } .ms-CommandBar { padding: 6px; /* Reduced padding */ } .ms-Button.ms-Button--default.ms-CommandBarItem-link, .ms-Button.ms-Button--default.ms-Button--hasMenu { padding: 4px 8px; /* Reduced padding */ font-size: 12px; /* Smaller font */ } .ms-SearchBox { padding: 4px 6px; /* Reduced padding */ font-size: 12px; /* Smaller font */ } } /* === NPS STYLING FOR POWER PAGES MODERN ENTITY Forms === */ /* Make form containers take full width */ .entityform, .entity-form, .form-horizontal { max-width: 100% !important; width: 100% !important; } .page-container { max-width: 100% !important; width: 100% !important; } /* Expand surrounding layout if constrained */ .body-124 { width: 90% !important; margin: 0 auto; /* center the content */ box-sizing: border-box; /* ensures padding doesn't add to total width */ } /* Increase font sizes globally for readability */ body, .entityform, .entityform * { font-size: 1.1rem; line-height: 1.6; } /* Make form labels bigger */ .entityform label, label { font-size: 1.1rem; font-weight: 600; color: var(--nps-dark-green); } /* Enlarge inputs, textareas, and selects */ .entityform input[type="text"], .entityform input[type="email"], .entityform input[type="date"], .entityform input[type="number"], .entityform input[type="file"], .entityform input[type="checkbox"], .entityform input[type="radio"], .entityform select, .entityform textarea { font-size: 1.1rem; padding: 10px; width: 100%; } /* Enlarge buttons */ .entityform input[type="submit"], .entityform input[type="button"], .entityform button { font-size: 1.1rem; padding: 10px 20px; } /* Internal Notes Section */ #notes-section h3 { margin-top: 0px; color: var(--nps-black) !important; } /* Required Documents Section */ #required-documents-section h3 { margin-top: 0px; color: var(--nps-black) !important; } .timeline-item::before { content: ''; position: absolute; left: -10px; top: 5px; width: 12px; height: 12px; background-color: var(--bs-primary); border-radius: 50%; z-index: 1; } /* Calendar styles */ /* --- Keep global theme from bleeding into Bootstrap DateTimePicker --- */ .bootstrap-datetimepicker-widget { font-family: inherit; color: inherit; } /* Kill global table cosmetics inside the widget */ .bootstrap-datetimepicker-widget table { margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; border-collapse: collapse !important; border-spacing: 0 !important; } .bootstrap-datetimepicker-widget thead { background: transparent !important; color: inherit !important; font-weight: normal !important; font-size: inherit !important; letter-spacing: normal !important; } .bootstrap-datetimepicker-widget th, .bootstrap-datetimepicker-widget td { padding: 0.25rem 0.35rem !important; vertical-align: middle !important; text-align: center !important; font-size: inherit !important; } /* Your global button/.btn rules were the big culprit – neutralize them here */ .bootstrap-datetimepicker-widget button { background: none !important; border: 0 !important; box-shadow: none !important; color: inherit !important; padding: 0 !important; border-radius: 0 !important; font: inherit !important; line-height: normal !important; text-decoration: none !important; } .bootstrap-datetimepicker-widget button:hover, .bootstrap-datetimepicker-widget button:active { background: none !important; } /* Soften the heavy global focus outline inside the picker */ .bootstrap-datetimepicker-widget :is(button, a):focus { outline: none !important; box-shadow: none !important; } /* Minimal states if the widget CSS doesn't re-apply them */ .bootstrap-datetimepicker-widget .day.today > button { outline: 2px solid currentColor; outline-offset: -2px; } .bootstrap-datetimepicker-widget .day.active > button, .bootstrap-datetimepicker-widget .day.selected > button { background: rgba(0,0,0,.08); } /* In case any anchors appear inside the widget */ .bootstrap-datetimepicker-widget a { color: inherit !important; text-decoration: none !important; } /* Only the datepicker trigger button next to the input */ .input-append.input-group.datetimepicker > .input-group-addon.btn[title="Choose a date"], .datetimepicker > .input-group-addon.btn[title="Choose a date"] { /* match input height instead of your global .btn padding */ padding: 10px 12px !important; /* vertical matches your .entityform inputs */ line-height: 1.5 !important; height: auto; display: inline-flex; align-items: center; justify-content: center; /* neutralize global button look so it blends with the input */ background-color: transparent !important; color: inherit !important; box-shadow: none !important; border-radius: 0.375rem; /* match Bootstrap input radius */ } /* Make the calendar icon not look oversized */ .input-append.input-group.datetimepicker > .input-group-addon.btn[title="Choose a date"] .icon-calendar, .datetimepicker > .input-group-addon.btn[title="Choose a date"] .icon-calendar { font-size: 1rem; line-height: 1; } /* === FINAL OVERRIDES: Fluent DetailsList row buttons (chip look) ======= */ :is(.ms-DetailsRow, .ms-DetailsRow-cell) .ms-Button:not(.ms-Button--link) { background: #fff !important; color: var(--nps-gray-90, #1b1b1b) !important; border: 1px solid var(--nps-gray-10, #e6e6e6) !important; border-radius: .5rem !important; box-shadow: 0 1px 2px rgba(0,0,0,.05) !important; transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .06s ease; } :is(.ms-DetailsRow, .ms-DetailsRow-cell) .ms-Button:not(.ms-Button--link):hover { background: #f5f5f5 !important; border-color: var(--nps-gray-30, #adadad) !important; box-shadow: 0 2px 4px rgba(0,0,0,.08) !important; } :is(.ms-DetailsRow, .ms-DetailsRow-cell) .ms-Button:not(.ms-Button--link):active, :is(.ms-DetailsRow, .ms-DetailsRow-cell) .ms-Button.is-checked:not(.ms-Button--link) { background: #ececec !important; border-color: var(--nps-gray-30, #adadad) !important; transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0,0,0,.08) !important; } :is(.ms-DetailsRow, .ms-DetailsRow-cell) .ms-Button:not(.ms-Button--link):focus-visible { outline: 2px solid var(--btn-accent) !important; outline-offset: 2px !important; box-shadow: 0 0 0 .2rem rgba(68,100,67,.35) !important; } /* Icon-only overflow/ellipsis — comfy hit target with white chip */ :is(.ms-DetailsRow, .ms-DetailsRow-cell) .ms-Button.ms-Button--icon { padding: .35rem !important; min-width: 2rem !important; min-height: 2rem !important; border-radius: .5rem !important; } /* De-dupe the double “…” only when the main icon is More/MoreVertical */ :is(.ms-DetailsRow, .ms-DetailsRow-cell) button.ms-Button.ms-Button--icon .ms-Button-icon[data-icon-name="More"] ~ .ms-Button-menuIcon, :is(.ms-DetailsRow, .ms-DetailsRow-cell) button.ms-Button.ms-Button--icon .ms-Button-icon[data-icon-name="MoreVertical"] ~ .ms-Button-menuIcon { display: none !important; } /* Treat menu-open the same as active/checked inside DetailsRow */ :is(.ms-DetailsRow, .ms-DetailsRow-cell) .ms-Button.is-expanded:not(.ms-Button--link) { background: #ececec !important; border-color: var(--nps-gray-30, #adadad) !important; transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0,0,0,.08) !important; } /* Fallback: if data-icon-name is missing, target by aria-label text */ :is(.ms-DetailsRow, .ms-DetailsRow-cell) button.ms-Button[aria-label*="More"] .ms-Button-menuIcon { display: none !important; } /* Fix: center the faux checkboxes in lookup grid first column */ .entity-grid .view-grid.table-responsive table th:first-child, .entity-grid .view-grid.table-responsive table td:first-child { vertical-align: middle; /* override the global top */ text-align: center; /* center the icon horizontally */ padding-top: .5rem; /* optional: tighten a bit */ padding-bottom: .5rem; } /* Make the icon itself a square box with centered glyph */ .entity-grid .view-grid.table-responsive [role="checkbox"] { display: inline-flex; /* center the glyph inside the box */ align-items: center; justify-content: center; width: 1.25rem; /* consistent hit area */ height: 1.25rem; line-height: 1; /* avoid baseline drift */ /* Optional (uncomment to show an empty box when unchecked): border: 1px solid var(--nps-gray-30); border-radius: .2rem; */ } /* Ensure the header check icon is centered too */ .entity-grid .view-grid.table-responsive thead th:first-child .fa { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; line-height: 1; } .header { color: inherit !important; } .custom-sitetitle {color:#ffff !important} /* scope “white” to the actual top navbar/header you use */ .static-top.navbar-dark, .static-top.navbar-dark * { color: #fff; /* navbar text stays white */ } /* Base text color safety net */ :root { --nps-text-default: #000; } /* or #111 if you prefer */ html, body { color: var(--nps-text-default) !important; } /* Let common text elements inherit the base color unless explicitly themed */ :where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,th,td,small,label,legend,summary,figcaption) { color: inherit !important; } .req-star { color: black !important;} .skip-to-content a{ color: White !important; background-color: black !important; background: black; }