/* File: assets/css/bdcpm-dark.css bdcpm design: absolutely black background, frosted-glass panels with hairline edges, one violet accent, the site's own font (Quicksand), small text, compact tables, slim scroll bars, smooth content entry. Loaded after style.css and Tailwind on every page; body has the class "bd-dark". */ html body.bd-dark { --k-bg: #000000; --k-panel: rgba(255,255,255,.035); --k-panel-2: rgba(255,255,255,.055); --k-raise: rgba(255,255,255,.075); --k-raise-2: rgba(255,255,255,.11); --k-solid: #0D0E10; --k-solid-2: #141518; --k-line: rgba(255,255,255,.08); --k-line-2: rgba(255,255,255,.14); --k-t1: #F7F8F8; --k-t2: #D0D6E0; --k-t3: #8A8F98; --k-t4: #6A6F78; --k-acc: #5E6AD2; --k-acc-2: #8C95EC; --k-acc-soft: rgba(94,106,210,.16); --k-good: #4CB782; --k-warn: #F2C94C; --k-bad: #EB5757; --k-info: #4EA7FC; --brand-700: #0B0C0E; --brand-800: #0B0C0E; /* classic table-header colour -> dark header */ background: #000 !important; color: var(--k-t2) !important; color-scheme: dark; text-transform: none !important; letter-spacing: normal !important; font-size: 12px; } html { background: #000; } body.bd-dark .uppercase, body.bd-dark [class*="tracking-"] { text-transform: none !important; letter-spacing: normal !important; } body.bd-dark .font-extrabold, body.bd-dark .font-black { font-weight: 700 !important; } body.bd-dark h1, body.bd-dark h2, body.bd-dark h3, body.bd-dark h4 { color: var(--k-t1) !important; letter-spacing: -0.01em !important; } /* ---------- slim scroll bars in the page colours ---------- */ body.bd-dark * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; } body.bd-dark ::-webkit-scrollbar { width: 6px; height: 6px; } body.bd-dark ::-webkit-scrollbar-track { background: transparent; } body.bd-dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; } body.bd-dark ::-webkit-scrollbar-thumb:hover { background: rgba(140,149,236,.55); } body.bd-dark ::-webkit-scrollbar-corner { background: transparent; } body.bd-dark ::selection { background: rgba(94,106,210,.45); color: #fff; } /* ---------- app frame: left menu (like Linear) + page that scrolls normally ---------- */ body.bd-dark .wrapper.bd-app { display: flex !important; flex-direction: row !important; height: auto !important; min-height: 100vh; overflow: visible !important; } .bd-side { position: sticky; top: 0; height: 100vh; width: 232px; flex: none; display: flex; flex-direction: column; padding: calc(12px + env(safe-area-inset-top, 0px)) 8px 10px; background: #050506; border-right: 1px solid var(--k-line); z-index: 40; } .bd-brand { display: flex; align-items: center; gap: 8px; color: var(--k-t1) !important; font-weight: 700; font-size: 13px; white-space: nowrap; text-decoration: none; min-width: 0; } .bd-brand img, .bd-brand .ini { width: 22px; height: 22px; border-radius: 6px; object-fit: contain; background: #fff; flex: none; } .bd-brand .ini { display: inline-grid; place-items: center; background: linear-gradient(135deg, #5E6AD2, #8C95EC); color: #fff; font-size: 11px; } .bd-brand span { overflow: hidden; text-overflow: ellipsis; } .bd-side-brand { padding: 4px 8px 0; } .bd-side-sub { color: var(--k-t4); font-size: 10.5px; font-weight: 600; padding: 2px 8px 10px 38px; } .bd-side-scroll { flex: 1; overflow-y: auto; margin: 0 -4px; padding: 0 4px; } .bd-mgrp { color: var(--k-t4); font-size: 10.5px; font-weight: 700; padding: 14px 9px 4px; } .bd-item { display: flex; align-items: center; gap: 9px; height: 29px; padding: 0 9px; margin: 1px 0; border-radius: 7px; color: var(--k-t2) !important; font-weight: 600; font-size: 12px; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; } .bd-item i { width: 15px; text-align: center; color: var(--k-t3); font-size: 11.5px; } .bd-item > span:not(.bd-av):not(.n) { overflow: hidden; text-overflow: ellipsis; flex: 1; } .bd-item .n { flex: none; font-size: 10px; background: var(--k-acc); color: #fff; border-radius: 999px; padding: 0 6px; line-height: 16px; } .bd-item:hover { background: rgba(255,255,255,.05); color: var(--k-t1) !important; } .bd-item.on { background: rgba(255,255,255,.09); color: var(--k-t1) !important; } .bd-item.on i { color: var(--k-acc-2); } .bd-side-foot { border-top: 1px solid var(--k-line); padding-top: 8px; margin-top: 6px; } .bd-me { height: 38px; } .bd-me small { display: block; color: var(--k-t4); font-size: 10px; font-weight: 600; line-height: 1.1; } .bd-me > span { line-height: 1.25; } .bd-out, .bd-out i { color: #E5848A !important; } .bd-av { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #5E6AD2, #8C95EC); object-fit: cover; flex: none; } .bd-powered { display: flex; align-items: center; gap: 6px; padding: 8px 9px 0; color: var(--k-t4) !important; font-size: 10.5px; text-decoration: none; } .bd-mtop { display: none; } .bd-burger { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--k-line) !important; background: var(--k-panel) !important; color: var(--k-t1) !important; display: inline-grid; place-items: center; cursor: pointer; flex: none; } #sidebar-overlay.bd-shade { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 65; } #sidebar-overlay.bd-shade.hidden { display: none; } @media (min-width: 900px) { .bd-side.-translate-x-full { transform: none !important; } #sidebar-overlay.bd-shade { display: none !important; } } @media (max-width: 899px) { body.bd-dark .wrapper.bd-app { flex-direction: column !important; } .bd-mtop { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 50; height: calc(48px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0; background: rgba(0,0,0,.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--k-line); } .bd-side { position: fixed; left: 0; top: 0; bottom: 0; height: auto; width: min(280px, 86vw); z-index: 70; transition: transform .22s ease; box-shadow: 20px 0 50px rgba(0,0,0,.6); } .bd-side.-translate-x-full { transform: translateX(-102%); } } /* main area: the page scrolls normally (long pages go all the way down) */ body.bd-dark .main-content.bd-main { flex: 1 1 auto; min-width: 0; display: block !important; overflow: visible !important; height: auto !important; padding: 14px 18px 50px !important; background: transparent !important; } body.bd-dark .main-content.bd-main > * { max-width: 100%; } body.bd-dark .main-content [class*="max-w-"]:not(.fixed *):not([class*="max-w-md"]):not([class*="max-w-lg"]):not([class*="max-w-sm"]):not([class*="max-w-xl"]):not([class*="max-w-2xl"]):not([class*="max-w-3xl"]) { max-width: 100% !important; } /* ---------- smooth content entry ---------- */ @keyframes bdRise { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } @keyframes bdRow { from { opacity: 0; transform: translateX(-4px); } } body.bd-dark .bd-main > *, body.bd-dark .bd-main > div > * { animation: bdRise .55s cubic-bezier(.2,.8,.2,1) both; } body.bd-dark .bd-main > div > *:nth-child(2) { animation-delay: .05s; } body.bd-dark .bd-main > div > *:nth-child(3) { animation-delay: .1s; } body.bd-dark .bd-main > div > *:nth-child(4) { animation-delay: .15s; } body.bd-dark .bd-main > div > *:nth-child(5) { animation-delay: .2s; } body.bd-dark .bd-main > div > *:nth-child(n+6) { animation-delay: .25s; } body.bd-dark .bd-main table tbody tr { animation: bdRow .35s ease both; } body.bd-dark .bd-main table tbody tr:nth-child(-n+30) { animation-delay: calc(.15s); } body.bd-dark .fixed, body.bd-dark .bd-main .fixed > * { animation: none; } @media (prefers-reduced-motion: reduce) { body.bd-dark * { animation: none !important; transition: none !important; } } /* ---------- surfaces: white areas become dark glass ---------- */ body.bd-dark .bg-white, body.bd-dark [class*="bg-white/"], body.bd-dark .kpi-card, body.bd-dark .link-card, body.bd-dark .module-head, body.bd-dark .auth-card { background-color: var(--k-panel) !important; border-color: var(--k-line) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } body.bd-dark .bg-slate-50, body.bd-dark .bg-gray-50, body.bd-dark [class*="bg-slate-50/"] { background-color: var(--k-panel-2) !important; } body.bd-dark .bg-slate-100, body.bd-dark .bg-gray-100, body.bd-dark [class*="bg-slate-100/"], body.bd-dark .bg-slate-200, body.bd-dark .bg-gray-200 { background-color: var(--k-raise) !important; } body.bd-dark .bg-slate-300 { background-color: var(--k-raise-2) !important; } body.bd-dark [class*="bg-indigo-50"], body.bd-dark [class*="bg-indigo-100"], body.bd-dark [class*="bg-blue-50"], body.bd-dark [class*="bg-blue-100"], body.bd-dark [class*="bg-sky-50"] { background-color: rgba(94,106,210,.13) !important; } body.bd-dark [class*="bg-emerald-50"], body.bd-dark [class*="bg-emerald-100"], body.bd-dark [class*="bg-green-50"], body.bd-dark [class*="bg-teal-50"] { background-color: rgba(76,183,130,.12) !important; } body.bd-dark [class*="bg-amber-50"], body.bd-dark [class*="bg-amber-100"], body.bd-dark [class*="bg-yellow-50"], body.bd-dark [class*="bg-orange-50"] { background-color: rgba(242,201,76,.10) !important; } body.bd-dark [class*="bg-rose-50"], body.bd-dark [class*="bg-rose-100"], body.bd-dark [class*="bg-red-50"] { background-color: rgba(235,87,87,.11) !important; } body.bd-dark [class*="bg-violet-50"], body.bd-dark [class*="bg-purple-50"], body.bd-dark [class*="bg-pink-50"] { background-color: rgba(168,120,240,.12) !important; } body.bd-dark [class*="border-slate-"], body.bd-dark [class*="border-gray-"], body.bd-dark [class*="border-indigo-"], body.bd-dark [class*="border-emerald-"], body.bd-dark [class*="border-amber-"], body.bd-dark [class*="border-rose-"], body.bd-dark [class*="border-blue-"], body.bd-dark [class*="border-violet-"], body.bd-dark .divide-y > * + *, body.bd-dark hr { border-color: var(--k-line) !important; } body.bd-dark .shadow-sm, body.bd-dark .shadow, body.bd-dark .shadow-md, body.bd-dark .shadow-lg { box-shadow: none !important; } body.bd-dark .bd-main .bg-white.rounded, body.bd-dark .bd-main .bg-white.border, body.bd-dark .bd-main .kpi-card { border-radius: 12px !important; } body.bd-dark .kpi-card { transition: transform .25s ease, border-color .25s; } body.bd-dark .kpi-card:hover, body.bd-dark .link-card:hover { transform: translateY(-2px); border-color: rgba(140,149,236,.35) !important; } body.bd-dark .kpi-icon { background: var(--k-raise) !important; border-radius: 9px !important; } /* ---------- text ---------- */ body.bd-dark .text-slate-900, body.bd-dark .text-slate-800, body.bd-dark .text-gray-900, body.bd-dark .text-gray-800, body.bd-dark .text-black { color: var(--k-t1) !important; } body.bd-dark .text-slate-700, body.bd-dark .text-gray-700 { color: var(--k-t2) !important; } body.bd-dark .text-slate-600, body.bd-dark .text-slate-500, body.bd-dark .text-gray-600, body.bd-dark .text-gray-500 { color: var(--k-t3) !important; } body.bd-dark .text-slate-400, body.bd-dark .text-slate-300, body.bd-dark .text-gray-400 { color: var(--k-t4) !important; } body.bd-dark [class*="text-indigo-"], body.bd-dark [class*="text-blue-"], body.bd-dark [class*="text-sky-"], body.bd-dark [class*="text-violet-"] { color: var(--k-acc-2) !important; } body.bd-dark [class*="text-emerald-"], body.bd-dark [class*="text-green-"], body.bd-dark [class*="text-teal-"] { color: var(--k-good) !important; } body.bd-dark [class*="text-amber-"], body.bd-dark [class*="text-yellow-"], body.bd-dark [class*="text-orange-"] { color: var(--k-warn) !important; } body.bd-dark [class*="text-rose-"], body.bd-dark [class*="text-red-"], body.bd-dark [class*="text-pink-"] { color: var(--k-bad) !important; } body.bd-dark .text-white { color: #fff !important; } body.bd-dark .section-title { color: var(--k-t1) !important; font-size: 13px !important; font-weight: 700 !important; } body.bd-dark .section-title i { color: var(--k-t3) !important; } /* ---------- compact tables (many rows) ---------- */ body.bd-dark table { font-size: 11.5px !important; font-variant-numeric: tabular-nums; } body.bd-dark table thead, body.bd-dark table thead tr, body.bd-dark table th, body.bd-dark table thead td { background-color: #0B0C0E !important; color: var(--k-t3) !important; border-color: var(--k-line) !important; font-weight: 700 !important; font-size: 10.5px !important; } body.bd-dark table th { padding: 5px 8px !important; } body.bd-dark table td { border-color: rgba(255,255,255,.06) !important; color: var(--k-t2); padding-top: 3px !important; padding-bottom: 3px !important; } body.bd-dark table tbody tr:hover, body.bd-dark table tbody tr[class*="hover:bg-"]:hover, body.bd-dark tr[class*="hover:bg-"]:hover { background-color: transparent !important; } body.bd-dark table tbody tr:hover > td, body.bd-dark table tbody tr:hover > th { background-color: rgba(255,255,255,.045) !important; } body.bd-dark :is(div, li, td, span)[class*="hover:bg-slate"]:hover, body.bd-dark :is(div, li, td, span)[class*="hover:bg-gray"]:hover, body.bd-dark :is(div, li, td, span)[class*="hover:bg-white"]:hover, body.bd-dark :is(div, li, td, span)[class*="hover:bg-indigo-50"]:hover, body.bd-dark :is(div, li, td, span)[class*="hover:bg-blue-50"]:hover { background-color: rgba(255,255,255,.045) !important; } body.bd-dark .overflow-x-auto, body.bd-dark .overflow-auto { scrollbar-width: thin; } /* ---------- inputs (stronger than the classic rule with many :not()) ---------- */ body.bd-dark :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]), select, textarea), body.bd-dark .main-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]), select, textarea) { background-color: rgba(255,255,255,.04) !important; color: var(--k-t1) !important; -webkit-text-fill-color: var(--k-t1); border-color: var(--k-line-2) !important; border-radius: 7px !important; } body.bd-dark .main-content td :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]), select, textarea) { background-color: transparent !important; border-color: transparent !important; border-radius: 5px !important; } body.bd-dark .main-content td :is(input, select, textarea):hover { background-color: rgba(255,255,255,.05) !important; } body.bd-dark :is(input, select, textarea):focus { border-color: var(--k-acc) !important; box-shadow: 0 0 0 3px rgba(94,106,210,.22) !important; outline: none !important; } body.bd-dark input::placeholder, body.bd-dark textarea::placeholder { color: var(--k-t4) !important; -webkit-text-fill-color: var(--k-t4); } body.bd-dark select option, body.bd-dark select optgroup { background: #111214 !important; color: var(--k-t1) !important; } body.bd-dark input[type="checkbox"], body.bd-dark input[type="radio"] { accent-color: var(--k-acc); } body.bd-dark input[type="file"], body.bd-dark .main-content input[type="file"] { background: var(--k-panel) !important; color: var(--k-t3) !important; border-color: var(--k-line-2) !important; } body.bd-dark :is(input, select, textarea):disabled { opacity: .5; } /* ---------- buttons ---------- */ body.bd-dark :where(button, a, input[type="submit"], input[type="button"], label)[class*="bg-indigo-6"], body.bd-dark :where(button, a, input[type="submit"], input[type="button"], label)[class*="bg-indigo-5"], body.bd-dark :where(button, a, input[type="submit"], input[type="button"], label)[class*="bg-blue-6"], body.bd-dark :where(button, a)[class*="bg-emerald-6"], body.bd-dark :where(button, a)[class*="bg-amber-5"], body.bd-dark :where(button, a)[class*="bg-amber-6"] { background: linear-gradient(180deg, #6C78E0, #5561C8) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 14px rgba(94,106,210,.28) !important; } body.bd-dark :where(button, a)[class*="bg-rose-5"], body.bd-dark :where(button, a)[class*="bg-rose-6"], body.bd-dark :where(button, a)[class*="bg-red-6"] { background: #B23C3C !important; color: #fff !important; } body.bd-dark :where(button, a)[class*="bg-slate-7"], body.bd-dark :where(button, a)[class*="bg-slate-8"], body.bd-dark :where(button, a)[class*="bg-slate-9"], body.bd-dark :where(button, a)[class*="bg-gray-8"] { background-color: var(--k-raise-2) !important; color: var(--k-t1) !important; border: 1px solid var(--k-line-2) !important; } body.bd-dark :where(button, a, input[type="submit"], input[type="button"], label)[class*="bg-"] *, body.bd-dark .btn-edit-module *, body.bd-dark .btn-action-edit * { color: inherit !important; } body.bd-dark :where(button, a, label, summary, [role="button"], [role="tab"]):hover { color: var(--k-t1) !important; } body.bd-dark :where(button, a, label, summary, [role="button"], [role="tab"])[class*="bg-white"]:hover, body.bd-dark :where(button, a, label, summary, [role="button"], [role="tab"])[class*="bg-slate-"]:hover, body.bd-dark :where(button, a, label, summary, [role="button"], [role="tab"])[class*="bg-gray-"]:hover, body.bd-dark :where(button, a, label, summary, [role="button"], [role="tab"])[class*="hover:bg-slate"]:hover, body.bd-dark :where(button, a, label, summary, [role="button"], [role="tab"])[class*="hover:bg-gray"]:hover, body.bd-dark :where(button, a, label, summary, [role="button"], [role="tab"])[class*="hover:bg-white"]:hover, body.bd-dark [class*="hover:bg-indigo-50"]:hover, body.bd-dark [class*="hover:bg-indigo-100"]:hover, body.bd-dark [class*="hover:bg-blue-50"]:hover, body.bd-dark [class*="hover:bg-rose-50"]:hover, body.bd-dark [class*="hover:bg-emerald-50"]:hover, body.bd-dark [class*="hover:bg-amber-50"]:hover, body.bd-dark .main-content :where(button,input[type="submit"],input[type="button"],a[class*="px-"],a[class*="py-"]):is([class~="bg-slate-50"],[class~="bg-slate-100"],[class~="bg-slate-200"],[class~="bg-gray-50"],[class~="bg-gray-100"],[class~="bg-gray-200"],[class~="bg-white"]):hover { background-color: rgba(255,255,255,.1) !important; border-color: var(--k-line-2) !important; color: var(--k-t1) !important; } body.bd-dark .main-content :where(button, a, input[type="submit"], input[type="button"], label):is([class*="bg-amber-"], [class*="bg-orange-"], [class*="bg-yellow-"], [class*="bg-indigo-"], [class*="bg-blue-"], [class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-violet-"]):not([class~="bg-indigo-50"]):not([class~="bg-blue-50"]):not([class~="bg-emerald-50"]):not([class~="bg-amber-50"]):not([class~="bg-indigo-100"]):hover:not(:disabled), body.bd-dark [class*="hover:bg-indigo-6"]:hover, body.bd-dark [class*="hover:bg-indigo-7"]:hover, body.bd-dark [class*="hover:bg-blue-7"]:hover, body.bd-dark [class*="hover:bg-emerald-7"]:hover, body.bd-dark [class*="hover:bg-amber-6"]:hover { background: linear-gradient(180deg, #7C86E6, #6570D6) !important; border-color: transparent !important; color: #fff !important; } body.bd-dark [class*="hover:bg-rose-5"]:hover, body.bd-dark [class*="hover:bg-rose-6"]:hover, body.bd-dark [class*="hover:bg-red-6"]:hover { background-color: #C24646 !important; color: #fff !important; } body.bd-dark [class*="hover:bg-slate-9"]:hover, body.bd-dark [class*="hover:bg-slate-8"]:hover, body.bd-dark [class*="hover:bg-slate-6"]:hover { background-color: rgba(255,255,255,.14) !important; color: var(--k-t1) !important; } body.bd-dark [class*="hover:text-slate"]:hover, body.bd-dark [class*="hover:text-gray"]:hover, body.bd-dark [class*="hover:text-black"]:hover { color: var(--k-t1) !important; } body.bd-dark [class*="hover:text-indigo"]:hover, body.bd-dark [class*="hover:text-blue"]:hover, body.bd-dark [class*="hover:text-violet"]:hover { color: #A9B0F2 !important; } body.bd-dark [class*="hover:text-rose"]:hover, body.bd-dark [class*="hover:text-red"]:hover { color: #FF8A8A !important; } body.bd-dark [class*="hover:border-"]:hover { border-color: var(--k-line-2) !important; } body.bd-dark .btn-edit-module, body.bd-dark .btn-action-edit { background: var(--k-raise) !important; color: var(--k-t2) !important; border: 1px solid var(--k-line-2) !important; border-radius: 6px !important; } body.bd-dark .btn-edit-module:hover, body.bd-dark .btn-action-edit:hover { background: rgba(255,255,255,.14) !important; color: var(--k-t1) !important; } body.bd-dark .bd-main :is(button, a)[class*="bg-"] { border-radius: 7px !important; } /* ---------- project menu: glass bar, wraps to a 2nd line (never scrolls) ---------- */ body.bd-dark .project-nav { display: flex !important; flex-wrap: wrap !important; overflow: visible !important; gap: 2px; padding: 3px !important; border-radius: 10px !important; background: var(--k-panel) !important; border: 1px solid var(--k-line) !important; box-shadow: none !important; width: fit-content; max-width: 100%; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); position: relative; z-index: 30; } body.bd-dark .project-nav ul { flex-wrap: wrap !important; overflow: visible !important; } body.bd-dark .project-nav .pn-link { color: var(--k-t3) !important; border-radius: 7px !important; font-weight: 700 !important; font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; } body.bd-dark .project-nav .pn-link:hover, body.bd-dark .project-nav .pn-group:hover > .pn-link { background: var(--k-panel-2) !important; color: var(--k-t1) !important; } body.bd-dark .project-nav .pn-link.is-active { background: rgba(255,255,255,.1) !important; color: var(--k-t1) !important; } body.bd-dark .project-nav .pn-menu > ul { background: rgba(14,15,17,.97) !important; border: 1px solid var(--k-line-2) !important; border-radius: 10px !important; box-shadow: 0 18px 50px rgba(0,0,0,.7) !important; padding: 4px !important; flex-direction: column !important; flex-wrap: nowrap !important; } body.bd-dark .project-nav .pn-item { color: var(--k-t2) !important; border-radius: 6px !important; font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; } body.bd-dark .project-nav .pn-item:hover, body.bd-dark .project-nav .pn-item.is-active { background: var(--k-raise) !important; color: var(--k-t1) !important; } /* ---------- badges, chips, pop-ups, messages ---------- */ body.bd-dark span[class*="rounded"][class*="border"], body.bd-dark span.rounded-full { border-color: var(--k-line-2) !important; } body.bd-dark .sf-file, body.bd-dark .ap-btn { background: var(--k-raise) !important; color: var(--k-t2) !important; border-color: var(--k-line-2) !important; } body.bd-dark .sb-avatar-initials { background: var(--k-raise-2) !important; color: var(--k-t1) !important; } body.bd-dark .fixed.inset-0 > div.bg-white, body.bd-dark .fixed.inset-0 > form.bg-white, body.bd-dark [role="dialog"] > div.bg-white { background: #0E0F11 !important; border: 1px solid var(--k-line-2) !important; border-radius: 14px !important; box-shadow: 0 30px 80px rgba(0,0,0,.75) !important; } body.bd-dark .fixed.inset-0[class*="bg-slate-900"], body.bd-dark .bg-slate-900.bg-opacity-50 { background-color: rgba(0,0,0,.7) !important; } body.bd-dark .bdcpm-toast { background: #141518 !important; color: var(--k-t1) !important; border: 1px solid var(--k-line-2) !important; } html body.bd-dark .btn-scroll-top, html body.bd-dark .btn-scroll-top:hover { background: rgba(20,21,24,.82) !important; color: var(--k-t1) !important; border: 1px solid var(--k-line-2) !important; box-shadow: 0 10px 30px rgba(0,0,0,.6) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } html body.bd-dark .btn-scroll-top:hover { border-color: rgba(140,149,236,.55) !important; transform: translateY(-2px); } html body.bd-dark .btn-scroll-top i, html body.bd-dark .btn-scroll-top svg { color: var(--k-t1) !important; fill: currentColor; } body.bd-dark .dash-header { background: var(--k-panel) !important; border-color: var(--k-line) !important; } /* ---------- sign-in pages ---------- */ .bd-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 18px; position: relative; } .bd-auth-home { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); left: 20px; color: var(--k-t3) !important; text-decoration: none; font-weight: 600; } .bd-auth-home:hover { color: var(--k-t1) !important; } .bd-auth-box { width: 100%; max-width: 340px; text-align: center; animation: bdRise .6s cubic-bezier(.2,.8,.2,1) both; } .bd-auth-logo { width: 46px; height: 46px; border-radius: 12px; object-fit: contain; background: #fff; padding: 4px; margin-bottom: 20px; } .bd-auth-mark { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #5E6AD2, #8C95EC); color: #fff; font-weight: 700; font-size: 20px; margin-bottom: 20px; } .bd-auth h1 { font-size: 20px !important; margin: 0 0 6px; font-weight: 700; } .bd-auth p.sub { color: var(--k-t3); margin: 0 0 22px; } .bd-auth form { text-align: left; } .bd-auth label { display: block; color: var(--k-t3); font-weight: 600; margin: 12px 0 5px; } body.bd-dark .bd-auth form input, body.bd-dark .bd-auth form textarea { width: 100%; height: 38px; padding: 0 12px; font-size: 13px; border-radius: 8px !important; } .bd-auth-btn { width: 100%; height: 38px; margin-top: 20px; border: 0; border-radius: 8px; background: #EDEDED !important; color: #08090A !important; font-weight: 700; font-size: 13px; cursor: pointer; transition: background .2s; } .bd-auth-btn:hover { background: #fff !important; color: #08090A !important; } .bd-auth-links { display: flex; justify-content: center; gap: 16px; margin-top: 20px; } .bd-auth-links a { color: var(--k-t3) !important; text-decoration: none; font-weight: 600; } .bd-auth-links a:hover { color: var(--k-t1) !important; } .bd-auth-foot { position: absolute; bottom: 16px; color: var(--k-t4); font-size: 11px; } /* ---------- responsive ---------- */ @media (max-width: 640px) { body.bd-dark .main-content.bd-main { padding: 10px 8px 60px !important; } body.bd-dark .bd-main .grid { grid-template-columns: minmax(0, 1fr) !important; } body.bd-dark .bd-main .overflow-x-auto { max-width: 100%; } } /* ---------- public home page and company portal ---------- */ .bd-lpnav { position: sticky; top: 0; z-index: 40; background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--k-line); padding-top: env(safe-area-inset-top, 0px); } .bd-lpnav .in { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; gap: 22px; height: 54px; padding: 0 20px; } .bd-lpnav .links { display: flex; gap: 20px; flex: 1; } .bd-lpnav .links a, .bd-ghost { color: var(--k-t3) !important; font-weight: 600; text-decoration: none; transition: color .2s; } .bd-lpnav .links a:hover, .bd-ghost:hover { color: var(--k-t1) !important; } .bd-pill { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; background: #EDEDED !important; color: #08090A !important; font-weight: 700; font-size: 12.5px; text-decoration: none; transition: transform .2s, background .2s; white-space: nowrap; } .bd-pill:hover { background: #fff !important; transform: translateY(-1px); color: #08090A !important; } .bd-pill.big { height: 40px; padding: 0 20px; font-size: 13.5px; } .bd-lp { max-width: 1160px; margin: 0 auto; padding: 0 20px; } .bd-lp .hero { padding: 90px 0 30px; } .bd-badge { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--k-line); background: var(--k-panel); color: var(--k-t2); font-weight: 600; font-size: 11.5px; } .bd-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--k-good); } .bd-lp h1.big { font-size: clamp(32px, 5.2vw, 60px) !important; line-height: 1.04; font-weight: 700; letter-spacing: -0.035em !important; margin: 18px 0 16px; max-width: 920px; } .bd-lp h1.big em { font-style: normal; background: linear-gradient(90deg, #fff, #A9B0F2 55%, #6FC3FF); -webkit-background-clip: text; background-clip: text; color: transparent; } .bd-lp .lead { color: var(--k-t3); font-size: 15.5px; max-width: 660px; margin: 0 0 26px; line-height: 1.6; } .bd-btns { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .bd-glass { background: var(--k-panel); border: 1px solid var(--k-line); border-radius: 14px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .bd-shot { margin-top: 56px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); } .bd-shot .head { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--k-line); color: var(--k-t3); } .bd-shot .head b { color: var(--k-t1); } .bd-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; min-width: 60px; } .bd-bar i { display: block; height: 100%; background: linear-gradient(90deg, #5E6AD2, #8C95EC); border-radius: 4px; } .bd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--k-line); border-bottom: 1px solid var(--k-line); } .bd-stats div { padding: 22px 16px; border-right: 1px solid var(--k-line); } .bd-stats div:last-child { border-right: 0; } .bd-stats b { display: block; font-size: 30px; color: var(--k-t1); font-weight: 700; letter-spacing: -0.02em; } .bd-stats span { color: var(--k-t3); } .bd-sec { padding: 90px 0 0; } .bd-sec h2 { font-size: clamp(24px, 3.4vw, 40px) !important; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em !important; margin: 0 0 12px; } .bd-sec > p { color: var(--k-t3); font-size: 14.5px; max-width: 700px; margin: 0 0 30px; line-height: 1.6; } .bd-eyebrow { color: var(--k-acc-2); font-weight: 700; font-size: 12px; display: block; margin-bottom: 10px; } .bd-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .bd-feat > div { padding: 18px; transition: transform .25s, border-color .25s; } .bd-feat > div:hover { transform: translateY(-3px); border-color: rgba(140,149,236,.35); } .bd-feat h4 { margin: 10px 0 6px; font-size: 14px; } .bd-feat p, .bd-who p { margin: 0; color: var(--k-t3); line-height: 1.55; } .bd-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--k-panel-2); border: 1px solid var(--k-line); font-size: 15px; } .bd-who { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .bd-who > div { padding: 14px; } .bd-who b { color: var(--k-t1); display: block; margin-bottom: 6px; font-size: 13px; } .bd-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .bd-flow > div { padding: 12px; } .bd-flow b { color: var(--k-t1); display: block; } .bd-flow span { color: var(--k-t3); font-size: 11px; } .bd-flow em { font-style: normal; color: var(--k-acc-2); font-weight: 700; font-size: 10.5px; } .bd-founder { display: grid; grid-template-columns: 96px 1fr; gap: 22px; padding: 24px; align-items: start; } .bd-founder img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--k-line-2); filter: grayscale(1) contrast(1.05); } .bd-founder h3 { margin: 0 0 4px; font-size: 20px; } .bd-founder small { color: var(--k-acc-2); font-weight: 700; } .bd-founder p { color: var(--k-t2); line-height: 1.65; margin: 10px 0 0; font-size: 13px; } .bd-partners { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; margin-top: 16px; } .bd-partners a { display: inline-flex; align-items: center; gap: 10px; color: var(--k-t3) !important; font-weight: 700; font-size: 15px; text-decoration: none; } .bd-partners a:hover { color: var(--k-t1) !important; } .bd-partners img { height: 26px; filter: grayscale(1) brightness(1.8); } .bd-final { text-align: center; padding: 110px 0 90px; } .bd-foot { border-top: 1px solid var(--k-line); padding: 34px 20px calc(40px + env(safe-area-inset-bottom, 0px)); } .bd-foot .in { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 20px; } .bd-foot b { color: var(--k-t1); display: block; margin-bottom: 8px; } .bd-foot a { display: block; color: var(--k-t3) !important; margin: 5px 0; text-decoration: none; } .bd-foot p { color: var(--k-t4); margin: 6px 0 0; } .bd-lp [data-rv] { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); } .bd-lp [data-rv].in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .bd-lp [data-rv] { opacity: 1; transform: none; transition: none; } } @media (max-width: 1000px) { .bd-lpnav .links { display: none; } .bd-feat, .bd-who { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bd-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bd-foot .in { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .bd-lp .hero { padding-top: 50px; } .bd-feat, .bd-who { grid-template-columns: minmax(0, 1fr); } .bd-stats { grid-template-columns: 1fr 1fr; } .bd-stats div:nth-child(2) { border-right: 0; } .bd-flow { grid-template-columns: 1fr 1fr; } .bd-founder { grid-template-columns: 1fr; } .bd-founder img { width: 84px; height: 84px; } .bd-lpnav .in { gap: 12px; padding: 0 12px; } } /* ---------- project chat ---------- */ .bd-chat-fab { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 80; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--k-line-2); background: rgba(16,17,20,.85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--k-t1); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.6); transition: transform .2s, border-color .2s; } .bd-chat-fab:hover, .bd-chat-fab.on { border-color: rgba(140,149,236,.55); transform: translateY(-1px); } .bd-chat-fab b { background: linear-gradient(180deg, #6C78E0, #5561C8); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 10.5px; line-height: 18px; } .bd-chat-fab b[hidden] { display: none; } .bd-chat { position: fixed; right: 18px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); z-index: 81; width: min(380px, calc(100vw - 20px)); height: min(560px, calc(100vh - 130px)); display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--k-line-2); background: rgba(12,13,15,.95); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 30px 80px rgba(0,0,0,.75); animation: bdRise .25s ease both; color: var(--k-t2); } .bd-chat[hidden] { display: none; } .bd-chat-h { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--k-line); } .bd-chat-h .t { min-width: 0; flex: 1; } .bd-chat-h b { color: var(--k-t1); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bd-chat-h small { color: var(--k-t3); font-size: 10.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bd-chat-h .x { border: 0; background: none; color: var(--k-t3); cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 6px; } .bd-chat-h .x:hover { color: var(--k-t1); background: var(--k-raise); } .bd-chat-b { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; } .bd-chat-more { align-self: center; border: 1px solid var(--k-line-2); background: var(--k-panel); color: var(--k-t3); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 11px; cursor: pointer; } .bd-chat-more[hidden], .bd-chat-empty[hidden] { display: none; } .bd-chat-empty { color: var(--k-t3); text-align: center; margin: auto 0; padding: 20px; } .bd-msg { display: flex; gap: 8px; align-items: flex-start; } .bd-msg .bd-av { width: 24px; height: 24px; font-size: 10.5px; } .bd-msg .c { min-width: 0; max-width: 82%; } .bd-msg .n { display: flex; align-items: center; gap: 6px; } .bd-msg .n b { color: var(--k-t1); font-size: 11.5px; } .bd-msg .n span { color: var(--k-t4); font-size: 10.5px; } .bd-msg .n .del { border: 0; background: none; color: var(--k-t4); cursor: pointer; font-size: 10px; opacity: 0; transition: opacity .15s; } .bd-msg:hover .n .del { opacity: 1; } .bd-msg p { margin: 3px 0 0; color: var(--k-t2); line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; background: var(--k-panel-2); border: 1px solid var(--k-line); padding: 6px 9px; border-radius: 4px 10px 10px 10px; } .bd-msg p a { color: var(--k-acc-2); } .bd-msg p.gone { font-style: italic; color: var(--k-t4); background: transparent; } .bd-msg .men { color: var(--k-acc-2); font-weight: 700; } .bd-msg.me { flex-direction: row-reverse; } .bd-msg.me .c { text-align: right; } .bd-msg.me .n { justify-content: flex-end; flex-direction: row-reverse; } .bd-msg.me p { background: linear-gradient(180deg, rgba(108,120,224,.32), rgba(85,97,200,.26)); border-color: rgba(140,149,236,.3); border-radius: 10px 4px 10px 10px; text-align: left; display: inline-block; } .bd-msg .fl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; } .bd-msg.me .fl { justify-content: flex-end; } .bd-msg .fl .img img { max-width: 180px; max-height: 140px; border-radius: 8px; border: 1px solid var(--k-line); display: block; object-fit: cover; } .bd-msg .fl .file { display: inline-flex; align-items: center; gap: 6px; max-width: 230px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--k-line-2); background: var(--k-panel); color: var(--k-t2) !important; text-decoration: none; } .bd-msg .fl .file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bd-msg .fl .file small { color: var(--k-t4); flex: none; } .bd-chat-mention { margin: 0 10px; border: 1px solid var(--k-line-2); border-radius: 10px; background: #141518; max-height: 170px; overflow-y: auto; padding: 4px; } .bd-chat-mention[hidden], .bd-chat-files[hidden] { display: none; } .bd-chat-mention button { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--k-t2); padding: 6px 8px; border-radius: 6px; font: inherit; cursor: pointer; } .bd-chat-mention button:hover { background: var(--k-raise); } .bd-chat-mention small { color: var(--k-t4); } .bd-chat-files { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 10px 0; } .bd-chat-files span { display: inline-flex; align-items: center; gap: 4px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--k-line-2); color: var(--k-t2); font-size: 11px; } .bd-chat-files button { border: 0; background: none; color: var(--k-t3); cursor: pointer; } .bd-chat-f { display: flex; align-items: flex-end; gap: 6px; padding: 9px; border-top: 1px solid var(--k-line); } .bd-chat-f .att { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--k-t3); cursor: pointer; flex: none; } .bd-chat-f .att:hover { color: var(--k-t1); background: var(--k-raise); } body.bd-dark .bd-chat-f textarea { flex: 1; min-height: 32px; max-height: 120px; resize: none; padding: 7px 10px; font: inherit; font-size: 12.5px; line-height: 1.35; border-radius: 8px !important; } .bd-chat-f .send { width: 34px; height: 32px; border: 0; border-radius: 8px; background: linear-gradient(180deg, #6C78E0, #5561C8); color: #fff; cursor: pointer; flex: none; } .bd-chat-f .send:disabled { opacity: .5; } @media (max-width: 640px) { .bd-chat { right: 10px; left: 10px; width: auto; bottom: calc(62px + env(safe-area-inset-bottom, 0px)); height: calc(100vh - 140px); } .bd-chat-fab { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } .bd-chat-fab span { display: none; } } .bd-chats > button { font-size: 14px !important; } .bd-chats .n, .bd-dd-menu .n { font-size: 10px; background: var(--k-acc); color: #fff; border-radius: 999px; padding: 0 6px; line-height: 16px; font-weight: 700; } /* ===================================================================== FIXES: page scrolling, row hover, menus that stay open ===================================================================== */ /* long pages scroll normally (the classic frame fixed the height to the screen) */ html, body.bd-dark { height: auto !important; min-height: 100%; overflow-y: auto !important; overflow-x: hidden; } /* hover: a light, see-through dark tint - never white - on rows, cells and anything with a light hover */ body.bd-dark [class*="hover:bg-slate-"]:hover, body.bd-dark [class*="hover:bg-gray-"]:hover, body.bd-dark [class*="hover:bg-white"]:hover, body.bd-dark [class*="hover:bg-indigo-50"]:hover, body.bd-dark [class*="hover:bg-indigo-100"]:hover, body.bd-dark [class*="hover:bg-blue-50"]:hover, body.bd-dark [class*="hover:bg-emerald-50"]:hover, body.bd-dark [class*="hover:bg-amber-50"]:hover, body.bd-dark [class*="hover:bg-rose-50"]:hover, body.bd-dark [class*="hover:bg-violet-50"]:hover { background-color: rgba(255,255,255,.045) !important; color: inherit; } body.bd-dark [class*="hover:bg-slate-9"]:hover, body.bd-dark [class*="hover:bg-slate-8"]:hover, body.bd-dark [class*="hover:bg-slate-7"]:hover, body.bd-dark [class*="hover:bg-slate-6"]:hover { background-color: rgba(255,255,255,.12) !important; } html body.bd-dark table tbody tr:hover, html body.bd-dark table tbody tr:hover > td, html body.bd-dark table tbody tr:hover > th, html body.bd-dark .main-content table tbody tr:hover > td { background-color: rgba(255,255,255,.035) !important; } /* cells that stay in place while scrolling sideways need a solid colour */ html body.bd-dark table :is(td, th)[class*="sticky"], html body.bd-dark table :is(td, th)[class*="freeze"], html body.bd-dark .ps-table tbody td.ps-sl, html body.bd-dark .ps-table tbody td.ps-task { background-color: #0B0C0E !important; } html body.bd-dark table tbody tr:hover > :is(td, th)[class*="sticky"], html body.bd-dark table tbody tr:hover > :is(td, th)[class*="freeze"], html body.bd-dark .ps-table tbody tr:hover td.ps-sl, html body.bd-dark .ps-table tbody tr:hover td.ps-task { background-color: #16171A !important; } html body.bd-dark .ps-table td.ps-edit:hover { background-color: rgba(242,201,76,.14) !important; } html body.bd-dark table tbody tr:hover td :is(input, select) { background-color: transparent !important; } /* top-bar menus: stay open while the mouse moves into them, close a moment after leaving, stay open after a click */ .bd-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .bd-dd-menu { transition: opacity .16s ease .28s, transform .16s ease .28s, visibility 0s linear .44s; visibility: hidden; } .bd-dd:hover > .bd-dd-menu, .bd-dd.open > .bd-dd-menu, .bd-dd:focus-within > .bd-dd-menu { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; } /* project menu drop-downs: same behaviour */ body.bd-dark .project-nav .pn-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } body.bd-dark .project-nav .pn-menu { transition: opacity .16s ease .28s, visibility 0s linear .44s !important; } body.bd-dark .project-nav .pn-group:hover > .pn-menu, body.bd-dark .project-nav .pn-group.open > .pn-menu, body.bd-dark .project-nav .pn-group:focus-within > .pn-menu { opacity: 1 !important; visibility: visible !important; transition-delay: 0s !important; } /* project menu drop-downs stay open while you move into them (and after a click) */ body.bd-dark .project-nav .pn-menu { padding-top: 8px; margin-top: -4px; transition: opacity .15s ease .05s, visibility 0s linear .35s; } body.bd-dark .project-nav .pn-group:hover > .pn-menu, body.bd-dark .project-nav .pn-group.open > .pn-menu { opacity: 1; visibility: visible; transition-delay: 0s; } body.bd-dark .project-nav .pn-group.open > .pn-link { background: var(--k-panel-2) !important; color: var(--k-t1) !important; } /* ---------- table hover: transparent light-black, never white ---------- */ html body.bd-dark table tbody tr:hover, html body.bd-dark table tbody tr:hover > td, html body.bd-dark table tbody tr:hover > th, html body.bd-dark .main-content table tbody tr:hover > td, html body.bd-dark tr[class*="hover:bg-"]:hover, html body.bd-dark tr[class*="hover:bg-"]:hover > td, html body.bd-dark table tr:hover td[class*="bg-"], html body.bd-dark .data-table tbody tr:hover td { background-color: rgba(255,255,255,.04) !important; color: inherit; } html body.bd-dark :is(div, li, td, tr, label, span, section, article)[class*="hover:bg-white"]:hover, html body.bd-dark :is(div, li, td, tr, label, span, section, article)[class*="hover:bg-slate"]:hover, html body.bd-dark :is(div, li, td, tr, label, span, section, article)[class*="hover:bg-gray"]:hover, html body.bd-dark :is(div, li, td, tr, label, span, section, article)[class*="hover:bg-indigo-5"]:hover, html body.bd-dark :is(div, li, td, tr, label, span, section, article)[class*="hover:bg-indigo-1"]:hover, html body.bd-dark :is(div, li, td, tr, label, span, section, article)[class*="hover:bg-blue-5"]:hover, html body.bd-dark :is(div, li, td, tr, label, span, section, article)[class*="hover:bg-emerald-5"]:hover, html body.bd-dark :is(div, li, td, tr, label, span, section, article)[class*="hover:bg-amber-5"]:hover, html body.bd-dark :is(div, li, td, tr, label, span, section, article)[class*="hover:bg-rose-5"]:hover { background-color: rgba(255,255,255,.045) !important; } html body.bd-dark table tbody tr:hover input, html body.bd-dark table tbody tr:hover select { background-color: transparent !important; } /* ---------- long pages scroll normally (the classic frame fixed the height) ---------- */ html body.bd-dark .wrapper, html body.bd-dark .wrapper.bd-app { height: auto !important; min-height: 100vh; overflow: visible !important; } html body.bd-dark, html:has(body.bd-dark) { height: auto !important; overflow-y: auto !important; overflow-x: hidden; } html body.bd-dark .main-content.bd-main { height: auto !important; overflow: visible !important; } html body.bd-dark.bd-modal-open { overflow: hidden !important; } /* smooth scrolling is done by bdcpm-scroll.js; the browser's own smooth-scroll would fight it */ html:has(body.bd-dark) { scroll-behavior: auto !important; } /* phones / tablets: native momentum and bounce; smooth anchor jumps */ html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior-y: auto; } /* table row hover: a light transparent tint over the whole row, never white (also beats module styles) */ html body.bd-dark table tbody tr:hover > td, html body.bd-dark table tbody tr:hover > th, html body.bd-dark table tr:hover > td[style], html body.bd-dark table.matrix-table tbody tr:hover > td { background-color: rgba(255,255,255,.045) !important; } /* ---------- left menu fixed on desktop; content in an inset panel ---------- */ @media (min-width: 900px) { .bd-side { position: fixed !important; left: 0; top: 0; bottom: 0; height: 100vh !important; } body.bd-dark .wrapper.bd-app { display: block !important; } body.bd-dark .main-content.bd-main { margin: 8px 8px 8px 240px !important; max-width: none; min-height: calc(100vh - 16px); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 14px 18px 50px !important; } } /* ===================================================================== APPROVED DESIGN (preview of 16 Oct): Linear-style dark charcoal, glass panels, white / grey text, two accents only (Concrete = orange, Formwork = red), logo unchanged, no bounce, dark scroll bars. ===================================================================== */ html body.bd-dark { --k-bg: #0D0E11; --k-solid: #121316; --k-solid-2: #16171B; --k-line: #22242A; --k-line-2: #2C2F36; --k-panel: rgba(22,23,27,.62); --k-panel-2: rgba(255,255,255,.045); --k-raise: rgba(255,255,255,.06); --k-raise-2: rgba(255,255,255,.09); --k-t1: #FFFFFF; --k-t2: #E4E6EA; --k-t3: #C9CDD3; --k-t4: #A7ACB3; --k-acc: #2A2C33; --k-acc-2: #FFFFFF; --k-acc-soft: rgba(255,255,255,.08); --k-conc: #1DA1FF; --k-form: #EB5757; background: #0D0E11 !important; } html, html:has(body.bd-dark) { background: #0D0E11 !important; overscroll-behavior: none !important; } html body.bd-dark { overscroll-behavior: none !important; } html body.bd-dark * { scrollbar-color: #2C2F36 transparent; } html body.bd-dark ::-webkit-scrollbar { width: 8px; height: 8px; } html body.bd-dark ::-webkit-scrollbar-thumb { background: #2C2F36; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } html body.bd-dark ::-webkit-scrollbar-thumb:hover { background: #3A3D45; border: 2px solid transparent; background-clip: padding-box; } html body.bd-dark ::selection { background: rgba(255,255,255,.18); } /* side menu + main panel */ html body.bd-dark .bd-side { background: #0D0E11 !important; border-right: 0 !important; } html body.bd-dark .bd-brand img { background: none !important; border-radius: 0 !important; width: auto !important; max-width: 150px; height: 24px !important; object-fit: contain; } /* logo exactly as uploaded */ html body.bd-dark .bd-brand .ini { background: #2A2C33 !important; } html body.bd-dark .bd-item { color: var(--k-t1) !important; font-weight: 600; } html body.bd-dark .bd-item i { color: var(--k-t3) !important; } html body.bd-dark .bd-item:hover { background: #17181C !important; } html body.bd-dark .bd-item.on { background: #1C1D22 !important; } html body.bd-dark .bd-item.on i { color: var(--k-t1) !important; } html body.bd-dark .bd-item .n { background: transparent !important; color: var(--k-t3) !important; padding: 0 !important; } html body.bd-dark .bd-mgrp { color: var(--k-t4) !important; font-weight: 600 !important; font-size: 11px !important; } html body.bd-dark .bd-av { background: #3A3D45 !important; } html body.bd-dark .bd-out, html body.bd-dark .bd-out i { color: var(--k-t3) !important; } html body.bd-dark .bd-mtop { background: rgba(13,14,17,.85) !important; } @media (min-width: 900px) { html body.bd-dark .main-content.bd-main { background: #121316 !important; border: 1px solid rgba(255,255,255,.10) !important; } } /* surfaces: glass panels with the hairline border */ html body.bd-dark .bd-main :is(.bg-white, .kpi-card, .link-card, .dash-header) { background-color: rgba(22,23,27,.62) !important; border-color: rgba(255,255,255,.10) !important; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important; } html body.bd-dark .bd-main [class*="bg-slate-50"], html body.bd-dark .bd-main [class*="bg-gray-50"] { background-color: rgba(255,255,255,.025) !important; } html body.bd-dark .bd-main [class*="border-slate-"], html body.bd-dark .bd-main [class*="border-gray-"] { border-color: rgba(255,255,255,.10) !important; } /* text: white and greys only */ html body.bd-dark .bd-main :is(.text-slate-900, .text-slate-800, .text-gray-900, .text-gray-800) { color: #FFFFFF !important; } html body.bd-dark .bd-main :is(.text-slate-700, .text-slate-600, .text-gray-700, .text-gray-600) { color: #E4E6EA !important; } html body.bd-dark .bd-main :is(.text-slate-500, .text-slate-400, .text-gray-500, .text-gray-400) { color: #C9CDD3 !important; } html body.bd-dark .bd-main :is([class*="text-indigo-"], [class*="text-blue-"], [class*="text-violet-"], [class*="text-sky-"], [class*="text-teal-"], [class*="text-cyan-"]) { color: #FFFFFF !important; } html body.bd-dark .bd-main :is([class*="text-emerald-"], [class*="text-green-"], [class*="text-amber-"], [class*="text-yellow-"], [class*="text-orange-"]) { color: #E4E6EA !important; } html body.bd-dark .bd-main :is([class*="text-rose-"], [class*="text-red-"], [class*="text-pink-"]) { color: #E5848A !important; } /* QUANTITY tables: Concrete (CFT) orange, Formwork (SFT) red, everything else white / grey */ html body.bd-dark .bd-main table :is(td, th).bd-conc, html body.bd-dark .bd-main table .bd-conc :is(input, b, span, a) { color: #1DA1FF !important; -webkit-text-fill-color: #1DA1FF !important; } html body.bd-dark .bd-main table :is(td, th).bd-form, html body.bd-dark .bd-main table .bd-form :is(input, b, span, a) { color: #EB5757 !important; -webkit-text-fill-color: #EB5757 !important; } html body.bd-dark .bd-main table :is(td, th):not(.bd-conc):not(.bd-form) :is(input.out-vol, input.out-form) { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* tables: dark header, compact rows, small text */ html body.bd-dark .bd-main table thead th, html body.bd-dark .bd-main table thead td { background: #15161A !important; color: #C9CDD3 !important; border-color: rgba(255,255,255,.10) !important; font-size: 10.5px !important; } html body.bd-dark .bd-main table td { border-color: rgba(255,255,255,.10) !important; } html body.bd-dark .bd-main table tbody tr:hover > td { background-color: rgba(255,255,255,.035) !important; } /* buttons: white primary (like Linear), dark secondary, red only for delete */ html body.bd-dark :where(button, a, input[type="submit"], input[type="button"], label):is([class*="bg-indigo-"], [class*="bg-blue-"], [class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-amber-"], [class*="bg-orange-"], [class*="bg-violet-"], [class*="bg-teal-"]):not([class*="bg-indigo-50"]):not([class*="bg-blue-50"]):not([class*="bg-emerald-50"]):not([class*="bg-amber-50"]):not([class*="bg-indigo-100"]), html body.bd-dark .bd-main :where(button, a, input[type="submit"], input[type="button"], label):is([class*="bg-indigo-"], [class*="bg-blue-"], [class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-amber-"], [class*="bg-orange-"], [class*="bg-violet-"], [class*="bg-teal-"]):not([class~="bg-indigo-50"]):not([class~="bg-blue-50"]):not([class~="bg-emerald-50"]):not([class~="bg-amber-50"]):not([class~="bg-indigo-100"]) { background: #2B2D34 !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: none !important; } html body.bd-dark .bd-main :where(button, a, input[type="submit"], input[type="button"], label):is([class*="bg-indigo-"], [class*="bg-blue-"], [class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-amber-"], [class*="bg-orange-"], [class*="bg-violet-"], [class*="bg-teal-"]):not([class~="bg-indigo-50"]):not([class~="bg-blue-50"]):not([class~="bg-emerald-50"]):not([class~="bg-amber-50"]):not([class~="bg-indigo-100"]):hover:not(:disabled) { background: #34363E !important; color: #FFFFFF !important; border-color: rgba(255,255,255,.10) !important; } html body.bd-dark :where(button, a)[class*="bg-indigo-"] *, html body.bd-dark :where(button, a)[class*="bg-emerald-"] *, html body.bd-dark :where(button, a)[class*="bg-amber-"] *, html body.bd-dark :where(button, a)[class*="bg-blue-"] * { color: #FFFFFF !important; } html body.bd-dark :where(button, a)[class*="bg-slate-7"], html body.bd-dark :where(button, a)[class*="bg-slate-8"], html body.bd-dark :where(button, a)[class*="bg-slate-9"] { background: #1C1D22 !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,.10) !important; } html body.bd-dark .btn-edit-module, html body.bd-dark .btn-action-edit { background: #1C1D22 !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,.10) !important; } html body.bd-dark .btn-scroll-top, html body.bd-dark .btn-scroll-top:hover { background: rgba(28,29,34,.9) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #FFFFFF !important; width: 38px !important; height: 38px !important; } /* chips / badges: neutral (status is in the words) */ html body.bd-dark .bd-main span[class*="rounded"]:is([class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-indigo-"], [class*="bg-blue-"], [class*="bg-amber-"], [class*="bg-violet-"], [class*="bg-sky-"]) { background: transparent !important; color: #E4E6EA !important; border: 1px solid rgba(255,255,255,.10) !important; } /* inputs */ html body.bd-dark .bd-main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]), select, textarea):focus { border-color: #555963 !important; box-shadow: 0 0 0 2px rgba(255,255,255,.06) !important; } html body.bd-dark input[type="checkbox"], html body.bd-dark input[type="radio"] { accent-color: #1DA1FF; } /* project menu: wraps to a 2nd line, groups open sub-menus */ html body.bd-dark .project-nav { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; border-radius: 0 !important; padding: 0 0 6px !important; margin-bottom: 12px !important; } html body.bd-dark .project-nav .pn-link { color: #C9CDD3 !important; font-weight: 600 !important; } html body.bd-dark .project-nav .pn-link.is-active { background: #1F2026 !important; color: #FFFFFF !important; box-shadow: inset 0 0 0 1px #2C2F36 !important; } html body.bd-dark .project-nav .pn-menu > ul { background: rgba(22,23,27,.96) !important; border-color: rgba(255,255,255,.10) !important; } /* scroll-triggered reveal (bdcpm-dark.js adds .bd-rv to boxes below the first screen) */ html body.bd-dark .bd-rv { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); } html body.bd-dark .bd-rv.bd-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html body.bd-dark .bd-rv { opacity: 1; transform: none; transition: none; } } /* alerts panel (dashboard) and notification bell */ .bd-alerts { border: 1px solid rgba(255,255,255,.10); border-radius: 10px; background: rgba(22,23,27,.62); margin-bottom: 14px; overflow: hidden; } .bd-alerts-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.10); } .bd-alerts-h h3 { margin: 0; font-size: 12.5px; color: #FFFFFF; font-weight: 700; } .bd-alerts-rule { margin-left: auto; font-size: 10.5px; } .bd-muted { color: #C9CDD3; } .bd-alert { display: flex; gap: 10px; align-items: flex-start; padding: 7px 12px; border-bottom: 1px solid rgba(255,255,255,.10); text-decoration: none; color: #E4E6EA; } .bd-alert:last-child { border-bottom: 0; } a.bd-alert:hover { background: rgba(255,255,255,.035); } .bd-alert b { color: #FFFFFF; font-weight: 600; } .bd-tag { flex: none; min-width: 38px; text-align: center; font-weight: 700; font-size: 10.5px; border-radius: 5px; padding: 1px 5px; } .bd-tag-7 { color: #1DA1FF; background: rgba(29,161,255,.1); border: 1px solid rgba(29,161,255,.3); } .bd-tag-15 { color: #EB5757; background: rgba(235,87,87,.1); border: 1px solid rgba(235,87,87,.3); } .bd-tag-ok { color: #E4E6EA; border: 1px solid rgba(255,255,255,.10); } .bd-bell { position: relative; } .bd-bell .dot { position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: #EB5757; color: #fff; font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center; } .bd-notes { position: fixed; z-index: 90; left: 246px; top: 54px; width: 360px; max-width: calc(100vw - 20px); max-height: 70vh; overflow: auto; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(22,23,27,.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 24px 70px rgba(0,0,0,.6); display: none; } .bd-notes.open { display: block; } .bd-note { display: flex; gap: 8px; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.10); text-decoration: none; color: #E4E6EA; font-size: 11.5px; } .bd-note.unread { background: rgba(255,255,255,.03); } .bd-note b { color: #FFFFFF; display: block; font-weight: 600; } .bd-note small { color: #A7ACB3; } @media (max-width: 899px) { .bd-notes { left: 10px; right: 10px; width: auto; top: 58px; } } html body.bd-dark .bd-main table :is(td, th):not(.bd-form):not(.bd-conc):is([class*="text-rose-"], [class*="text-red-"], [class*="text-pink-"]) { color: #E4E6EA !important; } /* ---------- home page and company portal (approved preview) ---------- */ .lp2 { --bg: #0D0E11; --panel: #121316; --raise: #1C1D22; --line: #22242A; --line-2: #2C2F36; --glass: rgba(22,23,27,.62); --glass-line: rgba(255,255,255,.07); --t1: #FFFFFF; --t2: #C9CDD3; --t3: #A7ACB3; --conc: #1DA1FF; --form: #EB5757; background: #0D0E11; color: var(--t2); font: 500 12px/1.5 "Quicksand", "Helvetica Neue", Arial, sans-serif; text-transform: none; letter-spacing: normal; } .lp2 * { text-transform: none; letter-spacing: normal; } .lp2 a { color: inherit; text-decoration: none; } .lp2 .ic { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .lp2 .btn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--raise); color: var(--t1); font-weight: 600; font-size: 11.5px; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s; } .lp2 .btn:hover { background: #24262C; border-color: rgba(255,255,255,.10); } .lp2 .btn-w { background: #2A2C33; color: #FFFFFF !important; border-color: rgba(255,255,255,.10); } .lp2 .btn-w:hover { background: #33363E; } .lp2 .ib { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 7px; color: var(--t2); border: 1px solid var(--line-2); background: transparent; cursor: pointer; } .lp2 .glass { background: var(--glass); border: 1px solid var(--line); border-radius: 10px; -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .lp2 .chip { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 10.5px; font-weight: 600; color: var(--t2); } .lp2 .conc { color: var(--conc) !important; } .lp2 .form { color: var(--form) !important; } .lp2 .rv { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d, 0) * 70ms); } .lp2 .rv.in { opacity: 1; transform: none; } .lp2 table { width: 100%; border-collapse: collapse; font-size: 11.5px; } .lp2 th { text-align: left; padding: 5px 8px; font-size: 10.5px; font-weight: 700; color: var(--t3); border-bottom: 1px solid var(--line); background: #15161A; white-space: nowrap; } .lp2 td { padding: 3px 8px; height: 24px; border-bottom: 1px solid rgba(255,255,255,.10); color: var(--t2); white-space: nowrap; } .lp2 td b { color: var(--t1); } .lp2 .n { text-align: right; } .lp2 .tw { overflow: auto; } .lp2 .lp-mnav { display: none; } .lp2 .lp-mnav.open { display: flex; flex-direction: column; gap: 2px; padding: 8px 20px 14px; border-bottom: 1px solid var(--line); background: rgba(13,14,17,.96); } .lp2 .lp-mnav a { padding: 8px 0; color: var(--t1); font-weight: 600; font-size: 13px; } @media (prefers-reduced-motion: reduce) { .lp2 .rv { opacity: 1; transform: none; transition: none; } .lp2 .orb, .lp2 .ln-sweep { animation: none !important; } } @media (max-width: 760px) { .lp2 .hide-m { display: none !important; } .lp2 .ib.lp-menu { display: inline-grid !important; } } /* ================================================================== 1. LANDING PAGE ================================================================== */ .lp2 .lp-bg { position: absolute; inset: 0 0 auto 0; height: 900px; overflow: hidden; pointer-events: none; z-index: 0; } .lp2 .orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .5; animation: lp2drift 24s ease-in-out infinite alternate; } .lp2 .orb.a { width: 700px; height: 380px; top: -200px; left: 50%; margin-left: -350px; background: rgba(120,130,160,.20); } .lp2 .orb.b { width: 420px; height: 300px; top: 180px; right: -120px; background: rgba(29,161,255,.08); animation-duration: 32s; } .lp2 .ln-sweep { position: absolute; top: -10%; left: 18%; width: 1px; height: 120%; background: linear-gradient(transparent, rgba(255,255,255,.18), transparent); transform: rotate(22deg); animation: lp2sweep 10s ease-in-out infinite; } @keyframes lp2drift { to { translate: 50px 30px; } } @keyframes lp2sweep { 0%, 100% { opacity: 0; translate: -60px 0; } 50% { opacity: 1; translate: 60px 0; } } .lp2 .lp { position: relative; } .lp2 .lp-nav { position: sticky; top: 0; z-index: 40; background: rgba(13,14,17,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--glass-line); } .lp2 .lp-w { max-width: 1120px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; } .lp2 .lp-nav .lp-w { display: flex; align-items: center; gap: 22px; height: 56px; } .lp2 .lp-logo img { height: 36px; width: auto; display: block; } .lp2 .lp-links { display: flex; gap: 20px; flex: 1; } .lp2 .lp-links a { color: var(--t2); font-weight: 600; font-size: 12.5px; transition: color .2s; } .lp2 .lp-links a:hover { color: var(--t1); } .lp2 .lp-cta { display: flex; gap: 10px; align-items: center; } .lp2 .ib.lp-menu { display: none; } .lp2 .lp-hero { padding: 84px 0 30px; } .lp2 .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--glass); color: var(--t2); font-weight: 600; font-size: 11.5px; } .lp2 .eyebrow b { color: var(--t1); } .lp2 .lp-hero h1 { font-size: 34px; line-height: 1.15; font-weight: 700; color: var(--t1); letter-spacing: -0.02em; margin: 18px 0 12px; max-width: 760px; } .lp2 .lp-hero h1 span { color: var(--t2); } .lp2 .lp-hero p { font-size: 14px; color: var(--t2); max-width: 640px; margin: 0 0 22px; } .lp2 .lp-btns { display: flex; gap: 10px; flex-wrap: wrap; } .lp2 .lp-btns .btn { height: 34px; padding: 0 16px; font-size: 12.5px; } .lp2 .lp-shot { margin-top: 48px; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); } .lp2 .lp-sec { padding: 80px 0 0; } .lp2 .lp-sec h2 { font-size: 22px; line-height: 1.25; color: var(--t1); font-weight: 700; letter-spacing: -0.015em; margin: 10px 0 8px; } .lp2 .lp-sec .lead { color: var(--t2); font-size: 13px; max-width: 640px; margin: 0 0 24px; } .lp2 .kicker { color: var(--t3); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .lp2 .cards { display: grid; gap: 12px; } .lp2 .c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lp2 .c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp2 .card { padding: 16px; transition: border-color .25s, transform .25s; } .lp2 .card:hover { border-color: rgba(255,255,255,.10); transform: translateY(-2px); } .lp2 .card h3 { margin: 10px 0 6px; font-size: 13.5px; color: var(--t1); font-weight: 700; } .lp2 .card p { margin: 0; color: var(--t2); font-size: 12px; } .lp2 .card ul { margin: 10px 0 0; padding: 0; list-style: none; } .lp2 .card li { display: flex; gap: 8px; padding: 3px 0; color: var(--t2); font-size: 12px; } .lp2 .card li::before { content: "โ€”"; color: var(--t3); } .lp2 .card .ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--raise); color: var(--t1); } .lp2 .flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--glass); } .lp2 .flow div { padding: 14px 12px; border-right: 1px solid var(--line); } .lp2 .flow div:last-child { border-right: 0; } .lp2 .flow b { display: block; color: var(--t3); font-size: 10.5px; letter-spacing: .06em; } .lp2 .flow h4 { margin: 4px 0 2px; color: var(--t1); font-size: 12.5px; } .lp2 .flow span { color: var(--t2); font-size: 11.5px; } .lp2 .rule { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .lp2 .tl { position: relative; height: 92px; margin: 14px 4px 4px; } .lp2 .tl .axis { position: absolute; left: 0; right: 0; top: 46px; height: 1px; background: var(--line-2); } .lp2 .tl .pt { position: absolute; top: 40px; width: 12px; height: 12px; border-radius: 50%; margin-left: -6px; border: 2px solid var(--t2); background: var(--bg); } .lp2 .tl .pt.hot { border-color: var(--conc); box-shadow: 0 0 0 4px rgba(29,161,255,.15); } .lp2 .tl .pt.esc { border-color: var(--form); box-shadow: 0 0 0 4px rgba(235,87,87,.15); } .lp2 .tl .lb { position: absolute; transform: translateX(-50%); font-size: 10.5px; color: var(--t2); white-space: nowrap; text-align: center; } .lp2 .tl .lb.up { top: 0; } .tl .lb.dn { top: 60px; } .lp2 .tl .span { position: absolute; top: 44px; height: 5px; border-radius: 3px; } .lp2 .founder { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; padding: 20px; } .lp2 .founder img { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; filter: grayscale(1) contrast(1.05); border: 1px solid var(--line-2); } .lp2 .founder h3 { margin: 0; font-size: 15px; color: var(--t1); } .lp2 .founder .role { color: var(--t3); font-weight: 600; font-size: 11.5px; margin: 2px 0 10px; } .lp2 .founder p { margin: 0 0 8px; color: var(--t2); font-size: 12.5px; } .lp2 .lp-final { text-align: center; padding: 90px 0 70px; } .lp2 .lp-final h2 { font-size: 24px; color: var(--t1); margin: 0 0 14px; } .lp2 .lp-foot { border-top: 1px solid var(--line); padding: 28px 0 90px; font-size: 12px; } .lp2 .lp-foot .lp-w { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 20px; } .lp2 .lp-foot b { display: block; color: var(--t1); margin-bottom: 6px; } .lp2 .lp-foot a { display: block; color: var(--t2); margin: 3px 0; } .lp2 .lp-foot p { color: var(--t3); margin: 8px 0 0; } @media (max-width: 1000px) { .lp2 .c4 { grid-template-columns: repeat(2, 1fr); } .lp2 .flow { grid-template-columns: repeat(3, 1fr); } .lp2 .flow div:nth-child(3n) { border-right: 0; } .lp2 .flow div:nth-child(-n+3) { border-bottom: 1px solid var(--line); } .lp2 .rule { grid-template-columns: 1fr; } } @media (max-width: 760px) { .lp2 .lp-links, .lp2 .lp-cta .hide-m { display: none; } .lp2 .lp-hero { padding-top: 48px; } .lp2 .lp-hero h1 { font-size: 26px; } .lp2 .lp-hero p { font-size: 13px; } .lp2 .c4, .lp2 .c2 { grid-template-columns: 1fr; } .lp2 .flow { grid-template-columns: 1fr 1fr; } .lp2 .flow div { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line); } .lp2 .flow div:nth-child(2n) { border-right: 0 !important; } .lp2 .founder { grid-template-columns: 72px 1fr; padding: 14px; } .lp2 .founder img { width: 72px; height: 72px; } .lp2 .lp-foot .lp-w { grid-template-columns: 1fr 1fr; } } /* delete / remove buttons: solid red with white text */ html body.bd-dark :where(button, a, input[type="submit"]):is([class*="bg-rose-5"], [class*="bg-rose-6"], [class*="bg-rose-7"], [class*="bg-red-5"], [class*="bg-red-6"], [class*="bg-red-7"]), html body.bd-dark .bd-main :where(button, a, input[type="submit"]):is([class*="bg-rose-5"], [class*="bg-rose-6"], [class*="bg-rose-7"], [class*="bg-red-5"], [class*="bg-red-6"], [class*="bg-red-7"]) { background: #B23C3C !important; color: #FFFFFF !important; border-color: transparent !important; } html body.bd-dark :where(button, a):is([class*="bg-rose-5"], [class*="bg-rose-6"], [class*="bg-red-6"]) * { color: #FFFFFF !important; } /* ---------- scrolling: only the page (html) scrolls; the body never becomes its own scroll box ---------- */ html:has(body.bd-dark) { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; scroll-behavior: auto !important; overscroll-behavior-y: none; } html body.bd-dark { overflow: visible !important; height: auto !important; overscroll-behavior: auto !important; } html body.bd-dark .wrapper, html body.bd-dark .wrapper.bd-app { overflow: visible !important; } html body.bd-dark .bd-side-scroll { overscroll-behavior: auto; } /* ---------- requests of 16 Oct ---------- */ /* project chat: the button sits at the end of the project menu (never over a table); no attachments */ html body.bd-dark .project-nav .bd-chat-fab { position: static !important; margin-left: auto; height: 28px; padding: 0 12px; box-shadow: none; transform: none !important; align-self: center; } html body.bd-dark .bd-chat { top: 120px; bottom: auto; height: min(560px, calc(100vh - 140px)); } html body.bd-dark .bd-chat-f .att, html body.bd-dark .bd-chat-files { display: none !important; } @media (max-width: 640px) { html body.bd-dark .bd-chat { top: 70px; left: 10px; right: 10px; height: calc(100vh - 90px); } } /* icons inside buttons always follow the button text colour */ html body.bd-dark .bd-main :where(button, a, label)[class*="bg-"] :is(i, svg, svg *) { color: inherit !important; stroke: currentColor; } html body.bd-dark :where(button, a)[class*="bg-indigo-"] *, html body.bd-dark :where(button, a)[class*="bg-emerald-"] *, html body.bd-dark :where(button, a)[class*="bg-amber-"] *, html body.bd-dark :where(button, a)[class*="bg-blue-"] * { color: inherit !important; } /* ALL CAPITALS everywhere, except e-mail addresses (and passwords) */ /* (all-capitals removed on request: normal letters everywhere) */ html body.bd-dark :is(input[type="email"], input[type="password"], .bd-email, .bd-email *, a[href^="mailto:"]) { text-transform: none !important; } html body.bd-dark .bd-mode { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; font: inherit; } /* ===================================================================== WHITE MODE (switch in the side menu): the same layout in white ===================================================================== */ html.bd-white, html.bd-white:has(body.bd-dark) { background: #F4F5F7 !important; color-scheme: light; } html.bd-white body.bd-dark { --k-bg: #F4F5F7; --k-solid: #FFFFFF; --k-solid-2: #F7F8FA; --k-line: #E2E4E9; --k-line-2: #D3D6DC; --k-panel: rgba(255,255,255,.85); --k-panel-2: rgba(0,0,0,.03); --k-raise: rgba(0,0,0,.045); --k-raise-2: rgba(0,0,0,.07); --k-t1: #111318; --k-t2: #2F333B; --k-t3: #5F646D; --k-t4: #7A7F88; --k-acc: #111318; --k-acc-2: #111318; --k-acc-soft: rgba(0,0,0,.06); background: #F4F5F7 !important; color: #2F333B !important; color-scheme: light; } html.bd-white body.bd-dark * { scrollbar-color: #C9CCD2 transparent; } html.bd-white body.bd-dark ::-webkit-scrollbar-thumb, html.bd-white body.bd-dark ::-webkit-scrollbar-thumb:hover { background: #C9CCD2; border: 2px solid transparent; background-clip: padding-box; } html.bd-white body.bd-dark ::selection { background: rgba(0,0,0,.12); } /* menu + panel */ html.bd-white body.bd-dark .bd-side { background: #F4F5F7 !important; } html.bd-white body.bd-dark .bd-mtop { background: rgba(244,245,247,.9) !important; border-color: #E2E4E9 !important; } html.bd-white body.bd-dark .bd-item { color: #111318 !important; } html.bd-white body.bd-dark .bd-item i { color: #5F646D !important; } html.bd-white body.bd-dark .bd-item:hover { background: rgba(0,0,0,.045) !important; } html.bd-white body.bd-dark .bd-item.on { background: rgba(0,0,0,.07) !important; } html.bd-white body.bd-dark .bd-item.on i { color: #111318 !important; } html.bd-white body.bd-dark .bd-mgrp, html.bd-white body.bd-dark .bd-side-sub, html.bd-white body.bd-dark .bd-me small { color: #7A7F88 !important; } html.bd-white body.bd-dark .bd-brand { color: #111318 !important; } html.bd-white body.bd-dark .bd-side-foot { border-color: #E2E4E9 !important; } html.bd-white body.bd-dark .bd-burger { background: #FFFFFF !important; color: #111318 !important; border-color: #D3D6DC !important; } html.bd-white body.bd-dark .bd-av { background: #5F646D !important; color: #fff !important; } html.bd-white body.bd-dark .main-content.bd-main { background: #FFFFFF !important; border-color: #E2E4E9 !important; } /* surfaces */ html.bd-white body.bd-dark .bd-main :is(.bg-white, .kpi-card, .link-card, .dash-header) { background-color: #FFFFFF !important; border-color: #E2E4E9 !important; box-shadow: 0 1px 2px rgba(16,24,40,.04) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } html.bd-white body.bd-dark .bd-main [class*="bg-slate-50"], html.bd-white body.bd-dark .bd-main [class*="bg-gray-50"] { background-color: #F7F8FA !important; } html.bd-white body.bd-dark .bd-main :is([class*="bg-slate-100"], [class*="bg-slate-200"], [class*="bg-gray-100"]) { background-color: #F1F2F4 !important; } html.bd-white body.bd-dark .bd-main :is([class*="bg-indigo-50"], [class*="bg-blue-50"], [class*="bg-emerald-50"], [class*="bg-amber-50"], [class*="bg-rose-50"], [class*="bg-violet-50"]) { background-color: #F4F5F7 !important; } html.bd-white body.bd-dark .bd-main [class*="border-"] { border-color: #E2E4E9 !important; } /* text */ html.bd-white body.bd-dark :is(h1, h2, h3, h4) { color: #111318 !important; } html.bd-white body.bd-dark .bd-main :is(.text-slate-900, .text-slate-800, .text-gray-900, .text-gray-800, [class*="text-indigo-"], [class*="text-blue-"], [class*="text-violet-"], [class*="text-sky-"], [class*="text-teal-"], [class*="text-cyan-"]) { color: #111318 !important; } html.bd-white body.bd-dark .bd-main :is(.text-slate-700, .text-slate-600, .text-gray-700, .text-gray-600, [class*="text-emerald-"], [class*="text-green-"], [class*="text-amber-"], [class*="text-yellow-"], [class*="text-orange-"]) { color: #2F333B !important; } html.bd-white body.bd-dark .bd-main :is(.text-slate-500, .text-slate-400, .text-gray-500, .text-gray-400) { color: #5F646D !important; } html.bd-white body.bd-dark .bd-main :is([class*="text-rose-"], [class*="text-red-"], [class*="text-pink-"]) { color: #C0392B !important; } html.bd-white body.bd-dark .text-white:not(:where(button, a, span)[class*="bg-"] *):not(:where(button, a, span)[class*="bg-"]) { color: #111318 !important; } html.bd-white body.bd-dark .bd-muted { color: #5F646D !important; } /* tables */ html.bd-white body.bd-dark .bd-main table thead :is(th, td), html.bd-white body.bd-dark table thead :is(th, td) { background: #F3F4F6 !important; color: #5F646D !important; border-color: #E2E4E9 !important; } html.bd-white body.bd-dark .bd-main table td { border-color: #ECEEF1 !important; color: #2F333B; } html.bd-white body.bd-dark .bd-main table tbody tr:hover > td, html.bd-white body.bd-dark table tbody tr:hover > :is(td, th) { background-color: rgba(0,0,0,.03) !important; } html.bd-white body.bd-dark table :is(td, th)[class*="sticky"], html.bd-white body.bd-dark table :is(td, th)[class*="freeze"] { background-color: #FFFFFF !important; } html.bd-white body.bd-dark .bd-main table :is(td, th).bd-conc, html.bd-white body.bd-dark .bd-main table .bd-conc :is(input, b, span, a) { color: #8A6D00 !important; -webkit-text-fill-color: #8A6D00 !important; } html.bd-white body.bd-dark .bd-main table :is(td, th).bd-form, html.bd-white body.bd-dark .bd-main table .bd-form :is(input, b, span, a) { color: #D23C3C !important; -webkit-text-fill-color: #D23C3C !important; } html.bd-white body.bd-dark .bd-main table :is(td, th):not(.bd-conc):not(.bd-form) :is(input.out-vol, input.out-form) { color: #111318 !important; -webkit-text-fill-color: #111318 !important; } html.bd-white body.bd-dark .bd-main table :is(td, th):not(.bd-form):not(.bd-conc):is([class*="text-rose-"], [class*="text-red-"], [class*="text-pink-"]) { color: #2F333B !important; } /* inputs */ html.bd-white body.bd-dark :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]), select, textarea), html.bd-white body.bd-dark .main-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]), select, textarea) { background-color: #FFFFFF !important; color: #111318 !important; -webkit-text-fill-color: #111318 !important; border-color: #D3D6DC !important; } html.bd-white body.bd-dark .main-content td :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select) { background-color: transparent !important; border-color: transparent !important; } html.bd-white body.bd-dark select option { background: #FFFFFF !important; color: #111318 !important; } html.bd-white body.bd-dark input::placeholder, html.bd-white body.bd-dark textarea::placeholder { color: #9AA0A8 !important; -webkit-text-fill-color: #9AA0A8 !important; } html.bd-white body.bd-dark input[type="checkbox"], html.bd-white body.bd-dark input[type="radio"] { accent-color: #111318; } /* buttons: dark primary on white */ html.bd-white body.bd-dark :where(button, a, input[type="submit"], input[type="button"], label):is([class*="bg-indigo-"], [class*="bg-blue-"], [class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-amber-"], [class*="bg-orange-"], [class*="bg-violet-"], [class*="bg-teal-"]):not([class~="bg-indigo-50"]):not([class~="bg-blue-50"]):not([class~="bg-emerald-50"]):not([class~="bg-amber-50"]):not([class~="bg-indigo-100"]), html.bd-white body.bd-dark .bd-main :where(button, a, input[type="submit"], input[type="button"], label):is([class*="bg-indigo-"], [class*="bg-blue-"], [class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-amber-"], [class*="bg-orange-"], [class*="bg-violet-"], [class*="bg-teal-"]):not([class~="bg-indigo-50"]):not([class~="bg-blue-50"]):not([class~="bg-emerald-50"]):not([class~="bg-amber-50"]):not([class~="bg-indigo-100"]), html.bd-white body.bd-dark .bd-main :where(button, a, input[type="submit"], input[type="button"], label):is([class*="bg-indigo-"], [class*="bg-blue-"], [class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-amber-"], [class*="bg-orange-"], [class*="bg-violet-"], [class*="bg-teal-"]):not([class~="bg-indigo-50"]):not([class~="bg-blue-50"]):not([class~="bg-emerald-50"]):not([class~="bg-amber-50"]):not([class~="bg-indigo-100"]):hover:not(:disabled) { background: #111318 !important; color: #FFFFFF !important; border-color: #111318 !important; } html.bd-white body.bd-dark :where(button, a)[class*="bg-slate-"], html.bd-white body.bd-dark :where(button, a)[class*="bg-gray-"] { background: #FFFFFF !important; color: #111318 !important; border: 1px solid #D3D6DC !important; } html.bd-white body.bd-dark :where(button, a)[class*="bg-slate-"]:hover, html.bd-white body.bd-dark :where(button, a)[class*="bg-gray-"]:hover { background: #F1F2F4 !important; } html.bd-white body.bd-dark .btn-edit-module, html.bd-white body.bd-dark .btn-action-edit { background: #FFFFFF !important; color: #111318 !important; border-color: #D3D6DC !important; } html.bd-white body.bd-dark .btn-edit-module:hover, html.bd-white body.bd-dark .btn-action-edit:hover { background: #F1F2F4 !important; } html.bd-white body.bd-dark .btn-scroll-top, html.bd-white body.bd-dark .btn-scroll-top:hover { background: #FFFFFF !important; color: #111318 !important; border-color: #D3D6DC !important; box-shadow: 0 6px 18px rgba(16,24,40,.12) !important; } html.bd-white body.bd-dark .bd-main span[class*="rounded"]:is([class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-indigo-"], [class*="bg-blue-"], [class*="bg-amber-"], [class*="bg-violet-"], [class*="bg-sky-"]) { color: #2F333B !important; border-color: #D3D6DC !important; } html.bd-white body.bd-dark :where(button, a, label, summary, [role="button"], [role="tab"]):hover { color: #111318 !important; } html.bd-white body.bd-dark :is(div, li, td, tr, label, span, a, button)[class*="hover:bg-"]:hover:not([class*="bg-indigo-6"]):not([class*="bg-emerald-6"]):not([class*="bg-rose-"]):not([class*="bg-red-"]) { background-color: rgba(0,0,0,.04) !important; } /* project menu, drop-downs */ html.bd-white body.bd-dark .project-nav { border-color: #E2E4E9 !important; } html.bd-white body.bd-dark .project-nav .pn-link { color: #5F646D !important; } html.bd-white body.bd-dark .project-nav .pn-link:hover, html.bd-white body.bd-dark .project-nav .pn-group:hover > .pn-link, html.bd-white body.bd-dark .project-nav .pn-group.open > .pn-link { background: rgba(0,0,0,.045) !important; color: #111318 !important; } html.bd-white body.bd-dark .project-nav .pn-link.is-active { background: #FFFFFF !important; color: #111318 !important; box-shadow: inset 0 0 0 1px #D3D6DC !important; } html.bd-white body.bd-dark .project-nav .pn-menu > ul { background: #FFFFFF !important; border-color: #E2E4E9 !important; box-shadow: 0 12px 30px rgba(16,24,40,.12) !important; } html.bd-white body.bd-dark .project-nav .pn-item { color: #2F333B !important; } html.bd-white body.bd-dark .project-nav .pn-item:hover, html.bd-white body.bd-dark .project-nav .pn-item.is-active { background: #F1F2F4 !important; color: #111318 !important; } /* pop-ups, alerts, notifications, chat */ html.bd-white body.bd-dark .fixed.inset-0 > :is(div, form) { background: #FFFFFF !important; color: #2F333B !important; border-color: #E2E4E9 !important; } html.bd-white body.bd-dark :is(.bd-alerts, .bd-notes) { background: #FFFFFF !important; border-color: #E2E4E9 !important; } html.bd-white body.bd-dark :is(.bd-alerts-h, .bd-alert, .bd-note) { border-color: #ECEEF1 !important; color: #2F333B !important; } html.bd-white body.bd-dark :is(.bd-alerts-h h3, .bd-alert b, .bd-note b) { color: #111318 !important; } html.bd-white body.bd-dark a.bd-alert:hover, html.bd-white body.bd-dark .bd-note.unread { background: rgba(0,0,0,.03) !important; } html.bd-white body.bd-dark .bd-tag-7 { color: #B85C12; } html.bd-white body.bd-dark .bd-tag-15 { color: #C0392B; } html.bd-white body.bd-dark .bd-tag-ok { color: #2F333B; border-color: #D3D6DC; } html.bd-white body.bd-dark :is(.bd-chat, .bd-chat-fab) { background: #FFFFFF !important; color: #111318 !important; border-color: #D3D6DC !important; } html.bd-white body.bd-dark .bd-chat :is(.bd-chat-h, .bd-chat-f) { border-color: #E2E4E9 !important; background: #FFFFFF !important; } html.bd-white body.bd-dark .bd-chat * { color: inherit; } html.bd-white body.bd-dark .bd-chat-fab b { background: #111318 !important; color: #fff !important; } /* ---------- the page's own scroll bar (the outer one, on the right edge) in the theme colours ---------- */ html:has(body.bd-dark) { scrollbar-width: thin; scrollbar-color: #2C2F36 #0D0E11; } html:has(body.bd-dark)::-webkit-scrollbar { width: 10px; height: 10px; background: #0D0E11; } html:has(body.bd-dark)::-webkit-scrollbar-track { background: #0D0E11; } html:has(body.bd-dark)::-webkit-scrollbar-thumb { background: #2C2F36; border-radius: 10px; border: 2px solid #0D0E11; } html:has(body.bd-dark)::-webkit-scrollbar-thumb:hover { background: #3A3D45; } html:has(body.bd-dark)::-webkit-scrollbar-corner { background: #0D0E11; } /* white mode: light track, grey thumb - for the page and for every table / box inside it */ html.bd-white:has(body.bd-dark) { scrollbar-color: #C4C8CF #F4F5F7; } html.bd-white:has(body.bd-dark)::-webkit-scrollbar, html.bd-white:has(body.bd-dark)::-webkit-scrollbar-track, html.bd-white:has(body.bd-dark)::-webkit-scrollbar-corner { background: #F4F5F7; } html.bd-white:has(body.bd-dark)::-webkit-scrollbar-thumb { background: #C4C8CF; border-color: #F4F5F7; } html.bd-white:has(body.bd-dark)::-webkit-scrollbar-thumb:hover { background: #A9AEB7; } html.bd-white body.bd-dark *, html.bd-white body.bd-dark *::before { scrollbar-color: #C4C8CF transparent !important; } html.bd-white body.bd-dark *::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; } html.bd-white body.bd-dark *::-webkit-scrollbar-track { background: transparent; } html.bd-white body.bd-dark *::-webkit-scrollbar-thumb { background: #C4C8CF !important; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } html.bd-white body.bd-dark *::-webkit-scrollbar-thumb:hover { background: #A9AEB7 !important; border: 2px solid transparent; background-clip: padding-box; } html.bd-white body.bd-dark *::-webkit-scrollbar-corner { background: transparent; } /* ---------- home page: colourful icons, dashboard collage, companies, product tour ---------- */ .cico { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; flex: none; vertical-align: -5px; margin-right: 6px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); } .cico svg { width: 12px; height: 12px; } .lp2 .kicker .cico { width: 18px; height: 18px; } .lp2 .card h3 .cico { margin-right: 4px; } .lp2 .card > .cico { width: 30px; height: 30px; border-radius: 8px; } .lp2 .card > .cico svg { width: 16px; height: 16px; } .lp2 .flow b .cico { width: 18px; height: 18px; vertical-align: -5px; } /* dashboard collage in the hero */ .lp2 .dash { display: flex; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.6); font-size: 10.5px; text-align: left; } .lp2 .dash-side { width: 190px; flex: none; padding: 10px 8px; background: rgba(10,11,13,.7); border-right: 1px solid var(--line); } .lp2 .ds-b img { height: 20px; margin: 2px 6px 10px; display: block; } .lp2 .ds-i { display: flex; align-items: center; gap: 2px; height: 26px; padding: 0 6px; border-radius: 6px; color: #fff; font-weight: 700; font-size: 10px; } .lp2 .ds-i .cico { width: 17px; height: 17px; } .lp2 .ds-i .cico svg { width: 10px; height: 10px; } .lp2 .ds-i.on { background: #1C1D22; } .lp2 .ds-i em { margin-left: auto; font-style: normal; color: var(--t2); } .lp2 .ds-g { color: var(--t3); font-weight: 700; font-size: 9.5px; padding: 10px 6px 3px; } .lp2 .dash-main { flex: 1; min-width: 0; padding: 12px; background: rgba(18,19,22,.85); } .lp2 .dm-top { display: flex; justify-content: space-between; color: var(--t2); margin-bottom: 10px; } .lp2 .dm-top b { color: #fff; } .lp2 .dm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; } .lp2 .dm-kpis > div { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: rgba(255,255,255,.02); } .lp2 .dm-kpis span { display: block; color: var(--t3); font-weight: 700; font-size: 9px; margin-top: 4px; } .lp2 .dm-kpis b { color: #fff; font-size: 14px; } .lp2 .dm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lp2 .dm-card { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: rgba(255,255,255,.02); } .lp2 .dm-wide { grid-column: 1 / -1; } .lp2 .dm-h { color: #fff; font-weight: 700; font-size: 10px; margin-bottom: 6px; display: flex; align-items: center; } .lp2 .dm-al { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--t2); font-weight: 600; font-size: 10px; border-bottom: 1px solid rgba(255,255,255,.10); } .lp2 .dm-al:last-child { border-bottom: 0; } .lp2 .t7, .lp2 .t15 { font-weight: 700; font-size: 9px; border-radius: 4px; padding: 0 5px; } .lp2 .t7 { color: #1DA1FF; border: 1px solid rgba(29,161,255,.35); background: rgba(29,161,255,.1); } .lp2 .t15 { color: #EB5757; border: 1px solid rgba(235,87,87,.35); background: rgba(235,87,87,.1); } .lp2 .dm-bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; padding: 4px 0; } .lp2 .dm-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #2EC4B6, rgba(46,196,182,.25)); animation: lpgrow 1.2s cubic-bezier(.2,.8,.2,1) both; transform-origin: bottom; } .lp2 .dm-bars i:nth-child(odd) { background: linear-gradient(180deg, #8C95EC, rgba(140,149,236,.25)); } @keyframes lpgrow { from { transform: scaleY(0); } } .lp2 .dm-leg { display: flex; gap: 12px; color: var(--t2); font-size: 9.5px; font-weight: 700; } .lp2 .dm-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; } .lp2 .dm-card table td, .lp2 .dm-card table th { height: 20px; font-size: 10px; } /* companies already on bdcpm */ .lp2 .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 14px; } .lp2 .stats > div { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--glass); } .lp2 .stats b { display: block; color: #fff; font-size: 24px; font-weight: 700; margin-top: 6px; letter-spacing: -0.01em; } .lp2 .stats span:not(.cico) { color: var(--t3); font-weight: 700; font-size: 10.5px; } .lp2 .logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .lp2 .logo-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--glass); transition: border-color .2s, transform .2s; } .lp2 .logo-card:hover { border-color: rgba(255,255,255,.10); transform: translateY(-2px); } .lp2 .logo-card img { height: 30px; max-width: 80px; object-fit: contain; flex: none; } .lp2 .logo-card .ini { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #1C1D22; color: #fff; font-weight: 700; flex: none; } .lp2 .logo-card b { display: block; color: #fff; font-size: 12px; } .lp2 .logo-card small { color: var(--t3); font-weight: 700; font-size: 9.5px; } .lp2 .marquee { margin-top: 14px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .lp2 .mq-in { display: flex; gap: 22px; width: max-content; animation: lpmq 40s linear infinite; } .lp2 .mq-in span { display: inline-flex; align-items: center; color: var(--t2); font-weight: 700; font-size: 11px; white-space: nowrap; } @keyframes lpmq { to { transform: translateX(-50%); } } /* product tour (bento) */ .lp2 .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 18px; } .lp2 .bx { padding: 14px; border-radius: 12px; transition: border-color .25s, transform .25s; } .lp2 .bx:hover { border-color: rgba(255,255,255,.10); transform: translateY(-2px); } .lp2 .bx-a, .lp2 .bx-b, .lp2 .bx-c { grid-column: span 2; } .lp2 .bx-d, .lp2 .bx-e, .lp2 .bx-f { grid-column: span 2; } .lp2 .bx-h { display: flex; align-items: center; color: #fff; font-weight: 700; font-size: 11.5px; } .lp2 .bx p { color: var(--t2); font-size: 12px; margin: 6px 0 10px; } .lp2 .mini-t > div { display: grid; grid-template-columns: 1fr 50px 60px; gap: 6px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.10); font-size: 10.5px; font-weight: 700; color: var(--t2); } .lp2 .mini-t b { text-align: right; } .lp2 .hbar { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 8px; padding: 3px 0; font-size: 10px; font-weight: 700; color: var(--t2); } .lp2 .hbar i { height: 6px; border-radius: 4px; background: linear-gradient(90deg, #4CB782, #2EC4B6); } .lp2 .gantt > div { position: relative; display: grid; grid-template-columns: 82px 1fr; align-items: center; height: 22px; font-size: 10px; font-weight: 700; color: var(--t2); } .lp2 .gantt > div i { position: absolute; height: 8px; border-radius: 4px; background: #2A2C33; margin-left: 82px; max-width: calc(100% - 82px); } .lp2 .gantt > div i u { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #2EC4B6; } .lp2 .bub { background: #16171B; border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; margin-bottom: 6px; color: var(--t2); font-size: 10.5px; font-weight: 600; max-width: 90%; } .lp2 .bub b { display: block; color: #4EA7FC; font-size: 9.5px; } .lp2 .bub.me { margin-left: auto; background: #1F2026; color: #fff; } .lp2 .ap { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.10); font-size: 10.5px; font-weight: 700; color: var(--t2); } .lp2 .ap em { font-style: normal; font-size: 9.5px; border: 1px solid var(--line-2); border-radius: 999px; padding: 0 7px; color: var(--t2); } .lp2 .ap em.ok { color: #4CB782; border-color: rgba(76,183,130,.4); } /* about */ .lp2 .founder p b { color: #fff; } .lp2 .cv { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .lp2 .cv span { display: flex; align-items: center; color: var(--t2); font-weight: 700; font-size: 11px; } @media (max-width: 1000px) { .lp2 .bento { grid-template-columns: repeat(2, 1fr); } .lp2 .bx { grid-column: span 1 !important; } .lp2 .dash-side { display: none; } .lp2 .stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .lp2 .bento { grid-template-columns: 1fr; } .lp2 .dm-kpis { grid-template-columns: repeat(2, 1fr); } .lp2 .dm-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .lp2 .mq-in, .lp2 .dm-bars i { animation: none; } } /* ---------- left menu: a little wider, smaller text, more space on the left ---------- */ html body.bd-dark .bd-side { width: 256px !important; padding-left: 12px !important; padding-right: 10px !important; } html body.bd-dark .bd-item { font-size: 11px !important; height: 30px !important; padding: 0 10px 0 12px !important; gap: 10px !important; } html body.bd-dark .bd-mgrp { font-size: 10px !important; padding-left: 12px !important; } html body.bd-dark .bd-side-brand { padding-left: 10px !important; } html body.bd-dark .bd-side-sub { font-size: 9.5px !important; padding-left: 12px !important; } @media (min-width: 900px) { html body.bd-dark .main-content.bd-main { margin-left: 264px !important; } } @media (max-width: 899px) { html body.bd-dark .bd-side { width: min(290px, 86vw) !important; } } /* ---------- small colourful icons (menu, cards, section titles) ---------- */ html body.bd-dark .bd-item > i { width: 20px !important; height: 20px; border-radius: 6px; display: inline-grid !important; place-items: center; font-size: 10px !important; color: var(--ic, #C9CDD3) !important; background: color-mix(in srgb, var(--ic, #C9CDD3) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic, #C9CDD3) 28%, transparent); flex: none; } html body.bd-dark .bd-item > i:is(.fa-th-large, .fa-home, .fa-tachometer-alt) { --ic: #8C95EC; } html body.bd-dark .bd-item > i:is(.fa-bell) { --ic: #1DA1FF; } html body.bd-dark .bd-item > i:is(.fa-tasks, .fa-check-double, .fa-clipboard-check, .fa-check) { --ic: #4CB782; } html body.bd-dark .bd-item > i:is(.fa-file-signature, .fa-file-alt, .fa-file-invoice) { --ic: #4EA7FC; } html body.bd-dark .bd-item > i:is(.fa-user-tie, .fa-address-book) { --ic: #F2C94C; } html body.bd-dark .bd-item > i:is(.fa-hard-hat, .fa-folder-open, .fa-building, .fa-project-diagram) { --ic: #B07FE8; } html body.bd-dark .bd-item > i:is(.fa-drafting-compass, .fa-pencil-ruler) { --ic: #E86FA6; } html body.bd-dark .bd-item > i:is(.fa-images, .fa-image, .fa-chart-bar) { --ic: #2EC4B6; } html body.bd-dark .bd-item > i:is(.fa-users, .fa-user-friends) { --ic: #F2C94C; } html body.bd-dark .bd-item > i:is(.fa-chart-line, .fa-medal, .fa-award) { --ic: #4CB782; } html body.bd-dark .bd-item > i:is(.fa-bullhorn) { --ic: #1DA1FF; } html body.bd-dark .bd-item > i:is(.fa-comments, .fa-comment) { --ic: #4EA7FC; } html body.bd-dark .bd-item > i:is(.fa-file-invoice-dollar, .fa-money-bill, .fa-wallet, .fa-receipt) { --ic: #4CB782; } html body.bd-dark .bd-item > i:is(.fa-calendar-alt, .fa-calendar) { --ic: #E86FA6; } html body.bd-dark .bd-item > i:is(.fa-cog, .fa-sign-out-alt, .fa-adjust) { --ic: #C9CDD3; } html body.bd-dark .bd-item.on > i { color: var(--ic, #fff) !important; } /* KPI and link-card icons keep a colour per card */ html body.bd-dark .bd-main .kpi-card .kpi-icon, html body.bd-dark .bd-main .kpi-card [class*="bg-"][class*="text-"] { border-radius: 9px !important; } html body.bd-dark .bd-main :is(.kpi-card, .link-card) :is(.text-indigo-600, .text-violet-600) { color: #8C95EC !important; } html body.bd-dark .bd-main :is(.kpi-card, .link-card) .text-emerald-600 { color: #4CB782 !important; } html body.bd-dark .bd-main :is(.kpi-card, .link-card) .text-sky-600 { color: #4EA7FC !important; } html body.bd-dark .bd-main :is(.kpi-card, .link-card) .text-amber-600 { color: #1DA1FF !important; } html body.bd-dark .bd-main :is(.kpi-card, .link-card) .text-rose-600 { color: #EB5757 !important; } html body.bd-dark .bd-main .kpi-card :is(.bg-indigo-50, .bg-violet-50) { background: rgba(140,149,236,.15) !important; } html body.bd-dark .bd-main .kpi-card .bg-emerald-50 { background: rgba(76,183,130,.15) !important; } html body.bd-dark .bd-main .kpi-card .bg-sky-50 { background: rgba(78,167,252,.15) !important; } html body.bd-dark .bd-main .kpi-card .bg-amber-50 { background: rgba(29,161,255,.15) !important; } html body.bd-dark .bd-main .kpi-card .bg-rose-50 { background: rgba(235,87,87,.15) !important; } html body.bd-dark .bd-main .section-title > i:first-child { color: #8C95EC !important; } html body.bd-dark .bd-main .section-title > i.fa-bell { color: #1DA1FF !important; } html body.bd-dark .bd-main .section-title > i:is(.fa-tasks, .fa-check-double) { color: #4CB782 !important; } html.bd-white body.bd-dark .bd-main :is(.kpi-card, .link-card) :is(.text-indigo-600, .text-violet-600) { color: #5E6AD2 !important; } html.bd-white body.bd-dark .bd-main :is(.kpi-card, .link-card) .text-emerald-600 { color: #23915E !important; } html.bd-white body.bd-dark .bd-main :is(.kpi-card, .link-card) .text-sky-600 { color: #1F78D1 !important; } html.bd-white body.bd-dark .bd-main :is(.kpi-card, .link-card) .text-amber-600 { color: #C26A12 !important; } html.bd-white body.bd-dark .bd-main :is(.kpi-card, .link-card) .text-rose-600 { color: #C0392B !important; } .lp2 .lp, .lp2 .lp-bg { overflow-x: clip; } .lp2 .dash, .lp2 .dash-main, .lp2 .dm-grid > *, .lp2 .dm-kpis > * { min-width: 0; } .lp2 .dm-card .tw, .lp2 .dm-card table { max-width: 100%; } .lp2 .dm-card { overflow: hidden; } @media (max-width: 640px) { .lp2 .dm-al { white-space: normal; } .lp2 .dm-card table th, .lp2 .dm-card table td { white-space: normal; } } .lp2 .gantt > div { overflow: hidden; } /* ===================================================================== 17 Oct: one button style everywhere, glass shade from one corner, calmer colours, sharper menu ===================================================================== */ /* ---- buttons: soft / outline buttons on every page = one secondary style; light-red ones = delete style ---- */ html body.bd-dark .bd-main :is(a, button, label)[class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"]:is([class~="bg-indigo-50"], [class*="bg-indigo-100"], [class~="bg-emerald-50"], [class~="bg-blue-50"], [class~="bg-sky-50"], [class~="bg-amber-50"], [class~="bg-violet-50"], [class~="bg-teal-50"], [class~="bg-slate-50"], [class*="bg-slate-100"], [class*="bg-slate-200"], [class*="bg-gray-100"], [class~="bg-white"]), html body.bd-dark .bd-main :is(a, button)[class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="border"]:not([class*=" bg-"]):not([class^="bg-"]):not([class*="rose"]):not([class*="red-"]), html body.bd-dark .bd-main :is(.btn-edit-module, .btn-action-edit, .tm-edit) { background: #1C1D22 !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 6px !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.35 !important; padding: 4px 10px !important; box-shadow: none !important; text-decoration: none !important; } html body.bd-dark .bd-main :is(a, button, label)[class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"]:is([class~="bg-indigo-50"], [class*="bg-indigo-100"], [class~="bg-emerald-50"], [class~="bg-blue-50"], [class~="bg-sky-50"], [class~="bg-amber-50"], [class~="bg-violet-50"], [class~="bg-teal-50"], [class~="bg-slate-50"], [class*="bg-slate-100"], [class*="bg-slate-200"], [class*="bg-gray-100"], [class~="bg-white"]):hover, html body.bd-dark .bd-main :is(a, button)[class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="border"]:not([class*=" bg-"]):not([class^="bg-"]):not([class*="rose"]):not([class*="red-"]):hover, html body.bd-dark .bd-main :is(.btn-edit-module, .btn-action-edit, .tm-edit):hover { background: #26282E !important; color: #FFFFFF !important; border-color: rgba(255,255,255,.10) !important; } html body.bd-dark .bd-main :is(a, button)[class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"]:is([class~="bg-rose-50"], [class~="bg-red-50"], [class*="bg-rose-100"]), html body.bd-dark .bd-main :is(a, button)[class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="border"]:is([class*="rose"], [class*="red-"]):not([class*="bg-rose-5"]):not([class*="bg-rose-6"]):not([class*="bg-red-6"]) { background: #1C1D22 !important; color: #EB5757 !important; border: 1px solid rgba(235,87,87,.4) !important; border-radius: 6px !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.35 !important; padding: 4px 10px !important; box-shadow: none !important; } html body.bd-dark .bd-main :is(a, button)[class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"]:is([class~="bg-rose-50"], [class~="bg-red-50"], [class*="bg-rose-100"]):hover, html body.bd-dark .bd-main :is(a, button)[class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="border"]:is([class*="rose"], [class*="red-"]):not([class*="bg-rose-5"]):not([class*="bg-rose-6"]):not([class*="bg-red-6"]):hover { background: #B23C3C !important; color: #FFFFFF !important; border-color: #B23C3C !important; } html body.bd-dark .bd-main :is(a, button)[class*="px-"] :is(i, svg) { color: inherit !important; } /* solid colour buttons (primary) and delete buttons get the same size and corners */ html body.bd-dark .bd-main :is(a, button, input[type="submit"])[class*="px-"]:is([class*="bg-indigo-6"], [class*="bg-emerald-6"], [class*="bg-blue-6"], [class*="bg-amber-5"], [class*="bg-amber-6"], [class*="bg-slate-5"], [class*="bg-slate-6"], [class*="bg-slate-7"], [class*="bg-slate-8"], [class*="bg-slate-9"], [class*="bg-rose-5"], [class*="bg-rose-6"], [class*="bg-red-6"]) { border-radius: 6px !important; font-weight: 700 !important; } /* ---- white mode buttons ---- */ html.bd-white body.bd-dark .bd-main :is(a, button, label)[class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"]:is([class~="bg-indigo-50"], [class*="bg-indigo-100"], [class~="bg-emerald-50"], [class~="bg-blue-50"], [class~="bg-sky-50"], [class~="bg-amber-50"], [class~="bg-violet-50"], [class~="bg-teal-50"], [class~="bg-slate-50"], [class*="bg-slate-100"], [class*="bg-slate-200"], [class*="bg-gray-100"], [class~="bg-white"]), html.bd-white body.bd-dark .bd-main :is(a, button)[class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="border"]:not([class*=" bg-"]):not([class^="bg-"]):not([class*="rose"]):not([class*="red-"]), html.bd-white body.bd-dark .bd-main :is(.btn-edit-module, .btn-action-edit, .tm-edit) { background: #FFFFFF !important; color: #111318 !important; border-color: #D3D6DC !important; } html.bd-white body.bd-dark .bd-main :is(a, button, label)[class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"]:is([class~="bg-indigo-50"], [class*="bg-indigo-100"], [class~="bg-emerald-50"], [class~="bg-blue-50"], [class~="bg-sky-50"], [class~="bg-amber-50"], [class~="bg-violet-50"], [class~="bg-teal-50"], [class~="bg-slate-50"], [class*="bg-slate-100"], [class*="bg-slate-200"], [class*="bg-gray-100"], [class~="bg-white"]):hover, html.bd-white body.bd-dark .bd-main :is(a, button)[class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="border"]:not([class*=" bg-"]):not([class^="bg-"]):not([class*="rose"]):not([class*="red-"]):hover, html.bd-white body.bd-dark .bd-main :is(.btn-edit-module, .btn-action-edit, .tm-edit):hover { background: #F1F2F4 !important; color: #111318 !important; border-color: #C4C8CF !important; } html.bd-white body.bd-dark .bd-main :is(a, button)[class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"]:is([class~="bg-rose-50"], [class~="bg-red-50"], [class*="bg-rose-100"]), html.bd-white body.bd-dark .bd-main :is(a, button)[class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="px-"][class*="border"]:is([class*="rose"], [class*="red-"]):not([class*="bg-rose-5"]):not([class*="bg-rose-6"]):not([class*="bg-red-6"]) { background: #FFFFFF !important; color: #C0392B !important; border-color: #F0C2BC !important; } /* ---- glass: solid near-black panels with a soft shade from the top-left corner ---- */ html body.bd-dark .bd-main :is(.bg-white, .kpi-card, .link-card, .dash-header) { background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.055) 0%, rgba(255,255,255,.012) 38%, rgba(0,0,0,0) 60%), #111215 !important; } html body.bd-dark .bd-main table, html body.bd-dark .bd-main table tbody td { background-color: #0E0F12; } html body.bd-dark .bd-main table thead :is(th, td) { background: #15161A !important; } html body.bd-dark .main-content.bd-main { background: radial-gradient(90% 60% at 0% 0%, rgba(255,255,255,.03), rgba(0,0,0,0) 55%), #121316 !important; } /* white mode: white panels with a light shade from the corner and a soft shadow (no flat grey) */ html.bd-white, html.bd-white:has(body.bd-dark) { background: #F7F8FA !important; } html.bd-white body.bd-dark { background: #F7F8FA !important; } html.bd-white body.bd-dark .bd-side { background: #F7F8FA !important; } html.bd-white body.bd-dark .main-content.bd-main { background: radial-gradient(90% 60% at 0% 0%, #FFFFFF, #FBFBFC 60%) !important; border-color: #E6E8EC !important; box-shadow: 0 1px 3px rgba(16,24,40,.05) !important; } html.bd-white body.bd-dark .bd-main :is(.bg-white, .kpi-card, .link-card, .dash-header) { background: radial-gradient(130% 100% at 0% 0%, #FFFFFF 0%, #FFFFFF 45%, #F3F4F7 100%) !important; border-color: #E6E8EC !important; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.12) !important; } html.bd-white body.bd-dark .bd-main table, html.bd-white body.bd-dark .bd-main table tbody td { background-color: #FFFFFF; } /* ---- calmer colours: menu icons are just coloured symbols (no tiles) ---- */ html body.bd-dark .bd-item > i { background: transparent !important; box-shadow: none !important; width: 16px !important; height: auto !important; font-size: 11px !important; opacity: .9; } html.bd-white body.bd-dark .bd-item > i { filter: saturate(.9) brightness(.8); } /* ---- menu: a little smaller and sharper ---- */ html body.bd-dark .bd-item { font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .02em !important; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; height: 28px !important; } html body.bd-dark .bd-mgrp { font-size: 9.5px !important; letter-spacing: .06em !important; } /* ---- e-mail addresses never in capitals (stronger than the all-capitals rule) ---- */ html body.bd-dark .bd-email.bd-email.bd-email, html body.bd-dark .bd-email.bd-email.bd-email *, html body.bd-dark input[type="email"][type="email"][type="email"], html body.bd-dark a[href^="mailto:"][href^="mailto:"][href^="mailto:"] { text-transform: none !important; } /* ---- final button system (wins over page / module styles) ---- */ /* primary: solid colour buttons -> white button, dark text and icon (dark mode) / black button (white mode) */ html body.bd-dark .bd-main :is(a, button, input[type="submit"], input[type="button"], label):is([class~="bg-indigo-600"], [class~="bg-indigo-500"], [class~="bg-indigo-700"], [class~="bg-emerald-600"], [class~="bg-emerald-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-amber-500"], [class~="bg-amber-600"], [class~="bg-teal-600"], [class~="bg-violet-600"], [class~="bg-sky-600"]):is(a, button, input, label):is(a, button, input, label):is(a, button, input, label) { background: #2B2D34 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 6px !important; box-shadow: none !important; font-weight: 700 !important; } html body.bd-dark .bd-main :is(a, button, input[type="submit"], input[type="button"], label):is([class~="bg-indigo-600"], [class~="bg-indigo-500"], [class~="bg-indigo-700"], [class~="bg-emerald-600"], [class~="bg-emerald-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-amber-500"], [class~="bg-amber-600"], [class~="bg-teal-600"], [class~="bg-violet-600"], [class~="bg-sky-600"]):is(a, button, input, label):is(a, button, input, label):is(a, button, input, label):hover:not(:disabled) { background: #34363E !important; border-color: rgba(255,255,255,.10) !important; color: #FFFFFF !important; } html body.bd-dark .bd-main :is(a, button, label):is([class~="bg-indigo-600"], [class~="bg-indigo-500"], [class~="bg-indigo-700"], [class~="bg-emerald-600"], [class~="bg-emerald-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-amber-500"], [class~="bg-amber-600"], [class~="bg-teal-600"], [class~="bg-violet-600"], [class~="bg-sky-600"]) :is(i, svg, span, small, b) { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF; } html.bd-white body.bd-dark .bd-main :is(a, button, input[type="submit"], input[type="button"], label):is([class~="bg-indigo-600"], [class~="bg-indigo-500"], [class~="bg-indigo-700"], [class~="bg-emerald-600"], [class~="bg-emerald-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-amber-500"], [class~="bg-amber-600"], [class~="bg-teal-600"], [class~="bg-violet-600"], [class~="bg-sky-600"]):is(a, button, input, label):is(a, button, input, label):is(a, button, input, label) { background: #111318 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF; border-color: #111318 !important; } html.bd-white body.bd-dark .bd-main :is(a, button, input[type="submit"], input[type="button"], label):is([class~="bg-indigo-600"], [class~="bg-indigo-500"], [class~="bg-indigo-700"], [class~="bg-emerald-600"], [class~="bg-emerald-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-amber-500"], [class~="bg-amber-600"], [class~="bg-teal-600"], [class~="bg-violet-600"], [class~="bg-sky-600"]):is(a, button, input, label):is(a, button, input, label):is(a, button, input, label):hover:not(:disabled) { background: #2A2D35 !important; border-color: #2A2D35 !important; color: #FFFFFF !important; } html.bd-white body.bd-dark .bd-main :is(a, button, label):is([class~="bg-indigo-600"], [class~="bg-indigo-500"], [class~="bg-indigo-700"], [class~="bg-emerald-600"], [class~="bg-emerald-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-amber-500"], [class~="bg-amber-600"], [class~="bg-teal-600"], [class~="bg-violet-600"], [class~="bg-sky-600"]) :is(i, svg, span, small, b) { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF; } /* secondary: edit-type buttons, white / grey buttons (Cancel, Edit, New password ...) */ html body.bd-dark .bd-main :is(.btn-edit-module, .btn-action-edit, .tm-edit).btn-edit-module.btn-edit-module, html body.bd-dark .bd-main :is(.btn-action-edit, .tm-edit).btn-action-edit.btn-action-edit, html body.bd-dark .bd-main .tm-edit.tm-edit.tm-edit.tm-edit, html body.bd-dark .bd-main :is(a, button)[class~="bg-white"]:is(a, button):is(a, button):is(a, button):is(a, button):is(a, button):is(a, button):is(a, button), html body.bd-dark .bd-main :is(a, button):is([class~="bg-slate-500"], [class~="bg-slate-600"], [class~="bg-slate-700"], [class~="bg-slate-800"], [class~="bg-gray-600"]):is(a, button):is(a, button):is(a, button):is(a, button):is(a, button):is(a, button) { background: #1C1D22 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 6px !important; box-shadow: none !important; font-weight: 700 !important; } html.bd-white body.bd-dark .bd-main :is(.btn-edit-module, .btn-action-edit, .tm-edit).btn-edit-module.btn-edit-module, html.bd-white body.bd-dark .bd-main :is(.btn-action-edit, .tm-edit).btn-action-edit.btn-action-edit, html.bd-white body.bd-dark .bd-main .tm-edit.tm-edit.tm-edit.tm-edit, html.bd-white body.bd-dark .bd-main :is(a, button)[class~="bg-white"]:is(a, button):is(a, button):is(a, button):is(a, button):is(a, button):is(a, button):is(a, button), html.bd-white body.bd-dark .bd-main :is(a, button):is([class~="bg-slate-500"], [class~="bg-slate-600"], [class~="bg-slate-700"], [class~="bg-slate-800"], [class~="bg-gray-600"]):is(a, button):is(a, button):is(a, button):is(a, button):is(a, button):is(a, button) { background: #FFFFFF !important; color: #111318 !important; -webkit-text-fill-color: #111318; border-color: #D3D6DC !important; } html body.bd-dark .bd-main :is(.btn-edit-module, .btn-action-edit, .tm-edit, a[class~="bg-white"], button[class~="bg-white"]) :is(i, svg) { color: inherit !important; } /* active tabs (month list, material filters ...) use the primary look; one size for secondary buttons */ html body.bd-dark .bd-main :is(.mrs-month.is-active, .book-tab.is-active, [class*="-chip"].is-active) { background: #2B2D34 !important; border-color: rgba(255,255,255,.10) !important; color: #FFFFFF !important; } html body.bd-dark .bd-main :is(.mrs-month.is-active, a.is-active, button.is-active) :is(small, span) { color: #FFFFFF !important; background: rgba(255,255,255,.1) !important; } html.bd-white body.bd-dark .bd-main :is(.mrs-month.is-active, .book-tab.is-active, [class*="-chip"].is-active) { background: #111318 !important; border-color: #111318 !important; color: #FFFFFF !important; } html.bd-white body.bd-dark .bd-main :is(.mrs-month.is-active, a.is-active, button.is-active) :is(small, span) { color: #FFFFFF !important; background: rgba(255,255,255,.18) !important; } html body.bd-dark .bd-main :is(.btn-edit-module, .btn-action-edit, .tm-edit).btn-edit-module.btn-edit-module.btn-edit-module { font-size: 10.5px !important; padding: 4px 10px !important; } html body.bd-dark .bd-main button[class~="bg-white"][class~="bg-white"][class~="bg-white"][class~="bg-white"][class~="bg-white"][class~="bg-white"][class~="bg-white"][class~="bg-white"] { border-radius: 6px !important; } /* white mode: progress-sheet frozen columns and dark badges */ html.bd-white body.bd-dark .ps-table tbody td:is(.ps-sl, .ps-task), html.bd-white body.bd-dark table :is(td, th)[class*="sticky"], html.bd-white body.bd-dark table :is(td, th)[class*="freeze"] { background-color: #FFFFFF !important; color: #2F333B !important; } html.bd-white body.bd-dark .ps-table tbody tr:hover td:is(.ps-sl, .ps-task) { background-color: #F4F5F7 !important; } html.bd-white body.bd-dark .bd-main [class*="bg-blue-7"], html.bd-white body.bd-dark .bd-main [class*="bg-indigo-7"], html.bd-white body.bd-dark .bd-main [class*="bg-slate-9"]:not(button):not(a) { color: #FFFFFF !important; } html.bd-white body.bd-dark .bd-main :is([class*="bg-blue-7"], [class*="bg-indigo-7"]) * { color: #FFFFFF !important; } /* ===================================================================== 18 Oct: Segoe UI (Light / Semibold), normal letters, small crisp menus, chat fixed at the bottom, ONE button system (primary / secondary / delete) and a properly tuned white theme ===================================================================== */ html body.bd-dark, html body.bd-dark :is(input, select, textarea, button), html body.bd-dark .lp2, html body.bd-dark .lp2 * { font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important; } html body.bd-dark { font-weight: 300 !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html body.bd-dark :is(p, span, div, td, li, label, input, select, textarea, a, small, em) { font-weight: 300; } html body.bd-dark :is(b, strong, h1, h2, h3, h4, h5, th, .font-bold, .font-semibold, .font-extrabold, .font-black, .font-medium, button, .bd-alerts-h h3) { font-weight: 600 !important; } html body.bd-dark .fas, html body.bd-dark .fa-solid, html body.bd-dark .fa { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important; font-weight: 900 !important; } html body.bd-dark .far { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important; font-weight: 400 !important; } html body.bd-dark .fab { font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important; font-weight: 400 !important; } /* normal letters (no forced capitals, no wide letter spacing) */ html body.bd-dark, html body.bd-dark *, html body.bd-dark .uppercase, html body.bd-dark ::placeholder { text-transform: none !important; } html body.bd-dark :is([class*="tracking-"], .uppercase) { letter-spacing: 0 !important; } /* main menu: normal weight, crisp */ html body.bd-dark .bd-item { font-weight: 400 !important; font-size: 12px !important; letter-spacing: 0 !important; } html body.bd-dark .bd-item.on { font-weight: 600 !important; } html body.bd-dark .bd-mgrp { font-weight: 600 !important; font-size: 10.5px !important; letter-spacing: .02em !important; } html body.bd-dark .bd-brand span { font-weight: 600 !important; } /* project menu: small */ html body.bd-dark .project-nav .pn-link { font-size: 11px !important; font-weight: 400 !important; height: 26px !important; padding: 0 9px !important; letter-spacing: 0 !important; } html body.bd-dark .project-nav .pn-link.is-active { font-weight: 600 !important; } html body.bd-dark .project-nav .pn-item { font-size: 11px !important; font-weight: 400 !important; } html body.bd-dark .project-nav .bd-chat-fab { font-size: 11px !important; height: 26px !important; font-weight: 600 !important; } /* chat: the window always floats at the bottom right of the screen */ body > .bd-chat, html body.bd-dark .bd-chat { position: fixed !important; top: auto !important; bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; right: 16px !important; left: auto !important; height: min(520px, calc(100vh - 100px)) !important; z-index: 120 !important; } @media (max-width: 640px) { body > .bd-chat, html body.bd-dark .bd-chat { left: 8px !important; right: 8px !important; width: auto !important; height: calc(100vh - 90px) !important; } } /* ---------- ONE button system ---------- */ /* primary (solid colour buttons) */ html body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button, input[type="submit"], input[type="button"], label):is([class~="bg-indigo-500"], [class~="bg-indigo-600"], [class~="bg-indigo-700"], [class~="bg-indigo-800"], [class~="bg-emerald-500"], [class~="bg-emerald-600"], [class~="bg-emerald-700"], [class~="bg-emerald-800"], [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-blue-800"], [class~="bg-amber-500"], [class~="bg-amber-600"], [class~="bg-amber-700"], [class~="bg-amber-800"], [class~="bg-teal-500"], [class~="bg-teal-600"], [class~="bg-teal-700"], [class~="bg-teal-800"], [class~="bg-violet-500"], [class~="bg-violet-600"], [class~="bg-violet-700"], [class~="bg-violet-800"], [class~="bg-sky-500"], [class~="bg-sky-600"], [class~="bg-sky-700"], [class~="bg-sky-800"], [class~="bg-green-500"], [class~="bg-green-600"], [class~="bg-green-700"], [class~="bg-green-800"], [class~="bg-orange-500"], [class~="bg-orange-600"], [class~="bg-orange-700"], [class~="bg-orange-800"], [class~="bg-cyan-500"], [class~="bg-cyan-600"], [class~="bg-cyan-700"], [class~="bg-cyan-800"], [class~="bg-purple-500"], [class~="bg-purple-600"], [class~="bg-purple-700"], [class~="bg-purple-800"], [class~="bg-pink-500"], [class~="bg-pink-600"], [class~="bg-pink-700"], [class~="bg-pink-800"], [class~="bg-yellow-500"], [class~="bg-yellow-600"], [class~="bg-yellow-700"], [class~="bg-yellow-800"], [class~="bg-lime-500"], [class~="bg-lime-600"], [class~="bg-lime-700"], [class~="bg-lime-800"], [class~="bg-fuchsia-500"], [class~="bg-fuchsia-600"], [class~="bg-fuchsia-700"], [class~="bg-fuchsia-800"]):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label) { background: #2B2D34 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 6px !important; box-shadow: none !important; font-weight: 600 !important; } html body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button, input[type="submit"], input[type="button"], label):is([class~="bg-indigo-500"], [class~="bg-indigo-600"], [class~="bg-indigo-700"], [class~="bg-indigo-800"], [class~="bg-emerald-500"], [class~="bg-emerald-600"], [class~="bg-emerald-700"], [class~="bg-emerald-800"], [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-blue-800"], [class~="bg-amber-500"], [class~="bg-amber-600"], [class~="bg-amber-700"], [class~="bg-amber-800"], [class~="bg-teal-500"], [class~="bg-teal-600"], [class~="bg-teal-700"], [class~="bg-teal-800"], [class~="bg-violet-500"], [class~="bg-violet-600"], [class~="bg-violet-700"], [class~="bg-violet-800"], [class~="bg-sky-500"], [class~="bg-sky-600"], [class~="bg-sky-700"], [class~="bg-sky-800"], [class~="bg-green-500"], [class~="bg-green-600"], [class~="bg-green-700"], [class~="bg-green-800"], [class~="bg-orange-500"], [class~="bg-orange-600"], [class~="bg-orange-700"], [class~="bg-orange-800"], [class~="bg-cyan-500"], [class~="bg-cyan-600"], [class~="bg-cyan-700"], [class~="bg-cyan-800"], [class~="bg-purple-500"], [class~="bg-purple-600"], [class~="bg-purple-700"], [class~="bg-purple-800"], [class~="bg-pink-500"], [class~="bg-pink-600"], [class~="bg-pink-700"], [class~="bg-pink-800"], [class~="bg-yellow-500"], [class~="bg-yellow-600"], [class~="bg-yellow-700"], [class~="bg-yellow-800"], [class~="bg-lime-500"], [class~="bg-lime-600"], [class~="bg-lime-700"], [class~="bg-lime-800"], [class~="bg-fuchsia-500"], [class~="bg-fuchsia-600"], [class~="bg-fuchsia-700"], [class~="bg-fuchsia-800"]):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):hover:not(:disabled) { background: #34363E !important; border-color: rgba(255,255,255,.10) !important; } html body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button, input[type="submit"], input[type="button"], label):is([class~="bg-indigo-500"], [class~="bg-indigo-600"], [class~="bg-indigo-700"], [class~="bg-indigo-800"], [class~="bg-emerald-500"], [class~="bg-emerald-600"], [class~="bg-emerald-700"], [class~="bg-emerald-800"], [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-blue-800"], [class~="bg-amber-500"], [class~="bg-amber-600"], [class~="bg-amber-700"], [class~="bg-amber-800"], [class~="bg-teal-500"], [class~="bg-teal-600"], [class~="bg-teal-700"], [class~="bg-teal-800"], [class~="bg-violet-500"], [class~="bg-violet-600"], [class~="bg-violet-700"], [class~="bg-violet-800"], [class~="bg-sky-500"], [class~="bg-sky-600"], [class~="bg-sky-700"], [class~="bg-sky-800"], [class~="bg-green-500"], [class~="bg-green-600"], [class~="bg-green-700"], [class~="bg-green-800"], [class~="bg-orange-500"], [class~="bg-orange-600"], [class~="bg-orange-700"], [class~="bg-orange-800"], [class~="bg-cyan-500"], [class~="bg-cyan-600"], [class~="bg-cyan-700"], [class~="bg-cyan-800"], [class~="bg-purple-500"], [class~="bg-purple-600"], [class~="bg-purple-700"], [class~="bg-purple-800"], [class~="bg-pink-500"], [class~="bg-pink-600"], [class~="bg-pink-700"], [class~="bg-pink-800"], [class~="bg-yellow-500"], [class~="bg-yellow-600"], [class~="bg-yellow-700"], [class~="bg-yellow-800"], [class~="bg-lime-500"], [class~="bg-lime-600"], [class~="bg-lime-700"], [class~="bg-lime-800"], [class~="bg-fuchsia-500"], [class~="bg-fuchsia-600"], [class~="bg-fuchsia-700"], [class~="bg-fuchsia-800"]) :is(i, svg, span, small, b, em) { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* delete (solid red) */ html body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button, input[type="submit"], input[type="button"], label):is([class~="bg-rose-500"], [class~="bg-rose-600"], [class~="bg-rose-700"], [class~="bg-rose-800"], [class~="bg-red-500"], [class~="bg-red-600"], [class~="bg-red-700"], [class~="bg-red-800"]):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label) { background: #B23C3C !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 1px solid #B23C3C !important; border-radius: 6px !important; font-weight: 600 !important; } html body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button, input[type="submit"], input[type="button"], label):is([class~="bg-rose-500"], [class~="bg-rose-600"], [class~="bg-rose-700"], [class~="bg-rose-800"], [class~="bg-red-500"], [class~="bg-red-600"], [class~="bg-red-700"], [class~="bg-red-800"]) :is(i, svg, span) { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* secondary (light / tinted / outline buttons) */ html body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button):is([class~="bg-indigo-50"], [class~="bg-indigo-100"], [class~="bg-indigo-200"], [class~="bg-emerald-50"], [class~="bg-emerald-100"], [class~="bg-emerald-200"], [class~="bg-blue-50"], [class~="bg-blue-100"], [class~="bg-blue-200"], [class~="bg-amber-50"], [class~="bg-amber-100"], [class~="bg-amber-200"], [class~="bg-teal-50"], [class~="bg-teal-100"], [class~="bg-teal-200"], [class~="bg-violet-50"], [class~="bg-violet-100"], [class~="bg-violet-200"], [class~="bg-sky-50"], [class~="bg-sky-100"], [class~="bg-sky-200"], [class~="bg-green-50"], [class~="bg-green-100"], [class~="bg-green-200"], [class~="bg-orange-50"], [class~="bg-orange-100"], [class~="bg-orange-200"], [class~="bg-cyan-50"], [class~="bg-cyan-100"], [class~="bg-cyan-200"], [class~="bg-purple-50"], [class~="bg-purple-100"], [class~="bg-purple-200"], [class~="bg-pink-50"], [class~="bg-pink-100"], [class~="bg-pink-200"], [class~="bg-yellow-50"], [class~="bg-yellow-100"], [class~="bg-yellow-200"], [class~="bg-slate-50"], [class~="bg-slate-100"], [class~="bg-slate-200"], [class~="bg-gray-50"], [class~="bg-gray-100"], [class~="bg-gray-200"], [class~="bg-white"], [class~="bg-transparent"]):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label), html body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(.btn-edit-module, .btn-action-edit, .tm-edit):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label) { background: #1C1D22 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 6px !important; box-shadow: none !important; font-weight: 600 !important; } html body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button):is([class~="bg-indigo-50"], [class~="bg-indigo-100"], [class~="bg-indigo-200"], [class~="bg-emerald-50"], [class~="bg-emerald-100"], [class~="bg-emerald-200"], [class~="bg-blue-50"], [class~="bg-blue-100"], [class~="bg-blue-200"], [class~="bg-amber-50"], [class~="bg-amber-100"], [class~="bg-amber-200"], [class~="bg-teal-50"], [class~="bg-teal-100"], [class~="bg-teal-200"], [class~="bg-violet-50"], [class~="bg-violet-100"], [class~="bg-violet-200"], [class~="bg-sky-50"], [class~="bg-sky-100"], [class~="bg-sky-200"], [class~="bg-green-50"], [class~="bg-green-100"], [class~="bg-green-200"], [class~="bg-orange-50"], [class~="bg-orange-100"], [class~="bg-orange-200"], [class~="bg-cyan-50"], [class~="bg-cyan-100"], [class~="bg-cyan-200"], [class~="bg-purple-50"], [class~="bg-purple-100"], [class~="bg-purple-200"], [class~="bg-pink-50"], [class~="bg-pink-100"], [class~="bg-pink-200"], [class~="bg-yellow-50"], [class~="bg-yellow-100"], [class~="bg-yellow-200"], [class~="bg-slate-50"], [class~="bg-slate-100"], [class~="bg-slate-200"], [class~="bg-gray-50"], [class~="bg-gray-100"], [class~="bg-gray-200"], [class~="bg-white"], [class~="bg-transparent"]):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):hover, html body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(.btn-edit-module, .btn-action-edit, .tm-edit):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):hover { background: #26282E !important; border-color: rgba(255,255,255,.10) !important; } html body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button):is([class~="bg-indigo-50"], [class~="bg-indigo-100"], [class~="bg-indigo-200"], [class~="bg-emerald-50"], [class~="bg-emerald-100"], [class~="bg-emerald-200"], [class~="bg-blue-50"], [class~="bg-blue-100"], [class~="bg-blue-200"], [class~="bg-amber-50"], [class~="bg-amber-100"], [class~="bg-amber-200"], [class~="bg-teal-50"], [class~="bg-teal-100"], [class~="bg-teal-200"], [class~="bg-violet-50"], [class~="bg-violet-100"], [class~="bg-violet-200"], [class~="bg-sky-50"], [class~="bg-sky-100"], [class~="bg-sky-200"], [class~="bg-green-50"], [class~="bg-green-100"], [class~="bg-green-200"], [class~="bg-orange-50"], [class~="bg-orange-100"], [class~="bg-orange-200"], [class~="bg-cyan-50"], [class~="bg-cyan-100"], [class~="bg-cyan-200"], [class~="bg-purple-50"], [class~="bg-purple-100"], [class~="bg-purple-200"], [class~="bg-pink-50"], [class~="bg-pink-100"], [class~="bg-pink-200"], [class~="bg-yellow-50"], [class~="bg-yellow-100"], [class~="bg-yellow-200"], [class~="bg-slate-50"], [class~="bg-slate-100"], [class~="bg-slate-200"], [class~="bg-gray-50"], [class~="bg-gray-100"], [class~="bg-gray-200"], [class~="bg-white"], [class~="bg-transparent"]) :is(i, svg, span), html body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(.btn-edit-module, .btn-action-edit, .tm-edit) :is(i, svg, span) { color: inherit !important; -webkit-text-fill-color: inherit !important; } /* delete (light red) */ html body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button):is([class~="bg-rose-50"], [class~="bg-rose-100"], [class~="bg-red-50"], [class~="bg-red-100"]):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label) { background: #1C1D22 !important; color: #EB5757 !important; -webkit-text-fill-color: #EB5757 !important; border: 1px solid rgba(235,87,87,.45) !important; border-radius: 6px !important; font-weight: 600 !important; } html body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button):is([class~="bg-rose-50"], [class~="bg-rose-100"], [class~="bg-red-50"], [class~="bg-red-100"]):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):hover { background: #B23C3C !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border-color: #B23C3C !important; } /* ---- the same three buttons in white mode ---- */ html.bd-white body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button, input[type="submit"], input[type="button"], label):is([class~="bg-indigo-500"], [class~="bg-indigo-600"], [class~="bg-indigo-700"], [class~="bg-indigo-800"], [class~="bg-emerald-500"], [class~="bg-emerald-600"], [class~="bg-emerald-700"], [class~="bg-emerald-800"], [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-blue-800"], [class~="bg-amber-500"], [class~="bg-amber-600"], [class~="bg-amber-700"], [class~="bg-amber-800"], [class~="bg-teal-500"], [class~="bg-teal-600"], [class~="bg-teal-700"], [class~="bg-teal-800"], [class~="bg-violet-500"], [class~="bg-violet-600"], [class~="bg-violet-700"], [class~="bg-violet-800"], [class~="bg-sky-500"], [class~="bg-sky-600"], [class~="bg-sky-700"], [class~="bg-sky-800"], [class~="bg-green-500"], [class~="bg-green-600"], [class~="bg-green-700"], [class~="bg-green-800"], [class~="bg-orange-500"], [class~="bg-orange-600"], [class~="bg-orange-700"], [class~="bg-orange-800"], [class~="bg-cyan-500"], [class~="bg-cyan-600"], [class~="bg-cyan-700"], [class~="bg-cyan-800"], [class~="bg-purple-500"], [class~="bg-purple-600"], [class~="bg-purple-700"], [class~="bg-purple-800"], [class~="bg-pink-500"], [class~="bg-pink-600"], [class~="bg-pink-700"], [class~="bg-pink-800"], [class~="bg-yellow-500"], [class~="bg-yellow-600"], [class~="bg-yellow-700"], [class~="bg-yellow-800"], [class~="bg-lime-500"], [class~="bg-lime-600"], [class~="bg-lime-700"], [class~="bg-lime-800"], [class~="bg-fuchsia-500"], [class~="bg-fuchsia-600"], [class~="bg-fuchsia-700"], [class~="bg-fuchsia-800"]):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label) { background: #111318 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border-color: #111318 !important; } html.bd-white body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button, input[type="submit"], input[type="button"], label):is([class~="bg-indigo-500"], [class~="bg-indigo-600"], [class~="bg-indigo-700"], [class~="bg-indigo-800"], [class~="bg-emerald-500"], [class~="bg-emerald-600"], [class~="bg-emerald-700"], [class~="bg-emerald-800"], [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-blue-800"], [class~="bg-amber-500"], [class~="bg-amber-600"], [class~="bg-amber-700"], [class~="bg-amber-800"], [class~="bg-teal-500"], [class~="bg-teal-600"], [class~="bg-teal-700"], [class~="bg-teal-800"], [class~="bg-violet-500"], [class~="bg-violet-600"], [class~="bg-violet-700"], [class~="bg-violet-800"], [class~="bg-sky-500"], [class~="bg-sky-600"], [class~="bg-sky-700"], [class~="bg-sky-800"], [class~="bg-green-500"], [class~="bg-green-600"], [class~="bg-green-700"], [class~="bg-green-800"], [class~="bg-orange-500"], [class~="bg-orange-600"], [class~="bg-orange-700"], [class~="bg-orange-800"], [class~="bg-cyan-500"], [class~="bg-cyan-600"], [class~="bg-cyan-700"], [class~="bg-cyan-800"], [class~="bg-purple-500"], [class~="bg-purple-600"], [class~="bg-purple-700"], [class~="bg-purple-800"], [class~="bg-pink-500"], [class~="bg-pink-600"], [class~="bg-pink-700"], [class~="bg-pink-800"], [class~="bg-yellow-500"], [class~="bg-yellow-600"], [class~="bg-yellow-700"], [class~="bg-yellow-800"], [class~="bg-lime-500"], [class~="bg-lime-600"], [class~="bg-lime-700"], [class~="bg-lime-800"], [class~="bg-fuchsia-500"], [class~="bg-fuchsia-600"], [class~="bg-fuchsia-700"], [class~="bg-fuchsia-800"]):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):hover:not(:disabled) { background: #2A2D35 !important; border-color: #2A2D35 !important; } html.bd-white body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button, input[type="submit"], input[type="button"], label):is([class~="bg-indigo-500"], [class~="bg-indigo-600"], [class~="bg-indigo-700"], [class~="bg-indigo-800"], [class~="bg-emerald-500"], [class~="bg-emerald-600"], [class~="bg-emerald-700"], [class~="bg-emerald-800"], [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-blue-800"], [class~="bg-amber-500"], [class~="bg-amber-600"], [class~="bg-amber-700"], [class~="bg-amber-800"], [class~="bg-teal-500"], [class~="bg-teal-600"], [class~="bg-teal-700"], [class~="bg-teal-800"], [class~="bg-violet-500"], [class~="bg-violet-600"], [class~="bg-violet-700"], [class~="bg-violet-800"], [class~="bg-sky-500"], [class~="bg-sky-600"], [class~="bg-sky-700"], [class~="bg-sky-800"], [class~="bg-green-500"], [class~="bg-green-600"], [class~="bg-green-700"], [class~="bg-green-800"], [class~="bg-orange-500"], [class~="bg-orange-600"], [class~="bg-orange-700"], [class~="bg-orange-800"], [class~="bg-cyan-500"], [class~="bg-cyan-600"], [class~="bg-cyan-700"], [class~="bg-cyan-800"], [class~="bg-purple-500"], [class~="bg-purple-600"], [class~="bg-purple-700"], [class~="bg-purple-800"], [class~="bg-pink-500"], [class~="bg-pink-600"], [class~="bg-pink-700"], [class~="bg-pink-800"], [class~="bg-yellow-500"], [class~="bg-yellow-600"], [class~="bg-yellow-700"], [class~="bg-yellow-800"], [class~="bg-lime-500"], [class~="bg-lime-600"], [class~="bg-lime-700"], [class~="bg-lime-800"], [class~="bg-fuchsia-500"], [class~="bg-fuchsia-600"], [class~="bg-fuchsia-700"], [class~="bg-fuchsia-800"]) :is(i, svg, span, small, b, em) { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } html.bd-white body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button):is([class~="bg-indigo-50"], [class~="bg-indigo-100"], [class~="bg-indigo-200"], [class~="bg-emerald-50"], [class~="bg-emerald-100"], [class~="bg-emerald-200"], [class~="bg-blue-50"], [class~="bg-blue-100"], [class~="bg-blue-200"], [class~="bg-amber-50"], [class~="bg-amber-100"], [class~="bg-amber-200"], [class~="bg-teal-50"], [class~="bg-teal-100"], [class~="bg-teal-200"], [class~="bg-violet-50"], [class~="bg-violet-100"], [class~="bg-violet-200"], [class~="bg-sky-50"], [class~="bg-sky-100"], [class~="bg-sky-200"], [class~="bg-green-50"], [class~="bg-green-100"], [class~="bg-green-200"], [class~="bg-orange-50"], [class~="bg-orange-100"], [class~="bg-orange-200"], [class~="bg-cyan-50"], [class~="bg-cyan-100"], [class~="bg-cyan-200"], [class~="bg-purple-50"], [class~="bg-purple-100"], [class~="bg-purple-200"], [class~="bg-pink-50"], [class~="bg-pink-100"], [class~="bg-pink-200"], [class~="bg-yellow-50"], [class~="bg-yellow-100"], [class~="bg-yellow-200"], [class~="bg-slate-50"], [class~="bg-slate-100"], [class~="bg-slate-200"], [class~="bg-gray-50"], [class~="bg-gray-100"], [class~="bg-gray-200"], [class~="bg-white"], [class~="bg-transparent"]):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label), html.bd-white body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(.btn-edit-module, .btn-action-edit, .tm-edit):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label) { background: #FFFFFF !important; color: #1F2329 !important; -webkit-text-fill-color: #1F2329 !important; border-color: #CDD1D8 !important; } html.bd-white body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button):is([class~="bg-indigo-50"], [class~="bg-indigo-100"], [class~="bg-indigo-200"], [class~="bg-emerald-50"], [class~="bg-emerald-100"], [class~="bg-emerald-200"], [class~="bg-blue-50"], [class~="bg-blue-100"], [class~="bg-blue-200"], [class~="bg-amber-50"], [class~="bg-amber-100"], [class~="bg-amber-200"], [class~="bg-teal-50"], [class~="bg-teal-100"], [class~="bg-teal-200"], [class~="bg-violet-50"], [class~="bg-violet-100"], [class~="bg-violet-200"], [class~="bg-sky-50"], [class~="bg-sky-100"], [class~="bg-sky-200"], [class~="bg-green-50"], [class~="bg-green-100"], [class~="bg-green-200"], [class~="bg-orange-50"], [class~="bg-orange-100"], [class~="bg-orange-200"], [class~="bg-cyan-50"], [class~="bg-cyan-100"], [class~="bg-cyan-200"], [class~="bg-purple-50"], [class~="bg-purple-100"], [class~="bg-purple-200"], [class~="bg-pink-50"], [class~="bg-pink-100"], [class~="bg-pink-200"], [class~="bg-yellow-50"], [class~="bg-yellow-100"], [class~="bg-yellow-200"], [class~="bg-slate-50"], [class~="bg-slate-100"], [class~="bg-slate-200"], [class~="bg-gray-50"], [class~="bg-gray-100"], [class~="bg-gray-200"], [class~="bg-white"], [class~="bg-transparent"]):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):hover, html.bd-white body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(.btn-edit-module, .btn-action-edit, .tm-edit):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):hover { background: #F1F3F6 !important; border-color: #B9BEC7 !important; } html.bd-white body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button):is([class~="bg-rose-50"], [class~="bg-rose-100"], [class~="bg-red-50"], [class~="bg-red-100"]):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label) { background: #FFFFFF !important; color: #C0392B !important; -webkit-text-fill-color: #C0392B !important; border-color: #EBB8B1 !important; } html.bd-white body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button):is([class~="bg-rose-50"], [class~="bg-rose-100"], [class~="bg-red-50"], [class~="bg-red-100"]):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):is(a,button,input,label):hover { background: #C0392B !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border-color: #C0392B !important; } /* ---------- white theme, tuned (not just inverted): softer page, clear hierarchy, darker accents ---------- */ html.bd-white, html.bd-white:has(body.bd-dark), html.bd-white body.bd-dark, html.bd-white body.bd-dark .bd-side { background: #F5F6F8 !important; } html.bd-white body.bd-dark { --k-t1: #15171C; --k-t2: #3A3E46; --k-t3: #6B7079; --k-t4: #8A8F98; --k-line: #E3E6EB; --k-line-2: #D3D7DE; color: #3A3E46 !important; } html.bd-white body.bd-dark .bd-main :is(h1, h2, h3, h4, b, strong, th) { color: #15171C; } /* accents readable on white */ html.bd-white body.bd-dark .bd-tag-7 { color: #7A6100 !important; background: rgba(29,161,255,.16) !important; border-color: rgba(176,140,0,.45) !important; } html.bd-white body.bd-dark .bd-tag-15 { color: #B03026 !important; background: rgba(235,87,87,.10) !important; border-color: rgba(192,57,43,.35) !important; } html.bd-white body.bd-dark .bd-tag-ok { color: #3A3E46 !important; border-color: #D3D7DE !important; background: #F5F6F8 !important; } /* tables */ html.bd-white body.bd-dark .bd-main table thead :is(th, td) { background: #F2F4F7 !important; color: #5B6070 !important; border-color: #E3E6EB !important; } html.bd-white body.bd-dark .bd-main table td { border-color: #EDEFF3 !important; } html.bd-white body.bd-dark .bd-main table tbody tr:nth-child(even) > td { background-color: #FCFCFD; } html.bd-white body.bd-dark .bd-main table tr[class*="bg-slate-50"] > td, html.bd-white body.bd-dark .bd-main table tr[class*="bg-slate-100"] > td { background: #F5F6F9 !important; color: #15171C !important; } html.bd-white body.bd-dark .bd-main :is(tr.grp, tr.gp, .group-row) > td { background: #F5F6F9 !important; } /* chips / status pills: neutral with a coloured dot feeling via border */ html.bd-white body.bd-dark .bd-main span[class*="rounded"]:is([class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-indigo-"], [class*="bg-blue-"], [class*="bg-amber-"], [class*="bg-violet-"], [class*="bg-sky-"], [class*="bg-slate-"]) { background: #F5F6F8 !important; color: #3A3E46 !important; border: 1px solid #D3D7DE !important; } /* side menu */ html.bd-white body.bd-dark .bd-item { color: #2A2E35 !important; } html.bd-white body.bd-dark .bd-item:hover { background: #EBEDF1 !important; } html.bd-white body.bd-dark .bd-item.on { background: #FFFFFF !important; color: #111318 !important; box-shadow: 0 1px 2px rgba(16,24,40,.06), inset 0 0 0 1px #E3E6EB; } html.bd-white body.bd-dark .bd-mgrp { color: #8A8F98 !important; } html.bd-white body.bd-dark .bd-item > i { filter: none !important; opacity: 1; } html.bd-white body.bd-dark .bd-item > i:is(.fa-bell) { --ic: #A88600 !important; } html.bd-white body.bd-dark .bd-item > i:is(.fa-th-large, .fa-home) { --ic: #5E6AD2 !important; } html.bd-white body.bd-dark .bd-item > i:is(.fa-tasks, .fa-check-double, .fa-chart-line, .fa-medal) { --ic: #23915E !important; } html.bd-white body.bd-dark .bd-item > i:is(.fa-file-signature, .fa-comments) { --ic: #1F78D1 !important; } html.bd-white body.bd-dark .bd-item > i:is(.fa-user-tie, .fa-users) { --ic: #A88600 !important; } html.bd-white body.bd-dark .bd-item > i:is(.fa-hard-hat, .fa-folder-open) { --ic: #8E4FD6 !important; } html.bd-white body.bd-dark .bd-item > i:is(.fa-drafting-compass) { --ic: #C4457F !important; } html.bd-white body.bd-dark .bd-item > i:is(.fa-images) { --ic: #16928A !important; } html.bd-white body.bd-dark .bd-item > i:is(.fa-bullhorn) { --ic: #B07A00 !important; } /* project menu */ html.bd-white body.bd-dark .project-nav .pn-link { color: #5B6070 !important; } html.bd-white body.bd-dark .project-nav .pn-link.is-active { background: #FFFFFF !important; color: #111318 !important; box-shadow: 0 1px 2px rgba(16,24,40,.06), inset 0 0 0 1px #D3D7DE !important; } html.bd-white body.bd-dark .project-nav .bd-chat-fab { background: #111318 !important; color: #FFFFFF !important; border-color: #111318 !important; } /* chat, notifications, alerts: white cards with clear separation */ html.bd-white body.bd-dark .bd-chat { background: #FFFFFF !important; border-color: #D3D7DE !important; box-shadow: 0 24px 60px rgba(16,24,40,.18) !important; color: #3A3E46 !important; } html.bd-white body.bd-dark .bd-chat :is(.bd-chat-h, .bd-chat-f) { background: #F8F9FB !important; border-color: #E3E6EB !important; } html.bd-white body.bd-dark .bd-chat :is(textarea, input) { background: #FFFFFF !important; color: #15171C !important; border-color: #D3D7DE !important; } html.bd-white body.bd-dark .bd-msg .n b { color: #15171C !important; } html.bd-white body.bd-dark .bd-msg .n span { color: #8A8F98 !important; } html.bd-white body.bd-dark .bd-msg :is(p, .t, .txt) { color: #3A3E46 !important; } html.bd-white body.bd-dark .bd-msg.me :is(.bub, .t, p) { background: #EEF0F4 !important; color: #15171C !important; } html.bd-white body.bd-dark :is(.bd-notes, .bd-alerts) { background: #FFFFFF !important; border-color: #E3E6EB !important; box-shadow: 0 1px 2px rgba(16,24,40,.04) !important; } html.bd-white body.bd-dark .bd-notes { box-shadow: 0 24px 60px rgba(16,24,40,.18) !important; } /* concrete / formwork on white */ html.bd-white body.bd-dark .bd-main table :is(td, th).bd-conc, html.bd-white body.bd-dark .bd-main table .bd-conc :is(input, b, span, a) { color: #8A6D00 !important; -webkit-text-fill-color: #8A6D00 !important; } html.bd-white body.bd-dark .bd-main table :is(td, th).bd-form, html.bd-white body.bd-dark .bd-main table .bd-form :is(input, b, span, a) { color: #C0392B !important; -webkit-text-fill-color: #C0392B !important; } /* inputs and pop-ups */ html.bd-white body.bd-dark .bd-main :is(input, select, textarea):focus { border-color: #8A8F98 !important; box-shadow: 0 0 0 3px rgba(17,19,24,.06) !important; } html.bd-white body.bd-dark .fixed.inset-0[class*="bg-"] { background-color: rgba(17,19,24,.35) !important; } html.bd-white body.bd-dark .fixed.inset-0 > :is(div, form) { box-shadow: 0 24px 60px rgba(16,24,40,.2) !important; border: 1px solid #E3E6EB !important; } /* stronger than the old base styles (which forced capitals and the old font on buttons / table headings) */ html body.bd-dark *:not(#bd-none):not(.fas):not(.far):not(.fab):not(.fa), html body.bd-dark :is(input, button, select, textarea):not(#bd-none) { font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important; text-transform: none !important; } html body.bd-dark :is(button, th, a[class*="px-"], .btn-edit-module, .section-title, .bd-mgrp):not(#bd-none) { letter-spacing: 0 !important; } /* one size for every button; month / material tabs use the same secondary + primary (active) look */ html body.bd-dark .bd-main :is(button, input[type="submit"], input[type="button"], a[class*="px-"], .btn-edit-module, .mrs-month, .book-tab):not(#bd-none) { font-size: 11px !important; } html body.bd-dark .bd-main :is(.mrs-month, .book-tab):not(#bd-none) { background: #1C1D22 !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 6px !important; } html body.bd-dark .bd-main :is(.mrs-month, .book-tab).is-active:not(#bd-none) { background: #2B2D34 !important; color: #FFFFFF !important; border-color: rgba(255,255,255,.10) !important; } html body.bd-dark .bd-main :is(.mrs-month, .book-tab).is-active:not(#bd-none) :is(small, span) { color: #FFFFFF !important; background: rgba(255,255,255,.1) !important; } html.bd-white body.bd-dark .bd-main :is(.mrs-month, .book-tab):not(#bd-none) { background: #FFFFFF !important; color: #1F2329 !important; border-color: #CDD1D8 !important; } html.bd-white body.bd-dark .bd-main :is(.mrs-month, .book-tab).is-active:not(#bd-none) { background: #111318 !important; color: #FFFFFF !important; border-color: #111318 !important; } html.bd-white body.bd-dark .bd-main :is(.mrs-month, .book-tab).is-active:not(#bd-none) :is(small, span) { color: #FFFFFF !important; background: rgba(255,255,255,.18) !important; } /* ---- 18 Oct (b) ---- */ /* home page main buttons: dark too (no white buttons on the black theme) */ .lp2 .btn-w { background: #2B2D34 !important; color: #FFFFFF !important; border-color: rgba(255,255,255,.10) !important; } .lp2 .btn-w:hover { background: #34363E !important; border-color: rgba(255,255,255,.10) !important; } /* the back-to-top arrow hides while the project chat is open (it covered the send button) */ body:has(#bdChat:not([hidden])) .btn-scroll-top { opacity: 0 !important; pointer-events: none !important; } /* tables: no tinted cell / row shading, no light borders - only the hover highlight */ html body.bd-dark .bd-main table :is(td, th):not(#bd-none) { border-color: rgba(255,255,255,.10) !important; } html body.bd-dark .bd-main table tbody :is(td, th):not(#bd-none) { background-color: #0E0F12 !important; background-image: none !important; box-shadow: none !important; } html body.bd-dark .bd-main table tbody tr:not(#bd-none) { background-color: transparent !important; box-shadow: none !important; } html body.bd-dark .bd-main table tbody tr:not(#bd-none):hover > :is(td, th) { background-color: #16171B !important; } html body.bd-dark .bd-main table :is(tfoot td, tr.tot td, tr[class*="font-bold"] td):not(#bd-none) { border-top-color: rgba(255,255,255,.10) !important; } html.bd-white body.bd-dark .bd-main table :is(td, th):not(#bd-none) { border-color: #ECEEF2 !important; } html.bd-white body.bd-dark .bd-main table tbody :is(td, th):not(#bd-none) { background-color: #FFFFFF !important; background-image: none !important; box-shadow: none !important; } html.bd-white body.bd-dark .bd-main table tbody tr:not(#bd-none) { background-color: transparent !important; } html.bd-white body.bd-dark .bd-main table tbody tr:not(#bd-none):hover > :is(td, th) { background-color: #F5F6F9 !important; } html.bd-white body.bd-dark .bd-main table thead :is(th, td):not(#bd-none) { border-color: #E3E6EB !important; } /* ---- 18 Oct (c): one accent colour for all small icons; sign-in buttons dark ---- */ html body.bd-dark .bd-item > i, html body.bd-dark .bd-item > i[class] { --ic: #1DA1FF !important; color: #1DA1FF !important; } html body.bd-dark .bd-main :is(.kpi-card .kpi-icon, .kpi-card .kpi-icon i, .link-card > i, .section-title > i, .bd-alerts-h i) { color: #1DA1FF !important; } html body.bd-dark .bd-main .kpi-card .kpi-icon { background: rgba(29,161,255,.12) !important; } html body.bd-dark .lp2 .cico { --c: #1DA1FF !important; } html.bd-white body.bd-dark .bd-item > i, html.bd-white body.bd-dark .bd-item > i[class] { --ic: #A88600 !important; color: #A88600 !important; filter: none !important; } html.bd-white body.bd-dark .bd-main :is(.kpi-card .kpi-icon, .kpi-card .kpi-icon i, .link-card > i, .section-title > i, .bd-alerts-h i) { color: #A88600 !important; } html.bd-white body.bd-dark .bd-main .kpi-card .kpi-icon { background: rgba(29,161,255,.14) !important; } .bd-auth-btn, .bd-pill { background: #2B2D34 !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,.10) !important; } .bd-auth-btn:hover, .bd-pill:hover { background: #34363E !important; } /* ---- 18 Oct (d): brighter text on black (thin font needs near-white), checked tick boxes, more small orange icons ---- */ html body.bd-dark:not(.x) { --k-t2: #E9EBEE; --k-t3: #C9CDD3; --k-t4: #A7ACB3; color: #E9EBEE !important; } html body.bd-dark .bd-main :is(.text-slate-600, .text-slate-700, .text-gray-600, .text-gray-700, p, td, li, label, small) { color: #E4E6EA; } html body.bd-dark .bd-main :is(.text-slate-400, .text-slate-500, .text-gray-400, .text-gray-500):not(#bd-none) { color: #C9CDD3 !important; } html body.bd-dark ::placeholder { color: #9EA3AB !important; -webkit-text-fill-color: #9EA3AB !important; opacity: 1; } html body.bd-dark .bd-mgrp, html body.bd-dark .bd-side-sub { color: #B9BDC4 !important; } html.bd-white body.bd-dark:not(.x) { --k-t2: #3A3E46; --k-t3: #5B6070; --k-t4: #6B7079; color: #3A3E46 !important; } html.bd-white body.bd-dark .bd-main :is(.text-slate-400, .text-slate-500, .text-gray-400, .text-gray-500):not(#bd-none) { color: #5B6070 !important; } html.bd-white body.bd-dark .bd-main :is(.text-slate-600, .text-slate-700, .text-gray-600, .text-gray-700, p, td, li, label, small) { color: #2F333B; } html.bd-white body.bd-dark ::placeholder { color: #8A8F98 !important; -webkit-text-fill-color: #8A8F98 !important; } html.bd-white body.bd-dark .bd-mgrp { color: #6B7079 !important; } /* tick boxes (services etc.): checked = orange edge, text stays readable */ html body.bd-dark .dr-check { color: #E9EBEE !important; border-color: rgba(255,255,255,.10) !important; background: #16171B !important; } html body.bd-dark .dr-check:has(input:checked) { color: #FFFFFF !important; border-color: #1DA1FF !important; background: rgba(29,161,255,.12) !important; } html body.bd-dark .dr-check input { accent-color: #1DA1FF; } html.bd-white body.bd-dark .dr-check { color: #2F333B !important; border-color: #CDD1D8 !important; background: #FFFFFF !important; } html.bd-white body.bd-dark .dr-check:has(input:checked) { color: #15171C !important; border-color: #A88600 !important; background: #FFF6D1 !important; } html.bd-white body.bd-dark .dr-check input { accent-color: #A88600; } /* small orange icons: menu (every item and group heading), page headings, table action column */ html body.bd-dark #sidebar .bd-item > i:not(#bd-none), html body.bd-dark #sidebar .bd-item.on > i:not(#bd-none), html body.bd-dark #sidebar .bd-gico:not(#bd-none) { color: #1DA1FF !important; -webkit-text-fill-color: #1DA1FF !important; } html body.bd-dark .bd-gico { font-size: 9px; margin-right: 6px; opacity: .95; } html body.bd-dark .bd-hico { color: #1DA1FF !important; font-size: 11px; margin-right: 3px; } html.bd-white body.bd-dark #sidebar .bd-item > i:not(#bd-none), html.bd-white body.bd-dark #sidebar .bd-item.on > i:not(#bd-none), html.bd-white body.bd-dark #sidebar .bd-gico:not(#bd-none), html.bd-white body.bd-dark .bd-hico { color: #A88600 !important; -webkit-text-fill-color: #A88600 !important; } html body.bd-dark .bd-main :is(button, a) > i:first-child:not(#bd-none) { color: #1DA1FF !important; -webkit-text-fill-color: #1DA1FF !important; } html.bd-white body.bd-dark .bd-main :is(button, a) > i:first-child:not(#bd-none) { color: #A88600 !important; -webkit-text-fill-color: #A88600 !important; } html body.bd-dark .bd-main :is(button, a)[class~="bg-rose-600"] > i, html body.bd-dark .bd-main :is(button, a)[class*="rose"] > i:first-child:not(#bd-none) { color: inherit !important; -webkit-text-fill-color: inherit !important; } html body.bd-dark input[type="file"]::file-selector-button { background: #2B2D34 !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 6px !important; padding: 4px 10px !important; font: 600 11px "Segoe UI", -apple-system, Arial, sans-serif !important; cursor: pointer; } html.bd-white body.bd-dark input[type="file"]::file-selector-button { background: #111318 !important; color: #FFFFFF !important; border-color: #111318 !important; } /* ---- 18 Oct (e): every small icon in the work area in the theme orange (QS, Material Takeoff, module editors, all pages) ---- */ html body.bd-dark .bd-main :is(i.fas, i.far, i.fa, i.fa-solid, i.fa-regular):not(#bd-none), html body.bd-dark .fixed :is(i.fas, i.far, i.fa):not(#bd-none), html body.bd-dark .bd-main :is(button, a, label, h1, h2, h3, h4, h5, th, .section-title, summary) > svg:not(#bd-none) { color: #1DA1FF !important; -webkit-text-fill-color: #1DA1FF !important; } html body.bd-dark .bd-main :is(button, a, label, h1, h2, h3, h4, h5, th, .section-title, summary) > svg:not(#bd-none) :is(path, line, polyline, circle, rect) { stroke: currentColor; } /* keep red for delete / remove icons and the alert tags */ html body.bd-dark .bd-main :is(button, a)[class*="rose"] :is(i, svg):not(#bd-none), html body.bd-dark .bd-main :is(button, a)[class*="red-"] :is(i, svg):not(#bd-none), html body.bd-dark .bd-main :is(.fa-trash, .fa-trash-alt, .fa-times, .fa-times-circle, .fa-ban):not(#bd-none) { color: #EB5757 !important; -webkit-text-fill-color: #EB5757 !important; } html.bd-white body.bd-dark .bd-main :is(i.fas, i.far, i.fa, i.fa-solid, i.fa-regular):not(#bd-none), html.bd-white body.bd-dark .fixed :is(i.fas, i.far, i.fa):not(#bd-none), html.bd-white body.bd-dark .bd-main :is(button, a, label, h1, h2, h3, h4, h5, th, .section-title, summary) > svg:not(#bd-none) { color: #A88600 !important; -webkit-text-fill-color: #A88600 !important; } html.bd-white body.bd-dark .bd-main :is(.fa-trash, .fa-trash-alt, .fa-times, .fa-times-circle, .fa-ban):not(#bd-none), html.bd-white body.bd-dark .bd-main :is(button, a)[class*="rose"] :is(i, svg):not(#bd-none) { color: #C0392B !important; -webkit-text-fill-color: #C0392B !important; } /* small icons in the quantity tables: concrete and formwork headings */ html body.bd-dark .bd-main table th.bd-conc::before { content: "\f1b2"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900; margin-right: 5px; font-size: 9px; color: #1DA1FF; } html body.bd-dark .bd-main table th.bd-form::before { content: "\f0c8"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 400; margin-right: 5px; font-size: 9px; color: #EB5757; } html.bd-white body.bd-dark .bd-main table th.bd-conc::before { color: #A88600; } html.bd-white body.bd-dark .bd-main table th.bd-form::before { color: #C0392B; } html body.bd-dark .bd-main i:is([class*="text-rose-"], [class*="text-red-"]):not(#bd-none) { color: #EB5757 !important; -webkit-text-fill-color: #EB5757 !important; } html.bd-white body.bd-dark .bd-main i:is([class*="text-rose-"], [class*="text-red-"]):not(#bd-none) { color: #C0392B !important; -webkit-text-fill-color: #C0392B !important; } html body.bd-dark .bd-main :is(i.fa-trash, i.fa-trash-alt, i.fa-times, i.fa-times-circle, i.fa-ban, button[class*="rose"] i, button[class*="red-"] i):not(#bd-none):not(#bd-x) { color: #EB5757 !important; -webkit-text-fill-color: #EB5757 !important; } html.bd-white body.bd-dark .bd-main :is(i.fa-trash, i.fa-trash-alt, i.fa-times, i.fa-times-circle, i.fa-ban, button[class*="rose"] i, button[class*="red-"] i):not(#bd-none):not(#bd-x) { color: #C0392B !important; -webkit-text-fill-color: #C0392B !important; } /* birthday banner (dashboard) and birthday card */ .bd-bday { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(29,161,255,.4); background: radial-gradient(120% 140% at 0% 0%, rgba(29,161,255,.14), rgba(29,161,255,.03) 60%), #121316; } .bd-bday > i { font-size: 20px; color: #1DA1FF; } .bd-bday b { display: block; color: #FFFFFF; font-size: 13px; font-weight: 600; } .bd-bday span { color: #E4E6EA; font-size: 12px; } html.bd-white body.bd-dark .bd-bday { background: radial-gradient(120% 140% at 0% 0%, #FFF6D1, #FFFFFF 70%); border-color: rgba(168,134,0,.4); } html.bd-white body.bd-dark .bd-bday b { color: #15171C; } html.bd-white body.bd-dark .bd-bday span { color: #3A3E46; } html.bd-white body.bd-dark .bd-bday > i { color: #A88600; } /* birthday card: names readable, today in orange */ html body.bd-dark .bd-bdc .bd-bdc-row:not(#bd-none) { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; color: #E9EBEE !important; -webkit-text-fill-color: #E9EBEE !important; } html body.bd-dark .bd-bdc .bd-bdc-row:not(#bd-none) > span { color: inherit !important; -webkit-text-fill-color: inherit !important; } html body.bd-dark .bd-bdc .bd-bdc-when:not(#bd-none) { font-size: 11px; font-weight: 600 !important; color: #C9CDD3 !important; -webkit-text-fill-color: #C9CDD3 !important; } html body.bd-dark .bd-bdc .bd-bdc-row.is-today:not(#bd-none) > span:first-child { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-weight: 600 !important; } html body.bd-dark .bd-bdc .bd-bdc-row.is-today .bd-bdc-when:not(#bd-none) { color: #1DA1FF !important; -webkit-text-fill-color: #1DA1FF !important; } html body.bd-dark .bd-bdc .bd-bdc-wish:not(#bd-none) { margin-top: 8px; padding: 6px 9px; border-radius: 7px; border: 1px solid rgba(29,161,255,.4); background: rgba(29,161,255,.1); color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-size: 12px; font-weight: 600 !important; } html.bd-white body.bd-dark .bd-bdc .bd-bdc-row:not(#bd-none) { color: #2F333B !important; -webkit-text-fill-color: #2F333B !important; } html.bd-white body.bd-dark .bd-bdc .bd-bdc-when:not(#bd-none) { color: #5B6070 !important; -webkit-text-fill-color: #5B6070 !important; } html.bd-white body.bd-dark .bd-bdc .bd-bdc-row.is-today:not(#bd-none) > span:first-child { color: #15171C !important; -webkit-text-fill-color: #15171C !important; } html.bd-white body.bd-dark .bd-bdc .bd-bdc-row.is-today .bd-bdc-when:not(#bd-none) { color: #8A6D00 !important; -webkit-text-fill-color: #8A6D00 !important; } html.bd-white body.bd-dark .bd-bdc .bd-bdc-wish:not(#bd-none) { background: #FFF6D1; border-color: rgba(168,134,0,.4); color: #15171C !important; -webkit-text-fill-color: #15171C !important; } /* small drawn icons everywhere in the work area (contact icons, table icons ...) in the theme orange */ html body.bd-dark :is(.bd-main, .fixed) svg:is([class*="w-3"], [class*="w-4"], [class*="w-5"], [class*="h-3"], [class*="h-4"], [class*="h-5"], [width="12"], [width="14"], [width="16"], [width="18"], [width="20"]):not(#bd-none):not(#bd-x) { color: #1DA1FF !important; } html.bd-white body.bd-dark :is(.bd-main, .fixed) svg:is([class*="w-3"], [class*="w-4"], [class*="w-5"], [class*="h-3"], [class*="h-4"], [class*="h-5"], [width="12"], [width="14"], [width="16"], [width="18"], [width="20"]):not(#bd-none):not(#bd-x) { color: #A88600 !important; } /* close (x) icons are not delete icons: plain light grey */ html body.bd-dark :is(.bd-main, .fixed) :is(i.fa-times, i.fa-xmark):not(#bd-none):not(#bd-x):not(#bd-y) { color: #C9CDD3 !important; -webkit-text-fill-color: #C9CDD3 !important; } html.bd-white body.bd-dark :is(.bd-main, .fixed) :is(i.fa-times, i.fa-xmark):not(#bd-none):not(#bd-x):not(#bd-y) { color: #5B6070 !important; -webkit-text-fill-color: #5B6070 !important; } /* requisition list: chosen services as small chips */ .rq-svc { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); color: #E9EBEE; white-space: nowrap; } .rq-svc i { font-size: 8px; color: #1DA1FF; } html.bd-white body.bd-dark .rq-svc { border-color: #D3D7DE; color: #2F333B; } html.bd-white body.bd-dark .rq-svc i { color: #A88600; } /* home page: all features */ .lp2 .fx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } .lp2 .fx { padding: 14px; border-radius: 12px; transition: border-color .25s, transform .25s; } .lp2 .fx:hover { border-color: rgba(255,255,255,.10); transform: translateY(-2px); } .lp2 .fx-h { display: flex; align-items: center; color: #fff; font-weight: 600; font-size: 13px; margin-bottom: 8px; } .lp2 .fx ul { list-style: none; margin: 0; padding: 0; } .lp2 .fx li { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.10); } .lp2 .fx li .cico { margin-top: 1px; width: 18px; height: 18px; } .lp2 .fx li .cico svg { width: 11px; height: 11px; } .lp2 .fx li b { display: block; color: #fff; font-weight: 600; font-size: 12px; } .lp2 .fx li span { color: #C9CDD3; font-size: 11.5px; line-height: 1.45; } @media (max-width: 1000px) { .lp2 .fx-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .lp2 .fx-grid { grid-template-columns: 1fr; } } /* ===== table row lines ===== display tables : one quiet line under every row, identical on every cell (no hover changes, no flicker) edit tables : (tables with input boxes - "Add module" / Edit sections; marked .bd-edtable by bdcpm-dark.js) a clearly visible line under every row, cells without boxes until you point at / type in them */ html body.bd-dark .bd-main table tbody > tr > :is(td, th):not(#a):not(#b):not(#c):not(#d) { border-bottom: 1px solid rgba(255,255,255,.10) !important; transition: none !important; } html.bd-white body.bd-dark .bd-main table tbody > tr > :is(td, th):not(#a):not(#b):not(#c):not(#d) { border-bottom: 1px solid #E3E6EB !important; } html body.bd-dark .bd-main table.bd-edtable tbody > tr > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e) { border-bottom: 1px solid #6E727D !important; } html.bd-white body.bd-dark .bd-main table.bd-edtable tbody > tr > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e) { border-bottom: 1px solid #A9AEB7 !important; } html body.bd-dark .bd-main table.bd-edtable tbody :is(input:not([type="checkbox"]):not([type="radio"]), select):not(#a):not(#b) { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; } html body.bd-dark .bd-main table.bd-edtable tbody :is(input:not([type="checkbox"]):not([type="radio"]):not([readonly]), select):not(#a):not(#b):hover { border-color: rgba(255,255,255,.10) !important; } html body.bd-dark .bd-main table.bd-edtable tbody :is(input:not([type="checkbox"]):not([type="radio"]):not([readonly]), select):not(#a):not(#b):focus { border-color: #1DA1FF !important; background-color: #16171B !important; } html.bd-white body.bd-dark .bd-main table.bd-edtable tbody :is(input:not([type="checkbox"]):not([type="radio"]):not([readonly]), select):not(#a):not(#b):hover { border-color: #C4C8CF !important; } html.bd-white body.bd-dark .bd-main table.bd-edtable tbody :is(input:not([type="checkbox"]):not([type="radio"]):not([readonly]), select):not(#a):not(#b):focus { border-color: #A88600 !important; background-color: #FFFFFF !important; } /* ===== steady row lines on every screen (also at 125 % / 150 % Windows scaling) ===== tables draw each cell's own line (separate borders) so 1-pixel lines never drop out while scrolling; no hover colour change on display tables (it looked like flickering) */ html body.bd-dark .bd-main table:not(#a):not(#b) { border-collapse: separate !important; border-spacing: 0 !important; } html body.bd-dark .bd-main table:not(.bd-edtable) tbody > tr:hover > :is(td, th):not(#a):not(#b):not(#c):not(#d) { background-color: inherit !important; } html body.bd-dark .bd-main table:not(.bd-edtable) tbody > tr:not(#a):hover > :is(td, th) { background-image: none !important; } /* edit tables: an unmistakable line under every row and no input boxes until you point at / type in a cell */ html body.bd-dark .bd-main table.bd-edtable tbody > tr > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f) { border-bottom: 1px solid #6E727D !important; box-shadow: inset 0 -1px 0 #6E727D !important; } html.bd-white body.bd-dark .bd-main table.bd-edtable tbody > tr > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f) { border-bottom: 1px solid #A9AEB7 !important; box-shadow: inset 0 -1px 0 #A9AEB7 !important; } html body.bd-dark .bd-main table.bd-edtable tbody :is(input:not([type="checkbox"]):not([type="radio"]), select):not(#a):not(#b):not(#c):not(#d):not(#e) { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; } html body.bd-dark .bd-main table.bd-edtable tbody :is(input:not([type="checkbox"]):not([type="radio"]):not([readonly]), select):not(#a):not(#b):not(#c):not(#d):not(#e):hover { border-color: rgba(255,255,255,.10) !important; } html body.bd-dark .bd-main table.bd-edtable tbody :is(input:not([type="checkbox"]):not([type="radio"]):not([readonly]), select):not(#a):not(#b):not(#c):not(#d):not(#e):focus { border-color: #1DA1FF !important; background-color: #16171B !important; } html.bd-white body.bd-dark .bd-main table.bd-edtable tbody :is(input:not([type="checkbox"]):not([type="radio"]):not([readonly]), select):not(#a):not(#b):not(#c):not(#d):not(#e):hover { border-color: #C4C8CF !important; } html.bd-white body.bd-dark .bd-main table.bd-edtable tbody :is(input:not([type="checkbox"]):not([type="radio"]):not([readonly]), select):not(#a):not(#b):not(#c):not(#d):not(#e):focus { border-color: #A88600 !important; background-color: #FFFFFF !important; } /* ===== final table lines (both Quantity Survey and Material Takeoff, every table): edit tables look exactly like display tables; every cell border side is dark (no white lines) ===== */ html body.bd-dark .bd-main table :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g) { border-top-color: rgba(255,255,255,.10) !important; border-left-color: rgba(255,255,255,.10) !important; border-right-color: rgba(255,255,255,.10) !important; } html body.bd-dark .bd-main table tbody > tr > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g) { border-bottom: 1px solid rgba(255,255,255,.10) !important; box-shadow: none !important; } html body.bd-dark .bd-main table thead :is(th, td):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g) { border-bottom: 1px solid rgba(255,255,255,.10) !important; } html.bd-white body.bd-dark .bd-main table :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g) { border-top-color: #E3E6EB !important; border-left-color: #E3E6EB !important; border-right-color: #E3E6EB !important; } html.bd-white body.bd-dark .bd-main table tbody > tr > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g) { border-bottom: 1px solid #E3E6EB !important; box-shadow: none !important; } html.bd-white body.bd-dark .bd-main table thead :is(th, td):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g) { border-bottom: 1px solid #D3D7DE !important; } /* ===================================================================== TABLES โ€“ GLASS (final, replaces all earlier table looks; display and edit tables alike) translucent dark glass with a soft sheen from the top, quiet lines, smooth row hover with an orange marker ===================================================================== */ html body.bd-dark .bd-main table:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { border-collapse: separate !important; border-spacing: 0 !important; background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 120px), rgba(18,19,23,.55) !important; -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); } html body.bd-dark .bd-main table :is(thead, tbody, tfoot, tr):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background: transparent !important; } html body.bd-dark .bd-main table thead :is(th, td):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background: rgba(255,255,255,.045) !important; color: #C9CDD3 !important; border-top: 0 !important; border-left: 0 !important; border-right: 1px solid rgba(255,255,255,.04) !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; } html body.bd-dark .bd-main table tbody > tr > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background-color: transparent !important; background-image: none !important; box-shadow: none !important; border-top: 0 !important; border-left: 0 !important; border-right: 1px solid rgba(255,255,255,.035) !important; border-bottom: 1px solid rgba(255,255,255,.065) !important; transition: background-color .14s ease, box-shadow .14s ease !important; } html body.bd-dark .bd-main table tbody > tr > :is(td, th):last-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h), html body.bd-dark .bd-main table thead :is(th, td):last-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { border-right: 0 !important; } /* section / floor heading rows and total rows */ html body.bd-dark .bd-main table tbody > tr:is([class*="bg-slate-"], [class*="bg-gray-"], [class*="bg-indigo-"], [class*="bg-blue-"], .group-row, .gp, .grp) > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background-color: rgba(255,255,255,.04) !important; } html body.bd-dark .bd-main table tbody > tr:is([class*="font-bold"], [class*="font-black"]):not(:has(input)) > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background-color: rgba(255,255,255,.03) !important; } /* row hover: a gentle light-up and an orange marker on the left */ html body.bd-dark .bd-main table tbody > tr:hover > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background-color: rgba(255,255,255,.055) !important; } html body.bd-dark .bd-main table tbody > tr:hover > :is(td, th):first-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { box-shadow: inset 2px 0 0 #1DA1FF !important; } /* frozen (sticky) columns stay solid so nothing shows through when you scroll sideways */ html body.bd-dark .bd-main table :is(td, th):is([class*="sticky"], [style*="sticky"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background-color: #15161A !important; } html body.bd-dark .bd-main table tbody > tr:hover > :is(td, th):is([class*="sticky"], [style*="sticky"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background-color: #1D1E23 !important; } /* edit tables: cells without boxes until you point at / type in them */ html body.bd-dark .bd-main table tbody :is(input:not([type="checkbox"]):not([type="radio"]), select):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; transition: border-color .14s, background-color .14s; } html body.bd-dark .bd-main table tbody :is(input:not([type="checkbox"]):not([type="radio"]):not([readonly]), select):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):hover { border-color: rgba(255,255,255,.18) !important; background-color: rgba(255,255,255,.04) !important; } html body.bd-dark .bd-main table tbody :is(input:not([type="checkbox"]):not([type="radio"]):not([readonly]), select):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):focus { border-color: #1DA1FF !important; background-color: rgba(29,161,255,.06) !important; } /* ---- white mode: frosted white glass ---- */ html.bd-white body.bd-dark .bd-main table:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.78) 140px), rgba(255,255,255,.72) !important; } html.bd-white body.bd-dark .bd-main table thead :is(th, td):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background: rgba(15,23,42,.035) !important; color: #5B6070 !important; border-right-color: rgba(15,23,42,.05) !important; border-bottom-color: rgba(15,23,42,.10) !important; } html.bd-white body.bd-dark .bd-main table tbody > tr > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { border-right-color: rgba(15,23,42,.045) !important; border-bottom-color: rgba(15,23,42,.08) !important; } html.bd-white body.bd-dark .bd-main table tbody > tr:is([class*="bg-slate-"], [class*="bg-gray-"], [class*="bg-indigo-"], [class*="bg-blue-"], .group-row, .gp, .grp) > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background-color: rgba(15,23,42,.035) !important; } html.bd-white body.bd-dark .bd-main table tbody > tr:is([class*="font-bold"], [class*="font-black"]):not(:has(input)) > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background-color: rgba(15,23,42,.025) !important; } html.bd-white body.bd-dark .bd-main table tbody > tr:hover > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background-color: rgba(15,23,42,.04) !important; } html.bd-white body.bd-dark .bd-main table tbody > tr:hover > :is(td, th):first-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { box-shadow: inset 2px 0 0 #A88600 !important; } html.bd-white body.bd-dark .bd-main table :is(td, th):is([class*="sticky"], [style*="sticky"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background-color: #FFFFFF !important; } html.bd-white body.bd-dark .bd-main table tbody > tr:hover > :is(td, th):is([class*="sticky"], [style*="sticky"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background-color: #F4F5F8 !important; } html.bd-white body.bd-dark .bd-main table tbody :is(input:not([type="checkbox"]):not([type="radio"]):not([readonly]), select):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):hover { border-color: rgba(15,23,42,.18) !important; background-color: rgba(15,23,42,.03) !important; } html.bd-white body.bd-dark .bd-main table tbody :is(input:not([type="checkbox"]):not([type="radio"]):not([readonly]), select):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):focus { border-color: #A88600 !important; background-color: #FFFFFF !important; } @media (prefers-reduced-motion: reduce) { html body.bd-dark .bd-main table tbody > tr > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { transition: none !important; } } html body.bd-dark .bd-main table tfoot :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background-color: rgba(255,255,255,.05) !important; color: #FFFFFF !important; border-top: 1px solid rgba(255,255,255,.10) !important; border-bottom: 0 !important; border-left: 0 !important; border-right: 1px solid rgba(255,255,255,.035) !important; } html.bd-white body.bd-dark .bd-main table tfoot :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background-color: rgba(15,23,42,.04) !important; color: #15171C !important; border-top-color: rgba(15,23,42,.10) !important; border-right-color: rgba(15,23,42,.045) !important; } /* ---------- Teams page: team trees ---------- */ .th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 12px; margin-bottom: 14px; } @media (max-width: 560px) { .th-grid { grid-template-columns: 1fr; } } .th-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; flex-wrap: wrap; } .th-head > i { color: #1DA1FF; } .th-tree { list-style: none; margin: 0; padding: 0 0 0 20px; position: relative; } .th-tree.th-root { padding-left: 0; } .th-tree li { position: relative; margin: 6px 0; } .th-tree:not(.th-root) > li::before { content: ""; position: absolute; left: -12px; top: -6px; bottom: 50%; width: 10px; border-left: 1px solid rgba(255,255,255,.10); border-bottom: 1px solid rgba(255,255,255,.10); border-bottom-left-radius: 6px; } .th-tree:not(.th-root) > li:not(:last-child)::after { content: ""; position: absolute; left: -12px; top: 50%; bottom: -6px; border-left: 1px solid rgba(255,255,255,.10); } .th-node { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border: 1px solid rgba(255,255,255,.10); border-radius: 8px; background: rgba(255,255,255,.025); } .th-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #2B2D34; color: #1DA1FF; font-weight: 600; font-size: 12px; flex: none; } .th-who { display: flex; flex-direction: column; min-width: 0; flex: 1; } .th-who b { color: #FFFFFF; font-size: 12.5px; font-weight: 600; } .th-who span { color: #C9CDD3; font-size: 11px; } .th-load { font-size: 11px; color: #C9CDD3; white-space: nowrap; } .th-load em { color: #EB5757; font-style: normal; } .th-edit summary { list-style: none; cursor: pointer; padding: 3px 9px !important; font-size: 11px !important; } .th-edit summary::-webkit-details-marker { display: none; } .th-edit[open] { flex-basis: 100%; } .th-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 8px 0 2px; font-size: 11px; } .th-form label { display: flex; flex-direction: column; gap: 3px; color: #C9CDD3; } .th-form input, .th-form select, .th-add input, .th-add select { height: 28px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; min-width: 140px; } .th-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.10); } html.bd-white body.bd-dark .th-node { border-color: #E3E6EB; background: #FFFFFF; } html.bd-white body.bd-dark .th-av { background: #FFF6D1; color: #8A6D00; } html.bd-white body.bd-dark .th-who b { color: #15171C; } html.bd-white body.bd-dark .th-who span, html.bd-white body.bd-dark .th-load, html.bd-white body.bd-dark .th-form label { color: #5B6070; } html.bd-white body.bd-dark .th-tree:not(.th-root) > li::before, html.bd-white body.bd-dark .th-tree:not(.th-root) > li:not(:last-child)::after { border-color: #C4C8CF; } html.bd-white body.bd-dark .th-add { border-top-color: #E3E6EB; } html body.bd-dark .bd-main .th-org ul:not(#a) { list-style: none !important; margin: 0 !important; padding-left: 20px !important; border-left: 1px solid rgba(255,255,255,.10); } html body.bd-dark .bd-main .th-org > ul:not(#a) { padding-left: 0 !important; border-left: 0; } html.bd-white body.bd-dark .bd-main .th-org ul:not(#a) { border-left-color: #C4C8CF; } html body.bd-dark .bd-main .th-sub:not(#a) { border: 1px dashed rgba(29,161,255,.45) !important; background: rgba(29,161,255,.05) !important; } /* ---------- tabs for grouped menu pages (Alerts & Tasks, Monthly Reports, Team) ---------- */ .bd-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid rgba(255,255,255,.10); border-radius: 10px; background: rgba(22,23,27,.62); width: fit-content; max-width: 100%; } .bd-tab { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 7px; color: #C9CDD3; font-size: 12px; font-weight: 400; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; } .bd-tab i { color: #1DA1FF; font-size: 11px; } .bd-tab:hover { background: rgba(255,255,255,.05); color: #FFFFFF; } .bd-tab.on { background: #2B2D34; color: #FFFFFF; font-weight: 600; box-shadow: inset 0 0 0 1px #3A3D45; } .bd-tab-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(29,161,255,.15); color: #1DA1FF; font-size: 10.5px; font-weight: 600; display: inline-grid; place-items: center; } html.bd-white body.bd-dark .bd-tabs { background: #FFFFFF; border-color: #E3E6EB; } html.bd-white body.bd-dark .bd-tab { color: #3A3E46; } html.bd-white body.bd-dark .bd-tab:hover { background: #F1F3F6; color: #15171C; } html.bd-white body.bd-dark .bd-tab.on { background: #111318; color: #FFFFFF; box-shadow: none; } html.bd-white body.bd-dark .bd-tab i { color: #A88600; } html.bd-white body.bd-dark .bd-tab.on i { color: #1DA1FF; } html.bd-white body.bd-dark .bd-tab-n { background: rgba(29,161,255,.2); color: #7A6100; } /* ---------- company organogram (top-down) ---------- */ .og-wrap { overflow-x: auto; padding: 4px 0 8px; } .og { display: flex; justify-content: center; min-width: fit-content; } .og ul { display: flex; justify-content: center; gap: 0; padding: 22px 0 0; margin: 0; position: relative; list-style: none; } .og > ul { padding-top: 0; } .og li { position: relative; padding: 22px 8px 0; display: flex; flex-direction: column; align-items: center; list-style: none; } .og > ul > li { padding-top: 0; } .og li::before, .og li::after { content: ""; position: absolute; top: 0; width: 50%; height: 22px; border-top: 1px solid rgba(255,255,255,.10); } .og li::before { right: 50%; } .og li::after { left: 50%; border-left: 1px solid rgba(255,255,255,.10); } .og li:only-child::before, .og li:only-child::after { border-top: 0; } .og li:only-child::before { display: none; } .og li:first-child::before, .og li:last-child::after { border-top: 0; } .og li:last-child::before { border-right: 1px solid rgba(255,255,255,.10); border-top-right-radius: 6px; } .og li:first-child::after { border-top-left-radius: 6px; } .og > ul > li::before, .og > ul > li::after { display: none; } .og ul ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 22px; border-left: 1px solid rgba(255,255,255,.10); } .og-box { display: block; min-width: 190px; max-width: 260px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.10); border-radius: 10px; background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,.01) 60%), #16171B; text-align: left; text-decoration: none; transition: border-color .15s, transform .15s; } .og-box:hover { border-color: #1DA1FF; transform: translateY(-1px); } .og-h { display: flex; align-items: center; gap: 6px; color: #FFFFFF; font-weight: 600; font-size: 12.5px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.10); } .og-h i { color: #1DA1FF; } .og-h em { margin-left: auto; font-style: normal; font-size: 10.5px; color: #1DA1FF; background: rgba(29,161,255,.12); border-radius: 999px; padding: 0 6px; } .og-via { font-size: 10.5px; color: #1DA1FF; margin-bottom: 4px; } .og-p { padding: 2px 0 2px calc(var(--d, 0) * 12px); font-size: 11.5px; line-height: 1.35; color: #E9EBEE; } .og-p b { font-weight: 600; color: #FFFFFF; } .og-p span { display: block; font-size: 10.5px; color: #C9CDD3; } .th-place { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 10px; font-size: 11.5px; } .th-place label { display: flex; align-items: center; gap: 6px; color: #C9CDD3; flex-wrap: wrap; } .th-place label i { color: #1DA1FF; } .th-place select { height: 28px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; max-width: 280px; } html.bd-white body.bd-dark .og-box { background: radial-gradient(120% 90% at 0% 0%, #FFFFFF, #F6F7F9 70%); border-color: #DADDE3; } html.bd-white body.bd-dark .og-h { color: #15171C; border-bottom-color: #E3E6EB; } html.bd-white body.bd-dark .og-p, html.bd-white body.bd-dark .og-p b { color: #15171C; } html.bd-white body.bd-dark .og-p span, html.bd-white body.bd-dark .th-place label { color: #5B6070; } html.bd-white body.bd-dark :is(.og li::before, .og li::after, .og ul ul::before) { border-color: #B9BEC7; } html.bd-white body.bd-dark :is(.og-h i, .og-via, .th-place label i) { color: #A88600; } /* ===================================================================== macOS (Big Sur) LOOK โ€“ the only theme: Apple system font, colourful wallpaper, frosted translucent windows, white / grey text, small icons in round grey badges, macOS blue accent ===================================================================== */ html, html:has(body.bd-dark) { background: #14183A !important; } html body.bd-dark:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { --z-t1: #FFFFFF; --z-t2: rgba(235,235,245,.80); --z-t3: rgba(235,235,245,.58); --z-line: rgba(255,255,255,.08); --z-line2: rgba(255,255,255,.14); --z-card: rgba(255,255,255,.075); --z-card2: rgba(255,255,255,.11); --z-chip: rgba(255,255,255,.13); --z-acc: #0A84FF; --z-acc2: #1DA1FF; background: #14183A url("../brand/wallpaper.svg") center / cover no-repeat fixed !important; color: rgba(235,235,245,.80) !important; } /* Apple system font everywhere (San Francisco on Mac / iPhone, Segoe UI on Windows), normal weights */ html body.bd-dark *:not(#a):not(#b):not(.fas):not(.far):not(.fab):not(.fa), html body.bd-dark :is(input, button, select, textarea):not(#a):not(#b) { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Arial, sans-serif !important; } html body.bd-dark:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { font-weight: 400 !important; font-size: 13px; } html body.bd-dark :is(p, span, div, td, li, label, input, select, textarea, a, small, em):not(#a) { font-weight: 400; } html body.bd-dark :is(b, strong, h3, h4, h5, th, .font-bold, .font-semibold, .font-extrabold, .font-black, button):not(#a):not(#b) { font-weight: 600 !important; } /* frosted windows: side menu and main panel */ html body.bd-dark .bd-side:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(30,28,34,.45) !important; -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); border-right: 1px solid rgba(255,255,255,.08) !important; } html body.bd-dark .bd-mtop:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(30,28,34,.55) !important; -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); } @media (min-width: 900px) { html body.bd-dark .main-content.bd-main:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(36,34,40,.62) !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 14px !important; -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); box-shadow: 0 40px 100px rgba(0,0,0,.45) !important; } } @media (max-width: 899px) { html body.bd-dark .main-content.bd-main:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(36,34,40,.70) !important; -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); } } /* side menu: 13.5 px items, small icons in round grey badges, blue badge for the open page */ html body.bd-dark .bd-item:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { font-size: 13.5px !important; font-weight: 400 !important; color: #FFFFFF !important; height: 32px !important; gap: 10px !important; border-radius: 8px !important; } html body.bd-dark .bd-item > i:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { width: 24px !important; height: 24px !important; border-radius: 50% !important; display: inline-grid !important; place-items: center; font-size: 11px !important; background: rgba(255,255,255,.13) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; box-shadow: none !important; opacity: 1 !important; } html body.bd-dark .bd-item:hover:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(255,255,255,.08) !important; } html body.bd-dark .bd-item.on:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(10,132,255,.22) !important; font-weight: 400 !important; } html body.bd-dark .bd-item.on > i:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: #0A84FF !important; } html body.bd-dark .bd-item .n:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: rgba(235,235,245,.58) !important; font-size: 11px !important; } html body.bd-dark .bd-mgrp:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: rgba(235,235,245,.55) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0 !important; } html body.bd-dark .bd-gico:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { display: none !important; } /* text */ html body.bd-dark .bd-main :is(h1, h2):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: #FFFFFF !important; font-weight: 500 !important; letter-spacing: -0.01em; } html body.bd-dark .bd-main h2.text-lg:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { font-size: 24px !important; } html body.bd-dark .bd-main :is(.text-slate-900, .text-slate-800, .text-gray-900, .text-gray-800):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: #FFFFFF !important; } html body.bd-dark .bd-main :is(.text-slate-700, .text-slate-600, .text-gray-700, .text-gray-600):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: rgba(235,235,245,.80) !important; } html body.bd-dark .bd-main :is(.text-slate-500, .text-slate-400, .text-gray-500, .text-gray-400):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: rgba(235,235,245,.58) !important; } /* icons: small, white, round grey badge where they lead a title; delete icons stay red */ html body.bd-dark :is(.bd-main, .fixed) :is(i.fas, i.far, i.fa):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i), html body.bd-dark .bd-main :is(button, a, label, h1, h2, h3, h4, th, .section-title) > svg:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: rgba(255,255,255,.92) !important; -webkit-text-fill-color: rgba(255,255,255,.92) !important; } html body.bd-dark .bd-main :is(.section-title, h3, h4) > i:first-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { width: 26px; height: 26px; border-radius: 50%; display: inline-grid !important; place-items: center; font-size: 11px !important; background: rgba(255,255,255,.13); margin-right: 4px; } html body.bd-dark .bd-main :is(.kpi-card .kpi-icon):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { border-radius: 50% !important; background: rgba(255,255,255,.13) !important; color: #FFFFFF !important; } html body.bd-dark .bd-main .kpi-card .kpi-icon i:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } html body.bd-dark :is(.bd-main, .fixed) :is(i.fa-trash, i.fa-trash-alt, i.fa-ban, button[class*="rose"] i, button[class*="red-"] i):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: #FF9B94 !important; -webkit-text-fill-color: #FF9B94 !important; } html body.bd-dark .bd-hico:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: rgba(255,255,255,.92) !important; } /* cards / panels: soft translucent boxes, 8 px corners, no glow */ html body.bd-dark .bd-main :is(.bg-white, .kpi-card, .link-card, .dash-header, .bd-alerts, .th-card):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(255,255,255,.075) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 10px !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; } html body.bd-dark .bd-main :is([class*="bg-slate-50"], [class*="bg-gray-50"], [class*="bg-slate-100"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background-color: rgba(255,255,255,.05) !important; } /* tables on the frosted panel */ html body.bd-dark .bd-main table:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; } html body.bd-dark .bd-main table thead :is(th, td):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(255,255,255,.04) !important; color: rgba(235,235,245,.58) !important; font-size: 11.5px !important; border-bottom: 1px solid rgba(255,255,255,.14) !important; border-right: 0 !important; } html body.bd-dark .bd-main table tbody > tr > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { border-bottom: 1px solid rgba(255,255,255,.08) !important; border-right: 0 !important; color: #FFFFFF; } html body.bd-dark .bd-main table tbody > tr:hover > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background-color: rgba(255,255,255,.07) !important; } html body.bd-dark .bd-main table tbody > tr:hover > :is(td, th):first-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { box-shadow: inset 2px 0 0 #0A84FF !important; } html body.bd-dark .bd-main table :is(td, th):is([class*="sticky"], [style*="sticky"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background-color: #2B2930 !important; } html body.bd-dark .bd-main table tbody > tr:is([class*="bg-slate-"], [class*="bg-gray-"], [class*="bg-indigo-"], [class*="bg-blue-"], .group-row, .gp, .grp) > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background-color: rgba(255,255,255,.035) !important; color: rgba(235,235,245,.58) !important; } html body.bd-dark .bd-main table :is(td, th).bd-conc:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i), html body.bd-dark .bd-main table .bd-conc :is(input, b, span, a):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: #FFB340 !important; -webkit-text-fill-color: #FFB340 !important; } html body.bd-dark .bd-main table :is(td, th).bd-form:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i), html body.bd-dark .bd-main table .bd-form :is(input, b, span, a):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: #FF9B94 !important; -webkit-text-fill-color: #FF9B94 !important; } html body.bd-dark .bd-main table th.bd-conc::before, html body.bd-dark .bd-main table th.bd-form::before { content: none !important; } /* inputs */ html body.bd-dark :is(.bd-main, .fixed) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]), select, textarea):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background-color: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 6px !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } html body.bd-dark :is(.bd-main, .fixed) :is(input, select, textarea):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):focus { border-color: #0A84FF !important; box-shadow: 0 0 0 3px rgba(10,132,255,.30) !important; outline: none; } html body.bd-dark .bd-main table tbody :is(input:not([type="checkbox"]):not([type="radio"]), select):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background-color: transparent !important; border-color: transparent !important; } html body.bd-dark .bd-main table tbody :is(input:not([type="checkbox"]):not([type="radio"]):not([readonly]), select):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):hover { border-color: rgba(255,255,255,.18) !important; } html body.bd-dark .bd-main table tbody :is(input:not([type="checkbox"]):not([type="radio"]):not([readonly]), select):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):focus { border-color: #0A84FF !important; background-color: rgba(10,132,255,.10) !important; } html body.bd-dark ::placeholder { color: rgba(235,235,245,.42) !important; -webkit-text-fill-color: rgba(235,235,245,.42) !important; } html body.bd-dark input[type="checkbox"], html body.bd-dark input[type="radio"] { accent-color: #0A84FF !important; } /* buttons: blue main button, grey normal button, red delete โ€“ 6 px corners like macOS */ html body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button, input[type="submit"], input[type="button"], label):is([class~="bg-indigo-600"], [class~="bg-indigo-500"], [class~="bg-indigo-700"], [class~="bg-emerald-600"], [class~="bg-emerald-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-amber-500"], [class~="bg-amber-600"], [class~="bg-teal-600"], [class~="bg-violet-600"], [class~="bg-sky-600"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: #0A84FF !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; } html body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button, input[type="submit"], input[type="button"], label):is([class~="bg-indigo-600"], [class~="bg-indigo-500"], [class~="bg-indigo-700"], [class~="bg-emerald-600"], [class~="bg-emerald-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-amber-500"], [class~="bg-amber-600"], [class~="bg-teal-600"], [class~="bg-violet-600"], [class~="bg-sky-600"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) :is(i, svg, span) { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } html body.bd-dark :is(.bd-main, .fixed, .bd-chat, [role="dialog"]) :is(a, button, input[type="submit"], input[type="button"], label):is([class~="bg-indigo-600"], [class~="bg-indigo-500"], [class~="bg-blue-600"], [class~="bg-emerald-600"], [class~="bg-amber-500"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):hover { background: #2B95FF !important; } html body.bd-dark :is(.bd-main, .fixed) :is(.btn-edit-module, .btn-action-edit, .tm-edit, .mrs-month, .book-tab):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i), html body.bd-dark :is(.bd-main, .fixed) :is(a, button):is([class~="bg-white"], [class~="bg-slate-100"], [class~="bg-slate-50"], [class~="bg-indigo-50"], [class~="bg-emerald-50"], [class~="bg-blue-50"], [class~="bg-amber-50"], [class~="bg-slate-700"], [class~="bg-slate-800"], [class~="bg-slate-600"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(255,255,255,.12) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; } html body.bd-dark :is(.bd-main, .fixed) :is(.btn-edit-module, .btn-action-edit, .tm-edit, .mrs-month, .book-tab):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):hover { background: rgba(255,255,255,.18) !important; } html body.bd-dark :is(.bd-main, .fixed) :is(.mrs-month, .book-tab).is-active:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: #0A84FF !important; color: #FFFFFF !important; } html body.bd-dark :is(.bd-main, .fixed) :is(a, button):is([class~="bg-rose-50"], [class~="bg-red-50"], [class~="bg-rose-100"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(255,105,97,.12) !important; color: #FF9B94 !important; -webkit-text-fill-color: #FF9B94 !important; border: 0 !important; border-radius: 6px !important; } html body.bd-dark :is(.bd-main, .fixed) :is(a, button):is([class~="bg-rose-600"], [class~="bg-rose-500"], [class~="bg-red-600"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: #FF453A !important; color: #FFFFFF !important; border: 0 !important; border-radius: 6px !important; } html body.bd-dark .btn-scroll-top:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(255,255,255,.14) !important; color: #FFFFFF !important; border: 0 !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } /* tabs and segmented controls like macOS */ html body.bd-dark .bd-tabs:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(255,255,255,.08) !important; border: 0 !important; border-radius: 8px !important; padding: 3px !important; } html body.bd-dark .bd-tab:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: rgba(235,235,245,.80) !important; height: 28px !important; border-radius: 6px !important; font-size: 13px !important; } html body.bd-dark .bd-tab.on:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(255,255,255,.18) !important; color: #FFFFFF !important; box-shadow: 0 1px 2px rgba(0,0,0,.25) !important; font-weight: 600 !important; } html body.bd-dark .bd-tab i:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: rgba(255,255,255,.9) !important; } html body.bd-dark .bd-tab-n:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: #0A84FF !important; color: #FFFFFF !important; } html body.bd-dark .project-nav .pn-link:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: rgba(235,235,245,.80) !important; } html body.bd-dark .project-nav .pn-link.is-active:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(255,255,255,.18) !important; color: #FFFFFF !important; box-shadow: none !important; } html body.bd-dark .project-nav .pn-menu > ul:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(40,38,44,.92) !important; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,.12) !important; border-radius: 10px !important; } html body.bd-dark .project-nav .bd-chat-fab:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: #0A84FF !important; color: #FFFFFF !important; border: 0 !important; } /* status chips, alert tags, pop-ups, chat, notifications */ html body.bd-dark .bd-main span[class*="rounded"]:is([class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-indigo-"], [class*="bg-blue-"], [class*="bg-amber-"], [class*="bg-violet-"], [class*="bg-sky-"], [class*="bg-slate-"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(255,255,255,.12) !important; color: rgba(235,235,245,.85) !important; border: 0 !important; border-radius: 999px !important; } html body.bd-dark .bd-tag-7:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: #FFD60A !important; background: rgba(255,214,10,.14) !important; border: 0 !important; } html body.bd-dark .bd-tag-15:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: #FF9B94 !important; background: rgba(255,105,97,.14) !important; border: 0 !important; } html body.bd-dark .bd-tag-ok:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: rgba(235,235,245,.8) !important; background: rgba(255,255,255,.12) !important; border: 0 !important; } html body.bd-dark .fixed.inset-0 > :is(div, form):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i), html body.bd-dark :is(.bd-chat, .bd-notes):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(40,38,44,.80) !important; -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255,255,255,.14) !important; border-radius: 12px !important; } html body.bd-dark .fixed.inset-0[class*="bg-"]:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background-color: rgba(0,0,0,.35) !important; } html body.bd-dark .bd-alerts-h h3:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i), html body.bd-dark .bd-alert b:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: #FFFFFF !important; } html body.bd-dark .bd-bday:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(255,255,255,.075) !important; border: 1px solid rgba(255,255,255,.08) !important; } html body.bd-dark .bd-bday > i:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: #FFD60A !important; } html body.bd-dark .bd-bell .dot:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: #FF453A !important; } html body.bd-dark :is(.og-box, .th-node):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(255,255,255,.075) !important; border-color: rgba(255,255,255,.10) !important; } html body.bd-dark .og-box:hover:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { border-color: #0A84FF !important; } html body.bd-dark :is(.og-h i, .og-via, .th-head > i, .th-place label i, .th-sub i, .th-under i):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { color: #1DA1FF !important; } html body.bd-dark .th-av:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { background: rgba(255,255,255,.13) !important; color: #FFFFFF !important; } /* scroll bars */ html:has(body.bd-dark) { scrollbar-color: rgba(255,255,255,.25) transparent !important; } html body.bd-dark *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22) !important; border-radius: 8px; } html body.bd-dark *::-webkit-scrollbar-track, html body.bd-dark *::-webkit-scrollbar { background: transparent !important; } /* home page and sign-in pages: same font and blue accent */ .lp2 .cico:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i) { --c: #1DA1FF !important; } /* darker frosted glass so text always reads well over the bright wallpaper (like the reference window) */ html body.bd-dark:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j) { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Arial, sans-serif !important; } @media (min-width: 900px) { html body.bd-dark .main-content.bd-main:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j) { background: rgba(34,32,38,.84) !important; } } @media (max-width: 899px) { html body.bd-dark .main-content.bd-main:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j) { background: rgba(34,32,38,.88) !important; } } html body.bd-dark .bd-side:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j) { background: rgba(28,26,32,.62) !important; } html body.bd-dark .bd-main :is(.bg-white, .kpi-card, .link-card, .dash-header, .bd-alerts, .th-card):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j) { background: rgba(255,255,255,.07) !important; } html body.bd-dark .bd-main :is([class*="text-rose-"], [class*="text-red-"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j) { color: #FF9B94 !important; } html body.bd-dark .th-load em:not(#a) { color: #FF9B94 !important; } /* ---- 21 Oct fixes ---- */ /* main panel sits flush at the top (no strip of wallpaper above it) */ @media (min-width: 900px) { html body.bd-dark .main-content.bd-main:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { margin-top: 0 !important; margin-bottom: 0 !important; border-top: 0 !important; border-bottom: 0 !important; border-radius: 0 !important; min-height: 100vh; box-shadow: none !important; } } /* only real group rows (bg-slate-50 / -100 ...) are grey; rows that merely change colour on hover stay normal */ html body.bd-dark .bd-main table tbody > tr:not(.group-row):not(.gp):not(.grp):not([class~="bg-slate-50"]):not([class~="bg-slate-100"]):not([class~="bg-slate-200"]):not([class~="bg-gray-50"]):not([class~="bg-gray-100"]):not([class~="bg-indigo-50"]):not([class~="bg-blue-50"]) > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { background-color: transparent !important; color: #FFFFFF; } html body.bd-dark .bd-main table tbody > tr:not(.group-row):not(.gp):not(.grp):not([class~="bg-slate-50"]):not([class~="bg-slate-100"]):not([class~="bg-slate-200"]):not([class~="bg-gray-50"]):not([class~="bg-gray-100"]):not([class~="bg-indigo-50"]):not([class~="bg-blue-50"]):hover > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { background-color: rgba(255,255,255,.07) !important; } html body.bd-dark .bd-main table tbody > tr > td:is(.text-slate-800, .text-slate-900, .font-bold):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { color: #FFFFFF !important; } /* Ongoing Projects: project name white and a little bigger, the line under it grey */ html body.bd-dark .bd-main table tbody > tr > td.font-bold.text-slate-800:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { font-size: 14px !important; } html body.bd-dark .bd-main table tbody > tr > td.font-bold.text-slate-800 > div:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { color: rgba(235,235,245,.58) !important; font-size: 11px !important; font-weight: 400 !important; } /* side menu: a little smaller; log out as an icon next to the profile */ html body.bd-dark .bd-item:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { font-size: 12.5px !important; height: 30px !important; } html body.bd-dark .bd-me-row:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { display: flex; align-items: center; gap: 6px; } html body.bd-dark .bd-me-row .bd-me:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { flex: 1; min-width: 0; } html body.bd-dark .bd-out-ico:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.13); color: #FFFFFF; text-decoration: none; } html body.bd-dark .bd-out-ico:hover:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { background: rgba(255,69,58,.85); } html body.bd-dark .bd-out-ico i:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { font-size: 12px; color: #FFFFFF !important; } /* no black boxes anywhere: frosted grey like the rest of the theme */ html body.bd-dark input[type="file"]::file-selector-button { background: rgba(255,255,255,.14) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 6px !important; font-weight: 600 !important; text-transform: none !important; } html body.bd-dark :is(option, optgroup) { background: #2C2A30 !important; color: #FFFFFF !important; } html body.bd-dark :is(.bd-main, .fixed, [role="dialog"]) .module-head:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { background: rgba(255,255,255,.05) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; color: #FFFFFF !important; } html body.bd-dark .bd-main a:is([class*="border-b-2"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { background: rgba(255,255,255,.08) !important; color: rgba(235,235,245,.85) !important; border: 0 !important; border-radius: 6px !important; margin-right: 4px; } html body.bd-dark .bd-main a:is([class*="border-b-2"]):is([class*="border-indigo"], [class*="text-indigo"], .is-active, [aria-current]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { background: rgba(255,255,255,.20) !important; color: #FFFFFF !important; } html body.bd-dark .bd-main a:is([class*="border-b-2"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) i { color: #FFFFFF !important; } html body.bd-dark :is(.bd-main, .fixed) .dr-check:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #FFFFFF !important; border-radius: 6px !important; } html body.bd-dark :is(.bd-main, .fixed) .dr-check:has(input:checked):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { background: rgba(10,132,255,.22) !important; border-color: #0A84FF !important; } html body.bd-dark :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]), select, textarea):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { background-color: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border-radius: 6px !important; } html body.bd-dark .bd-main table tbody :is(input:not([type="checkbox"]):not([type="radio"]), select):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(:focus) { background-color: transparent !important; border-color: transparent !important; } html body.bd-dark :is(.bd-main, .fixed) :is(button, a, label):is([class*="bg-slate-2"], [class*="bg-slate-3"], [class*="border-amber"], [class*="border-slate-300"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { background: rgba(255,255,255,.12) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 6px !important; } html body.bd-dark .bd-main button:is([class*="rounded-full"])[class*="absolute"]:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { background: rgba(255,255,255,.16) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #FFFFFF !important; } /* pop-ups moved under : frosted window on a dimmed, blurred backdrop, centred on the screen */ body.bd-dark > .fixed.inset-0:is([class*="bg-slate-9"], [class*="bg-black"], [class*="bg-gray-9"], [role="dialog"]):not(.pointer-events-none):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { background: rgba(10,8,14,.45) !important; } body.bd-dark > .fixed.inset-0 > :is(div, form):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { background: rgba(40,38,44,.86) !important; color: rgba(235,235,245,.85); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255,255,255,.14) !important; border-radius: 12px !important; box-shadow: 0 30px 80px rgba(0,0,0,.5) !important; } body.bd-dark > .fixed :is(h2, h3, h4, label, b, strong):not(#a):not(#b) { color: #FFFFFF !important; } body.bd-dark > .fixed :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k) { background-color: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border-radius: 6px !important; } /* main panel: rounded window again, with a small gap to the wallpaper all round */ @media (min-width: 900px) { html body.bd-dark .main-content.bd-main:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l) { margin-top: 10px !important; margin-right: 10px !important; margin-bottom: 10px !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 14px !important; min-height: calc(100vh - 20px) !important; overflow: hidden; } } /* calmer text sizes: page titles, notes and names in tables */ html body.bd-dark .bd-main :is(h2.text-lg, h1):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l) { font-size: 21px !important; font-weight: 500 !important; } html body.bd-dark .bd-main :is([class*="bg-indigo-50"], [class*="bg-blue-50"], [class*="bg-amber-50"], [class*="bg-sky-50"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(button):not(a):not(span) { font-weight: 400 !important; font-size: 12.5px !important; } html body.bd-dark .bd-main :is([class*="bg-indigo-50"], [class*="bg-blue-50"], [class*="bg-amber-50"], [class*="bg-sky-50"]):not(button):not(a):not(span) *:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l) { font-weight: 400 !important; } html body.bd-dark .bd-main table tbody td:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l) { font-size: 13px !important; } html body.bd-dark .bd-main table tbody td:is([class*="text-[14px]"], [class*="text-[15px]"], [class*="text-sm"], [class*="text-base"], .font-bold):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l) { font-size: 13px !important; font-weight: 600 !important; } html body.bd-dark .bd-main table tbody td :is([class*="text-[14px]"], [class*="text-[15px]"], [class*="text-[16px]"], [class*="text-sm"], [class*="text-base"], [class*="text-lg"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l) { font-size: 13px !important; } html body.bd-dark .bd-main table tbody > tr > td.font-bold.text-slate-800:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l) { font-size: 13.5px !important; } /* ---------- 21 Oct (b) ---------- */ /* quantity colours with strong contrast on the dark glass: concrete bright amber, formwork light coral, both semibold */ html body.bd-dark .bd-main table :is(td, th).bd-conc:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m), html body.bd-dark .bd-main table .bd-conc :is(input, b, span, a):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m) { color: #FFD166 !important; -webkit-text-fill-color: #FFD166 !important; font-weight: 600 !important; } html body.bd-dark .bd-main table :is(td, th).bd-form:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m), html body.bd-dark .bd-main table .bd-form :is(input, b, span, a):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m) { color: #FFADA8 !important; -webkit-text-fill-color: #FFADA8 !important; font-weight: 600 !important; } /* names in the lists (requisitions, client accounts, ongoing projects) a little smaller */ html body.bd-dark .bd-main table tbody > tr > td:first-child :is(b, strong, .font-bold, .font-semibold, a, span):not(.chip):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m), html body.bd-dark .bd-main table tbody > tr > td.font-bold.text-slate-800:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m) { font-size: 13px !important; } html body.bd-dark .bd-main table tbody > tr > td:nth-child(2) :is(b, strong, .font-bold):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m) { font-size: 13px !important; } /* back-to-top button: always at the bottom right of the window (moved under by the script) */ body.bd-dark > .btn-scroll-top:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m) { position: fixed !important; right: 22px !important; bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important; z-index: 80 !important; } /* phone top bar: dark frosted like the windows */ @media (max-width: 899px) { html body.bd-dark .bd-mtop:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m) { background: rgba(28,26,32,.78) !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; } } /* ---------- projects on the map ---------- */ .bdm-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; margin-bottom: 18px; } .bdm-mapbox, .bdm-list { border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); padding: 12px; position: relative; min-width: 0; } .bdm-svg { width: 100%; height: auto; display: block; max-height: 640px; } .bdm-d { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.30); stroke-width: 1; stroke-linejoin: round; transition: fill .15s; } .bdm-d:hover { fill: rgba(255,255,255,.16); } .bdm-d.has { fill: rgba(10,132,255,.22); stroke: rgba(120,180,255,.55); } .bdm-d.has:hover, .bdm-d.sel { fill: rgba(10,132,255,.40); } .bdm-dl { fill: rgba(235,235,245,.40); font-size: 10.5px; text-anchor: middle; pointer-events: none; } .bdm-pin { cursor: pointer; } .bdm-pin .h { fill: rgba(10,132,255,.25); animation: bdmPulse 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; } .bdm-pin .c { fill: #0A84FF; stroke: #FFFFFF; stroke-width: 2.5; } .bdm-pin.guess .c { fill: rgba(10,132,255,.35); stroke-dasharray: 4 3; } .bdm-pin .n { fill: #FFFFFF; font-size: 15px; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; } .bdm-pin .l { fill: #FFFFFF; font-size: 14px; font-weight: 600; paint-order: stroke; stroke: rgba(20,18,24,.85); stroke-width: 4px; pointer-events: none; } .bdm-pin:hover .c, .bdm-pin.on .c { fill: #FFD60A; } .bdm-pin:hover .n, .bdm-pin.on .n { fill: #1D1D1F; } @keyframes bdmPulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .bdm-pin .h { animation: none; } } .bdm-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 200px; max-width: 280px; padding: 10px 12px; border-radius: 10px; background: rgba(40,38,44,.95); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 16px 40px rgba(0,0,0,.45); display: none; font-size: 12px; color: rgba(235,235,245,.85); } .bdm-tip b { color: #FFFFFF; font-size: 13px; } .bdm-tip span { display: block; color: rgba(235,235,245,.58); font-size: 11.5px; } .bdm-tip div { margin-top: 5px; color: #FFFFFF; } .bdm-legend { display: flex; gap: 14px; flex-wrap: wrap; color: rgba(235,235,245,.6); font-size: 11.5px; margin-top: 6px; } .bdm-legend span { display: inline-flex; align-items: center; gap: 6px; } .bdm-legend i { width: 11px; height: 11px; border-radius: 50%; background: #0A84FF; border: 2px solid #fff; } .bdm-legend i.g { background: rgba(10,132,255,.35); border-style: dashed; } .bdm-credit { color: rgba(235,235,245,.42); font-size: 10.5px; margin-top: 4px; } .bdm-list { display: flex; flex-direction: column; gap: 8px; max-height: 700px; overflow-y: auto; } .bdm-g { border-radius: 8px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); } .bdm-g.on { border-color: #0A84FF; background: rgba(10,132,255,.10); } .bdm-g > button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 12px; border: 0; background: none; color: #FFFFFF; font: inherit; cursor: pointer; text-align: left; } .bdm-g > button i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.13); font-size: 11px; } .bdm-g.miss > button i { color: #FFD60A; } .bdm-g > button b { font-size: 13px; font-weight: 600; } .bdm-g > button em { margin-left: auto; font-style: normal; color: rgba(235,235,245,.58); font-size: 12px; } .bdm-pr { display: block; padding: 7px 12px 7px 45px; border-top: 1px solid rgba(255,255,255,.08); text-decoration: none; } .bdm-pr:hover { background: rgba(255,255,255,.05); } .bdm-pr b { display: block; color: #FFFFFF; font-size: 12.5px; font-weight: 600; } .bdm-pr small { color: rgba(235,235,245,.58); font-size: 11.5px; } .bdm-empty { color: rgba(235,235,245,.58); padding: 20px; text-align: center; } @media (max-width: 980px) { .bdm-grid { grid-template-columns: 1fr; } .bdm-list { max-height: none; } } /* small badges inside table cells (e.g. "Email ยท by BRAC") stay small */ html body.bd-dark .bd-main table tbody td span:is([class*="text-[9px]"], [class*="text-[10px]"], [class*="text-[11px]"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n), html body.bd-dark .bd-main table tbody td span[class*="rounded"][class*="px-1"]:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n) { font-size: 10.5px !important; font-weight: 600 !important; } html body.bd-dark .bd-main table tbody td span:is([class*="text-[9px]"], [class*="text-[10px]"]) i:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n) { font-size: 9px !important; } /* map details box: solid, readable */ html body.bd-dark .bdm-tip:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n) { background: rgba(28,26,32,.97) !important; border: 1px solid rgba(255,255,255,.18) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } /* the 10 px gap around the window shows the wallpaper (the panel's margin no longer pushes the page down, which left a dark strip at the top and bottom) */ html body.bd-dark .wrapper.bd-app:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n), html body.bd-dark:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n) { display: flow-root !important; } html:has(body.bd-dark) { background: #14183A url("../brand/wallpaper.svg") center / cover no-repeat fixed !important; } /* table cells are never boxes (cells with a white background class were drawn as rounded cards) */ html body.bd-dark .bd-main table :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o) { border-radius: 0 !important; border-top: 0 !important; border-left: 0 !important; box-shadow: none !important; } html body.bd-dark .bd-main table :is(td, th):is([class~="bg-white"], [class*="bg-slate-50"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o) { background-color: transparent !important; } html body.bd-dark .bd-main table tbody > tr:hover > :is(td, th):is([class~="bg-white"], [class*="bg-slate-50"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o) { background-color: rgba(255,255,255,.07) !important; } html body.bd-dark .bd-main table :is(td, th)[class*="border-r"]:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o) { border-right: 1px solid rgba(255,255,255,.06) !important; } /* the same page top everywhere: tabs (if any), then section label + title at the same distance */ html body.bd-dark .bd-tabs-wrap:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o) { padding-top: 22px !important; } html body.bd-dark .bd-tabs-wrap + *:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o) { padding-top: 0 !important; } html body.bd-dark .bd-tabs-wrap + * > .bd-ph:first-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o), html body.bd-dark .bd-tabs-wrap + * > :first-child > .bd-ph:first-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o) { margin-top: 18px !important; } html body.bd-dark .bd-main > :not(.bd-tabs-wrap):first-child > .bd-ph:first-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o), html body.bd-dark .bd-main > :not(.bd-tabs-wrap):first-child > :first-child > .bd-ph:first-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o) { margin-top: 10px !important; } html body.bd-dark .bd-ph:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o) { margin-bottom: 16px !important; } /* ---------- 22 Oct ---------- */ /* all inputs: soft light border, never black */ html body.bd-dark :is(.bd-main, body > .fixed) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]), select, textarea):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { border-color: rgba(255,255,255,.14) !important; outline: none; } html body.bd-dark .bd-main table tbody :is(input:not([type="checkbox"]):not([type="radio"]), select):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { border-color: transparent !important; } html body.bd-dark .bd-main table tbody :is(input:not([type="checkbox"]):not([type="radio"]):not([readonly]), select):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):hover { border-color: rgba(255,255,255,.20) !important; } html body.bd-dark :is(.bd-main, body > .fixed) :is(input, select, textarea):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):focus { border-color: #0A84FF !important; } /* table rows and frames: soft light lines only */ html body.bd-dark .bd-main :is(tr, h6, div, section, [class*="border"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { border-color: rgba(255,255,255,.10); } /* frozen (sticky) header and first-column cells: frosted, not black */ html body.bd-dark .bd-main table :is(td, th):is([class*="sticky"], [style*="sticky"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p), html body.bd-dark .bd-main table thead :is(th, td):is([class*="sticky"], [style*="sticky"], [class*="left-0"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { background-color: rgba(52,46,58,.88) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } html body.bd-dark .bd-main table thead :is(th, td)[class*="bg-slate-9"]:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p), html body.bd-dark .bd-main table thead :is(th, td)[class*="bg-slate-8"]:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { background-color: rgba(52,46,58,.88) !important; } /* tables and inputs inside pop-ups (e.g. Project Rates) look like the page tables */ body.bd-dark > .fixed table:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { background: transparent !important; border-collapse: separate !important; border-spacing: 0 !important; } body.bd-dark > .fixed table thead :is(th, td):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { background: rgba(255,255,255,.06) !important; color: rgba(235,235,245,.62) !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.14) !important; } body.bd-dark > .fixed table tbody :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; color: #FFFFFF !important; } body.bd-dark > .fixed table tbody tr:hover > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { background: rgba(255,255,255,.07) !important; } body.bd-dark > .fixed table tbody :is(input, select):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { background: transparent !important; border: 1px solid transparent !important; border-radius: 6px !important; box-shadow: none !important; } body.bd-dark > .fixed table tbody :is(input, select):not([readonly]):not([disabled]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):hover { border-color: rgba(255,255,255,.20) !important; } body.bd-dark > .fixed table tbody :is(input, select):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):focus { border-color: #0A84FF !important; background: rgba(10,132,255,.10) !important; } body.bd-dark > .fixed :is([class*="border-b"], [class*="border-t"], .border):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { border-color: rgba(255,255,255,.10) !important; } body.bd-dark > .fixed > :is(div, form) > :first-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { background: transparent !important; } /* project sub-menu (drop-down): solid enough to read */ html body.bd-dark .project-nav .pn-menu > ul:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { background: rgba(32,30,36,.97) !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: 0 18px 40px rgba(0,0,0,.45) !important; } html body.bd-dark .project-nav .pn-item:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { color: #FFFFFF !important; } html body.bd-dark .project-nav .pn-item:hover:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p), html body.bd-dark .project-nav .pn-item.is-active:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { background: rgba(10,132,255,.25) !important; color: #FFFFFF !important; } /* every page uses the full width of the window */ html body.bd-dark .bd-main :is(.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-screen-xl, .max-w-screen-2xl):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { max-width: none !important; } @media (max-width: 899px) { html body.bd-dark .main-content.bd-main:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { min-height: calc(100vh - 56px) !important; } } /* list pages as cards: long cards on a wide screen, stacked cards on a phone */ html body.bd-dark .bd-main table.bd-cards:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { border-collapse: separate !important; border-spacing: 0 8px !important; background: transparent !important; } html body.bd-dark .bd-main table.bd-cards thead :is(th, td):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { background: transparent !important; border: 0 !important; padding-top: 2px !important; padding-bottom: 2px !important; } html body.bd-dark .bd-main table.bd-cards tbody > tr > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { background-color: rgba(255,255,255,.07) !important; border: 0 !important; border-top: 1px solid rgba(255,255,255,.08) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; padding-top: 12px !important; padding-bottom: 12px !important; } html body.bd-dark .bd-main table.bd-cards tbody > tr > :is(td, th):first-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { border-left: 1px solid rgba(255,255,255,.08) !important; border-radius: 10px 0 0 10px !important; } html body.bd-dark .bd-main table.bd-cards tbody > tr > :is(td, th):last-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { border-right: 1px solid rgba(255,255,255,.08) !important; border-radius: 0 10px 10px 0 !important; } html body.bd-dark .bd-main table.bd-cards tbody > tr:hover > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { background-color: rgba(255,255,255,.11) !important; } html body.bd-dark .bd-main table.bd-cards tbody > tr:hover > :is(td, th):first-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { box-shadow: inset 3px 0 0 #0A84FF !important; } html body.bd-dark .bd-main :has(> table.bd-cards):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p), html body.bd-dark .bd-main :has(> div > table.bd-cards):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } @media (max-width: 760px) { html body.bd-dark .bd-main table.bd-cards:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p), html body.bd-dark .bd-main table.bd-cards tbody:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { display: block !important; width: 100% !important; min-width: 0 !important; } html body.bd-dark .bd-main table.bd-cards thead:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { display: none !important; } html body.bd-dark .bd-main table.bd-cards tbody > tr:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); } html body.bd-dark .bd-main table.bd-cards tbody > tr > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { display: block !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; white-space: normal !important; text-align: left !important; min-width: 0 !important; box-shadow: none !important; } html body.bd-dark .bd-main table.bd-cards tbody > tr > :is(td, th)[data-label]:not([data-label=""]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p)::before { content: attr(data-label); display: block; font-size: 10.5px; color: rgba(235,235,245,.55); margin-bottom: 2px; font-weight: 400; } html body.bd-dark .bd-main table.bd-cards tbody > tr > :is(td, th):first-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { grid-column: 1 / -1; font-size: 14px; } html body.bd-dark .bd-main table.bd-cards tbody > tr > :is(td, th):last-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { grid-column: 1 / -1; } html body.bd-dark .bd-main table.bd-cards tbody > tr > :is(td, th):last-child > :is(div, span):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { justify-content: flex-start !important; } html body.bd-dark .bd-main table.bd-cards tbody > tr > td[colspan]:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { grid-column: 1 / -1; } } html body.bd-dark:not(#a) { --k-line: rgba(255,255,255,.10); --k-line-2: rgba(255,255,255,.14); } @media (max-width: 760px) { html body.bd-dark .bd-main table.bd-cards tbody > tr > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p) { overflow-wrap: anywhere; word-break: break-word; } } body.bd-dark > .fixed table tbody :is(input, select):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s) { border-color: transparent !important; background-color: transparent !important; box-shadow: none !important; } body.bd-dark > .fixed table tbody :is(input, select):not([readonly]):not([disabled]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):hover { border-color: rgba(255,255,255,.20) !important; } body.bd-dark > .fixed table tbody :is(input, select):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):focus { border-color: #0A84FF !important; background-color: rgba(10,132,255,.10) !important; } /* ---------- 22 Oct (b) ---------- */ /* inputs, text boxes and drop-downs inside any table: flat, no boxes until you point at / type in them (Initial Budget etc.) */ html body.bd-dark .bd-main table :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q) { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; } html body.bd-dark .bd-main table :is(input:not([type="checkbox"]):not([type="radio"]):not([readonly]), select, textarea:not([readonly])):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):hover { border-color: rgba(255,255,255,.18) !important; background-color: rgba(255,255,255,.04) !important; } html body.bd-dark .bd-main table :is(input, select, textarea):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):focus { border-color: #0A84FF !important; background-color: rgba(10,132,255,.10) !important; } html body.bd-dark .bd-main table textarea:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q) { resize: vertical; } /* card lists: the whole card lights up softly; nothing inside it gets its own box */ html body.bd-dark .bd-main table.bd-cards tbody > tr:hover > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q) { background-color: rgba(255,255,255,.10) !important; box-shadow: none !important; } html body.bd-dark .bd-main table.bd-cards tbody > tr:hover > :is(td, th):first-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q) { box-shadow: none !important; } html body.bd-dark .bd-main table.bd-cards tbody :is(div, span, p):not(.chip):not([class*="rounded"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q) { background: transparent !important; } @media (max-width: 760px) { html body.bd-dark .bd-main table.bd-cards tbody > tr:hover > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q) { background-color: transparent !important; } html body.bd-dark .bd-main table.bd-cards tbody > tr:hover:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q) { background: rgba(255,255,255,.12) !important; } } /* BoQ: Civil / MEP switch, text centred */ html body.bd-dark .bd-main .bd-seg:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q) { border: 0 !important; background: rgba(255,255,255,.08) !important; border-radius: 8px !important; padding: 3px; gap: 3px; } html body.bd-dark .bd-main .bd-seg > label:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q) { display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px; height: 32px !important; padding: 0 10px !important; line-height: 1 !important; border-radius: 6px !important; border: 0 !important; background: transparent !important; color: rgba(235,235,245,.85) !important; font-size: 12px !important; } html body.bd-dark .bd-main .bd-seg > label:has(input:checked):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q) { background: #0A84FF !important; color: #FFFFFF !important; } /* Edit button on the heading row */ html body.bd-dark .bd-main td.bd-edit-cell:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q) { padding: 4px 8px !important; } /* no boxes behind text inside option cards / links (e.g. PWD BoQ - Custom BoQ choice) */ html body.bd-dark .bd-main :is(a, label) :is(div, span, p):is([class*="bg-white"], [class*="bg-indigo-50"], [class*="bg-slate-50"], [class*="bg-blue-50"]):not(.chip):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q) { background: transparent !important; box-shadow: none !important; } /* card lists: the blue mark on the left of the card you point at (wide screens) */ @media (min-width: 761px) { html body.bd-dark .bd-main table.bd-cards tbody > tr:hover > :is(td, th):first-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r) { box-shadow: inset 3px 0 0 #0A84FF !important; } } @media (max-width: 760px) { html body.bd-dark .bd-main table.bd-cards tbody > tr:hover:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r) { box-shadow: inset 3px 0 0 #0A84FF !important; } } /* BoQ Civil / MEP switch: the box is as tall as its buttons, text centred */ html body.bd-dark .bd-main .bd-seg:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r) { display: flex !important; align-items: stretch !important; height: 38px !important; min-height: 38px !important; padding: 3px !important; box-sizing: border-box !important; overflow: hidden !important; } html body.bd-dark .bd-main .bd-seg > label:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r) { height: 100% !important; min-height: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } html body.bd-dark .bd-main .bd-seg > label > span:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r) { display: inline !important; margin-left: 4px; line-height: 1 !important; } /* the switch is exactly as tall as the drop-downs beside it */ html body.bd-dark .bd-main .bd-seg:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s) { height: 28px !important; min-height: 28px !important; padding: 2px !important; border-radius: 6px !important; gap: 2px !important; } html body.bd-dark .bd-main .bd-seg > label:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s) { border-radius: 4px !important; font-size: 11.5px !important; padding: 0 8px !important; } /* a little more space under the profile at the bottom of the side menu */ html body.bd-dark .bd-side .bd-side-foot:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j) { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important; } /* home page: the same wallpaper as the app (was a plain dark colour) */ .lp2:not(#a):not(#b) { background: transparent !important; } body:has(.lp2):not(#a):not(#b) { background: #14183A url("../brand/wallpaper.svg") center / cover no-repeat fixed !important; } html:has(.lp2):not(#a) { background: #14183A !important; } /* tables that fit: frozen cells look like every other cell */ /* tables that scroll sideways: the first column stays, on a solid frosted background */ /* frozen cells of every kind (sticky / freeze classes) follow the same rules */ /* QS and Material Takeoff: one table style for every section, like the Concrete table */ html.bd-est body.bd-dark .bd-main table :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u) { border-right: 1px solid rgba(255,255,255,.07) !important; } html.bd-est body.bd-dark .bd-main table tr > :is(td, th):last-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u) { border-right: 0 !important; } html.bd-est body.bd-dark .bd-main table thead :is(th, td):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u) { background-color: rgba(255,255,255,.04) !important; color: rgba(235,235,245,.62) !important; font-size: 11.5px !important; font-weight: 600 !important; padding-top: 9px !important; padding-bottom: 9px !important; } html.bd-est body.bd-dark .bd-main table tbody td:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u) { font-weight: 600 !important; } html.bd-est body.bd-dark .bd-main table tbody td :is(small, .text-\[10px\], .text-\[9px\]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u) { font-weight: 400 !important; } /* sub-heading rows inside a table (e.g. "Item / Type / Size") look like the table heading */ html.bd-est body.bd-dark .bd-main table tbody tr:is([class*="bg-slate-8"], [class*="bg-slate-9"], [class*="bg-gray-8"]):has(> :nth-child(3)) > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u) { background-color: rgba(255,255,255,.04) !important; color: rgba(235,235,245,.62) !important; font-size: 11.5px !important; } html.bd-est body.bd-dark .bd-main table tbody tr > :is(td, th):is([class*="bg-slate-8"], [class*="bg-slate-9"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u) { background-color: rgba(255,255,255,.04) !important; color: rgba(235,235,245,.62) !important; } /* group heading rows (one wide cell, e.g. "Below Plinth", "Door", "Foundation"): all the same */ html.bd-est body.bd-dark .bd-main table tbody tr:not(:has(> :nth-child(3))) > :is(td, th):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u) { background-color: rgba(255,255,255,.035) !important; color: #FFFFFF !important; font-size: 13px !important; font-weight: 600 !important; } html.bd-est body.bd-dark .bd-main table tbody tr:not(:has(> :nth-child(3))) > :is(td, th) :is(span, b, i):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u) { color: #FFFFFF !important; } /* data cells: no extra tint on single cells, same weight everywhere */ html.bd-est body.bd-dark .bd-main table tbody td :is(span, div, b, strong):not([class*="rounded"]):not(small):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u) { font-weight: 600 !important; } html.bd-est body.bd-dark .bd-main table tbody td:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u):not(#v), html.bd-est body.bd-dark .bd-main table tbody td :is(span, div, b, strong, a):not([class*="rounded"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u):not(#v) { font-size: 13px !important; } html.bd-est body.bd-dark .bd-main table tbody td :is([class*="rounded"], small):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u):not(#v) { font-size: 10.5px !important; } /* frozen first column on a sideways-scrolling table: same tone as the rest of the table (frosted, not dark) */ /* frozen first column: the same colour as the rest of the table (not a dark band); content scrolling underneath is blurred out of sight */ html body.bd-dark .bd-main table td.bd-fill:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u):not(#v), html body.bd-dark .bd-main table th.bd-fill:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u):not(#v) { background-color: transparent; } /* ===== frozen first column (one set of rules) ===== table fits: no frozen cells at all - every cell looks like its neighbours */ html body.bd-dark .bd-main table.bd-noscroll :is(td, th):is([class*="sticky"], [style*="sticky"], [class*="freeze"]):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u):not(#v):not(#w) { position: static !important; background-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; } /* table scrolls sideways: only the first column is frozen; at rest it looks like the other cells */ html body.bd-dark .bd-main table.bd-freeze1 :is(td, th):is([class*="sticky"], [style*="sticky"], [class*="freeze"]):not(:first-child):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u):not(#v):not(#w) { position: static !important; background-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; } html body.bd-dark .bd-main table.bd-freeze1 tr > :first-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u):not(#v):not(#w) { position: sticky !important; left: 0 !important; z-index: 3 !important; background-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; } html body.bd-dark .bd-main table.bd-freeze1 thead tr > :first-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u):not(#v):not(#w) { z-index: 4 !important; } /* ...and while scrolled it gets a frosted band so the figures pass underneath it */ html body.bd-dark .bd-main table.bd-freeze1.bd-scrolled tr > :first-child:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r):not(#s):not(#t):not(#u):not(#v):not(#w) { background-color: rgba(54,50,62,.96) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; backdrop-filter: blur(14px) saturate(140%) !important; box-shadow: 1px 0 0 rgba(255,255,255,.12) !important; } /* forgot password on the sign-in pages */ .bd-auth-forgot { margin: 10px 0 0; text-align: right; font-size: 12.5px; } .bd-auth-forgot a { color: #64B5FF; text-decoration: none; } .bd-auth-forgot a:hover { text-decoration: underline; } .bd-auth-fp { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); } html body.bd-dark .bd-main .boq-tab :is(span, b, small, i):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h):not(#i):not(#j):not(#k):not(#l):not(#m):not(#n):not(#o):not(#p):not(#q):not(#r) { background: transparent !important; box-shadow: none !important; } /* ---------- Accounts ---------- */ .acc-bar { display: inline-block; width: 90px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); vertical-align: middle; margin-right: 6px; overflow: hidden; } .acc-bar i { display: block; height: 100%; background: #0A84FF; border-radius: 6px; } .acc-bar i.near { background: #FFD60A; } .acc-bar i.over { background: #FF6961; } .acc-print-head { display: none; } @media print { /* only on the Accounts page (it prints one report box); before, this hid EVERY page when printed */ body.bd-dark:has(.acc-print) * { visibility: hidden !important; } body.bd-dark:has(.acc-print) :is(.acc-print, .acc-print *) { visibility: visible !important; } .acc-print { position: absolute; left: 0; top: 0; width: 100%; } .acc-print .acc-print-head { display: block; font-size: 12px; margin-bottom: 8px; } .acc-print, .acc-print * { color: #111 !important; -webkit-text-fill-color: #111 !important; background: #fff !important; border-color: #ccc !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } /* ---------- Registers (contracts, quality, site records, business, documents, HR) ---------- */ .bd-kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .bd-kv { padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); min-width: 0; } .bd-kv span { display: block; font-size: 10.5px; color: rgba(235,235,245,.55); text-transform: none; } .bd-kv b { display: block; font-size: 13px; color: #fff; font-weight: 600; overflow-wrap: anywhere; } .bd-kv b.bd-kv-calc { color: #FFD166; } .bd-photos { display: flex; flex-wrap: wrap; gap: 8px; } .bd-photos img { width: 150px; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); } .bd-reg-stat { display: block; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); text-decoration: none !important; } .bd-reg-stat small { display: block; font-size: 11px; color: rgba(235,235,245,.6); } .bd-reg-stat b { display: block; font-size: 20px; color: #fff; font-weight: 600; } .bd-reg-stat:hover, .bd-reg-stat.on { background: rgba(10,132,255,.18); border-color: rgba(10,132,255,.45); } .bd-st-amber { color: #FFD60A !important; } .bd-st-sky { color: #64D2FF !important; } .bd-st-indigo { color: #9CCBFF !important; } .bd-st-emerald { color: #30D158 !important; } .bd-st-rose { color: #FF6961 !important; } .bd-st-slate { color: rgba(235,235,245,.6) !important; } .bd-st-violet { color: #BF9BFF !important; } span.bd-st { background: rgba(255,255,255,.08) !important; } .bd-lines input, .bd-lines select { min-width: 90px; } /* pipeline board */ .bd-board { display: grid; grid-template-columns: repeat(6, minmax(170px, 1fr)); gap: 10px; overflow-x: auto; } .bd-board-col { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 8px; min-height: 120px; } .bd-board-h { font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 8px; } .bd-board-h span { display: block; font-size: 10.5px; font-weight: 400; color: rgba(235,235,245,.55); } .bd-board-card { display: block; padding: 8px 10px; margin-bottom: 6px; border-radius: 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); text-decoration: none !important; } .bd-board-card:hover { background: rgba(10,132,255,.18); } .bd-board-card b { display: block; font-size: 12px; color: #fff; font-weight: 600; } .bd-board-card small { font-size: 10.5px; color: rgba(235,235,245,.6); } /* gantt */ .bd-gantt { overflow-x: auto; font-size: 11.5px; } .bd-gantt-row { display: grid; grid-template-columns: 320px minmax(600px, 1fr); border-bottom: 1px solid rgba(255,255,255,.06); } .bd-gantt-head { position: sticky; top: 0; z-index: 2; background: rgba(52,48,58,.98); color: rgba(235,235,245,.6); } .bd-gantt-n { padding: 4px 6px; color: rgba(235,235,245,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bd-gantt-n small { display: block; font-size: 10px; color: rgba(235,235,245,.45); } .is-sum .bd-gantt-n { color: #fff; font-weight: 600; } .bd-gantt-b { position: relative; min-height: 26px; border-left: 1px solid rgba(255,255,255,.08); } .bd-gantt-head .bd-gantt-b { height: 26px; } .bd-gantt-m { position: absolute; top: 6px; font-size: 10px; padding-left: 3px; border-left: 1px solid rgba(255,255,255,.12); white-space: nowrap; } .bd-gb { position: absolute; top: 8px; height: 11px; border-radius: 4px; background: #0A84FF; overflow: hidden; } .bd-gb.crit { background: #FF453A; } .bd-gb.sum { background: rgba(255,255,255,.35); height: 6px; top: 10px; } .bd-gb u { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(48,209,88,.85); text-decoration: none; } .bd-gantt-today { position: absolute; top: 0; bottom: 0; width: 1px; background: #FFD60A; } .bd-gl { display: inline-block; width: 18px; height: 8px; border-radius: 3px; background: #0A84FF; vertical-align: middle; margin-right: 4px; } .bd-gl.crit { background: #FF453A; } .bd-gl.sum { background: rgba(255,255,255,.35); } .bd-gl.done { background: #30D158; } .bd-gl.today { width: 2px; background: #FFD60A; } /* resource histogram */ .bd-hist { width: 26px; height: 46px; margin: 0 auto; display: flex; align-items: flex-end; background: rgba(255,255,255,.05); border-radius: 4px; overflow: hidden; } .bd-hist i { display: block; width: 100%; background: #0A84FF; } .bd-hist i.near { background: #FFD60A; } .bd-hist i.over { background: #FF453A; } /* waiting for you */ .bd-wait-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; } .bd-wait { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); text-decoration: none !important; color: rgba(235,235,245,.85) !important; } .bd-wait:hover { background: rgba(10,132,255,.18); } .bd-wait-n { font-size: 20px; font-weight: 600; min-width: 34px; } .bd-wait span { flex: 1; font-size: 12.5px; } .bd-wait i { color: rgba(235,235,245,.4); font-size: 11px; } /* public portal */ .bd-portal { min-height: 100vh; padding: 30px 14px; } .bd-portal-box { max-width: 900px; margin: 0 auto; background: rgba(34,32,38,.84); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 22px; -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); } body:has(.bd-portal) { background: #14183A url("../brand/wallpaper.svg") center / cover no-repeat fixed !important; } /* master schedule: critical path */ html body.bd-dark .gt-task.gt-crit:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background: #FF6961 !important; border-color: #FF453A !important; } html body.bd-dark .gt-task.gt-crit.gt-late:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background: #E0342A !important; border-color: #C21F16 !important; } html body.bd-dark .gt-key-crit:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background: #FF6961 !important; border: 1px solid #FF453A !important; } /* second row of tabs (Procurement under Business, Team under People) */ .bd-tabs-wrap .bd-tabs + .bd-tabs { margin-top: 8px; } html body.bd-dark .bd-tabs.bd-tabs-sub:not(#a):not(#b):not(#c):not(#d) { background: rgba(255,255,255,.05) !important; padding: 2px !important; } html body.bd-dark .bd-tabs.bd-tabs-sub .bd-tab:not(#a):not(#b):not(#c):not(#d) { font-size: 12px !important; padding: 5px 12px !important; } /* service check boxes (requisition forms): frosted chips like every other field, blue when ticked */ html body.bd-dark .dr-check:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f) { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 7px; font-size: 12px; font-weight: 500; cursor: pointer; color: rgba(235,235,245,.85) !important; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.12) !important; } html body.bd-dark .dr-check:hover:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f) { background: rgba(255,255,255,.11) !important; } html body.bd-dark .dr-check:has(input:checked):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f) { color: #FFFFFF !important; background: rgba(10,132,255,.22) !important; border-color: #0A84FF !important; } html body.bd-dark .dr-check input:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f) { width: 15px; height: 15px; margin: 0; accent-color: #0A84FF; } /* public requisition form */ .bd-req-existing { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 10px; background: rgba(10,132,255,.12); border: 1px solid rgba(10,132,255,.35); } .bd-req-existing > i { font-size: 18px; color: #64B5FF; } .bd-req-existing > div { flex: 1; min-width: 220px; } .bd-req-existing b { color: #fff; } .bd-req-existing span { display: block; font-size: 12px; color: rgba(235,235,245,.7); } .bd-req-login { padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); } .bd-req-extra label { text-transform: none !important; } .bd-svc { display: flex; flex-wrap: wrap; gap: 8px; } html body.bd-dark .bd-svc label:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f) { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.12) !important; color: rgba(235,235,245,.9) !important; font-size: 12.5px; font-weight: 500; cursor: pointer; text-transform: none; margin: 0; box-shadow: none !important; } html body.bd-dark .bd-svc label:hover:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f) { background: rgba(255,255,255,.12) !important; } html body.bd-dark .bd-svc label:has(input:checked):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f) { background: rgba(10,132,255,.22) !important; border-color: rgba(10,132,255,.6) !important; color: #fff !important; } .bd-svc input { width: 15px; height: 15px; accent-color: #0A84FF; margin: 0; } .bd-svc span { background: none !important; padding: 0 !important; }