:root { /* Primary text. Soft↔strong range is used by the Text brightness user setting. */ --black: #333; --black-soft: #696969; --black-strong: #000000; --ablack: #111; --black-nav: #5c6573; --fullblack: #000; --white: #fff; --light-white: #fafafa; --new-white: #fff; --xwhite: #fff; --awhite: #fff; --primary: #1976D2; /* old - #26a4d1 */ --complimentary: orange; --warning: #F44336; --orange: darkorange; --warning-hover: #d31204; --primary-color: #26a4d1; --background-color: #f3f3f3; --bgc: var(--background-color); --bg: #eff0f1; --extra-light: #e4e4e4; --hover-item: var(--extra-light); --hover-light: #ebebeb; --label: #333; --light-plus: #d8d8d8; --icon-color: #656565; --lightgrey: lightgrey; --light-glass: rgba(255, 255, 255, 0.87); --light-glass-border: 1px solid var(--light-border); --veryvery-light: #fafafa; --selected-tab: #4f7294; --hovered-tab: #0e2a3e; --topbar-bg: #141414; --backlog: #a4a4a4; --prioritized: #2196f3; --inprogress: #8bc34a; --review: #009688; --closed: black; --light: #d0cfcc; --light-text: #747474; --more-light: #f5f5f5!important; --good: #8BC34A; --shadow: #d0d0d0; --note: #ffda767d; --highlight: #FFC107; --selected-highlight: #8BC34A; --todo-color: #26a69a; --border: #dddddd; --vborder: #f7f7f7; --subtle: #f4f4f4; --light-border: #efefef; --scrollbar-track-color: transparent!important; --scrollbar-color: #c0c0c0; --scrollbar-width: thin; --scrollbar-size: .55rem; --scrollbar-minlength: 1.5rem; --scrollbar-hover: var(--black); --teal: #009688; --added: #bbffbb!important; --removed: #ffbbbb!important; --brxs: 3px; --border-radius: 25px; --border-radius-sm: 15px; --border-radius-smallish: 10px; --border-radius-tiny: 5px; --border-radius-xs: 3px; --padding-lg: 25px; --box-shadow: 0px 1px 2px var(--shadow); --box-shadow-inset: 0px 2px 8px var(--shadow) inset; --box-shadow-extra: 0px 2px 8px var(--shadow); --box-shadow-large: 0px 1px 40px #575757; --body-font: Sora, sans-serif; --555: #484848; --font-size: 13px; --nothing: 'Nothing You Could Do', cursive; --item-margin: 10px; --margin: 20px; --sm-item-margin: 5px; --gradient-rainbow: linear-gradient(90deg, #ff0000, #00ff00, #0000ff); --gradient-sunset: linear-gradient(135deg, #1dcaff, #ffa800, #ffe849); --gradient-ocean: linear-gradient(45deg, #b64f0c, #ffe772); /* File-type icon colours. One token per `fti-*` class in fileTypeIcons (services.js); the rules that consume them live in spec-item.css. Add a token here whenever you add a class there, or the icon falls back to the generic --icon-color. */ --file-pdf: var(--warning); --file-doc: var(--primary); --file-sheet: var(--good); --file-slide: var(--orange); --file-image: #8E24AA; --file-video: #C2185B; --file-audio: var(--todo-color); --file-archive: var(--highlight); --file-code: var(--selected-tab); --file-data: var(--teal); --file-text: var(--light-text); --file-link: var(--primary-color); --file-3d: #7CB342; --file-design: #EC407A; --file-font: #6D4C41; --file-mail: var(--prioritized); --file-calendar: #F4511E; --file-security: var(--warning-hover); --file-package: #2E7D32; --file-unknown: var(--icon-color); /* AI gradient — the one "this is AI" palette (css/components/ai-gradient.css). Anchored on the brand blue, then the Material accents the rest of the app uses. */ --ai-grad-1: var(--primary); --ai-grad-2: #7C4DFF; --ai-grad-3: #E040FB; --ai-grad-4: #00B0FF; --ai-grad-speed: 8s; --ai-ring-speed: 6s; } :root.dark { --black: #eeeeee; --black-soft: #b7b7b7; --black-strong: #eeeeee; --black-nav: var(); --black-nav: var(--black); --white: #121212!important; --light-white: #1a1a1a; --awhite: #ffffff; --xwhite: black; --primary: #1976D2; /* old - #26a4d1 */ --warning: #F44336; --warning-hover: #d31204; --primary-color: #1976D2; --background-color: #333; --bgc: var(); --bgc: var(--background-color); --hover-item: var(--extra-light); --hover-light: #393939; --extra-light: #222; --border: #252525; --light-border: #232323; --vborder: #222222; --label: #ccc; --light-text: #999; --light-glass: rgba(0, 0, 0, .9); --very-light-text: #cacaca; --light-plus: #333; --icon-color: var(--black); --lightgrey: #333!important; --more-light: #171717!important; --very-light: #111; --veryvery-light: #121212; --selected-tab: #4f7294; --hovered-tab: #0e2a3e; --topbar-bg: black; --light: #333; --good: #8BC34A; --shadow: #000000; --note: #ffda767d; --highlight: #ecbf35; --scrollbar-color: #4d4d4d; --subtle: #191919; --box-shadow-large: 0px 1px 40px var(--ablack); --file-image: #CE93D8; --file-video: #F06292; --file-3d: #AED581; --file-design: #F48FB1; --file-font: #BCAAA4; --file-calendar: #FF8A65; --file-package: #81C784; /* A brighter first stop: the brand blue sinks into a near-black surface. */ --ai-grad-1: #448AFF; } i.material-symbols-outlined { color: var(--icon-color); font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; user-select: none; } .active i.material-symbols-outlined, .selected i.material-symbols-outlined{ font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; user-select: none; } nav .active > i.material-symbols-outlined, nav .selected > i.material-symbols-outlined { /* font-variation-settings: 'FILL' 0; */ } .active .ai-action i.material-symbols-outlined { font-variation-settings: 'FILL' 0; } .gradient-text, .just-initials { /* base styles */ -webkit-background-clip: text!important; -webkit-text-fill-color: transparent; background-clip: text!important; } .gradient-text.rainbow { background: var(--gradient-rainbow); } .gradient-text.sunset { background: var(--gradient-sunset); } .gradient-text.ocean, .just-initials { background: var(--black); } .light-bg { background-color: var(--background-color)!important; } /* ============================================================================ EDITOR CHROME — the UI *around* the editor: toolbar, bubble menu, floating menu, slash-command menu, drag handles, colour picker, the editor shell. CONVENTION (decided 2026-08-17). Tiptap styling has exactly two homes: - chrome -> THIS FILE (css/editors.css) - rendered content -> css/tiptap-contents.css (headings, lists, tables, task lists, callouts, blockquotes, inline code) - code blocks -> css/components/code-block.css, which owns the card on BOTH surfaces and deliberately outranks the `pre` rules in tiptap-contents.css. New custom extensions put their chrome here and their content styling in tiptap-contents.css. Do not start a third file. Both files must appear in index.html's build:app-css block AND in cssFiles in gulpfile.js — those are two hand-maintained lists of the same thing, and they had drifted far enough that dev and dist rendered the editor differently for months (css/tiptap-editor.css was in dist only; THIS file was in dev only). css/tiptap-editor.css is the retired chrome sheet, superseded by this one. ============================================================================ */ .ql-editor h1 { font-size: 23pt!important; font-weight: 400!important; line-height: 36px!important; } .ql-editor h2 { font-size: 21pt!important; font-weight: 400!important; line-height: 34px!important; } .ql-editor h3 { font-size: 17pt!important; font-weight: 400!important; line-height: 30px!important; } .ql-editor h4 { font-size: 21px!important; line-height: 28px!important; } .ql-editor h5 { font-size: 14pt!important; font-weight: 400!important; line-height: 26px!important; } .ql-editor h6 { font-size: 12pt!important; font-weight: 500!important; line-height: 24px!important; } .jtsyn-tiptap-editor h1, .jtsyn-tiptap-editor h2, .jtsyn-tiptap-editor h3, .jtsyn-tiptap-editor h4, .jtsyn-tiptap-editor h5, .jtsyn-tiptap-editor h6, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6{ margin-top: 25px!important; } .ql-editor pre { overflow: auto; white-space: break-spaces; border: 1px solid var(--light-border); padding: 20px; box-sizing: border-box; border-radius: var(--border-radius-tiny); font-size: 12px; background-color: var(--light-white); } .dark .ql-editor .chat-message pre { border-color: var(--border)!important; background-color: var(--background-color); } .ql-editor .chat-message pre { border-color: var(--light-border)!important; background-color: var(--white); } .ql-editor [type="checkbox"]:not(:checked), .ql-editor [type="checkbox"]:checked { position: relative!important; opacity: 1!important; pointer-events: all!important; margin-right: 7px; float: left; height: 15px; margin-top: 4px; line-height: 15px!important; background-color: transparent!important; border: 1px solid var(--border)!important; outline: none; width: 15px; color: var(--black)!important; cursor: pointer; } nav .jtsyn-tiptap-editor.oe { background-color: var(--background-color); } .jtsyn-tiptap-editor [contenteditable=true] { min-height: 100px; } .jtsyn-tiptap-toolbar { margin-bottom: 10px; /* margin-left: -15px; */ /* margin-right: -15px; */ } .jtsyn-tiptap-toolbar button { background-color: transparent; padding: 0 7px; } .jtsyn-tiptap-toolbar button:hover i { color: var(--black)!important; } .research-canvas-editor-wrap .jtsyn-tiptap-toolbar { padding: 0px 0px 10px; margin-bottom: 0; box-sizing: border-box; overflow-x: auto; white-space: nowrap; /* border-bottom: 1px solid var(--light-border); */ } .dark .research-canvas-editor-wrap .jtsyn-tiptap-toolbar { /* background-color: var(--extra-light); */ /* border-bottom: 1px solid var(--light); */ } .jtsyn-tiptap-toolbar i { font-size: 18px; line-height: 25px; } .zj-specification-description-edit .jtsyn-tiptap-toolbar { padding: 0 20px; /* white-space: nowrap; */ /* overflow-x: auto; */ margin: 0; } .spec-description-edit .jtsyn-tiptap-editor { padding: 0 30px 30px; box-sizing: border-box; height: calc(100dvh - 255px)!important; overflow-y: auto; } .spec-description-edit .jtsyn-tiptap-editor > [contenteditable] { height: 100%; } .panel-comments .create-new-post .jtsyn-tiptap-editor { height: auto!important; padding: 0!important; } .panel-comments .create-new-post .jtsyn-tiptap-editor > .tiptap { min-height: 80px; max-height: calc(100dvh - 405px); } .open-editor.distraction-free jtsyn-editor, .open-editor.distraction-free .jtsyn-tiptap-editor { height: calc(100dvh - 123px)!important; max-height: 100%; min-height: 100%; } .ideas-detail-description .jtsyn-tiptap-editor { height: auto!important; background-color: var(--background-color); padding: 20px; border-radius: var(--border-radius-tiny); } .jtsyn-tiptap-bubble-menu button { background-color: var(--background-color); height: 40px; line-height: 50px; padding-top: 3px; } .jtsyn-tiptap-bubble-menu button i { font-size: 15pt; } .dark .jtsyn-tiptap-bubble-menu button { background-color: var(--extra-light); } .jtsyn-tiptap-bubble-menu button:hover { background-color: var(--primary); color: var(--awhite); } .jtsyn-tiptap-bubble-menu button:hover i { color: var(--awhite); } .jtsyn-slash-menu { background-color: var(--xwhite); display: flex; flex-direction: column; max-height: 35dvh; overflow-y: auto; /* top: unset!important; */ box-shadow: var(--box-shadow-extra); bottom: 0; border-radius: var(--border-radius-tiny); } .jtsyn-slash-menu .jtsyn-slash-menu-section-header { padding: 0 18px!important; color: var(--light-text); text-transform: uppercase; font-size: 10px; margin-top: 10px; } .jtsyn-slash-menu .jtsyn-slash-menu-item { display: flex; gap: 15px; padding: 12px 20px; cursor: pointer; align-items: center; } .jtsyn-slash-menu .jtsyn-slash-menu-item .ai-icon { margin: 0; } .jtsyn-slash-menu-item.mention-menu-item.active { background-color: var(--extra-light); } .jtsyn-slash-menu .jtsyn-slash-menu-item img, .jtsyn-slash-menu .jtsyn-slash-menu-item svg { max-width: 25px; border-radius: 3px; } .jtsyn-slash-menu-item__title { font-weight: 400; line-height: 15px; } .jtsyn-slash-menu .jtsyn-slash-menu-item.is-selected { background-color: var(--extra-light); } .jtsyn-slash-menu-item__desc { font-size: 12px; color: var(--light-text); } .jtsyn-slash-menu .jtsyn-slash-menu-item i { font-size: 17px; margin-top: 0px; } .jtsyn-slash-menu .jtsyn-slash-menu-item:hover { background-color: var(--background-color); } .jtsyn-tiptap-floating-menu button { background-color: var(--white); } /* ============================================================================ AI ghost text — the inline autocomplete suggestion decoration. Moved here 2026-08-17 from css/tiptap-editor.css, which is retired and not loaded by index.html, so this rule had never applied to anything. The extension that emits it is still dormant; see AIAutocompleteExtension in public_html/js/tiptap/index.js. ============================================================================ */ .jtsyn-ai-ghost-text { color: var(--light-text); opacity: 0.55; pointer-events: none; user-select: none; } /* ============================================================================ Editor AI — Selection Assist (js/editorAiExtension.js + editorAiPromptBar.js) Chrome lives here per the convention at the top of this file. ============================================================================ */ .jt-eai { position: fixed; z-index: 10050; width: 400px; max-width: calc(100vw - 24px); padding: 20px; border: 1px solid var(--border, #d8d8d8); border-radius: 10px; background: var(--white, #fff); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16); font-family: var(--body-font), sans-serif; } /* Announced to screen readers, never shown — a decoration is invisible to them. */ .jt-eai-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .jt-eai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .jt-eai-chip { padding: 4px 10px; border: 1px solid var(--light-border); border-radius: var(--border-radius-xs); background: var(--bg, #f4f5f6); color: var(--black, #333); font-size: 12px; line-height: 1.4; cursor: pointer; } .jt-eai-chip:hover { background: var(--hover-item, #e6e6e6); } .jt-eai-inputrow { display: flex; align-items: center; gap: 6px; } .jt-eai-mode { flex: 0 0 auto; padding: 4px 8px; border: 1px solid var(--light-border); border-radius: var(--border-radius-xs); background: var(--background-color); color: var(--black, #333); font-size: 11px; font-weight: 600; cursor: pointer; } .jt-eai-input { flex: 1 1 auto; min-width: 0; height: 50px !important; margin: 0 !important; padding: 0 10px !important; border: 1px solid var(--light-border) !important; border-radius: var(--border-radius-xs)!important; background: var(--background-color)!important; font-size: 13px; box-sizing: border-box; } .jt-eai-input:focus { outline: none; border-color: var(--primary, #1976D2) !important; box-shadow: none !important; } .jt-eai-submit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: var(--border-radius-xs); background: var(--primary, #1976D2); cursor: pointer; } .jt-eai-submit i { color: var(--awhite); } .jt-eai-submit .material-symbols-outlined { font-size: 17px; } .jt-eai-status { margin-top: 8px; color: var(--black-soft, #696969); font-size: 12px; line-height: 1.5; max-height: 160px; overflow-y: auto; } .jt-eai[data-state="error"] .jt-eai-status { color: var(--warning, #F44336); } .jt-eai-actions { display: flex; gap: 6px; margin-top: 8px; } .jt-eai-btn { padding: 5px 12px; border: 1px solid var(--border, #d8d8d8); border-radius: 3px; background: var(--white, #fff); color: var(--black, #333); font-size: 12px; cursor: pointer; } .jt-eai-btn:hover { background: var(--hover-item, #e6e6e6); } .jt-eai-accept { border-color: var(--primary, #1976D2); background: var(--primary, #1976D2); color: var(--awhite); } /* ---- in-document decorations --------------------------------------------- */ /* The span under assist. Kept as a wash rather than a border so it does not reflow the line the user is reading. */ .jt-eai-selection { background: rgba(25, 118, 210, 0.13); border-radius: 2px; } /* The original, once a replacement is proposed. Strikethrough is the non-colour channel — the review's accessibility finding was that encoding the whole accept/reject decision in colour and opacity fails for a lot of people. Opacity stays high enough to keep the text readable. */ .jt-eai-selection.jt-eai-outgoing { background: rgba(244, 67, 54, 0.10); text-decoration: line-through; opacity: 0.75; } /* The proposal. Not in the document — a widget decoration, so it cannot be autosaved, seen by a collaborator, or survive a reload. */ .jt-eai-preview { border-left: 3px solid var(--primary, #1976D2); margin-left: 4px; padding-left: 6px; background: rgba(25, 118, 210, 0.07); white-space: pre-wrap; } @media (prefers-reduced-motion: reduce) { .jt-eai, .jt-eai-preview, .jt-eai-selection { transition: none !important; animation: none !important; } } /* Custom SVG icon components rendered by the jtsynAi / jtsynAgents directives. */ /* ---- jtsyn-ai () ---- */ .jt-ai { width: var(--jt-ai-size, 180px); height: auto; display: inline-block; vertical-align: middle; } .jt-ai .jt-ai-word { fill: var(--black); } .agents-copilot-toggle .jt-ai .jt-ai-word { fill: var(--primary); } .agents-copilot-toggle .jt-ai .jt-ai-spark { stroke: var(--black); fill: var(--black); } .empty-message .jt-ai .jt-ai-word { } .jt-ai .jt-ai-spark { fill: var(--jt-ai-spark, var(--primary)); transform-box: fill-box; transform-origin: center; } .jt-ai .jt-ai-spin { transform-box: fill-box; transform-origin: center; } /* spin variant: group spins slowly, path pulses at 1.5s */ .jt-ai--spin .jt-ai-spin { animation: jt-spin 6s linear infinite; } .jt-ai--spin .jt-ai-spark { animation: jt-pulse 1.5s ease-in-out infinite alternate; } /* pulse only: tilted 25deg, breathing scale */ .jt-ai--pulse .jt-ai-spark { transform: rotate(25deg); animation: jt-pulse-tilt 1.5s ease-in-out infinite alternate; } /* pop-in: plays once on load */ .jt-ai--pop .jt-ai-spark { animation: jt-pop 1s cubic-bezier(.2, 1.3, .35, 1); } /* none: static, resting 25deg tilt */ .jt-ai--none .jt-ai-spark { transform: rotate(25deg); } @keyframes jt-spin { from { transform: rotate(25deg); } to { transform: rotate(385deg); } } @keyframes jt-pulse { from { transform: scale(.9); } to { transform: scale(1); } } @keyframes jt-pulse-tilt { from { transform: rotate(25deg) scale(.9); } to { transform: rotate(25deg) scale(1); } } @keyframes jt-pop { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 70% { transform: scale(1.25) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .jt-ai .jt-ai-spin, .jt-ai .jt-ai-spark { animation: none !important; } .jt-ai--spin .jt-ai-spin { transform: rotate(25deg); } } /* Helpers for a mark standing in for an icon. The directive copies the host's class onto the SVG, so these go straight on . */ .jt-ai.jt-ai-lead { /* before a label, e.g. a section header: "✦ Default model" */ margin-right: .4em; } .jt-ai.jt-ai-hero { /* the large mark on an empty state */ display: block; margin: 0 auto 15px; } .jt-ai.jt-ai-muted .jt-ai-word { fill: var(--light-text); } .jt-ai.jt-ai-current .jt-ai-word, .jt-ai.jt-ai-current .jt-ai-spark { /* takes the text colour, like an icon font: for a mark inside a filled button */ fill: currentColor; } /* ---- jtsyn-agents () ---- */ .jt-agents { display: inline-block; vertical-align: middle; width: var(--jt-ag-size, 160px); height: var(--jt-ag-size, 160px); } .ai-agent-crosslink .jt-agents.jt-agents--orbit { width: 25px; } .jt-agents .jt-ag-letter { fill: var(--jt-ag-ink, var(--black)); z-index: 9999; } .spec-item-view-selector:hover .jt-agents .jt-ag-letter { fill: var(--primary)!important; } .jt-agents .jt-ag-ring { stroke: var(--jt-ag-ring, var(--light-text)); stroke-width: 3; fill: none; } .btn.btn-transparent.spec-item-view-selector span.agents-btn svg .jt-ag-ring { stroke: var(--primary); } .dark .jt-agents .jt-ag-ring { /* stroke: #9e9e9e; */ } .jt-agents .jt-ag-spark { fill: var(--jt-ag-spark, var(--primary)); transform-box: fill-box; transform-origin: center; } /* twinkle: each spark breathes, staggered so the orbit shimmers */ .jt-agents--twinkle .jt-ag-spark { animation: jt-ag-tw 2.4s ease-in-out infinite; } .jt-agents--twinkle g:nth-of-type(1) .jt-ag-spark { animation-delay: 0s; } .jt-agents--twinkle g:nth-of-type(2) .jt-ag-spark { animation-delay: .6s; } .jt-agents--twinkle g:nth-of-type(3) .jt-ag-spark { animation-delay: 1.2s; } /* pop: staggered pop-in on load */ .jt-agents--pop .jt-ag-spark { animation: jt-ag-pop 1s cubic-bezier(.2, 1.3, .35, 1); } .jt-agents--pop g:nth-of-type(2) .jt-ag-spark { animation-delay: .12s; } .jt-agents--pop g:nth-of-type(3) .jt-ag-spark { animation-delay: .24s; } /* orbit: sparks travel the ring; scale + opacity track depth (near = big/bright, far = small/faint) */ .jt-agents--orbit .jt-ag-spark { offset-path: path("M141.19 53.28 C147.4 68.64 125.03 92.16 91.24 105.82 C57.44 119.47 25.01 118.09 18.81 102.72 C12.6 87.36 34.97 63.84 68.76 50.18 C102.56 36.53 134.99 37.91 141.19 53.28 Z"); offset-rotate: 0deg; animation: jt-ag-orbit 14s linear infinite; } .jt-agents--orbit g:nth-of-type(1) .jt-ag-spark { animation-delay: 0s; } .jt-agents--orbit g:nth-of-type(2) .jt-ag-spark { animation-delay: -4.66s; } .jt-agents--orbit g:nth-of-type(3) .jt-ag-spark { animation-delay: -9.33s; } @keyframes jt-ag-tw { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.66); opacity: .55; } } @keyframes jt-ag-pop { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 70% { transform: scale(1.25) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } } /* depth: 25% = front/bottom (near), 75% = back/top (far) */ @keyframes jt-ag-orbit { 0% { offset-distance: 0%; transform: scale(.82); opacity: .82; } 25% { offset-distance: 25%; transform: scale(1.18); opacity: 1; } 50% { offset-distance: 50%; transform: scale(.82); opacity: .82; } 75% { offset-distance: 75%; transform: scale(.48); opacity: .4; } 100% { offset-distance: 100%; transform: scale(.82); opacity: .82; } } @media (prefers-reduced-motion: reduce) { .jt-agents .jt-ag-spark { animation: none !important; } /* hold orbit sparks spread around the ring, no travel */ .jt-agents--orbit g:nth-of-type(1) .jt-ag-spark { offset-distance: 8%; } .jt-agents--orbit g:nth-of-type(2) .jt-ag-spark { offset-distance: 42%; transform: scale(.7); opacity: .7; } .jt-agents--orbit g:nth-of-type(3) .jt-ag-spark { offset-distance: 70%; transform: scale(.55); opacity: .5; } } /* ---- jtsyn-thinking () — hop-and-roll wordmark loader ---- */ .jt-think { --jt-think-cycle: 2.6s; /* one hop-and-roll cycle */ --jt-think-stagger: .2s; /* roll delay, letter to letter (j to n) */ --jt-think-hop: .22; /* excited hop height, in em */ --jt-think-hop-stagger: .05s; /* tiny ripple across the hops */ display: inline-flex; perspective: 700px; } .jt-think-mark { display: inline-flex; font-family: var(--nothing); font-weight: 400; font-size: var(--jt-think-size, 47px); line-height: 1; color: var(--jt-think-ink, var(--black)); white-space: nowrap; } /* outer span = the excited vertical hop */ .jt-think-g { display: inline-block; animation: jt-think-hop var(--jt-think-cycle) cubic-bezier(.3, 0, .3, 1) infinite both; animation-delay: calc(var(--i) * var(--jt-think-hop-stagger)); } /* inner span = the forward roll + colour sweep */ .jt-think-gi { display: inline-block; transform-origin: 50% 62%; backface-visibility: hidden; animation: jt-think-roll var(--jt-think-cycle) cubic-bezier(.5, 0, .4, 1) infinite both; animation-delay: calc(var(--i) * var(--jt-think-stagger)); } /* per-letter index drives both staggers */ .jt-think-g:nth-child(1) { --i: 0; } .jt-think-g:nth-child(2) { --i: 1; } .jt-think-g:nth-child(3) { --i: 2; } .jt-think-g:nth-child(4) { --i: 3; } .jt-think-g:nth-child(5) { --i: 4; } @keyframes jt-think-hop { 0% { transform: translateY(0); } 6% { transform: translateY(calc(var(--jt-think-hop) * -1em)); } 13% { transform: translateY(0); } 20% { transform: translateY(calc(var(--jt-think-hop) * -0.62em)); } 27% { transform: translateY(0); } 33% { transform: translateY(calc(var(--jt-think-hop) * -0.34em)); } 40% { transform: translateY(0); } 100% { transform: translateY(0); } } @keyframes jt-think-roll { 0%, 58% { transform: rotate(0deg); color: var(--jt-think-ink, var(--black)); } 66% { color: var(--jt-think-accent, var(--primary)); } 82% { transform: rotate(360deg); } 90% { color: var(--jt-think-accent, var(--primary)); } 100% { transform: rotate(360deg); color: var(--jt-think-ink, var(--black)); } } @media (prefers-reduced-motion: reduce) { .jt-think-g, .jt-think-gi { animation: none !important; transform: none !important; color: var(--jt-think-ink, var(--black)) !important; } } @media screen and (max-width: 1280px) { .all-project-items.oe { padding: 0px!important; overflow: hidden!important; } .all-project-items.oe .all-specs { border-radius: 0px!important; background-color: var(--white); padding: 0px; padding-top: 0px!important; height: -webkit-fill-available; border: none; } .specs .all-project-items .ui-grid { border-radius: 0px!important; border: none!important; border-top: 1px solid var(--border)!important; height: calc(100dvh - 125px)!important; max-height: calc(100dvh - 125px)!important; } .edit-mode .ui-grid.the-grid-editor .ui-grid-contents-wrapper > .ui-grid-menu-button { top: -62px; height: 59px!important; line-height: 60px!important; vertical-align: top; } .project-grid.ui-grid.grid .ui-grid-viewport { height: calc(100dvh - 184px)!important; --webkit-scrolling-overflow: touch!important; overflow: auto!important; } .specs .all-project-items .section-title, .specs .roadmap .section-title { padding-left: 20px; padding-right: 10px; margin-top: 0px!important; margin-bottom: 0px!important; min-height: 60px; height: 60px; line-height: 60px; display: block; } .core-list-items .roadmap.all-specs .section-title { padding: 0px!important; } html body .section-title .title-right .btn.btn-transparent, html body .section-title .title-right .btn.btn-transparent i { height: 60px!important; line-height: 60px!important; vertical-align: top; top: 0px!important; margin: 0px!important; width: 50px; text-align: center; } .more-actions.btn.btn-transparent.show-on-small-only { display: inline-block!important; } html body .section-title .title-right .btn.btn-transparent { width: 50px; margin: 0px!important; margin-right: 0px!important; padding: 0px!important; line-height: 60px!important; height: 60px!important; text-align: center; right: 0px; margin-left: -3px!important; } .side-slider.open { width: 100%; } .specs .all-project-items .section-title.search-enabled .title-right { width: 100%; padding: 0px; } .specs .all-project-items .section-title.search-enabled { padding: 0px; } .specs .search-enabled .right-collection-actions { display: none!important; } .roadmap .section-title .title-right .btn.btn-transparent.settings-btn { top: -14px; } html body .roadmap .projects-chart-container { width: 100%!important; margin: 0px!important; padding: 0px!important; border-radius: 0px!important; border-top: 1px solid var(--border); } html body .roadmap .chart-header-actions { top: 0px!important; right: 100px; height: 60px!important; line-height: 60px; vertical-align: top; display: none; } html body .roadmap .sma .chart-header-actions { display: inline-block; } .all-project-items .section-title .title-left { height: 60px!important; line-height: 60px!important; padding-left: 20px!important; margin: 0px; min-width: 240px!important; } .all-project-items .section-title.search-enabled .title-left { display: none; } .all-project-items .section-title .title-left .collection-dropdown-wrapper, .project-view-selector.dropdown-select { height: 60px!important; line-height: 60px!important; margin: 0px!important; vertical-align: top; top: 0px; } .all-project-items .roadmap .section-title .title-left, .all-project-items .roadmap .section-title .title-left i { height: 60px!important; line-height: 60px!important; } .title-left .the-selected-view { padding-top: 0px; margin: 0px!important; height: 60px!important; line-height: 60px!important; padding-left: 20px; } .title-left .the-selected-view i { line-height: 60px!important; height: 60px!important; } .project-location-selector.dropdown-select i, .project-location-selector.dropdown-select { height: 60px!important; line-height: 60px!important; } .project-location-selector.dropdown-select i:first-child, .project-view-selector.dropdown-select i:first-child { display: none; } .project-location-selector.dropdown-select { font-size: 10pt; padding-right: 0px!important; }.project-location-selector.dropdown-select { padding-left: 0px; } html body .projects-inline-searchbar { line-height: 60px; height: 60px!important; width: 50px; margin-right: 5px; } html body .omni-search.full-screen-dialog .projects-inline-searchbar { width: unset; } html body .search-enabled .projects-inline-searchbar { width: 100%; } html body .search-enabled .projects-inline-searchbar input { display: unset; width: 100%!important; height: 60px!important; line-height: 60px!important; border-radius: 0px!important; } html body .projects-inline-searchbar input { display: none; } .projects-sidebar.sidebar { border-right: 1px solid var(--border); width: 240px!important; } html body .sidebar-action-btn { display: none; } .core-list-items.specs { width: calc(100vw - 240px)!important; } .projects-sidebar.sidebar .sidebar-search input { margin-top: -6px!important; height: 65px!important; } .all-specs .clear-search { right: 0px!important; left: unset!important; position: absolute!important; top: 0px!important; } html body .core-list-items .btn.clear-search { position: absolute!important; right: 0px!important; top: 0px!important; margin-top: 0px!important; height: 60px!important; line-height: 40px!important; } html body .core-list-items .btn.clear-search i {} html body .section-title .title-right .btn.btn-transparent.clear-search i { height: 60px!important; line-height: 61px!important; } html body .section-title .title-right .btn.btn-transparent.clear-search { min-width: 50px; text-align: center; } html body .the-spec-overview-description { padding: 0px!important; } html body .the-spec-overview-description .card { border-radius: 0px; height: calc(100dvh - 65px); } .the-spec-overview-description .spec-summary .zj-spec-summary.ql-editor { padding: 0px 30px 30px!important; max-height: calc(100dvh - 135px)!important; margin: 0px -30px!important; } .the-spec-overview-description .spec-summary { max-height: calc(100dvh - 64px)!important; padding: 30px 30px 0px!important; } html .overview-right-side.spec-overview-data { padding: 0px!important; border-left: 1px solid var(--border); } html .overview-right-side.spec-overview-data .overview-section { border-radius: 0px; padding: 30px; margin-bottom: 0px; border-bottom: 1px solid var(--border); } .overview-meta .meta-data > .meta-names { width: 50%!important; } html .overview-right-side .overview-section .card { border-radius: 0px!important; } .section-title .title-right .btn.btn-transparent.btn.add-new-item { position: fixed; right: 10px; bottom: 10px!important; top: unset; background-color: var(--primary)!important; height: 60px; width: 60px; text-align: center!important; border-radius: 10px!important; box-shadow: 0px 1px 2px var(--shadow)!important; padding: 0px!important; } .section-title .title-right .btn.btn-transparent.btn.add-new-item span { display: none; } .section-title .title-right .btn.btn-transparent.btn.add-new-item i { color: var(--awhite)!important; height: 60px; line-height: 60px!important; padding: 0px!important; float: none; width: 60px; font-size: 18pt!important; } .profile-page, .profile-page .profile-sidebar { height: calc(100dvh - 64px); overflow-y: auto!important; } .profile-sidebar-body { height: auto!important; } } /* Responsive */ @media screen and (max-width: 900px) { .drag-target { display: none; } .a-collection { box-shadow: none!important; } body .pinned { position: relative!important; } body .zj-body { max-height: calc(100dvh - 64px); height: 100dvh; } body .zj-body > .settings { overflow-y: auto; max-height: calc(100dvh - 64px); height: 100dvh; } body .zj-body .projects-sidebar { padding-top: 20px!important; width: 100%!important; height: 100%; } .core-list-items .all-specs { padding: 20px!important; border-radius: 0px!important; } .feature-toggles .feature-toggle { flex: 1 1 100%!important; } .full-screen .projects-sidebar.sidebar { display: block!important; height: auto!important; } html body .full-screen .projects-sidebar.sidebar { left: 0px!important; float: none!important; display: none!important; } html body .core-list-items.specs { width: 100%!important; position: relative!important; height: calc(100dvh - 64px); max-width: 100%!important; } body .zj-body .project-activity-page .projects-sidebar { padding-top: 0px!important; } body .favorite-specs.row { margin-top: 40px!important; } body .core-list-item .col.m6 { width: 100%!important; max-width: 100%!important; } body .all-specs .core-list-item .name { max-width: 100%!important; } body .core-list-items .all-project-items { padding-left: 0px!important; padding-right: 0px!important; left: 0px!important; margin-top: 0px!important; padding-top: 0px!important; overflow: hidden; } .projects-sidebar.sidebar { border-right: none!important; } .the-projects-page .sidebar-body { display: none; } .the-projects-page .add-new-item.btn { padding-left: 0px!important; } .the-projects-page .section-title .title-right .btn.btn-transparent span { display: none; } .the-projects-page .settings-btn { padding-right: 0px!important; } .specs .all-project-items .section-title { padding-left: 0px; padding-right: 0px; width: 100%; } .edit-mode .specs .all-project-items .section-title {width: calc(100% - 60px);} .specs .all-project-items .section-title.search-enabled { margin: 0px; } .specs .section-title.search-enabled .title-left { display: none; } .specs .section-title.search-enabled .title-right {width: 100%!important;} .specs .section-title.search-enabled .title-right input { width: 100%!important; margin: 0px auto!important; max-width: 100%!important; padding-right: 0px!important; } .specs .section-title.search-enabled .title-right .projects-inline-searchbar { width: 100%; margin-right: 0px!important; } .specs .all-project-items .roadmap .section-title { height: auto!important; z-index: 99999; } .full-screen .ordered-roadmap-items.oe { height: auto!important; overflow: unset!important; } .all-project-items.oe .all-specs { overflow: hidden; padding: 0px!important; } .roadmap .projects-chart-container.list-view { margin-left: -20px; margin-right: -20px; width: calc(100% + 40px)!important; max-width: calc(100% + 40px); } .projects-search-meta { display: none!important; } html body .all-project-items.oe.full-screen { background-color: var(--white)!important; padding: 0px!important; } html body .all-project-items.oe.full-screen .section-title { padding: 0px 20px; } .specs .all-project-items.full-screen .ui-grid-header-cell:first-child, .specs .all-project-items.full-screen .ui-grid-cell:first-child { padding-left: 20px; } body .specs .ui-grid { width: 100%; border-radius: 0px!important; height: calc(100vh - 235px)!important; max-height: -webkit-fill-available; }body .todo-filter-title { font-family: var(--body-font); } body .the-spec-overview-description { padding: 0px!important; } body .the-spec-overview-description .card { border-radius: 0px!important; height: auto!important; } body .the-spec-overview-description .spec-summary { max-height: unset!important; height: auto!important; overflow-y: hidden!important; overflow-x: hidden!important; padding-top: 24px!important; } body .overview-right-side.spec-overview-data { max-height: unset!important; height: unset; padding: 0px!important; } body .spec-overview-data .overview-section { box-shadow: none!important; border-radius: 0px!important; border-top: 1px solid var(--border); } html body .the-spec-overview-description .spec-summary .zj-spec-summary.ql-editor { max-height: unset!important; } body .sp-specs { max-height: 100%!important; overflow-y: hidden!important; overflow-x: hidden!important; padding-top: 18px; } body .sp-spec { border-radius: 0px!important; box-shadow: none!important; } body .sps-sidebar .zj-search-bar { padding-left: 0px!important; padding-right: 0px!important; } body .project-outline-items { padding: 10px 30px; } body .spec-item-tasks-button.show-on-small { display: inline-block; width: 100%; } body .spec-item-tasks-button.show-on-small .btn { padding-left: 0px!important; margin-bottom: 20px!important; color: var(--light-text)!important; } .zj-saved-filter-objects { width: 100%!important; } .zj-favorite-jira-filters { padding: 0px!important; } .zj-zd-view-bar > div.col-md-4 { padding-right: 0px!important; } .zj-specification-sidebar { width: 100%!important; height: auto!important; box-shadow: none!important; position: absolute!important; top: 64px!important; } .zj-body-content .sidebar, .product-posts .posts-container { height: 100%!important; max-height: 100%!important; } .zj-specification-body { width: 100%!important; position: relative!important; } .zj-specification-item-container .zj-empty-message-text { width: 100%!important; margin: 0px!important; max-width: 100%!important; }.spec-details .actions { position: relative!important; left: 0px!important; bottom: 0px!important; } .zj-spec-title { margin-top: 10px; max-height: 40px; overflow: hidden; padding-right: 60px; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; box-sizing: border-box; } .spec-cover-overview { padding: 0px!important; } .project-details .row .form-field.col.m6:first-child { padding-right: 0px!important; } .projects-header { padding-left: 20px; } .core-list-items .all-project-items, .listings .listing-items { padding-left: 20px; padding-bottom: 0px!important; } .zj-actions-bar-buttons { margin-bottom: 0px!important; } .core-list-items .all-project-items, .core-list-items .listing-items { height: 100%!important; height: -webkit-fill-available!important; } .dropdown-content#timer { left: 0px!important; right: 0px!important; min-width: 100%!important; } nav.nav.main-nav { height: 64px; line-height: 64px!important; } .users-present { display: none!important; } .side-nav { height: 100%!important; } nav.nav.main-nav a, nav.nav.main-nav li > a { text-decoration: none; color: var(--black)!important; } html body .side-nav { background-color: var(--white)!important; z-index: 9999999999999999; } html body .side-nav.sidenav-open { transform: translateX(0px); box-shadow: 1px 0px 6px var(--shadow); } nav.nav.main-nav i { line-height: 64px; height: 64px; } .main-nav .dropdown-content.nav-dropdown { width: 100%!important; } html body .main-nav .dropdown-content.nav-dropdown { left: 0!important; max-width: 100%!important; } .settings-body { padding-top: 20px!important; } .portfolio-settings .settings-body.padding40 { padding: 10px 30px!important; margin-left: -30px; margin-right: -30px; width: calc(100% + 60px)!important; } html body .settings-body .setting-group.col { margin-right: 0px!important; padding-right: 0px!important; width: 100%!important; padding-bottom: 40px; } .settings .settings-section { padding-left: 0px!important; } .integrations-section.settings-section.card { padding: 20px!important; } .zj-specification-body { top: 0px!important; } .the-body-section { overflow-y: auto; height: calc(100dvh - 64px); } .zj-specification-body .spec-sidebar, .zj-specification-body .spec-item-main-body { top: 0px; position: relative!important; } .spec-item-mobile-sidebar { top: 18px!important; } .btn.btn-transparent.edit-btn.edit-description-button.right { position: relative!important; } .ai-panel .prompt-container textarea { padding: 20px!important; } .ai-panel .prompt-container { padding-left: 0px!important; padding-right: 0px!important; bottom: 0px!important; border-radius: 0px!important; padding-bottom: 0px!important; } .prompt-container .input-field { border-radius: 0px!important; box-shadow: none!important; top: 0px!important; } .prompt-container .prompt-w-input { padding-bottom: 0px; } .prompt-container .prompt-w-input .input-field { top: 0px; } .prompt-actions { padding-left: 15px!important; } .prompt-actions .btn { float: left!important; } .prompt-container .ai-actions { bottom: 5px; padding-right: 0px!important; } .task-ai.oe { padding: 0px; height: calc(100dvh - 64px)!important; } .ai-panel .response-container { box-shadow: none!important; padding: 20px!important; border-radius: 0px!important; background-color: transparent!important; } .spec-sidebar { z-index: 9999!important; width: 0px!important; display: none; } .sidebar-open .spec-sidebar { width: 100%!important; display: inherit; } .spec-item-main-body { width: 100%!important; } html body .zj-jira-attachments.spec-images { padding: 0px 20px; height: auto!important; } .zj-specification-assets .zj-jira-attachments { height: calc(100vh - 135px)!important; } .spec-cover-overview .card { box-shadow: none!important; } body .spec-summary { padding-right: 0px!important; padding: 10px 20px 30px!important; height: 100%!important; min-height: calc(100vh - 133px); } ng-quill-editor > div > .ql-container .ql-editor { padding-left: 20px!important; padding-right: 20px!important; background-color: var(--white)!important; min-height: 100px!important; } body .zj-spec-summary.ql-editor { height: auto!important; overflow-y: initial!important; } body .spec-doc { box-shadow: none!important; border: none!important; border-bottom: 1px solid var(--lightgrey)!important; padding: 20px; margin: 0px 0px 1px!important; background-color: var(--extra-light); border-radius: 10px; } body .spec-doc:last-child { border-bottom: none!important; } body .spec-doc .sd-actions { padding-right: 0px!important; } body .spec-doc > div:first-child { padding-left: 0px!important; } body .spec-docs .spec-docs-body { max-height: calc(100vh - 274px)!important; overflow-y: auto; box-shadow: none!important; } body .spec-cover .zj-specification-outline { background-color: var(--white); position: relative; display: block; height: initial!important; } body .zj-epics-and-stories { height: calc(100vh - 268px)!important; border-right: none; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; } body .zj-specification-body .zj-specification-outline { height: calc(100vh - 188px)!important; } body .posts-sidebar { width: 100%!important; margin-right: 0px!important; padding-right: 0px!important; } .posts-sidebar-container { margin-left: 0px!important; max-width: 100%!important; } .product-posts .listings .page-header { min-width: 100%!important; } .product-posts { overflow-y: auto; height: calc(100vh - 64px); } .spec-cover .product-posts { height: 100%!important; } .posts-create { padding: 5px 20px!important; } .product-posts .listings .page-header { padding: 0px!important; } #quickProjectsSelector { width: 100%!important; } .spec-name .edit.edit-name.btn { position: absolute; top: 0; right: 0; background-color: var(--background-color)!important; } .spec-cover .spec-overview { padding: 0px!important; box-shadow: none!important; } .spec-overview-header { background-color: var(--white)!important; } body .ql-editor > ul { margin-top: 10px!important; margin-bottom: 10px!important; } .tabs li.tab { font-weight: bold!important; margin-right: 1px!important; user-select: none!important; cursor: pointer!important; } body .spec-title-tabs ul.tabs li a { color: #00a5d5!important; } .spec-cover { background-color: var(--white)!important; } .spec-title-tabs ul { margin-top: 10px!important; margin-bottom: 0px!important; } html body .zj-body .posts-create { box-shadow: none!important; padding-top: 20px!important; padding-bottom: 20px!important; border-radius: 0px!important; border-top: 1px solid var(--border)!important; border-bottom: 1px solid var(--border)!important; margin-bottom: 0px!important; } .zj-search-bar { padding: 10px 30px 20px!important; } html body .zj-search-bar { padding: 10px 0px 20px!important; } html body .outline-container .zj-search-bar { padding: 10px 30px 20px!important; } .zj-sf-filter:first-child .btn { border-left:1px solid #ececec!important; } .spec-outline-more-filters { border-right: none!important; height: 50px; line-height: 50px; position: relative!important; left: 0px; bottom: 0px; right: 0px; } body .zj-epics-and-stories ul li li { padding: 0px!important; width: 100%!important; display: block!important; margin-top: 0px!important; margin-bottom: 0px!important; margin-left: -5px; } body .zj-sl-epic-ticket:before { line-height: 32px; } body .zj-epics-and-stories ul li li:first-child { margin-top: 5px!important; } body .zj-epics-and-stories ul li { padding-bottom: 20px!important; font-size: 10.5pt; } body .posts-create .post-title input { background-color: #ffffff!important; padding-left: 15px!important; margin-bottom: 20px!important; border: 1px solid var(--lightgrey)!important; } body .posts-create .ql-editor.ql-blank::before { left: 15px!important; } html body .todo-items .edit-todo-body { height: calc(100vh - 244px)!important; border-radius: 0px!important; } body .todo-items { box-shadow: none!important; padding: 0px!important; position: relative; border-radius: 0px!important; } .todo-items .show-hide-completed .text-field:last-child { display: none; } .project-settings .col.m6:first-child { width: 100%!important; margin-right: 0!important; } body .ticket-todos { padding-bottom: 0px!important; padding: 0px!important; border-radius: 0px!important; border-bottom: 1px solid var(--border)!important; } .spec-comments-header-section { box-shadow: none!important; } .spec-comments-header-section .zj-spec-comment-textarea textarea { background-color: #f0f0f0!important; } .mobile-specification-details-actions .btn.active { color: #00a4d6!important; background-color: transparent!important; } .spec-name .edit.edit-name.btn { opacity: 1!important; background-color: transparent!important; } html body { background-color: var(--white)!important; width: 100%!important; min-width: 100%!important; max-width: 100%!important; height: -webkit-fill-available!important; } .zj-sl-info { padding-left: 0px!important; padding-right: 0px!important; } .core-list-item { border: none!important; box-shadow: none!important; } .create-new-post .btn { margin-right: 0px!important; } .post-bottom-bar .post-meta .btn > div:first-child { padding-left: 15px!important; } .create-new-project.card .project-type-selector .project-type { width: 100%!important; margin-bottom: 1px!important; } .create-spec .card { box-shadow: none!important; } .zj-specification-body .product-posts-container { height: 100%!important; } body .spec-statistics .row .card.col { box-shadow: none!important; padding-left: 0px!important; padding-right: 0px!important; margin: 0px!important; } .settings .card { box-shadow: none!important; } .integrations-section .integration.row > .s1 { padding-right: 0px!important; } .spec-cover .settings { height: calc(100vh - 189px)!important; overflow-y: auto!important; } .comment-selectors { display: none!important; } .mobile-spec-body .edit-spec-title { height: 50px!important; } .mobile-spec-body .spec-description-edit { display: inline-block; } .mobile-spec-body .mobile-edit-buttons .btn { height: 50px!important; width: 50px!important; display: inline-block; margin: 0px!important; } .mobile-spec-body .mobile-edit-buttons .btn i { line-height: 50px!important; } body .zj-sl-outline-buttons .btn { height: 50px!important; width: 50px!important; } body .zj-sl-outline-buttons .btn.outline-ticket-type { width: auto!important; } body .zj-sl-outline-buttons a.btn { width: 64px!important; max-width: 64px!important; } .zj-sl-outline-buttons .btn i { line-height: 50px!important; } .general-comments, .team-comments { box-shadow: none!important; max-height: calc(100vh - 285px)!important; } body .zj-specification-comments { padding-left: 0px!important; padding-right: 0px!important; } body .spec-comments-header-section { padding-left: 20px!important; padding-right: 20px!important; } body .spec-perms-editor .settings .project-details { padding-left: 40px!important; padding-right: 40px!important; } .spec-cover .spec-item, .spec-cover .zj-specification-item-details { position: relative!important; height: unset!important; overflow: inherit; } .spec-cover .spec-item { padding-top: 0px!important; } html body .spec-cover .zj-specification-item-details { top: 0px; } html body .stats-container { padding: 0px!important; } html body .stats-container .card { border-radius: 0px; border-top: 1px solid var(--background-color); } .spec-item-image-comments { display: none; } html body .row .spec-item-image-container { width: 100%!important; padding: 0px!important; } .spec-item-image-container .selected-spec-item-image { padding: 20px; } .task-attachments.upload-container { padding: 0px!important; } .task-attachments.upload-container .card { border-radius: 0px; height: calc(100dvh - 115px); } .zj-specification-details-actions { border-top: 1px solid var(--extra-light); } .vertical-tabs .tab { width: 33%!important; display: inline-block!important; float:left!important; text-align: center; } .document-modal { padding: 0px!important; } .document-modal .card { padding: 30px!important; } .account-info.row > .col { margin-bottom: 30px!important; } body .account .settings-section-wrapper .col.s12.m6 { padding-right: 0px!important; } .disabled-user-settings.col.s12.m6 { padding-bottom: 40px!important; padding-top: 40px!important; } .sidebar-header .sidebar-title { padding-left: 0px; } .sidebar-header { padding-left: 20px; padding-right: 20px; } .sidebar-header .sidebar-top-actions { display: none; } .settings .sidebar .sidebar-header, .settings .sidebar .sidebar-body { padding: 0px!important; } .settings .sidebar .sidebar-body li { width: 100%!important; height: 40px; line-height: 40px; margin-right: 0px!important; margin: 0px!important; padding: 0px; } .sidebar-body { padding: 0px 30px!important; height: 100%!important; -webkit-mask-image: none!important; overflow-y: auto!important; max-height: 100%!important; height: -webkit-fill-available!important; } .sps-sidebar .sidebar-body { height: calc(100vh - 200px)!important; max-height: calc(100vh - 200px)!important; padding: 0px 30px!important; } .todos-page .sidebar { height: 100%!important; max-height: 100%!important; } html body .sidebar-search input { padding-left: 30px!important; } .sidebar-footer .sidebar-actions { padding-left: 30px; } .sidebar-footer { padding-right: 20px; } .project-activity-page .sidebar-footer, .files-page .sidebar-footer, .schedules .sidebar-footer, .status-page .sidebar-footer { display: initial!important; } .schedules .sidebar-footer { bottom: 65px!important; } .account-sidebar .sidebar-footer { display: inherit; } .schedules .sidebar-body { height: auto!important; max-height: auto!important; padding: 0px 30px!important; } .favorite-spec-item .name { font-size: 10.5pt!important; } .favorite-spec-item { padding: 10px 20px!important; } .section-title .title-left, .section-title .title-right { margin-bottom: 10px; } html body .all-project-items .section-title .title-left {padding-left: 20px!important;display: block;min-width: 240px;width: 100%;max-width: calc(100% - 101px);} .title-left .project-location-selector.dropdown-select { max-width: 50%!important; min-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .title-left .the-selected-view { padding: 0px 10px 0px 20px; } .title-left .project-view-selector.dropdown-select { height: 60px; line-height: 60px; } .title-left .project-view-selector.dropdown-select i { display: none; } .title-left .project-view-selector.dropdown-select i.a-d-d { display: inline-block; } .project-location-selector.dropdown-select i:first-child { display: none; } .section-title .title-left .sub-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .portfolios-container { background-color: var(--background-color); padding: 0px!important; border-radius: 0px!important; } .portfolios-container .portfolio { border-radius: 0px; padding: 30px; height: calc(100vh - 64px); } .portfolio .header-toggle.p-view-selector > .btn.btn-transparent i { display: none; } .portfolio .header-toggle > .btn.btn-transparent { margin: 0px!important; } html .portfolio .header-toggle.the-views { margin-right: 0px!important; } html .portfolio .header-toggle .btn { padding: 0px 15px!important; } .portfolio .section-title .title-right { text-align: left!important; } html .portfolio .view-settings .header-toggle { margin-right: 0px!important; } body .header-input-field.input-field { width: 100%!important; margin-right: 0px!important; margin-bottom: 10px!important; margin-top: 10px!important; } body .portfolio .header-input-field.input-field { width: 40%!important; min-width: 40%; margin-top: 0px!important; } .portfolio .section-title .title-right { width: 100%!important; padding-top: 20px; float: none!important; } html body .all-specs .section-title .title-right { margin: 0px; padding-left: 0px; padding-right: 0px; width: 101px!important; min-width: 100px!important; text-align: right; } .edit-mode .change-columns .settings-panel { right: 0px!important; margin-right: 0px!important; } .edit-mode .settings-panel.filter-panel { right: 0px!important; } .specs .all-project-items .section-title .right-collection-actions { display: inline-block; } .specs .all-project-items .section-title .right-collection-actions i { line-height: 60px!important; } .specs .all-project-items .section-title .right-collection-actions .grid-filter i { line-height: 20px!important; } html body .all-specs .section-title.show-more-actions .title-right { width: 100%!important; } html body .all-specs .section-title.show-more-actions .title-right .projects-inline-searchbar, html body .all-specs .section-title.show-more-actions .title-left { display: none; } html body .all-specs .section-title.show-more-actions .title-right { height: 60px; } .title-right .change-columns, .title-right .filter-projects, .title-right .settings-btn { display: none; } .show-more-actions .title-right .change-columns, .show-more-actions .title-right .filter-projects, .show-more-actions .title-right .settings-btn { display: inline-block; } html body .all-specs .section-title.search-enabled .title-right input { border: none!important; padding-left: 20px!important; } html body .all-specs.roadmap .section-title .title-right { width: 50px!important; min-width: 50px; max-width: 50px!important; padding: 0px; display: inline-block; background-color: transparent; border-top: none; } html body .section-title .title-right .btn.btn-transparent i { margin: 0px; width: 50px; height: 60px!important; line-height: 60px!important; }html body .section-title .title-right .change-columns .settings-panel > .btn.btn-transparent, html body .section-title .title-right .change-columns .settings-panel > .btn.btn-transparent i { line-height: 40px!important; height: 40px!important; } .settings-panel.filter-panel > .btn.btn-transparent.right, .settings-panel.filter-panel > .btn.btn-transparent.right i { height: 40px!important; line-height: 40px!important; } html body .section-title.search-enabled .title-right .btn.btn-transparent.more-actions { display: none!important; } .more-actions.btn.btn-transparent.show-on-small-only { float: right; display: inline-block!important; } .roadmap .section-title .title-right .btn.btn-transparent.settings-btn { top: 2px; } .section-title .title-right .btn.btn-transparent.clear-search i {line-height: 60px!important;font-size: 15pt!important;} .section-title .title-right .btn.btn-transparent.start-search { height: 60px; line-height: 60px; float: right; display: inline-block; width: 50px; } .section-title .title-right .btn.btn-transparent.start-search i { line-height: 60px!important; } .btn.btn-transparent.show-full-screen { display: none!important; } .all-project-items .title-right .projects-inline-searchbar { height: 60px!important; width: 50px; line-height: 60px!important; margin: 0px; margin-right: 0px; display: inline-block; float: left; } .all-project-items .title-right .projects-inline-searchbar input { width: 100%!important; } .all-project-items .title-right .projects-inline-searchbar input { width: auto!important; height: 59px!important; margin-right: 20px; border-right: 1px solid var(--border); box-shadow: none!important; border-radius: 0px!important; vertical-align: top; padding-left: 0px!important; font-size: 10pt!important; background-color: transparent!important; display: none; } .all-project-items .search-enabled .title-right .projects-inline-searchbar input { display: unset; } .all-project-items .title-right .projects-inline-searchbar input[type="text"], .all-project-items .title-right .projects-inline-searchbar input[type="text"]:focus { background-color: transparent!important; } .todos-page .all-todos { height: 100%!important; } .project-outline .outline-container { padding: 0px 0px!important; } html body .non-editable-outline { padding-left: 30px; padding-right: 30px; padding-bottom: 0px!important; } body .project-section-selector { padding: 0px 30px 0px!important; } html body .spec-outline-title .project-title { color: var(--black); } html body .zj-sl-epic-ticket a { padding: 7px 0px!important; } html body .zj-sl-section-body li > .show-on-hover > .show-this { opacity: 1!important; visibility: visible; } html body .zj-sl-section-body li > .show-on-hover > .show-this i { color: white; } html body .project-header.row { padding-top: 0px; } html body .project-header #projectSection { margin-top: -10px; display: none!important; } .project-header #projectSection.active { display: block!important; } html body .project-section-header, html body .project-section-header i { padding-top: 10px; } html body .zj-specification-details-text { padding-left: 30px!important; padding-right: 30px!important; min-height: calc(100vh - 64px)!important; height: auto!important; } html body .spec-description-action-bar.row { border-top: 1px solid var(--extra-light); } .spec-item-dw.dropdown-wrapper { padding-left: 20px!important; } html body .spec-item-container .upload-container { position: relative!important; height: 100%!important; } .context-buttons.centered-buttons { left: unset!important; right: 50px; } html body .zj-specification-assets, html body .zj-specification-details-text { min-height: calc(100vh - 116px); padding-top: 30px!important; min-height: -webkit-fill-available; } html body .zj-specification-details {position: relative;} html body .edit-spec-title { padding-top: 0px!important; height: 60px; line-height: 60px; } html body .edit-spec-title input { padding-right: 70px!important; } .spec-item-comments-container .panel-comments { padding: 0px 0px!important; background-color: var(--white); } html body .zj-specification-assets { padding-top: 0px!important; height: auto!important; } body .ticket-todos { border-top: 1px solid var(--background-color); } html body .project-timelogs.page-body.oe { padding: 0px!important; } html body .project-timelogs.page-body.oe .pts-logs { border-radius: 0px!important; margin: 0px; border-top: 1px solid var(--background-color); height: unset!important; } .spec-item-integrations.oe { padding: 0px; } .spec-item-integrations.oe .card { border-radius: 0px; height: calc(100dvh - 115px); } html body .sp-spec { padding: 20px; } html body .sp-spec-header-area { padding-left: 20px; padding-right: 20px; } html body .filterz { bottom: 0px; } html body .spec-item-title { padding-top: 0px!important; margin-top: -10px; } html body .edit-spec-title-input { padding-left: 20px!important; padding-right: 20px!important; } html body .spec-item .cke_contents .cke_wysiwyg_div { padding-left: 20px; padding-right: 20px; } html body .outline-bottom-buttons .btn:last-child { padding-right: 14px!important; } html body .todo-list { height: calc(100vh - 272px); } html body .title-left { padding-left: 0px!important; } .portfolios-container .section-title .title-left { width: 100%!important; } html body .profile-todos-project-name.row .s12.col:last-child { text-align: left; padding-bottom: 2px; line-height: 20px; float: none; } html body .board-manager-wrapper { padding: 20px; } html body .core-list-item .row .m3 { width: 100%!important; } html body .task-nav-item.row .task-ni { float: none!important; text-align: left; } html body .spec-cover .document-settings { width: 100%!important; padding-bottom: 0px!important; padding-top: 0px; } html body .spec-cover .document-settings .col { padding-left: 0px!important; padding-right: 0px!important; } html body .integration .s1.right30 { padding-right: 10px!important; } html body .integration { max-width: 100%!important; flex: 0 0 100%!important; } .integrations .integration { width: 100%!important; } html body .card { box-shadow: none!important; margin-bottom: 0px!important; } html body .portfolios-container .portfolio .card { height: calc(100vh - 294px)!important; } body .the-projects-page .ui-grid .ui-grid-viewport { height: calc(100dvh - 286px)!important; } html body .setting-option { padding-bottom: 30px; } html body .timelog-day { height: auto!important; border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 10px; } .timelog-log-section .timelog-day > .col { border-bottom: 1px solid var(--border); } html body .create-new-timelog .timelog-day .col { padding: 0px!important; } html body .create-new-timelog .timelog-day .col input { padding: 0px 15px!important; } html body .create-new-timelog .timelog-day .btn { width: 100%!important; margin-top: 20px; } html body .user-initials-box { padding-right: 10px!important; padding-left: 15px; } #sidenav-overlay { display: none; } .public-users .user-list-section { width: 100%!important; padding-top: 20px; } .members-page .uls-team .user { width: 25%!important; max-width: 25%!important; min-width: 25%!important; } .members-page .uls-team .list-wrapper { margin-left: -10px; margin-right: -10px; } .members-page.oe { height: 100%!important; max-height: 100%!important; padding-top: 0px!important; } .spec-overview-actions { margin-top: 40px; } .spec-body { width: 100%!important; } .project-outline-item { padding-top: 5px!important; padding-bottom: 5px!important; line-height: 1.5!important; } body .project-outline-meta .project-outline-item .title { height: 34px; line-height: 34px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 11pt; } body .project-outline-meta .project-outline-item { height: 34px; line-height: 34px; padding-top: 0px!important; padding-bottom: 0px!important; font-size: 11pt; } html body .open-right.display-on-hover i { height: 34px!important; line-height: 34px!important; } body .project-outline-meta .project-outline-item .title::before { line-height: 34px!important; height: 34px; } .project-outline-item .title::before { line-height: 21px!important; } .project-settings .card { padding: 20px 30px!important; } html .document-settings .col.m6:first-child { padding-right: 0px!important; } html .user-editor .user-list.selected-user-list, html .deangelis-dropdown .list { max-height: 100%!important; height: 100%!important; overflow-y: inherit!important; padding-bottom: 40px; } .project-version-settings .settings-header .btn { margin-right: 20px; margin-top: -9px; } .row.setting-row.delete-project { padding-left: 30px; } .timelog-body-wrapper .google-chart { padding: 0px!important; } html .spec-cover .the-spec-timeline .timeline-items { padding: 0px!important; } html .the-spec-timeline { padding-right: 0px!important; -webkit-mask-image: unset!important; height: 100%!important; max-height: 100%!important; overflow-y: inherit!important; } .spec-sidebar .zj-spec-search.input-search input { padding-left: 20px!important; background-color: var(--extra-light)!important; } html .image-size-wrapper { width: 100%!important; padding-right: 20px!important; } html .spec-docs-section { padding: 0px!important; } .spec-documents { padding-top: 50px; -webkit-mask-image: unset!important; height: auto!important; max-height: auto!important; overflow-y: inherit!important; } .schedules .schedule-wrapper { padding: 70px 0px 30px!important; } body weekly-scheduler.scheduler.card { padding: 0px!important; } .listing-item .listing-item-header { padding: 30px 0px 0px!important; } body .listing-item .listing-description { padding-left: 0px!important; padding-right: 0px!important; } body .oe { -webkit-mask-image: unset!important; } .profile-sidebar-body .profile-menu-item { height: 50px; line-height: 50px; padding: 0px 20px; margin-bottom: 1px; background-color: var(--extra-light); } .spec-versions.oe { padding: 0px!important; } .spec-versions.oe .card { border-radius: 0px; } .spec-description-versions { height: calc(100dvh - 257px)!important; } .spec-description-version { height: 50px!important; line-height: 50px!important; margin-top: 0px; } .spec-description-version .bg-image { margin-top: 14px!important; } .the-spec-timeline.oe { padding: 0px!important; } .the-spec-timeline.oe .card { border-radius: 0px!important; padding: 30px!important; } .filter-message { padding: 10px 20px; } .listing-item .post-footer { padding-left: 0px!important; padding-right: 0px!important; } .status-page .zj-search-bar { padding: 0px!important; } .project-task { border-bottom: 1px solid var(--border); } html body .project-task .table-data-cell { padding-left: 0px!important; } html body .project-task .table-data-cell:first-child { font-size: 11pt!important; width: 100%!important; } html body ul#notifications { min-width: 100%!important; } html .profile-body .profile-sidebar { display: none; width: 0px; } html .the-profile-body { margin-top: 0px!important; } .the-profile-body .user-list-section.teams .sub-text { padding-left: 30px; margin: 0px!important; } .project-list-wrapper .user.team-user { padding: 30px!important; box-shadow: none; } .user.team-user .project-roles .list { border-radius: var(--border-radius); overflow: hidden; } .team-user .list-item { padding: 12px 20px; padding-bottom: 11px!important; background-color: var(--extra-light); margin-bottom: 1px!important; border-radius: 0px!important; } html .the-profile-body .profile-posts { padding: 30px; } html .profile-body.sidebar-open .profile-sidebar { display: inherit!important; width: 100%!important; z-index: 9999!important; position: fixed; min-width: 100%!important; height: calc(100vh - 63px)!important; } html .profile-body .the-profile-body-container { width: 100%!important; height: auto!important; } html .profile-page .card { padding: 20px 30px!important; } .profile-user-meta.title { margin-bottom: 11px; } .user-profile-body.card.ql-editor .edit-profile-button .btn { float: left; margin: 0px!important; padding: 0px!important; } html .profile-sidebar-meta { font-size: 11pt; height: 35px; line-height: 35px; } html .profile-sidebar-meta i { font-size: 18pt; line-height: 35px!important; vertical-align: middle!important; width: 30px; margin-right: 10px!important; } html .profile-page .the-profile-image { max-width: 150px!important; margin: 0px auto 50px!important; } html .profile-page .the-profile-image { border-radius: var(--border-radius)!important; } html .profile-project-section { height: auto!important; margin-bottom: -10px; } html .profile-project-section .col { text-align: left!important; } html .profile-project-section > .row { padding: 20px; background-color: var(--extra-light); border-radius: 5px; } html .profile-page-projects .project-name, html .profile-page-projects .col, html .profile-project-section .project-status { line-height: 20px; vertical-align: top!important; } html .project-roles-options, html .project-roles-options .custom-dropdown { text-align: left!important; height: 50px!important; line-height: 50px!important; display: inline-block!important; width: 100%!important; margin-top: 0px!important; } html .project-roles-options .custom-dropdown { float: right; } html .profile-task-items .items > .item .the-project-task-items { height: 50px!important; line-height: 50px; margin-bottom: -4px!important; margin-left: 0px!important; margin-right: 0px!important; padding: 0px 15px!important; width: 100%; background-color: var(--extra-light); border-radius: 5px; } html .project-roles-title { width: 80%!important; margin-bottom: 20px; } html .user-list-section .project-roles-title { margin-left: 25px; margin-top: 25px; margin-bottom: 0px; } html .user-list-section .project-list-wrapper .project-roles-title { margin: 0px; } html .the-profile-body .notifications-queue { width: 100%!important; } html body .the-profile-body #donutchart { width: 100%!important; max-width: 100%!important; } html .team-settings.settings-section .team { width: 100%!important; max-width: 100%!important; padding-right: 0px!important; } html .settings .sidebar { height: auto!important; padding: 20px!important; } html .settings .settings-section-wrapper.card { padding: 20px!important; } html .settings-wrapper, html .admin-settings-body{ height: 100%!important; max-height: 100%!important; overflow-y: hidden; border-left: 1px solid var(--border); } html .account .settings-section-wrapper .col.s12.m6:nth-child(2n) { padding-left: 0px!important; } html .stat-widget { max-width: 100%!important; } html .account-sidebar .sidebar-body, html .account-sidebar.sidebar, html .timeline-page .timeline-items, html .the-support-page .board-sidebar, html .support-page, html .collection-body { height: 100%!important; overflow-y: inherit!important; max-height: 100%!important; } html .timeline-page .timeline-items .account-activity-card { padding: 20px!important; } html .support-page { padding: 20px!important; } html .support-page .card.medium-card { width: 100%!important; padding: 0px!important; } html .the-release-notes { width: 85%; } html .context-buttons.right { width: auto!important; bottom: 0px; top: inherit; } .attachments-card, .project-item-activity, .spec-versions-card, .task-integration-card { padding: 40px; } .listing-item .listing-item-header { padding-top: 0px!important; } .notification-type-item .type-title { width: calc(100% - 60px)!important; } html .project-timelogs .timelog-day .timelog-date { width: 33%!important; } .timelog-checkbox.timelog-delete { top: 0px; } .document-settings .feature { flex: 0 0 100%!important; } } /* CHAT STYLES */ .chat-panels-container { display: flex; height: 100%; position: relative; width: 100%; max-width: 550px; background-color: var(--white); } .intelligence-session-settings-modal { width: 100%; height: calc(100dvh - 64px); } .intelligence-session-settings-modal .dropdown-selector > .ai-icon.jt1 { color: var(--primary); font-size: 18px; margin-right: 10px; margin-left: 5px; } .chat-expanded .chat-panels-container { max-width: 380px; } /* Mobile Navigation Header */ .mobile-nav-header { display: none; position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--border); padding: 12px 16px; align-items: center; justify-content: space-between; } .mobile-nav-back { cursor: pointer; padding: 8px; border-radius: 50%; transition: background-color 0.2s; } .mobile-nav-back:hover { background-color: var(--extra-light); } .mobile-nav-title { font-weight: 600; font-size: 16px; flex: 1; text-align: center; } .mobile-nav-actions { display: flex; align-items: center; } /* Desktop Layout */ .desktop-view .contacts-panel { width: 280px; min-width: 280px; } .desktop-view .main-chat-panel { flex: 1; min-width: 0; } .desktop-view .main-chat-panel.has-thread-sidebar { border-right: 1px solid var(--border); } .desktop-view .thread-sidebar-panel { width: 350px; min-width: 350px; background: var(--white); border-left: 1px solid var(--border); } /* Sidebar Mode (when chat is not expanded) */ .sidebar-view .contacts-panel { width: 100%; } .sidebar-view .main-chat-panel, .sidebar-view .thread-sidebar-panel { display: none; } .nav-sidebar .sidebar-view.mobile-chat-view .contacts-panel { display: none; } .sidebar-view.mobile-chat-view .main-chat-panel { display: block !important; width: 100%; height: 100%; } .sidebar-view.mobile-thread-view .contacts-panel, .sidebar-view.mobile-thread-view .main-chat-panel { display: none; } .sidebar-view.mobile-thread-view .thread-sidebar-panel { display: block; width: 100%; height: 100%; } /* Mobile Layout */ @media (max-width: 768px) { .mobile-nav-header { display: flex; } .chat-panels-container { flex-direction: column; } /* Mobile view states */ .mobile-contacts-view .contacts-panel { display: block; width: 100%; height: 100%; max-width: 100%; } .mobile-contacts-view .main-chat-panel, .mobile-contacts-view .thread-sidebar-panel { display: none; } .mobile-chat-view .main-chat-panel { display: block !important; width: 100%; height: 100%; } .mobile-chat-view .contacts-panel, .mobile-chat-view .thread-sidebar-panel { display: none; } .mobile-thread-view .thread-sidebar-panel { display: block; width: 100%; height: 100%; } .mobile-thread-view .contacts-panel, .mobile-thread-view .main-chat-panel { display: none; } /* Hide desktop-specific elements on mobile */ .mobile-contacts-view .general-header, .mobile-chat-view .general-header, .mobile-thread-view .general-header { display: none; } /* Adjust chat input for mobile */ .mobile-chat-view .chat-input-container, .mobile-thread-view .chat-input-container { position: sticky; bottom: 0; background: var(--white); border-top: 1px solid var(--border); z-index: 10; } } /* Thread sidebar animations */ .thread-sidebar-panel.sliding-in { animation: slideInRight 0.3s ease-out; } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Hide elements with utility classes */ .mobile-hidden { display: none !important; } .desktop-hidden { display: none !important; } /* Ensure proper scrolling in panels */ .contacts-panel, .main-chat-panel, .thread-sidebar-panel { overflow-y: auto; height: 100%; width: 100%; } .main-chat-panel { background-color: transparent; overflow-y: hidden; } /* Thread header styling */ .thread-header { position: sticky; top: 0; background: var(--white); border-bottom: 1px solid var(--border); padding: 16px; display: flex; align-items: center; gap: 12px; z-index: 10; } .thread-back-button { cursor: pointer; padding: 8px; border-radius: 50%; transition: background-color 0.2s; } .thread-back-button:hover { background-color: var(--extra-light); } .thread-title { flex: 1; font-weight: 600; font-size: 16px; } /* Mobile fullscreen thread */ @media (max-width: 768px) { .mobile-fullscreen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--white); } } /* Contact item mobile touch targets */ @media (max-width: 768px) { .contact-item { padding: 16px; min-height: 60px; display: flex; align-items: center; border-bottom: 1px solid var(--border); cursor: pointer; transition: background-color 0.15s; } .contact-item:hover, .contact-item:active { background-color: var(--extra-light); } } /* Current Project Item - Fixed above footer */ .current-project-fixed { position: absolute; bottom: 50px; /* Above footer */ left: 0; right: 0; z-index: 10; background: var(--white); } @media (max-width: 768px) { .current-project-fixed { position: relative; bottom: auto; border-top: none; } } / @media (max-width: 768px) { .contacts-panel .chat-panel-container { padding-bottom: 0; } } /* Main chat panel integration with responsive system */ .main-chat-panel.chat-editor-container { height: 100%; display: flex; flex-direction: column; } /* Chat messages mobile optimization */ @media (max-width: 768px) { .chat-message { padding: 8px 16px; } .message-actions { position: sticky; right: 16px; top: 50%; transform: translateY(-50%); } } @media screen and (max-width: 900px) { .listings .listing-items { min-width: 100%!important; padding-left: 0px!important; padding-right: 0px!important; } html body .listings .listing-item { padding: 0px 30px!important; padding-bottom: 40px!important; box-shadow: none!important; border-bottom: 1px solid var(--background-color)!important; } body .product-posts .listings { width: 100%!important; height: 100%!important; padding-left: 0px!important; padding-right: 0px!important; margin-top: 7px!important; } .listings .listing-author-info { margin-top: 3px!important; } .listing-title.vert-middle { display: inline-block!important; } } @media screen and (max-width: 1860px) { html body .spec-item .cke .cke_top { height: 66px!important; } html body .spec-item .cke .cke_contents { height: calc(100dvh - 245px)!important; scrollbar-gutter: auto; } html body .meta-panel .spec-item .cke .cke_contents { height: calc(100dvh - 241px)!important; } } @keyframes ai-dot-pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; -webkit-appearance: none; margin: 0; padding: 0; } .vert-middle { display: flex; justify-content: center; flex-direction: column; } ul.dropdown-content .selected { color: var(--primary)!important; margin-bottom: 0; } ul.dropdown-content .selected .number-of { color: var(--primary); } ul.dropdown-content .selected a { color: var(--primary)!important; } .listings .listing-item { padding: 40px; position: relative; background-color: var(--white); box-shadow: 0px 1px 2px var(--shadow); margin-bottom: 30px; } /* Transient highlight when scrolled to from a mention/notification click. scrollIntoView() adds .selected for 4s; the global `.selected { color: primary }` would otherwise recolor the whole card's text. */ .listing-item.selected { color: inherit; box-shadow: 0px 0px 0px 2px var(--primary); transition: box-shadow 0.3s ease; } .listing-item .listing-description ul { padding-left: 40px; margin-top: 1em; margin-bottom: 1em; } .listing-item .listing-description ul ul ul { margin-top: 5px; margin-bottom: 5px; } .listings .listing-item:hover .edit-post-actions { opacity: 1; } .listings .listing-item .row { display: block; } .listing-title .title { font-size: 13pt; line-height: 1.2; font-weight: 600; color: var(--dark); } .listing-meta-item { font-size: 8.5pt; display: inline-block; margin-right: 10px; border-radius: 2px; color: #777; cursor: pointer; } .listing-meta-item:hover { color: #16acd8; } .listing-meta-item i { font-size: 10pt; margin-right: 5px!important; line-height: 1!important; vertical-align: top; } .listing-meta { margin-top: 0px; line-height: 1; } .listing-item .listing-description { text-align: left; overflow: hidden; text-overflow: ellipsis; padding: 5px 0px 20px!important; font-size: 14px; transition: all .5s ease-in-out; z-index: 1; } .listing-item .listing-description.ql-editor { padding-bottom: 20px!important; vertical-align: top; } .notes-container .listing-item .listing-description.ql-editor { padding-bottom: 10px!important; padding-top: 10px!important; } .panel-comments .listing-description.ql-editor .post-body-content { /* max-height: 40dvh; */ /* overflow: hidden; */ /* -webkit-line-clamp: 4; */ } .panel-comments .single-post .listing-description.ql-editor .post-body-content { max-height: unset; } .panel-comments .listing-description.ql-editor.full .post-body-content { max-height: 100%!important; } .ai-convo .post-body-content { position: relative; } .ai-loading .ai-convo .post-body-content { max-width: 100px; max-height: 100px; } .ai-convo .post-body-content.ellipsis { white-space: normal; } .ai-convo .post-body-content ul, .ai-convo .post-body-content ol { white-space: normal; margin: 0!important; } .ai-convo .post-body-content ul li:last-child, .ai-convo .post-body-content ol li:last-child { margin-bottom: 0; } .ai-convo .post-waiting-section { display: block; width: 100%; padding-top: 30px; } .ai-convo .listing-description.ql-editor.no-padding { /* padding: 10px 0px 0px!important; */ } .ai-convo.response .listing-description.ql-editor.no-padding { padding-top: 0px!important; padding-right: 0!important; padding-left: 0!important; } .image-annotations .listing-item .listing-description { padding: 0px 30px!important; } .support-page .listing-item .listing-description { z-index: 0; } .listing-item .listing-description.full { max-height: 100%; } .listings .listing-author-img { width: 40px; float: right; margin-left: 15px; color: #777; border-radius: 2px!important; overflow: hidden; }.listings .listing-author-info { text-align: right; color: var(--icon-color); }.listing-actions { font-size: 8.5pt; margin-top: 20px; display: inline-block; width: 100%; } .listing-item .listing-action { display: inline-block; margin-right: 20px; user-select: none; cursor: pointer; color: #9c9c9c; padding-left: 0px; } .listing-comment-body .listing-action i { font-size: 11.5pt; display: inline-block; margin-right: 4px; margin-top: 4px; } .listings .listing-items { padding-bottom: 20px; } body .listing-actions .listing-action:last-child { margin-right: 0px; } .listing-actions .listing-action.liked, .listing-actions .listing-action:hover { color: #16acd8; } .listing-actions .listing-action i { font-size: 12pt; margin-right: 5px; } .listing-actions .right { text-align: right; } .listings .zj-actions-bar-buttons { margin-bottom: 0px; } .listing-actions-meta { cursor: pointer; } .listing-actions-meta:hover, .listing-actions-meta:hover i { color: var(--primary); } .listing-actions-meta i { font-size: 12pt; color: #777; } .listing-actions-meta .like-details i { margin-right: 5px; } i.close-inline-dialog { margin-right: 0px!important; position: absolute; top: 10px; right: 10px; height: 20px; width: 20px; line-height: 20px; text-align: center; user-select: none; font-size: 10pt!important; padding: 0px; border-radius: 50px!important; color: var(--black); box-shadow: 0px 1px 2px var(--shadow); background-color: var(--xwhite); } i.close-inline-dialog:hover { background-color: var(--primary); color: var(--awhite); } .product-posts .listings { padding-left: 0px; padding-right: 0px; width: auto; margin: 40px auto!important; max-width: 780px; float: none; } .project-todos .product-posts .listings { max-width: 100%; padding-left: 0px!important; padding-right: 0px!important; height: calc(100dvh - 64px); overflow-y: auto; padding-bottom: 20px; margin-top: 0px!important; padding-top: 40px; padding-bottom: 40px; } .ai-convo.response .listing-item-header { padding: 0px; /* margin-bottom: 10px!important; */ } .listing-item .listing-item-header { opacity: 1; z-index: 9; } .image-annotations .listing-item .listing-item-header { padding: 30px 30px 10px; } .listing-comment { font-size: 10pt; } .listing-comment:first-child { padding-top: 0px!important; } .listing-comments > .listing-comment::before { content: ' '; height: 100%; width: 1px; background-color: var(--border); position: absolute; left: 17px; z-index: 0; top: 20px; } .listing-comment { position: relative; } .listing-comment:hover .delete-comment { display: inline-block; bottom: 5px; } .listing-comment:hover .delete-comment i { margin-top: 0px; padding-bottom: 10px; padding-right: 0px; padding-left: 10px; font-size: 14pt; float: right; } .listing-author-comment { display: inline-block; line-height: 1.7; border-radius: 2px; font-size: 9pt; }.listing-comments .comments-text-editor-author { width: 35px; max-width: 35px; min-width: 35px; margin-right: 15px; float: left; display: inline-block; padding-bottom: 20px; position: relative; z-index: 9; } .listing-comments .comments-text-editor { margin-top: 10px; } .listing-comments .comments-text-editor-textarea { overflow: hidden; } .listing-actions-meta.right i { margin-left: 7px; } /* files-043: the drop overlay is position:absolute with inset 0, so it sizes to the nearest POSITIONED ancestor. On the full-page posts surfaces that is the intent. On a task's Comments tab — a sub-panel — it would otherwise escape the panel and cover the page, including the Files tab's own drop zone. Confine it. */ .spec-item-comments-container.upload-here { position: relative; } .upload-items { position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 9999; background-color: var(--primary); color: white; font-size: 16pt; opacity: 0!important; visibility: hidden!important; transition: opacity .2s ease-in-out; text-align: center; } .create-new-post .upload-items i { color: var(--awhite)!important; } .upload-items .upload-frame { position: absolute; display: flex; align-items: center; justify-content: center; top: 20px; bottom: 20px; right: 20px; left: 20px; border: 2px dashed white; display: none; z-index: 999999999; } .hovered .upload-items .upload-frame { display: flex; align-items: center; justify-content: center; } .hovered .upload-items { visibility: visible!important; opacity: 1!important; } .image-upload { background-color: white; width: 70%; padding-top: 5px; padding-bottom: 5px; max-width: 640px; margin: 10px auto; border-radius: var(--border-radius-xs); font-size: 10pt; color: #18add6; } .upload-icon i { font-size: 60pt!important; } .upload-icon { margin-bottom: -20px; padding: 0px!important; } .uploaded-files { display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; padding-top: 15px; } .uploaded-files .uploaded-file { padding-top: 20px; width: 100%; flex-grow: 1; } .uploaded-files .uploaded-file.file { padding: 10px 20px; font-size: 12px; color: var(--black); background-color: var(--light-white); position: relative; margin-top: 1px; } .uploaded-files .uploaded-file.file i { position: absolute; right: 15px; top: 10px; font-size: 13pt; color: var(--warning)!important; display: none; transition: all .3s ease-in-out; opacity: 0; cursor: pointer; user-select: none; } .uploaded-files .uploaded-file.file:hover i { display: block; opacity: 1; } .uploaded-files .uploaded-file.image { display: inline-block; float: left; max-width: 33.3%; position: relative; } .uploaded-files .uploaded-file.image i { position: absolute; bottom: 0px; right: 0px; color: var(--warning)!important; background: var(--white); width: 20px; height: 20px; font-size: 12pt; line-height: 20px; text-align: center; transition: all .3s ease-in-out; opacity: 0; cursor: pointer; } .uploaded-files .uploaded-file.image:hover i { opacity: 1; } .uploaded-files.image { display: inline-block; max-width: 33%; float: left; vertical-align: top; margin-right: 1%; } .uploaded-file.image .upload-image { height: 150px; background-size: cover; background-position: center center; } body .modal { padding: 40px 40px 30px; } body .modal .modal-content { padding: 0px; } .modal .modal-footer a:last-child { margin-right: -15px; } .modal .modal-footer .btn-flat { float: none!important; } .modal .modal-footer { text-align: right; background-color: transparent!important; } .ng-hide { height: 0px!important; width: 0px!important; overflow: hidden; } .search-results .clear-results { text-align: center; margin-bottom: 20px; background-color: var(--extra-light); padding-top: 5px; padding-bottom: 5px; cursor: pointer; border-radius: 50px; font-size: 9.5pt; } .search-results .clear-results:hover { background-color: #00a5d5; color: white; } .search-results ul { padding-left: 20px!important; } .search-results .search-result-item { margin-bottom: 2px; line-height: 20px; padding-bottom: 3px; list-style: none!important; font-size: 11pt; } .search-results .search-result-item:before { content: '\2022'; color: var(--icon-color); margin-right: 5px; margin-left: -15px; font-weight: bold; font-size: 16pt; vertical-align: middle; line-height: .5; } .listing-meta .show-on-small { font-size: 8.5pt; } .listing-meta .show-on-small > div { display: inline-block; } .post-comment-actions { margin-top: -3px; }.edit-post-actions i { font-size: 14pt; margin-right: 3px!important; } body .btn i, body .btn-large i, body .btn-floating i, body .btn-large i, body .btn-flat i, body .btn-transparent i { font-size: 13pt; } .post-comment-reply textarea { border: none; background-color: #f5f6f5!important; outline: none; padding: 5px; display: inline-block; width: 87%; } .post-comment-reply { margin-top: 5px; } .bold {font-weight: 600;} .enhanced { margin-top: 10px!important; } .todo-option i { position: absolute; right: 0px; padding-left: 10px; padding-right: 10px; top: 0px; line-height: 45px; } .bottom10 { margin-bottom: 10px; } .sidebar-footer .btn-transparent.btn:first-child { padding-left: 0px!important; } .page { position: absolute; width: 82%; right: 0px; top: 64px; height: calc(100dvh - 64px); padding: 30px; } .page-title { font-size: 11pt; padding-bottom: 10px; } .overview-meta .meta-names::after {content: ', ';opacity: 0;display: none;} .trend-chart { padding: 20px 0px; } .product-dialog { position: fixed; top: 0px; bottom: 0px; right: 0px; left: 0px; padding: 80px 30px; z-index: 9999999999999999999999999999999999999999999999999999999; background-color: rgba(0, 0, 0, .7); } .product-dialog .m6:first-child { padding-right: 15px!important; } .product-dialog .m6:last-child { padding-left: 15px!important; } .product-dialog .card { max-width: 840px; margin: 0px auto; padding: 40px; } .priorities-editor .card { max-width: 670px; display: block!important; } .priorities-editor .card .ta-right .btn:last-child { padding-right: 0px!important; } .priorities-editor .card .ta-right .btn i { color: var(--icon-color); } .priorities-editor .card .ta-right .btn i.selected { color: var(--primary); } .product-dialog .modal-buttons { text-align: right; margin-top: 20px; } .product-dialog .modal-buttons .btn:last-child { padding-right: 0px!important; } .product-dialog .sub-text { padding-bottom: 10px; } .btn.dropdown-btn { background-color: var(--light)!important; color: var(--black)!important; text-transform: initial; height: 45px; line-height: 45px; width: 100%; text-align: left; margin-bottom: 20px; } .btn.btn-transparent.dropdown-btn[data-activates="restoreOrder"] { margin-bottom: 0px; height: 50px; line-height: 50px; padding: 0px 20px!important; } .btn.dropdown-btn:hover { background-color: var(--extra-light)!important; } .product-list-item .left { padding-right: 30px; padding-left: 20px; } .product-list-item .right { padding-right: 20px; } .product-list-item div { display: inline-block; padding-left: 20px; padding-right: 20px; color: var(--black); width: 100%; } .product-list-item .right-side {/* text-align: right; */color: var(--light-text);/* float: right; */} .product-list-item { padding: 20px 0px!important; line-height: 45px!important; } .product-list-item { line-height: 18px!important; } body .progress { background-color: var(--background-color); height: 10px; } .project-quick-stats .text-field.progress { max-width: calc(100% - 90px); display: inline-block; margin: 0px!important; margin-bottom: 1px!important; line-height: 30px; } .new-chart-name { font-size: 11pt; margin-bottom: 2px; } .new-chart-type.sub-text { font-size: 9pt; padding-bottom: 4px; } .new-chart-items { padding-top: 10px; } .rotate90 { transform: rotate(90deg); } .helper-text { text-align: left; font-size: 9.5pt!important; margin-bottom: 0px!important; } .settings-panel { position: absolute; right: 0px; top: 53px; background-color: var(--xwhite); z-index: 9999; width: 100%; max-width: 420px; box-shadow: 0px 1px 3px var(--shadow); border-radius: var(--border-radius-tiny); } .settings-panel.roadmap-settings { right: -40px; top: 56px; min-width: 400px; } body .settings-panel .setting-group .setting-group-header { font-size: 10pt!important; color: var(--primary); line-height: normal; margin-bottom: 0px!important; } .panel-buttons .sub-text { line-height: normal; } .setting-group .setting .text-field label { margin-bottom: 3px!important; line-height: 20px!important; font-size: 9pt; } .setting-group { padding-bottom: 10px; } .setting-group input { margin-bottom: 0px!important; padding-right: 20px!important; height: 50px!important; line-height: 50px!important; } .setting .text-field { line-height: normal; } .setting { padding-bottom: 10px; } .panel-buttons { text-align: right; padding-top: 10px; padding-bottom: 20px; padding-right: 30px; padding-left: 30px; } .change-columns .panel-buttons { margin-bottom: 5px; } .panel-buttons .btn { font-size: 10pt!important; } .panel-buttons .btn:last-child { padding-right: 0px!important; color: var(--primary)!important; } .panel-buttons .btn:first-child { padding-left: 0px!important; } .setting-group .sub-text { line-height: normal; margin-bottom: 10px; padding-bottom: 20px; } .settings-panel-body { max-height: calc(100dvh - 245px); margin: 0px 0px; padding: 0px 30px; position: relative; } .roadmap .settings-panel-body { max-height: calc(100dvh - 321px); } .change-columns .settings-panel-body { margin: 0px!important; padding: 0px 30px 30px; text-align: left; } .settings-panel-title { padding-bottom: 20px; font-size: 11pt!important; height: 62px; line-height: 62px; padding-left: 30px; padding-right: 30px; text-align: left; } .right-separator { padding-right: 2px; } body .chip { background-color: var(--white); color: var(--black); float: left; margin-bottom: 0px!important; /* margin-right: 5px; */ position: relative; } .chip:last-child { margin-right: 10px!important; } body .chip:hover { background-color: var(--primary); color: var(--awhite); } body .chip:hover i { color: var(--awhite)!important; } body .chip:hover i { color: var(--awhite); } .tag-editor { padding-bottom: 20px; } .tag-editor-comp { padding: 0px 15px !important; background-color: var(--background-color); display: inline-block; width: 100%; padding-top: 5px!important; padding-bottom: 5px!important; border-radius: 5px; } .card-body { max-height: calc(100dvh - 260px); position: relative; margin-left: -40px; margin-right: -40px; padding-left: 40px; padding-right: 40px; } .dialog-buttons { padding-top: 20px!important; }.full-screen-dialog { background-color: var(--white); position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; padding: 50px; height: 100dvh; overflow: overlay; box-sizing: border-box; z-index: 9999999999999999999999999999!important; } .spec-settings-editor .full-screen-dialog { background-color: var(--background-color); /* width: 480px; */ } .omni-search.full-screen-dialog { text-align: center; opacity: 0; visibility: hidden; } .omni-search.full-screen-dialog h5 { margin-bottom: 10px; margin-top: 20px; font-weight: 200; } .omni-search.full-screen-dialog.active { opacity: 1; visibility: visible; background-color: var(--background-color); } .dark .omni-search.full-screen-dialog.active { background-color: var(--extra-light); } .close-fsd { top: -30px; right: -30px; } html body .omni-search.full-screen-dialog .projects-inline-searchbar input[type=text] { width: 100%!important; height: 64px!important; line-height: 64px!important; background-color: var(--white)!important; border-bottom: 1px solid var(--border)!important; padding-left: 30px!important; padding-right: 30px!important; border-radius: 5px 5px 0px 0px!important; display: inline-block; } .omni-search.full-screen-dialog .projects-inline-searchbar { border-radius: var(--border-radius-tiny); height: auto!important; margin: 0px; box-shadow: var(--box-shadow); background-color: var(--extra-light); width: 100%!important; max-width: 500px; } .the-projects-page .full-screen-dialog {position: fixed!important;display: block!important;top: 64px;height: calc(100dvh - 64px);} .full-screen-dialog .left-contents {padding-right: 30px!important;} .full-screen-dialog .right-contents { padding-left: 15px!important; } .full-screen-dialog .close-btn { position: absolute; right: 50px; top: 55px; } .list { margin-top: 10px; } .list-view .list { margin-top: 0px; } .list .list-item { cursor: pointer; padding-bottom: 5px; } .list .list-item .project-status { font-size: 10pt; float: left; } .list .list-item:hover { background-color: var(--light); } .list-view .list .list-item:hover { background-color: transparent; color: var(--primary); } .profile-projects .list .list-item:hover { background-color: transparent; } .list-view .li-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 20px!important; } .list .list-item .li-meta { font-size: 9pt; color: var(--light-text); } .inline-align { display: inline-block; } .inline-align:last-child { float: right; } .custom-dropdown { position: relative; display: inline-block; width: auto; line-height: 50px; height: 50px; } nav .project-roles-options .custom-dropdown { height: 50px; line-height: 50px!important; } body .custom-dropdown i { line-height: 56px!important; margin-left: 0px!important; } body .custom-dropdown .cd-handle i { line-height: 50px!important; margin-left: 5px!important; } .cd-list { position: absolute; left: 0px; min-width: 270px; bottom: 0px; z-index: 9999; box-shadow: 0px 1px 4px var(--shadow); border-radius: var(--border-radius-tiny); overflow: hidden; } #selectTodoList, #selectTaskList { left: unset; right: 0px; user-select: none; min-width: 200px; } .project-roles-options .cd-list { right: 0px; top: 0px; left: unset; bottom: unset; } .footer-panel .project-roles-options .cd-list { top: unset!important; bottom: 0px; right: unset; left: 0px; } .my-task-list .cd-list { min-width: 150px; } .my-task-list .cd-list .cd-list-item { background-color: var(--xwhite); } .cd-list-item { padding: 0px 20px; background-color: var(--white); color: var(--black); height: 50px; line-height: 50px; cursor: pointer; position: relative; font-size: 13px; } html body .cd-list-item .lever { position: absolute!important; right: 0px; top: 20px; } .cd-list-item:hover { background-color: var(--hover-item); color: var(--primary); } .cd-handle { cursor: pointer; } .cd-handle:hover, .custom-dropdown .cd-handle:hover i { color: var(--primary)!important; } .link { cursor: pointer; } .link:hover { text-decoration: underline; color: var(--primary); } .activity-header { font-size: 10.5pt; margin-bottom: 10px; } .card .activity-header { margin-bottom: 15px; } .bottom20 { padding-bottom: 20px; } .row.margin-bottom-20, .margin-bottom-20 { margin-bottom: 20px!important; } .text-align-center { text-align: center; } .relative { position: relative; } .clear-input i {line-height: 45px;vertical-align: middle;display: inline-block;} .ten .core-list-item .m3 { width: 28%!important; } .nine .core-list-item .m3 { width: 30%!important; } .eight .core-list-item .m3 { width: 38%!important; } .seven .core-list-item .m3 { width: 40%!important; } .six .core-list-item .m3 { width: 45%!important; } .five .core-list-item .m3, .four .core-list-item .m3, .three .core-list-item .m3, .two .core-list-item .m3 { width: 50%!important; } .one .core-list-item .m3 { width: 100%!important; } .text-field .switch label { display: inline-block; width: auto; float: right; } .w780 { max-width: 780px; } .top20 { padding-top: 20px!important; } .top40 { padding-top: 40px; } html body .right10 { padding-right: 10px!important; } html body .left10 { padding-left: 10px!important; } .text-field .dropdown-content li { line-height: 50px!important; color: var(--black); padding: 0px 15px; } .text-field .dropdown-content li a { padding-left: 0px; padding-right: 0px; color: var(--black); } .text-field #statuses .dropdown-content li a { color: initial!important; } .overview-meta .text-field #statuses.dropdown-content li a { color: unset; } .dropdown-content input[type="text"] { background-color: transparent!important; /* border-bottom: 1px solid var(--border)!important; */ border-radius: 0px!important; } .dropdown-content li:hover input[type="text"] { background-color: var(--white)!important; } .dropdown-search-input input { height: 50px!important; line-height: 50px!important; } .dropdown-content li.user-searcher:hover input[type="text"] { background-color: var(--xwhite)!important; } .dropdown-content input[type="text"]:focus { border-bottom: 1px solid var(--black)!important; } html body .dropdown-content input[type="text"]:focus { border-bottom: 1px solid var(--veryvery-light)!important; } .dropdown-content .add-new { color: var(--primary)!important; text-transform: uppercase; } .valign-middle { display: table-cell; } .line-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .svg-icon img { vertical-align: middle; }.mention-user { height: 45px; line-height: 45px; padding-left: 15px; padding-right: 15px; vertical-align: middle; cursor: pointer; } html body .light-text { color: var(--light-text)!important; } html body .light-text.good { color: var(--good)!important; } .svg-image { min-width: 150px; } .widget-header { font-size: 11pt; margin-bottom: 10px; } .extra-light-text { color: var(--light-text); } .font11 { font-size: 11pt; } .nav-widget-header { padding: 30px 30px 0px; } .nav-widget-header .btn.selected { border-bottom: none!important; } .inlineb { display: inline-block; } .width100 { width: 100%; } .primarycolor { color: var(--primary); } .top10 { padding-top: 10px; } .user-searcher i { position: absolute; right: 0px; top: 0px; padding-right: 20px; } body .user-searcher input[type="text"] { background-color: var(--xwhite)!important; margin-top: 0px!important; height: 50px; line-height: 50px; border-bottom: none!important; } .public-users { border-radius: 5px; } .ralign { text-align: right; } .collection-body { max-height: calc(100dvh - 322px); overflow-y: auto; border-radius: 0px 0px 10px 10px; background-color: var(--white); margin-left: -40px; padding-left: 40px; margin-right: -40px; padding-right: 40px; }.cli-editor .a-collection .collection-body { margin: 0px; padding: 0px; border-radius: 0px 0px 5px 5px; } .dropdown-search-creator ul.dropdown-content { -webkit-mask-image: inherit; } .taright { text-align: right; } .the-profile-body-container { display: inline-block; float: right; width: calc(100% - 288px)!important; overflow-y: auto!important; height: calc(100dvh - 64px); } .primary {color: var(--primary);} .strong { font-weight: 500; } .left15, .left15.col { padding-left: 15px!important; } .dropdown-content .loading-message { height: 50px!important; text-align: center; position: relative; display: inline-block; width: 100%; } .dropdown-content .loading-message i { float: none!important; margin: 0px auto; display: block; position: relative!important; } .full-width-override {width: 100%!important;} .spec-body {width: calc(100% - 300px);float: right!important;height: calc(100dvh - 64px);} .projects-sidebar.sidebar {height: calc(100dvh - 64px);margin-top: 0px;position: relative;width: 260px;float: left;display: block;/* transition: all .7s ease-in-out; */} .full-screen .projects-sidebar.sidebar { left: -19%!important; } .component-toggle {width: 100%;clear: both;display: inline-block;border-radius: 5px;overflow: hidden;padding-left: 30px;padding-right: 30px;margin-bottom: 10px;} .component-toggle .toggle-option {display: inline-block;width: 50%;float: left;text-align: center;padding: 0px;line-height: 40px;height: 40px;background-color: var(--background-color);font-size: 10pt;user-select: none;} .component-toggle .toggle-option:last-child { border-radius: 0px 5px 5px 0px; } .full.component-toggle .toggle-option {width: 100%!important;border-right: none!important;} .component-toggle .toggle-option:first-child {border-right: 1px solid var(--light);border-radius: 5px 0px 0px 5px;} .toggle-option.selected { background-color: var(--primary); color: var(--awhite)!important; box-shadow: 0px 1px 3px var(--shadow); } .component-toggle .toggle-option:hover {color: var(--primary);/* background-color: var(--light); */cursor: pointer;} .dark-img img {opacity: .4!important;transition: opacity .5s ease-in-out;} .dark-img img:hover { opacity: 1!important; } .dark-img img:hover, .dark-img .ssii:hover img { opacity: 1!important; } .dark img:hover {opacity: 1;} .ta-left {text-align: left;} .left5 {padding-left: 5px;} .color-white, .color-white i {color: var(--black)!important;} .color-black, .color-black i { color: var(--black)!important; } input[type=range] { height: auto!important; outline: none!important; border: none!important; margin: 0px!important; } input[type=range]+.thumb {background-color: var(--primary)!important;display: none;} input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; background-color: var(--primary)!important; box-shadow: none!important; } input[type=range]:focus { outline: none!important; } input[type=range]::-webkit-slider-runnable-track { width: 100%; cursor: pointer; box-shadow: none!important; background-color: var(--light-text)!important; border-radius: 1.3px; border: none!important; outline:none!important; } input[type=range]::-webkit-slider-thumb { box-shadow: 1px 1px 1px var(--black), 0px 0px 1px var(--black); border: 1px solid var(--black); height: 36px; width: 16px; border-radius: 3px; background: var(--primary); cursor: pointer; -webkit-appearance: none; margin-top: -14px; } input[type=range]:focus::-webkit-slider-runnable-track { background: var(--primary); } input[type=range]::-moz-range-track { width: 100%; height: 8.4px; cursor: pointer; box-shadow: 1px 1px 1px var(--black), 0px 0px 1px var(--black); background: var(--primary); border-radius: 1.3px; border: 0.2px solid var(--black); } input[type=range]::-moz-range-thumb { box-shadow: 1px 1px 1px var(--black), 0px 0px 1px var(--black); border: 1px solid var(--black); height: 36px; width: 16px; border-radius: 3px; background: var(--border); cursor: pointer; } input[type=range]::-ms-track { width: 100%; height: 8.4px; cursor: pointer; background: transparent; border-color: transparent; border-width: 16px 0; color: transparent; } input[type=range]::-ms-fill-lower { background: var(--primary); border: 0.2px solid var(--black); border-radius: 2.6px; box-shadow: 1px 1px 1px var(--black), 0px 0px 1px var(--black); } input[type=range]::-ms-fill-upper { background: var(--primary); border: 0.2px solid var(--black); border-radius: 2.6px; box-shadow: 1px 1px 1px var(--black), 0px 0px 1px var(--black); } input[type=range]::-ms-thumb { box-shadow: 1px 1px 1px var(--black), 0px 0px 1px var(--black); border: 1px solid var(--black); height: 36px; width: 16px; border-radius: 3px; background: var(--primary); cursor: pointer; } input[type=range]:focus::-ms-fill-lower { background: var(--primary); } input[type=range]:focus::-ms-fill-upper { background: var(--primary); } .request-center { position: fixed; bottom: 30px; right: 15px; padding-right: 0px; padding-bottom: 0px; width: 50px; } .com-request img { width: 50px; height: 50px; border-radius: 50px; box-shadow: 0px 1px 3px var(--shadow); background-color: var(--primary); } .com-request .tiny-badge { position: absolute; top: -5px; right: -5px; height: 25px; line-height: 25px; visibility: visible; opacity: 1; } .com-request .tiny-badge.remove { visibility: hidden; opacity: 0; transition: opacity .3s ease-in-out; } .com-request:hover .tiny-badge.remove { visibility: visible; opacity: 1; } .com-request .tiny-badge i { height: 20px; width: 20px; text-align: center; border-radius: 50px; line-height: 20px; font-size: 10pt; color: var(--awhite); background-color: var(--primary); } .com-request { line-height: 50px; display: grid; cursor: pointer; position: relative; margin-top: 7px; background-color: var(--primary); border-radius: 50px; } .communication-center { z-index: 99999999999999999999; } .color-warning { color: var(--warning); } .italic { font-style: italic; } .absolute { position: absolute; } .top0 { top: 0px; } .checkbox-selector { height: 35px; line-height: 35px; text-transform: capitalize; vertical-align: middle; cursor: pointer; white-space: nowrap; } .checkbox-selector i {vertical-align: middle;margin-right: 10px;height: 35px!important;line-height: 32px!important;color: var(--icon-color)!important;} .strikethrough { text-decoration: line-through; color: var(--light-text); } .mobile-close-btn { position: absolute; top: -2px; right: 0px; } .section-tabs .btn-tab.active {color: var(--primary)!important;/* border-bottom: 1px solid var(--primary); */} .section-tabs .btn-tab {border-radius: 0px!important;font-size: 10pt!important;font-weight: 400;border-bottom: 1px solid transparent;color: var(--black)!important;margin-bottom: -1px!important;} .account .section-tabs .btn-tab { margin-left: -2px; } .section-tabs { /* padding-bottom: 5px; */ } .space-settings-page .section-tabs { max-width: 1040px; margin: 0px auto!important; padding-bottom: 0; } .intelligence-settings .section-tabs { /* padding-bottom: 5px; */ /* margin-top: -16px; */ } .btn.btn-clear { position: absolute!important; right: 0px; top: 0px; width: 50px!important; height: 50px!important; text-align: center!important; } .btn.btn-clear i { line-height: 40px!important; position: relative!important; } .stabs { margin-top: 0px; margin-bottom: 5px; background-color: var(--white); border-radius: var(--border-radius-tiny); padding: 10px 30px!important; box-shadow: var(--box-shadow); } .inline-user-selector { position: absolute!important; right: 0px; top: 0px; z-index: 99999; box-shadow: var(--box-shadow); border-radius: var(--border-radius-tiny); overflow: hidden; } .inline-user-selector .user-list { max-height: 40dvh; overflow-y: auto; } .user-viewer { position: relative; background-color: var(--background-color); padding: 30px; border-radius: var(--border-radius-tiny); box-shadow: var(--box-shadow); } .account .user-viewer { background-color: var(--white); padding: 40px; } .right20, .col.right20 { padding-right: 20px!important; } .project-menu-items a { color: var(--black)!important; } .embeded-spec-item-link { background-color: var(--extra-light)!important; padding: 1px 8px; border-radius: 50px; cursor: pointer; border: 1px solid var(--border); } .embeded-spec-item-link:hover { background-color: var(--primary)!important; color: var(--awhite)!important; border-color: var(--primary)!important; } .table-data-cell.col.m1 { padding-right: 20px!important; } .tdc-title { color: var(--black); height: 50px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .table-data-cell-subitem .btn.btn-transparent, .table-data-cell-subitem .ds-text { height: 50px; line-height: 50px; vertical-align: middle; font-size: 9pt; width: 100%; padding-left: 0px; text-transform: inherit; text-align: center; } .table-data-cell-subitem .text-field.with-dropdown .btn { padding-right: 0px!important; text-align: center; } .table-data-cell-subitem .btn.btn-transparent i { line-height: 51px; vertical-align: middle; width: auto; right: -10px; position: absolute; color: var(--light-text); opacity: 0; padding-left: 3px; } .table-data-cell-subitem .btn.btn-transparent:hover i { opacity: 1; } .project-tasks-body { height: calc(100dvh - 224px); background-color: var(--white); border-radius: 0px 0px 10px 10px; overflow-x: hidden; } .project-tasks .col-default { opacity: 0; } .project-tasks .col-default:hover { opacity: 1; } .outline-editor .project-item.outline-title input { font-size: 10pt!important; font-weight: 400!important; margin-bottom: 10px!important; } .outline-editor .project-item.is-pending input { opacity: 0.6; } .outline-editor .project-item .wrapper i.oe-drag-handle { position: absolute; left: -18px; top: 6px; font-size: 14px; color: var(--light-text); cursor: grab; opacity: 0; transition: opacity 0.15s; z-index: 2; user-select: none; } .outline-editor .project-item:hover .wrapper i.oe-drag-handle { opacity: 0.5; } .outline-editor .project-item .wrapper i.oe-drag-handle:hover { opacity: 1 !important; color: var(--primary); } .outline-editor .project-item .wrapper i.oe-drag-handle:active { cursor: grabbing; } .oe-sort-placeholder { border: 1px dashed var(--light-border); border-radius: 3px; margin-bottom: -7px; height: 32px !important; min-height: 0 !important; max-height: 32px !important; background: transparent; padding: 0 !important; margin-top: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } .oe-sort-placeholder * { display: none !important; } .outline-editor .indenting .wrapper::before { color: var(--status-color, var(--light-text)); } .project-outline-item .title::before { color: var(--status-color, var(--orange)); } .outline-editor .outline-delete-section { position: relative; padding: 0; /* margin-left: -5px; */ /* margin-top: -5px; */ } .outline-editor .outline-delete-section i { font-size: 19px; margin-right: 9px; } .outline-editor .outline-delete-section .inline-dialog { position: absolute; bottom: 100%; left: 0; z-index: 9999; margin-bottom: 4px; } .ellipsed {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} [contenteditable=true]:empty:not(:focus):before { content: 'Add replies. Use @ to mention.'; color: var(--light-text); cursor: text; pointer-events: none; } .add-todo [contenteditable=true]:empty:not(:focus):before { content: 'Add todos. Use @ to assign and # to tag...'; } [contenteditable=true] { outline: none!important; } .ticket-todos .add-todo [contenteditable=true] { min-height: 50px; border-bottom: 1px solid var(--border); padding: 15px 30px 0px 0px; max-height: 50dvh; overflow-y: auto; font-family: var(--body-font); } .edit-todo-body [contenteditable=true] { min-height: 90px; background-color: var(--background-color); padding: 15px; border-radius: 5px; font-size: 11pt; } .content-editable { background-color: var(--background-color)!important; padding: 15px; text-align: left; width: calc(100% - 0px)!important; min-height: 70px; float: right; border-radius: var(--border-radius-tiny); border: 1px solid var(--light-border); font-size: 10pt; } .image-annotations .leave-todo-comment .content-editable { width: calc(100% - 28px)!important; } .comment-comment-reply .content-editable { width: 100%!important; font-size: 10pt; line-height: 1.6; } .selected { color: var(--primary); } .user-menu.header-profile-menu img { max-width: 30px; max-height: 30px; border-radius: 5px; vertical-align: middle; margin-top: -1px; } .post-reactions .like-num { cursor: pointer; height: 20px; line-height: 20px; width: 20px!important; margin-top: 0px; margin-left: -3px; } .post-reactions .like-num:hover { background-color: var(--highlight); color: var(--ablack); } .post-reactions .show-who { padding-top: 5px; margin-bottom: 0px!important; padding-right: 35px!important; } .inline-dialog .btn { height: 20px; line-height: 20px; vertical-align: top; padding-right: 0px!important; position: absolute; top: 15px; right: 15px; } body .team-settings .inline-dialog .btn { position: relative!important; top: 0px; padding: 0px 5px!important; height: 45px!important; line-height: 45px; right: 0px; width: auto!important; margin-left: 10px; } .inline-dialog .btn i { font-size: 12pt; } .show-who .btn i { line-height: 20px; height: 20px; margin-top: -10px; } .selectable { cursor: pointer; } .add-existing-items { background-color: var(--veryvery-light); border-radius: 10px; box-shadow: 0px 1px 3px var(--shadow)!important; width: calc(100% + 30px); max-height: calc(50dvh); overflow-y: auto; z-index: 99999999999999999; margin-bottom: 6px; margin-left: -15px; margin-right: -15px; margin-top: 5px; } .add-existing-items .list-item { padding: 0px 15px; font-family: var(--body-font); color: var(--black); height: 50px; line-height: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-title { padding: 5px 15px; text-transform: uppercase; font-size: 9pt; color: var(--primary); } html body ul li.dropdown-search-input input[type="text"] { margin-bottom: 0px!important; padding: 0px 20px!important; font-size: 9.5pt!important; border-bottom: none!important; color: var(--black); } html body ul li.dropdown-search-input input[type="text"]:focus { border-bottom: none!important; } .dropdown-search-input i { position: absolute; right: 0px; height: 45px; width: 45px; text-align: center; line-height: 46px; font-size: 12pt; color: var(--black); } .dropdown-search-input i:hover { color: var(--primary); } .overflow-menu.oe { /* height: 33dvh; */ } .cke_autocomplete_panel { background-color: var(--white)!important; } .admin-settings-section h6 { font-size: 13pt!important; margin-bottom: 0; font-weight: 400!important; } .admin-settings .card, html .account.settings .card { padding: 0!important; background: none!important; border: none!important; box-shadow: none!important; } .account.settings .github .card { background-color: var(--white)!important; padding: 40px!important; box-shadow: var(--box-shadow)!important; } html .admin-settings .card, html .account.settings .card.card-enforced { padding: 40px!important; background-color: var(--white)!important; height: auto!important; box-shadow: var(--box-shadow)!important; } html .account.settings .settings-section .card { /* background-color: var(--white)!important; */ /* padding: 40px!important; */ margin-bottom: 5px!important; margin-top: 0!important; /* box-shadow: var(--box-shadow)!important; */ } .settings-section .github .card { padding: 40px!important; } .sso-settings-page .card {} html .account.settings .integration-editor.jira .integrations-body .card { padding: 0px!important; background-color: transparent!important; box-shadow: none!important; border-radius: 0!important; } html .account.settings .okr-editor .card { background-color: var(--white)!important; box-shadow: var(--box-shadow)!important; padding: 40px!important; } .list-commas::after { content: ', '; } .list-commas:last-child::after { content: ''; } span.list-commas:last-child::after { content: ''; } .sp-spec-list-title { margin-top: 30px; margin-bottom: 10px; text-transform: uppercase; max-width: 800px; margin: 0px auto 3px; color: var(--light-text); font-weight: 600; } .sps-body .sp-spec-list-title { margin-top: 20px; margin-bottom: 20px; } .sp-spec-list:first-child .sp-spec-list-title { margin-top: 0px!important; } .sp-spec-list { padding: 10px 0px 20px; max-width: 800px; margin: 0px auto 20px; } .sidebar-body .sp-spec-list:first-child {margin-top: 0px!important;padding-top: 0px!important;} .full-screen { position: fixed!important; top: 0px!important; left: 0px!important; right: 0px!important; bottom: 0px!important; background-color: var(--xwhite)!important; z-index: 9999999999999999999!important; height: 100dvh!important; padding: 0px!important; display: inline-block!important; width: 100vw!important; } .row.component-sl-item { height: 50px; line-height: 50px; padding: 0px 20px; background-color: var(--extra-light); list-style: none; margin-bottom: 1px!important; vertical-align: top; } .dark .row.component-sl-item { margin-bottom: 2px!important; } .row.component-sl-item.integration-listing { background-color: var(--white)!important; border-radius: var(--border-radius-tiny); box-shadow: var(--box-shadow); } .meta-panel .row.component-sl-item.integration-listing { background-color: var(--background-color)!important; } body .row.integration-listing:hover { background-color: var(--extra-light)!important; } .jira-integration-project-link .component-sl-item { cursor: inherit!important; padding-right: 0px; padding-left: 20px!important; background-color: var(--white); margin: 0px!important; } .jira-integration-project-link .component-sl-item:first-child { border-bottom: 1px solid var(--border); margin-bottom: 0px!important; border-radius: var(--border-radius-tiny) var(--border-radius-tiny) 0px 0px; cursor: pointer!important; } .jira-integration-project-link .dropdown-selector:hover { background-color: var(--extra-light)!important; } .component-sl-item:last-child { margin-bottom: 0px; } .component-simple-list .component-sl-item a, .component-simple-list .component-sl-item { color: var(--black); } .component-simple-list .component-sl-item .num-of { height: 20px; width: 20px; border-radius: 5px; background-color: var(--primary); color: var(--awhite); text-align: center; line-height: 20px; margin-top: 16px; font-size: 9pt; } .component-simple-list .component-sl-item.add-new-item, .component-simple-list .component-sl-item.add-new-item:hover { background-color: var(--light)!important; } html body .jira-integration-project-link .component-simple-list .component-sl-item.add-new-item { padding-left: 0px!important; margin-bottom: 20px!important; border-radius: var(--border-radius-tiny)!important; height: 50px; line-height: 50px; background-color: var(--white)!important; box-shadow: var(--box-shadow); } .component-simple-list .component-sl-item.add-new-item, .component-simple-list .component-sl-item.add-new-item:last-child { margin-bottom: 1px!important; } .add-new-item .col { height: 50px; border-right: 1px solid var(--border); } .add-new-item .col:last-child { border-right: none!important; } html body .left20 { padding-left: 20px!important; } html body .left15 { padding-left: 15px!important; } .component-sl-item .btn { height: 50px; } .component-simple-list .component-sl-item:hover { cursor: pointer; } .jira-header-row:hover { background-color: var(--extra-light); } .jira-header-row:hover a { color: var(--primary)!important; text-decoration: none!important; } .jira-header-row:hover a.jira-open-in-external { color: var(--black)!important; } .jira-header-row:hover a.jira-open-in-external:hover { color: var(--primary)!important; } a.component-sli-text:hover, a.component-sli-text.sub-text:hover { color: var(--primary)!important; } li.component-sl-item a:hover { text-decoration: none; } li.component-sl-item i { line-height: 50px; height: 50px; vertical-align: middle; margin: 0px 6px; font-size: 13pt; cursor: pointer; } .jira-integration-project-link .component-sl-item i {font-size: 12pt;line-height: 49px;vertical-align: middle;/* margin-left: -33px!important; */right: 14px;cursor: pointer;} .jira-integration-project-link .component-sl-item i:hover { color: var(--primary); } .jira-integration-project-link .component-sl-item .the-actions i { margin-left: unset!important; } .component-sli-text.sub-text { color: var(--light-text)!important; margin-bottom: 0px!important; padding-left: 3px; } .component-sli-text.sub-text.status-field { border-right: 1px solid var(--border); } .component-sli-text.sub-text .dropdown-content { max-width: 380px; width: 100%; } .component-sli-text .dropdown-selector i { line-height: 50px; width: 20px; margin-left: 2px; font-size: 13pt; text-align: center; position: absolute; right: 10px; } .inline-image img { display: inline-block!important; max-height: 17px!important; line-height: 40px!important; box-shadow: none!important; margin-right: 2px; vertical-align: middle; margin-top: -2px; margin-left: 5px; width: auto; } .component-sli-text .dropdown-selector { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; padding-right: 30px; padding-left: 20px; text-align: left; background-color: var(--white); vertical-align: top; height: 50px; } .component-sli-text.status-field .dropdown-selector { border-right: 1px solid var(--border); } .component-sli-sub-row .col.s6 .dropdown-selector { border-left: none!important; border-right: 1px solid var(--border); background-color: var(--white); } .jira-sub-row.component-sli-sub-row .col.s6 .dropdown-selector { border-bottom-left-radius: var(--border-radius-tiny); } .component-sli-text .dropdown-selector img { width: 18px; margin-top: 16px; margin-right: 8px; box-shadow: none; } .component-sli-text.s1 .dropdown-selector { padding: 0px!important; height: 50px; text-align: right; border-bottom-right-radius: var(--border-radius-tiny); } .component-sli-text.s1 .dropdown-selector i { text-align: center; right: 0px; width: 100%; } .component-sli-text .dropdown-selector:hover {background-color: var(--light);} .component-sli-text:last-child { padding-right: 0px; } .component-sli-text.status-field { text-align: right; } .dropdown-content.single-item-dropdown { max-height: 50dvh!important; border-radius: var(--border-radius-smallish)!important; } .dropdown-content.single-item-dropdown li .user-image { max-width: 30px; max-height: 50px!important; line-height: 50px!important; vertical-align: middle; padding-right: 10px; float: left; } .component-sli-text input { font-size: 10pt!important; margin-bottom: 0px!important; height: 50px!important; } .dropdown-search-input-container { padding-left: 0px!important; padding-right: 0px!important; } .dropdown-search-input-container input { padding-left: 20px!important; padding-right: 20px!important; } .component-simple-list { border-radius: 5px; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .rotate { animation: rotation 1.4s infinite linear; } .wrap-overflow-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body .as-icon { position: absolute; font-size: 10pt; background-color: var(--white); height: 26px; width: 26px; text-align: center; vertical-align: middle; line-height: 24px!important; border-radius: 50px; margin-top: 12px; cursor: default; user-select: none; font-size: 12pt!important; border: 1px solid var(--border); transform: rotate(90deg); color: var(--good)!important; } html body .row.component-sli-sub-row { vertical-align: top; } .row.component-sli-sub-row.jira-sub-row { height: 50px; line-height: 50px; border: none; background-color: transparent; margin-top: 0px!important; } .component-sli-sub-row:last-child {border-radius: 0px 0px var(--border-radius-tiny) var(--border-radius-tiny);} .row.component-sli-sub-row .option-title { display: inline-block; width: 100%; color: var(--light-text); } .jira-quick-view .row .option-title { font-weight: 400; color: var(--black); margin-top: -10px; } .jira-quick-view .option-title { font-size: 15px; } .row.component-sli-sub-row .content-editable { background-color: var(--background-color)!important; font-size: 14px; padding-left: 90px; } .dark .row.component-sli-sub-row .content-editable { background-color: var(--light)!important; } html body .no-r-padding { padding-right: 0px!important; } .row.component-sli-top-row { height: 30px; line-height: 30px; vertical-align: top; } .dropdown-search-creator .dropdown-content .user-image img { margin-right: 0px!important; } .cke_panel_listItem > a { padding: 10px!important; } html body .cke_panel_listItem a { height: 50px!important; line-height: 50px!important; padding: 0px 15px!important; border: none!important; outline: none!important; } html body .cke_panel_listItem a h1, html body .cke_panel_listItem a h2, html body .cke_panel_listItem a h3, html body .cke_panel_listItem a h4, html body .cke_panel_listItem a h5, html body .cke_panel_listItem a h6, html body .cke_panel_listItem a p, html body .cke_panel_listItem a div { font-family: var(--body-font)!important; } .cke_combopanel { width: 200px!important; } .cke.cke_combopanel { box-shadow: 0px 1px 5px var(--shadow); border-radius: 5px; background-color: var(--white)!important; } .cke_panel_grouptitle { display: none!important; } .cke_dialog_ui_checkbox label::before { height: 15px!important; width: 7px!important; } .cke_dialog_contents .cke_dialog_ui_checkbox label::before { width: 15px!important; height: 15px!important; line-height: 15px!important; vertical-align: middle!important; cursor: pointer; } .cke_dialog_contents .cke_dialog_ui_checkbox:hover label::before { border-color: var(--black)!important; } .cke_dialog_contents [type="checkbox"]:checked+label::before { width: 6px!important; margin-left: 4px; height: 17px!important; margin-top: 2px; border-left-color: transparent!important; border-top-color: transparent!important; } .cke_dialog .cke_tpl_item td span { font-family: var(--body-font); } .cke_dialog .cke_tpl_item td span.cke_tpl_title { font-family: var(--body-font); font-size: 10pt; margin-bottom: 2px!important; display: inline-block; width: 100%; color: var(--black)!important; } .cke_dialog_contents_body .cke_tpl_list > a:first-child { border-radius: 5px 5px 0px 0px!important; overflow: hidden; } .cke_dialog_contents_body .cke_tpl_list > a:last-child { border-radius: 0px 0px 5px 5px!important; } .spec-item .cke_contents .cke_wysiwyg_div pre { overflow: auto!important; white-space: break-spaces; } html .linked-comment, .open-in-new-container .linked-comment { background-color: var(--primary); color: var(--white); transition: all .25s ease-in; } .state-comments .linked-comment a, .open-in-new-container .linked-comment a { color: var(--white); text-decoration: underline; } .state-comments .my-private-comment.linked-comment.private, .open-in-new-container .my-private-comment.linked-comment.private { background-color: var(--primary)!important; color: var(--white)!important; cursor: pointer!important; } .state-comments .linked-comment:hover, .state-comments .my-private-comment.linked-comment.private:hover, .open-in-new-container .linked-comment:hover, .open-in-new-container .my-private-comment.linked-comment.private:hover { background-color: var(--good)!important; } .state-comments .linked-comment.selected, body .linked-comment.selected, .open-in-new-container .linked-comment.selected { background-color: var(--good)!important; color: var(--ablack)!important; } .state-comments .linked-comment.private.selected, .state-comments .linked-comment.private, body .linked-comment.private.selected, body .linked-comment.private { background-color: transparent!important; color: var(--black)!important; cursor: text!important; } .state-comments .my-private-comment.linked-comment.private.selected, body .my-private-comment.linked-comment.private.selected { background-color: var(--good)!important; color: var(--ablack)!important; cursor: pointer!important; } .linked-todo:hover, .linked-comment:hover { cursor: pointer; background-color: var(--primary); color: var(--awhite); } .todo-selected-text .linked-comment { background-color: var(--good); color: var(--ablack); } .the-project-boards { max-height: calc(100dvh - 64px); } .btn.btn-new2023 { border-radius: 5px!important; margin-right: 2px; font-size: 9pt; } .btn.toggle-btn { background-color: var(--white); color: var(--black); } .btn.toggle-btn.selected { background-color: var(--primary); color: var(--awhite); } .set-post-privacy .chip { font-size: 9pt; color: var(--light-text); height: 25px; line-height: 25px; margin-top: -1px; margin-right: 0px!important; border: none; } .set-post-privacy .chip:hover { background-color: var(--extra-light); } .set-post-privacy .chip i { font-size: 9pt; margin-right: 6px; margin-left: -2px; float: left; line-height: 26px; } .jira-icon { width: 16px; margin-right: 10px; vertical-align: middle; box-sizing: border-box; max-height: 50px; } .jira-icon img { box-shadow: none!important; width: 18px!important; } .jira-header-row .jira-icon img { vertical-align: middle; margin-top: -4px; } .notes-page { height: calc(100dvh - 64px); overflow-y: auto; padding-top: 50px!important; padding-bottom: 50px; } body .cke_dialog_body .cke_tpl_preview { margin-left: 0px!important; padding-left: 0px!important; margin-right: 0px!important; padding-right: 0px!important; width: 100%!important; } body .cke_dialog_body .cke_tpl_preview td span { font-family: var(--body-font)!important; text-decoration: none!important; color: var(--light-text)!important; } body .cke_dialog_body .cke_tpl_item { padding: 10px 15px!important; margin-bottom: 1px!important; } .overview-fl { width: 110px!important; display: inline-block; padding-right: 10px; }.complex-li-main { line-height: 20px; padding: 10px 0px; text-align: left; display: block; float: none; width: 100%; } .product-list-item.complex-li { padding: 0px 0px!important; } .complex-li-sub {padding: 0px!important;color: var(--light-text)!important;} .circle-number { display: inline-block; min-width: 20px; height: 20px; background-color: var(--background-color); color: var(--black); text-align: center; border-radius: 20px; font-size: 8pt; line-height: 20px; padding: 0px 5px; user-select: none; cursor: pointer; } .section-header-row .circle-number { border-radius: 3px; padding: 0; height: 20px; line-height: 20px; margin-left: 10px; } .section-header-row .circle-number i { font-size: 12pt; line-height: 20px!important; color: var(--icon-color)!important; } nav .tasks .item .circle-number i { height: 20px; line-height: 20px; color: var(--black); font-size: 14pt; } .todos-project-header .circle-number { border-radius: 5px; background-color: var(--awhite); color: var(--primary); font-weight: 500; padding-right: 0px; min-width: 10px; display: inline-block; float: right; } .dark .todos-project-header .circle-number { background-color: var(--primary); color: var(--black); } .todos-project-header .circle-number { margin-top: 0px; padding-left: 0px; } .todos-project-header .circle-number { width: 20px; height: 20px; background-color: var(--white)!important; text-align: center; margin-left: 10px; } .todos-project-header .circle-number i { line-height: 20px; height: 20px; font-size: 15pt; color: var(--icon-color); background-color: var(--background-color); border-radius: var(--border-radius-tiny); } .todos-project-header .circle-number.opened i { transform: rotate(180deg)!important; } .right-contents .circle-number { right: 0px; top: 1px; line-height: 20px; height: 20px; width: 20px; text-align: center!important; padding: 0px!important; background-color: transparent; user-select: none; transform: rotate(-180deg); border-radius: 3px; } .tasks .right-contents .circle-number { right: 25px; top: 18px; } nav .tasks .right-contents .circle-number { top: 16.5px; right: 20px; margin-left: 10px; background-color: var(--white); } .right-contents .circle-number i { width: 20px; height: 20px; font-size: 15pt; line-height: 20px!important; color: var(--black); transform: rotate(0deg); } .dark .right-contents .circle-number { background-color: var(--extra-light); }.todos-project-header .right-contents .circle-number.opened:hover { background-color: var(--primary)!important; } .todos-project-header .right-contents .circle-number.opened i {color: var(--icon-color);} .todos-project-header .right-contents .circle-number i { line-height: 20px; height: 20px; font-size: 14pt; color: var(--icon-color); } html body .collapsed .right-contents .circle-number { transform: rotate(0deg) !important; } .circle-number:hover { background-color: var(--primary)!important; color: var(--awhite); } .tasks.profile-task-items .circle-number:hover i { color: var(--awhite)!important; } .circle-number:hover i { color: var(--awhite)!important; } .w90 { width: 90px!important; } .header-text { padding-bottom: 6px; font-family: var(--body-font); font-weight: 500; font-size: 10pt; } html .ui-grid { border: none!important; outline: none!important; box-shadow: none!important; } .specs .ui-grid, .specs .ui-grid-header-cell { background-color: transparent; } .specs .ui-grid { border-radius: 5px!important; max-height: calc(100dvh - 274px); background-color: var(--white); box-shadow: 0px 1px 3px var(--shadow)!important; } .water-bg .specs .ui-grid {background-color: rgb(17 17 17 / 80%);} .specs .ui-grid { max-height: calc(100dvh - 183px)!important; height: calc(100dvh - 183px)!important; z-index: 2; position: relative; } .specs .full-screen .ui-grid { max-height: calc(100dvh - 268px); } html .ui-grid-header { border-color: var(--border); border-bottom: none; } html .ui-grid-header-cell { border-color: var(--light-border); color: var(--black); height: 60px; margin-top: 0px; line-height: 60px; font-size: 13px; vertical-align: middle; } html .ui-grid-header-cell [ui-grid-filter] { display: none; } html .ui-grid-header-cell:hover { border-color: transparent!important; } .ui-grid-header-cell:hover { border-right-color: var(--border)!important; } html .ui-grid-header-cell:hover { color: var(--primary); } html .ui-grid-header-cell:hover .ui-grid-column-resizer { background-color: var(--border); } html .ui-grid-header-cell .ui-grid-column-resizer.left { width: 0px!important; } html .ui-grid-header-cell .ui-grid-column-resizer.right { border-right: 1px solid var(--border); transition: all .1s ease-in-out; width: 5px; opacity: 0; background-color: transparent; } html .ui-grid-header-cell .ui-grid-column-resizer.right:hover { border-color: var(--primary); } html .ui-grid-header-cell:hover .ui-grid-column-resizer.right { opacity: 1; } html .ui-grid-top-panel { background-color: transparent; border-bottom: 1px solid var(--light-border); height: 60px; } html .ui-grid-cell { height: 50px!important; line-height: 50px; border-color: transparent; } html .ui-grid-cell .editable-cell:hover { background-color: var(--extra-light)!important; } .ui-grid-cell .btn.btn-transparent { opacity: 1!important; width: 50px; text-align: center; padding: 0px!important; height: 50px; vertical-align: top; line-height: 50px; margin: 0px!important; background-color: transparent!important; transition: none!important; } .clickable-cell .btn.btn-transparent.description-btn { position: absolute; right: 0px; top: 0px; height: 50px; line-height: 50px; width: 35px; opacity: 0!important; visibility: hidden!important; } .clickable-cell .btn.btn-transparent.description-btn i { width: auto; float: right; right: 0px; } .ui-grid-cell .btn.btn-transparent.selected { border: none!important; } .ui-grid-cell .btn.btn-transparent i { opacity: 1; color: var(--black); } html .ui-grid-cell input { border: none!important; height: 50px!important; line-height: 50px!important; padding-left: 20px!important; font-size: 10pt!important; background-color: var(--light)!important; } html .ui-grid-row:nth-child(even) .ui-grid-cell { background-color: var(--white)!important; } html .ui-grid-row:nth-child(odd) .ui-grid-cell { background-color: transparent!important; } html .portfolio.edit .ui-grid-row .ui-grid-cell:hover .ui-grid-cell-contents { background-color: var(--light); cursor: pointer; } html .view .ui-grid-row:hover .ui-grid-cell { background-color: var(--extra-light)!important; } .ui-grid .ui-grid-viewport { --webkit-overflow-scrolling: touch!important; } .portfolio-list .ui-grid-viewport { height: calc(100dvh - 255px)!important; }html .ui-grid-row .ui-grid-cell-contents { padding: 0px; } .actions-cell .ui-grid-cell-contents { padding: 0px!important; text-overflow: unset; } .ui-grid-cell-contents .size-description { font-size: 9pt; color: var(--light-text); padding-left: 5px; } html .ui-grid .ui-grid-cell-focus { background-color: transparent!important; } html .ui-grid .ui-grid-row-header-cell .ui-grid-cell-focus { background-color: transparent!important; } html .ui-grid .unclickable-cell .ui-grid-cell-focus, html .ui-grid .unclickable-cell.ui-grid-cell-focus { background-color: transparent!important; } .ui-grid-cell-contents-hidden { background-color: var(--primary); } html .ui-grid .ui-grid-row .ui-grid-selection-row-header-buttons:hover::before { color: var(--primary)!important; opacity: 1!important; } html body .ui-grid .ui-grid-row .actions-cell.ui-grid-cell-focus, html body .ui-grid .ui-grid-row .actions-cell .ui-grid-cell-focus, html body .ui-grid .ui-grid-row:hover .actions-cell.ui-grid-cell-focus { background-color: transparent!important; } html .ui-grid-header-cell-row .ui-grid-cell-contents, html .ui-grid-row .ui-grid-cell-contents { padding-left: 15px; padding-right: 15px; } html .ui-grid-header-cell-row .ui-grid-cell-contents, html .ui-grid-row .ui-grid-cell-contents:hover { color: var(--black); } html .ui-grid-row .ui-grid-cell-contents a:hover { text-decoration: none!important; } html .ui-grid-row .ui-grid-cell-contents a:hover span { text-decoration: underline; } html .ui-grid-row .ui-grid-cell-contents.ui-col-date .tiny-image-wrap, html .ui-grid-row .ui-grid-cell-contents.ui-col-date .tiny-image-fake-wrap {margin-right: 20px!important;} html .ui-grid-row .project-name-cell .ui-grid-cell-contents { color: var(--black); font-size: 13px; } html .ui-grid-row .ui-grid-cell-focus.ui-grid-cell-contents-hidden + div input, html .ui-grid-row .ui-grid-cell-focus.ui-grid-cell-contents-hidden + div select { background-color: var(--light)!important; color: var(--black)!important; padding-left: 15px!important; border: none!important; outline: none!important; } html .specs .ui-grid-row .ui-grid-cell-focus.ui-grid-cell-contents-hidden + div select { height: 50px!important; border-right: 15px solid transparent!important; } html .ui-grid-header-cell-row .ui-grid-header-cell:first-child .ui-grid-cell-contents, html .ui-grid-row .ui-grid-cell:first-child .ui-grid-cell-contents { padding-left: 0px; } html .ui-grid-render-container .ui-grid-header-cell-row .ui-grid-header-cell:first-child .ui-grid-cell-contents, html .ui-grid-render-container .ui-grid-row .ui-grid-cell:first-child .ui-grid-cell-contents { padding-left: 25px; } html .ui-grid-header-cell-row .ui-grid-cell-contents { white-space: unset!important; line-height: 1.2; vertical-align: middle; margin: auto!important; display: inline-flex; font-weight: 500; } .water-bg .sortable { background-color: rgb(17 17 17 / 80%) !important; } .ui-grid-header-cell .ui-grid-sort-priority-number { display: none; } html .ui-grid-header-cell-row [aria-sort="ascending"] .ui-grid-cell-contents, html .ui-grid-header-cell-row [aria-sort="descending"] .ui-grid-cell-contents { color: var(--primary); } html body .ui-grid-row { height: 50px!important; line-height: 50px; } html body .ui-grid-row:last-child { border-bottom: 1px solid var(--light-border); } html body .ui-grid-row:hover .ui-grid-cell {background-color: var(--subtle)!important;} html body .the-grid-editor .ui-grid-row .ui-grid-cell { border: 1px solid var(--light-border); border-left: none; border-bottom: none; } .ui-grid-row.ui-grid-row-selected, html .ui-grid-row.ui-grid-row-selected:nth-child(even) .ui-grid-cell { background-color: var(--extra-light)!important; } html body .borders .ui-grid-row .ui-grid-cell { border-bottom: 1px solid var(--border); } html body .alternating-colors .ui-grid-row:nth-child(2n) .ui-grid-cell { background-color: var(--background-color)!important; } html.dark body .alternating-colors .ui-grid-row:nth-child(2n) .ui-grid-cell { background-color: var(--border)!important; } html .ui-grid-header-cell:last-child .ui-grid-column-resizer.right { border-color: var(--border); right: 0px; border-width: 1px; margin-right: 0px!important; border: none; } html .ui-grid-menu .ui-grid-menu-inner ul li .ui-grid-menu-item { padding: 0px 15px; height: 50px; background-color: transparent; color: var(--black); line-height: 50px; border: none!important; font-size: 13px; } html .ui-grid-menu .ui-grid-menu-inner ul li .ui-grid-menu-item:hover, html .ui-grid-menu .ui-grid-menu-inner ul li:hover .ui-grid-menu-item { background-color: var(--extra-light)!important; } html .ui-grid-menu .ui-grid-menu-inner { background-color: var(--xwhite); border: none; overflow: hidden auto!important; max-height: calc(100dvh - 330px); } html .ui-grid-menu .ui-grid-menu-inner ul li button.ui-grid-menu-item:hover, html .ui-grid-menu .ui-grid-menu-inner ul li button.ui-grid-menu-item:focus { background-color: var(--veryvery-light)!important; color: var(--primary)!important; } html .ui-grid-menu .ui-grid-menu-inner ul li button.ui-grid-menu-item.ui-grid-menu-item-active { background-color: transparent; color: var(--primary); } html .ui-grid-column-menu-button .ui-grid-icon-angle-down { vertical-align: middle; color: var(--light-text); } .padding40 { padding: 40px!important; } .settings-body .setting-group.col { padding-right: 40px!important; } .settings-body .setting-group.col:last-child { padding-right: 0px!important; } .setting-group .column-settings { padding-top: 20px; } .settings-body .setting-option.col { padding-right: 10px!important; } .settings-body .setting-option.col.s1 .btn { float: left; min-width: 50px; } html .edit .ui-grid-cell-focus { background-color: var(--light)!important; } html .edit .ui-grid-cell > div:last-child select { outline: none!important; border: none!important; border-radius: 0px!important; box-shadow: none!important; background-color: var(--primary); color: var(--awhite); text-transform: capitalize; padding-left: 10px; padding-right: 10px; cursor: pointer; height: 50px; } html .view .ui-grid-cell-focus { background-color: transparent; } html .ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-header-cell:last-child, html .ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-cell:last-child { border-right-color: var(--light-border)!important; border-right-width: 1px; } html body .ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-header-cell:last-child { border-right-width: 1px; } .portfolio-grid { height: calc(100dvh - 168px)!important; box-shadow: none!important; } html, body { overscroll-behavior-x: none; } html .ui-grid-row:last-child .ui-grid-cell { border-bottom-color: transparent!important; } .Todocompleted-completed { text-decoration: line-through; color: var(--good); } .clickable-cell { cursor: pointer; position: relative; } .project-name-cell.clickable-cell:hover .btn.btn-transparent.description-btn { opacity: 1!important; visibility: visible!important; } .clickable-cell:hover i { opacity: 1; } .clickable-cell i { position: absolute; right: 10px; height: 50px; line-height: 50px; font-size: 11pt; color: var(--primary); opacity: 0; padding: 0px 5px; background-color: transparent; } .clickable-cell:hover, .clickable-cell:hover .ui-grid-cell-contents span { color: var(--primary); } .ui-grid-focuser { box-shadow: none!important; } .not-mine-inline { opacity: .45; } .flipped { transform: rotateY(); } .flipped { transform: rotate(180deg); } .ui-grid-header-cell.movingColumn { background-color: var(--primary); color: var(--awhite)!important; } body div .input-field { position: relative; } .input-field.inline.pi-plan-create-input { height: unset!important; margin: unset; width: calc(100% - 140px); } body div .input-field .btn.clear { position: absolute; right: 0px; top: 0px; } .form-field.search-list .dropdown-content { display: block!important; opacity: 1; } .project-meta-settings .add-new-item { height: 50px!important; line-height: 50px; display: inline-block; width: 100%; padding: 0px 20px; cursor: pointer; } .project-meta-settings .add-new-item:hover { background-color: var(--border); } .search-filter .btn.clear { position: absolute; right: 0px; top: 0px; height: 50px; line-height: 50px; } html body .warning:hover, html body .warning:hover i { color: var(--warning)!important; } .wrapper { position: relative; display: inline-block; width: 100%; } .btn.btn-transparent.nav-btn { color: var(--black)!important; } .settings-group { padding-top: 5px; } .settings-group .setting-option:last-child { border-bottom: none!important; } .rounded-bg { padding: 20px; background-color: var(--background-color); border-radius: 5px; } .header-toggle { display: inline-block; height: 40px; line-height: 40px; border-radius: 5px; overflow: hidden; vertical-align: top; margin-right: 0px; } .header-toggle:last-child { margin-right: 0px; } .header-toggle:last-child .btn i { padding-right: 0px; } .header-toggle .btn { padding: 0px 20px!important; } .header-toggle .btn, .header-toggle .btn i { line-height: 40px!important; height: 40px!important; } html body .header-toggle .btn { padding-left: 20px!important; padding-right: 20px!important; border-right: 1px solid var(--border); float: left; text-transform: capitalize; font-size: 10pt!important; text-decoration: none!important; } html body .header-toggle.close .btn { border: none!important; } html body .header-toggle.the-views .btn { border-right: none!important; border-radius: 5px!important; } .header-toggle .btn:last-child { border-right: none; }.top30 { padding-top: 30px!important; } .ui-grid-cell select { display: block!important; width: 100%; } .ui-grid-canvas { padding-top: 0px!important; } .warning { color: var(--warning)!important; } .status-indicator::after { height: 5px!important; max-width: 5px!important; display: inline-block; line-height: 0px; margin-top: -22px; padding-left: 0px; padding-right: 5px; border-radius: 25px; margin-right: 11px; font-size: 30pt; vertical-align: middle; } body .btn.btn-outlined { border: 1px solid var(--border)!important; border-radius: 5px!important; background-color: transparent; height: 40px; line-height: 40px; font-size: 9pt; line-height: 40px; text-transform: capitalize; padding: 0px 15px!important; color: var(--black); font-family: var(--body-font); } html body .btn.btn-outlined.delete:hover { border-color: var(--warning)!important; } .project-peeps .btn.btn-outlined.add-new:hover i, .project-peeps .btn.btn-outlined.add-new:hover { color: var(--awhite)!important; } .dark body .btn.btn-outlined { border-color: var(--border)!important; } .dark body .btn.btn-outlined:hover { background-color: var(--primary); color: var(--awhite)!important; } .dark body .btn.btn-outlined:hover { border-color: var(--primary)!important; } body .a-dialog .btn.btn-outlined:hover { color: var(--awhite)!important; background-color: var(--primary)!important; text-decoration: none; } body .a-dialog .btn.btn-outlined { margin-left: 10px; border: 1px solid var(--black)!important; } body .btn.btn-outlined i { line-height: 40px; height: 40px; color: var(--primary); } body .btn.btn-outlined:hover, body .btn.btn-outlined:hover i { color: var(--awhite)!important; } .good { color: var(--good)!important; } .mini-image { max-width: 19px!important; } .tda-icon .mini-image { margin-top: 7px; margin-right: 6px; max-width: 20px!important; border-radius: 5px; } .table-data-cell-sub-item.editable:hover { background-color: var(--extra-light); cursor: pointer; } .tdc-visit:hover { color: var(--primary); cursor: pointer; } .tdc-editable:hover { background-color: var(--extra-light); cursor: pointer; border-radius: 5px; } .btn.add-new i { color: var(--icon-color); }.nav-todos-list-container .todo-description-wrapper { padding-bottom: 0px; } .overview-meta .meta-title, .overview-meta .meta-data { vertical-align: middle; line-height: 23px; height: auto; } .overview-meta .meta-data { font-family: var(--body-font); font-size: 13px; } .overview-meta .meta-data .overview-meta-item:after { content: ', '; margin-right: 2px; padding-right: 0px!important; } .overview-meta .meta-data .overview-meta-item:last-child:after { content: ''; } .overview-meta .meta-data > .meta-names img { float: left; max-width: 18px; margin-right: 7px; max-height: 18px; border-radius: 4px; } .overview-meta .meta-data > .meta-names { display: inline-block; padding: 0px 10px 0px 0px; line-height: 25px; height: 25px; width: 33.33%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 0px; margin-bottom: 0px; color: var(--black); } .dynamic-overview .overview-meta .meta-data > .meta-names { width: 33%; } .overview-meta .meta-data > .meta-names .the-name { font-size: 9.5pt; } .overview-meta .meta-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 20px!important; font-weight: 300; color: var(--light-text); font-size: 13px; } body ul.multi-selector li, html body ul.multi-selector li i, body ul.multi-selector li, ul.multi-selector li span { line-height: 50px!important; height: 50px!important; vertical-align: top; } .comma-separated span::after { content: ', '; padding-right: 3px; } .comma-separated span:last-child::after { content: ''; } .overview-section-data .google-chart.timeline-chart {/* height: 300px!important; *//* overflow-y: auto; *//* margin: 0px -30px; *//* width: calc(100% + 60px)!important; *//* min-height: inherit!important; *//* background-color: var(--extra-light); *//* border-radius: var(--border-radius-tiny); *//* border: 1px solid var(--border); *//* padding-top: 20px; */margin-bottom: 0px;display: flex;}.integration-overview-header { font-size: 12pt; padding-bottom: 10px; color: var(--primary-color); } .project-quick-todos .integration-overview-header { padding-top: 10px; } .inline-dialog .text-field.with-dropdown { display: inline-block; float: left; vertical-align: top; } .inline-dialog .text-field.with-dropdown ul li a { text-align: left!important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; float: left; user-select: none; } .inline-dialog .text-field.with-dropdown ul li:hover a { background-color: transparent; } .inline-dialog .text-field.with-dropdown ul { left: -80px!important; max-width: 300px; max-height: 60dvh!important; overflow-x: hidden; padding-left: 0px!important; } .link-dialogs .inline-dialog .text-field.with-dropdown ul { left: -50px!important; } .add-proj-dialogs ul { padding-left: 0px!important; left: 0px!important; } .inline-dialog .text-field.with-dropdown > .btn.dropdown-selector { left: 0px; top: 0px; height: 20px; line-height: 20px!important; vertical-align: middle; max-width: 140px; } .inline-dialog .text-field.with-dropdown > .btn.dropdown-selector:hover { background-color: transparent!important; } .inline-dialog .text-field.with-dropdown > .btn.dropdown-selector .ds-text, .inline-dialog .text-field.with-dropdown > .btn.dropdown-selector .ds-text i { line-height: inherit; text-transform: initial; color: var(--black); } .inline-dialog .text-field.with-dropdown > .btn.dropdown-selector:hover .ds-text, .inline-dialog .text-field.with-dropdown > .btn.dropdown-selector:hover .ds-text i { color: var(--primary); } .primary-views .dropdown-content > .btn { width: 100%; text-align: left; line-height: 50px; padding: 0px!important; display: flex; align-items: center; height: 50px!important; line-height: 50px!important; font-size: 13px; font-weight: 400; text-transform: lowercase; } .primary-views .dropdown-content > .btn.agents-btn svg { margin-right: 3px; max-width: 32px; margin-left: 9px; } .primary-views .dropdown-content > .btn svg { max-width: 24px; margin-left: 14px; margin-right: 10px; } .dof-actions .primary-views .btn { background-color: var(--xwhite); padding: 0px 20px!important; color: var(--black); } .primary-views .dropdown-content > .btn:hover { background-color: var(--extra-light)!important; } .primary-views .dropdown-content > .btn:hover svg .jt-ai-word, .primary-views .dropdown-content > .btn:hover svg .jt-ag-letter { fill: var(--primary); } .primary-views .dropdown-content > .btn:hover svg .jt-ag-ring { stroke: var(--primary); } .primary-views .dropdown-content > .btn i { padding-right: 0px; width: 30px; font-size: 14pt!important; line-height: 50px; font-variation-settings: 'FILL' 0; color: var(--icon-color); } .primary-views .dropdown-content { max-width: 200px; box-sizing: border-box; } .zj-specification-item-details .context-buttons { bottom: 0px; top: initial!important; height: 50px; } .zj-specification-item-details .context-buttons .btn i { margin-left: 0px!important; } .zj-specification-item-details .context-buttons .btn { height: 50px; line-height: 50px; text-align: center; min-width: 50px; background-color: transparent; color: var(--black); padding: 0px!important; margin-left: -3px; } .zj-specification-item-details .context-buttons .btn:hover { background-color: transparent!important; } .zj-specification-item-details .context-buttons .btn:hover i { color: var(--primary); } .btn.btn-transparent.spec-item-view-selector, .btn.btn-transparent.spec-item-view-selector span, .btn.btn-transparent.spec-item-view-selector i { padding-left: 0px!important; transition: all .2s ease-in, all .2s ease-out!important; } .btn.btn-transparent.spec-item-view-selector span { text-transform: lowercase; } .btn.btn-transparent.spec-item-view-selector span.ai-btn { display: flex; align-items: center; } .btn.btn-transparent.spec-item-view-selector span.ai-btn svg { max-width: 25px; margin-left: 15px; margin-right: 5px; margin-top: -3px; } .btn.btn-transparent.spec-item-view-selector { border-right: 1px solid var(--border); float: left; border-radius: 0px!important; width: auto; text-align: left; padding-right: 35px!important; font-size: 14px; font-weight: 300; } .btn.btn-transparent.spec-item-view-selector:hover span, .btn.btn-transparent.spec-item-view-selector:hover i { color: var(--primary)!important; } .primary-views .btn.btn-transparent.spec-item-view-selector i:first-child { transition: all .2s ease-in, all .2s ease-out!important; } .primary-views .btn.btn-transparent.spec-item-view-selector i { margin-right: -5px!important; margin-left: 0px!important; float: left; } .primary-views .btn.btn-transparent.spec-item-view-selector i.right { position: absolute; right: 13px; top: 0px; font-size: 17px!important; } .todo-items .show-hide-completed .dropdown-select { float: right; list-style: none; /* bottom: -5px!important; */ color: var(--icon-color); position: relative; } .checklists .todo-items .show-hide-completed .dropdown-select { right: -30px; } html body .checklists .checklist .randomscrando .dropdown-select { right: -25px!important; } html body .spec-overview .todo-items .show-hide-completed li.dropdown-select i { margin-right: 0px!important; position: relative; } .todo-items .show-hide-completed .dropdown-select:hover { color: var(--primary); } .todo-items .show-hide-completed .dropdown-select i { font-size: 18px; } .checklist .todo-items .show-hide-completed .dropdown-select i { right: 15px; } .dropdown-selector i { color: var(--icon-color)!important; } .dropdown-selector i.tiny.right { margin-left: auto; } .embedded-item iframe { width: 100%; margin: 0px!important; border: none; outline: none; position: relative; top: unset; bottom: unset; background: none!important; } .role-selector { position: relative; } html body .right5 { padding-right: 5px!important; } html body .todo-items [contenteditable=true], html body .todo-items .ql-editor { line-height: 23px!important; } .sortable[aria-sort="ascending"], .sortable[aria-sort="descending"] { color: var(--primary); } .btn.clear-search { line-height: 50px; height: 50px; } .wrapper-border1 { padding: 30px; border: 1px solid var(--border); border-radius: var(--border-radius-smallish); background-color: var(--background-color); } .wrapper-border1 .island-container { box-shadow: 0px 1px 3px var(--shadow); border-radius: var(--border-radius-tiny); overflow: hidden; } input::placeholder { color: var(--light-text); } .dim-it { opacity: .3; } .undim-it { opacity: 1!important; } .aimg { border-radius: 5px; } .bound-html { white-space: break-spaces; } .no-right-padding, html body .no-right-padding.btn { padding-right: 0px!important; } .ordered-roadmap-item > .col { height: 45px; line-height: 45px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 20px!important; } .ordered-roadmap-item > .col:last-child { padding-right: 0px!important; text-align: right; } .ori-header { font-weight: 400!important; padding: 35px 40px 0px; } .ordered-roadmap-items { padding: 0px 40px; height: calc(100dvh - 229px); } .full-screen .ordered-roadmap-items { height: calc(100dvh - 265px); } .list-mini-item { line-height: 20px; text-align: left; display: block; width: 100%; } .mini-list-container { padding: 15px 0px; } .list-mini-list { padding-bottom: 15px; } .list-mini-list:last-child { padding-bottom: 0px; } .top15 { padding-top: 15px!important; } i.indent-icons { width: 20px; margin: 0px!important; margin-right: 0px!important; padding: 0px!important; } .bottom0 { padding-bottom: 0px!important; } .project-outline .collapsed { opacity: 0; visibility: hidden; display: none!important; } html body .checklists .core-list-item .col label { padding-right: 10px!important; overflow: hidden; text-overflow: ellipsis; vertical-align: top; margin-bottom: 0px!important; padding-bottom: 0px!important; display: block!important; cursor: pointer; height: auto!important; font-size: 10pt; } html body .checklists .core-list-item .col { padding-top: 20px; padding-bottom: 21px; height: auto!important; vertical-align: top; display: block; cursor: pointer; } html body .checklists .core-list-item.row { cursor: pointer; height: auto; } html body .checklists .core-list-item.row .text-field label span:after { content: ', '; } html body .checklists .core-list-item.row .text-field label span:last-child:after { display: none; } .semi-bold { font-weight: 400!important; } .cursor { cursor: pointer; } .integrations-section .col { padding: 0px!important; } .integrations-section .col:nth-child(even) { padding-left: 15px!important; } .integrations-section .col.s12:nth-child(even) { padding-left: 0px!important; padding-right: 0px!important; } .ta-center { text-align: center!important; } .ui-grid-cell-contents .multi-roles { display: inherit; float: left; padding-right: 5px; cursor: pointer; position: relative; } .editable-cell .multi-roles.ui-grid-cell-focus { height: 40px; } .ui-grid-cell-contents .multi-roles img { max-width: 25px; margin-top: 13px; } .ui-grid-cell-contents .multi-roles:hover { color: var(--primary); } html .right0 { padding-right: 0px!important; } .lh50 { line-height: 50px!important; } .delete-item.btn:hover i { color: var(--warning)!important; } .ui-grid-header-viewport, .ui-grid-viewport { width: 100%!important; } .ui-grid-pinned-container-left .ui-grid-header-viewport { border-radius: 14px 0px 0px 0px!important; } .ui-grid-pinned-container-right .ui-grid-header-viewport { border-radius: 0px 14px 0px 0px!important; } .dblock { display: block!important; } .fs9 { font-size: 9pt!important; } .space-list { padding: 0px!important; display: block; width: 100%; height: calc(100dvh - 207px); overflow-y: auto; position: relative; } .space-list-item { color: var(--black)!important; } .space-list-item { padding: 0px 30px; height: 50px; line-height: 50px!important; line-height: 40px; cursor: pointer; } nav .space-list-item i { height: unset!important; line-height: unset!important; color: var(--icon-color); font-size: 16px; } .space-list-item.selected { background-color: var(--background-color); } .space-list-item:hover { background-color: var(--white); } .space-list-item:hover { color: var(--primary)!important; background-color: var(--background-color); } .center780 { max-width: 780px; margin-left: auto!important; margin-right: auto!important; } .mtop40 { margin-top: 40px!important; } .mbottom40 { margin-bottom: 40px!important; } .iconbg { background-color: var(--awhite); border-radius: 10px; } .right30, .right30.col { padding-right: 30px!important; } .integration .s1.right30 img { max-width: 30px; max-height: 30px; } .integration .s1.right30 { padding-right: 15px!important; text-align: center; } .top5 { padding-top: 5px!important; } .editable-cell.unclickable-cell { cursor: pointer; } .added { background-color: var(--added); color: var(--ablack)!important; } .removed { background-color: var(--removed)!important; color: var(--ablack); } .cke_panel.cke_menu_panel { border-radius: 15px; } .cke_dialog_ui_checkbox:hover, .cke_dialog_ui_checkbox:hover label { cursor: pointer!important; } .cke_dialog_contents [type="checkbox"]+label { padding-top: 2px; } .cke_dialog_ui_checkbox { margin-bottom: 5px!important; } .side-slider { position: absolute; right: 0px; top: 0px; bottom: 0px; width: 40%; max-width: 600px; background-color: var(--white); box-shadow: 0px 1px 3px var(--shadow); z-index: 999999999999999999; right: -40%; transition: right .4s ease-in-out!important; } .side-slider.open { right: 0px; visibility: visible; opacity: 1; } .dynamic-overview-footer { padding: 0px 40px 0px; height: 50px; } .dof-actions .btn.btn-transparent { height: 50px; line-height: 50px; } .dof-actions .btn.btn-transparent:hover span { transition: .2s ease-in-out all; } .dof-actions .btn.btn-transparent .selected { color: var(--black); } .dof-actions .btn.btn-transparent:hover .selected { color: var(--primary); } .dof-actions .btn.btn-transparent:first-child { margin-left: -20px; color: var(--black)!important; } .dof-actions .btn.btn-transparent:first-child:hover, .dof-actions .btn.btn-transparent:first-child:hover i { color: var(--primary)!important; } .dof-actions .btn.btn-transparent.selected { border-bottom: none!important; } .dof-actions .btn.btn-transparent i { color: var(--black); margin-right: 8px; line-height: 50px; } .dof-actions .btn.btn-transparent i.left { font-size: 12pt; } .dof-actions .btn.btn-transparent i.right { margin-left: 5px; line-height: 51px; } .bg-image { background-size: 100%; background-position: center; background-repeat: no-repeat; border-radius: var(--border-radius-xs); } .inline-author-image .bg-image { width: 40px; height: 40px; } .clickable:hover { text-decoration: underline!important; } .header-profile-image { width: 30px; height: 30px; display: inline-block; margin-top: 18px; } nav .header-profile-image .user-initials { color: var(--awhite)!important; font-weight: 400; } nav .user-menu.header-profile-menu .header-profile-image .user-initials { height: 28px; line-height: 28px; vertical-align: top; color: var(--primary)!important; font-family: var(--nothing)!important; font-size: 17px!important; font-weight: bold!important; } .bg-image.header-profile-image .user-initials:hover { color: var(--primary); } .cke_menu { box-shadow: 0px 1px 2px var(--shadow); } .tiny-img-wrap { width: 20px; height: 20px; display: inline-block; background-size: cover; background-position: center center; border-radius: 5px; margin-top: 16px; } .editable-cell .tiny-img-wrap { line-height: 20px; } .the-grid-editor .editable-cell .multi-roles .tiny-img-wrap:hover, .the-grid-editor .editable-cell .multi-roles .tiny-img-fake-wrap:hover { visibility: hidden; opacity: 0; } .the-grid-editor .editable-cell .multi-roles .delete-this-user { position: absolute; top: 16px; left: 0px; height: 20px; line-height: 20px; width: 20px; text-align: center; padding-top: 1px; visibility: hidden; opacity: 0; } .the-grid-editor .editable-cell .multi-roles:hover .delete-this-user { visibility: visible; opacity: 1; } .the-grid-editor .editable-cell .multi-roles:hover .tiny-img-wrap, .the-grid-editor .editable-cell .multi-roles:hover .tiny-img-fake-wrap { visibility: hidden; opacity: 0; } .the-grid-editor .editable-cell .multi-roles .delete-this-user i { font-size: 14pt; color: var(--warning); } .tiny-img-wrap:hover, .ui-grid-row:hover .tiny-img-wrap { opacity: 1; } .tiny-img-wrap:hover { box-shadow: 0px 1px 4px var(--shadow); } .tiny-img-fake-wrap { width: 21px; height: 20px; display: inline-block; line-height: 20px; margin-top: 16px; text-align: center; background-color: var(--subtle); border-radius: 5px; font-size: 8.5pt; } .ui-grid-cell .ui-col-date .tiny-img-wrap, .ui-grid-cell .ui-col-date .tiny-img-fake-wrap { margin-right: 10px; } .tiny-img-fake-wrap:hover { background-color: var(--primary)!important; color: var(--awhite); } .toast-profile-image { width: 50px; height: 50px; display: inline-block; float: left; margin-right: 10px; margin-left: -14px; background-size: cover; background-position: center; border-radius: 5px; } .ui-grid-selection-row-header-buttons { width: 35px; text-align: center; height: 50px!important; line-height: 50px; display: block!important; position: relative; margin-left: -19px; } .ui-grid-header-cell .ui-grid-selection-row-header-buttons { margin-left: -21px; height: 40px!important; line-height: 40px; padding: 0px!important; } .ui-grid-header-cell .ui-grid-selection-row-header-buttons:hover::before { color: var(--primary); opacity: 1; } .ui-grid-header-cell .ui-grid-selection-row-header-buttons.ui-grid-all-selected { color: var(--primary); } .ui-grid-row-header-cell { border: none!important; text-align: center; } .ui-grid-row-header-cell .clickable { text-decoration: none!important; } .ui-grid-row-header-cell ::before { border: none!important; outline: none!important; } .ui-grid-row-header-cell .ui-grid-row-selected::before { color: var(--primary); } .ui-grid .ui-grid-menu-button { height: 50px; width: 50px; background-color: transparent; border: none; line-height: 47.5px; text-align: center; top: -56.5px; right: 3px; display: none; z-index: 99999; } .ui-grid .ui-grid-menu-button .ui-grid-icon-container i { width: 50px!important; height: 50px!important; display: inline-block; } .edit-mode .ui-grid.the-grid-editor .ui-grid-menu-button { display: inline-block; } .ui-grid .ui-grid-menu-button:hover { color: var(--primary); cursor: pointer; } .ui-grid .ui-grid-menu-button i { font-size: 12pt; } .ui-grid .ui-grid-menu-button .ui-grid-icon-container { display: none; } .edit-mode .ui-grid .ui-grid-menu-button .ui-grid-icon-container { display: unset; } .ui-grid .ui-grid-menu-button .ui-grid-icon-container { margin: 0px; height: 50px; width: 50px; } .ui-grid-column-menu-button { border: none!important; background-color: var(--white)!important; } .water-bg .ui-grid-column-menu-button { background-color: rgb(17 17 17 / 80%)!important; } .ui-grid-render-container-right .ui-grid-viewport { border-radius: 0px 0px 25px 0px!important; } .ui-grid-render-container-left .ui-grid-viewport { border-radius: 0px 0px 0px 5px!important; } .ui-grid-menu { box-shadow: 0px 1px 3px var(--shadow)!important; padding: 0px!important; border-radius: 10px; } .edit-mode .ui-grid-menu { border-radius: var(--border-radius-tiny); } .bottom20 { padding-bottom: 20px!important; } .collection-dropdown-wrapper { display: inline-block; vertical-align: top; height: 40px; line-height: 40px; margin-top: 0px; float: left; } .the-grid-editor .editable-cell:hover, .the-grid-editor .editable-cell:hover > div { background-color: var(--extra-light)!important; } .dark .the-grid-editor .editable-cell:hover, .dark .the-grid-editor .editable-cell:hover > div { background-color: var(--background-color) !important; } .the-grid-editor .editable-cell { cursor: pointer; height: 100%; position: relative; } .editable-cell .add-new-option { display: none; } .the-grid-editor .editable-cell .add-new-option { display: inline-block; visibility: hidden; opacity: 0; user-select: none; text-align: center; } .the-grid-editor .editable-cell .add-new-option i { font-size: 15pt; color: var(--primary); margin-top: 16px; height: 20px; width: 20px; } .the-grid-editor .editable-cell .add-new-option i:hover { color: var(--good); } .the-grid-editor .editable-cell:hover .add-new-option { visibility: visible; opacity: 1; } .ui-grid .movingColumn { background-color: var(--primary)!important; color: var(--awhite)!important; cursor: grabbing; } .ui-grid-header-cell:hover .ui-grid-header-cell-label { color: var(--primary); } .grid-filter { padding: 15px 25px 15px 30px; cursor: pointer; text-align: left; } .grid-filter:hover .todo-filter-title { color: var(--primary)!important; } .grid-filter.hide-gf { padding: 14px 25px 15px 30px; } .hide-gf .gf-opts { visibility: hidden; opacity: 0; height: 0; display: none; } .grid-filter-options.switch { padding: 5px 0px; cursor: pointer; line-height: 22px; vertical-align: top; display: block; } .grid-filter-options.switch label i { line-height: 20px!important; float: left; } .grid-filter-options.switch.selected label { color: var(--black)!important; } .change-columns .grid-filter-options.switch.selected label { color: var(--black)!important; font-size: 9.5pt!important; } .change-columns .grid-filter-options.switch.selected:hover label { color: var(--primary)!important; } .grid-filter-options.switch:hover label { color: var(--primary); cursor: pointer; } .grid-filter-options.switch label .lever::after, .grid-filter-options.switch label .lever::before { margin-top: 1px; height: 18px; width: 18px; left: 1px; background-color: var(--icon-color); } .grid-filter-options.switch:hover label .lever::after, .grid-filter-options.switch:hover label .lever::before { background-color: var(--icon-color); } .grid-filter-options.switch .lever { margin-right: 0px; margin-top: 4px; }.grid-filter-options:hover label { color: var(--primary)!important; } .project-item-description.ql-editor h2 { /* margin-top: 20px; */ } .message-text h2 { margin: 20px 0 5px; font-size: 20pt!important; } .asset-totals { display: flex; width: auto; float: left; max-width: 250px; /* padding-left: 8px; */ gap: 5px; } .right-collection-actions { display: inline-block; border-radius: var(--border-radius-tiny); height: 40px; } .ck-editor-custom-context-menu { position: absolute!important; bottom: 50px; z-index: 99999999; background-color: var(--xwhite)!important; border-radius: 20px; overflow: hidden; } .cke .cke_top .ck-editor-custom-context-menu ul { padding-left: 0px!important; margin: 0px!important; } .cke .cke_top .ck-editor-custom-context-menu ul li { color: var(--black); font-family: var(--body-font); } .ck-editor-custom-context-menu ul li { padding: 0px 25px!important; height: 50px; line-height: 50px; cursor: pointer; } .ck-editor-custom-context-menu ul li:hover { background-color: var(--extra-light)!important; color: var(--primary)!important; } .ck-editor-custom-context-menu li { list-style: none!important; padding: 0px!important; } html body .cke .cke_contents .ck-editor-custom-context-menu ul { padding-left: 0px!important; }.position-relative { position: relative; } .uppercase { text-transform: uppercase; } html body i.primary { color: var(--primary)!important; } .selected { color: var(--primary)!important; } .profile-menu-item i { font-size: 14px; margin: 0; } .profile-menu-item:hover { background-color: var(--background-color); } .user-initials { text-align: center; } .todo-author-image .user-initials { width: 25px; height: 25px; display: block; line-height: 25px; font-size: 12px; font-weight: 500; background-color: var(--background-color); border-radius: 3px; } .timelog-day .user-initials { max-width: 50px; display: inline-block; float: left; margin-left: 10px; } .notifications-queue .linked-comment { display: inline; font-size: unset; padding: 0px; } .jtsyn { color: var(--primary); } .projects-right-sidebar-panel { max-width: 500px; float: right; box-shadow: 0px 1px 5px var(--shadow); z-index: 99999999999999; position: absolute; right: 0; } .projects-right-sidebar-panel > .close-project-creator { z-index: 99999; top: 97px; right: 15px; } .projects-right-sidebar-panel > .close-project-creator i { font-size: 16pt; } .project-quick-creator { position: relative; z-index: 0; } html body .project-quick-creator input, html body .project-quick-creator .dropdown-select { border-radius: 5px!important; } .team-quick-editor .card { padding: 10px 0px 0px!important; box-shadow: none!important; } .team-quick-editor .card .settings-header { display: none; } .team-quick-editor .card .project-peeps > .col { width: 100%!important; } .team-quick-editor .card .project-peeps > .col:last-child { padding-bottom: 0px; } #teamSettings .switch { height: 40px; line-height: 40px; text-align: left; font-size: 10pt; } #teamSettings .switch label { float: right; } #teamSettings .switch label .lever { margin-right: 0px; } .not-visible { visibility: hidden; opacity: 0; } .underline { text-decoration: underline; } .position-absolute { position: absolute!important; } .dropdown-search-input-container { position: relative; } .dropdown-search-input-container .btn.position-absolute { right: 0px!important; top: 0px!important; padding-right: 0px!important; } hr.dashed { border: none; border-bottom: 1px dashed var(--border); } .integrated-jira-issues { display: inline-block; max-width: 40px; max-height: 20px; line-height: 20px; margin-left: 6px; } .integrated-jira-issues img { max-width: 15px; line-height: 25px!important; } .component-sli-top-row .btn i { font-size: 12pt; line-height: 30px; } .primary-views li.btn.anno-hide .number-of { font-size: 8pt!important; line-height: 18px!important; position: absolute; top: 16.5px; margin-right: 10px!important; } .inline-container { position: absolute; top: 0px; padding: 20px; width: 100%; background-color: var(--xwhite); border-radius: 15px; box-shadow: 0px 1px 3px var(--shadow); } .ta-right .inline-container { right: 0px; } .body-overflow { height: calc(100dvh - 64px); overflow-y: auto; } body .strategy-settings .cke .cke_contents { line-height: 26px; font-size: 10.5pt; padding: 0px!important; } .no-margin-paragraphs p { margin: 0px; } .strategy-page p, .strategy-page li { margin-bottom: 0px; padding: 0px; margin-top: 0px; } #okrCycleFilter li a {display: flex;align-items: center;justify-content: start;} #okrCycleFilter { right: 0px!important; left: unset!important; } #okrCycleFilter li a span { width: auto; margin-left: 5px; align-self: end; line-height: 25px; color: var(--primary); } .strategy-page > .row {display: block;} .vision-editor .ckeditor-wrapper { /* background-color: var(--white); */ /* border-radius: var(--border-radius-tiny); */ /* box-shadow: var(--box-shadow); */ } .linking-mode div:hover { cursor: pointer; } .inline-embedding.selected, li.inline-embedding.selected span { color: var(--highlight)!important; } .inline-embedding.selected span { color: var(--ablack)!important; } .footer-actions { position: absolute; text-align: right; z-index: 999999999999999999999999999999999999999; bottom: 0px; right: 0px; width: 100%; height: 50px; line-height: 50px; background-color: var(--white); } .footer-actions .btn { color: var(--icon-color)!important; height: 50px; line-height: 50px; } .larger-text { font-size: 10.5pt; line-height: 24px; } .user-menu .footer-items { position: fixed; bottom: 0px; right: 0px; left: 0px; } #usermenu .footer-items { position: absolute; bottom: 0px; right: 0px; left: 0px; height: 50px; border-top: 1px solid var(--light-border); width: 100%; } #usermenu .footer-items > div { display: inline-block; width: 50%; height: 50px; line-height: 50px; } .user-menu-user-details img { max-width: 40px; border-radius: 5px; } .user-menu-body-items { height: calc(100dvh - 194px - var(--usermenu-meter-h, 0px)); overflow-y: auto; display: block!important; } .w960 { margin: 0px auto!important; max-width: 960px; display: block; float: none; }.border1 { border: 1px solid var(--border); } .border1d { border: 1px dashed var(--border); } .p10 { padding: 10px!important; } .p20 { padding: 20px!important; } .p25 { padding: 25px!important; } .p30 { padding: 30px!important; } .p40 { padding: 40px!important; } .p50 { padding: 50px!important; } .br25 { border-radius: 25px!important; } .br20 { border-radius: 20px!important; } .br15 { border-radius: 15px!important; } .br10 { border-radius: 10px!important; } .br5 { border-radius: 5px!important; } .nav-sidebar { width: 500px; max-width: 100%; height: calc(100dvh - 64px); background-color: var(--light-white); position: fixed; top: 64px; right: 0px; transform: translateX(100%); box-shadow: 0px 3px 4px var(--shadow); transition: all .3s ease-in-out; z-index: 999999999; /* border-top: 1px solid var(--light-border); */ } .nav-sidebar .questions-queue-header { background-color: var(--white); } .nav-sidebar .questions-queue-header .number-of { /* background-color: var(--background-color); */ width: 20px; height: 20px; text-align: center; user-select: none; border-radius: var(--border-radius-xs); } .nav-sidebar i { line-height: unset!important; } .nav-sidebar.opened { transform: translate(0px); } .nav-sidebar.opened.chat-expanded { width: 100%; } .nav-sidebar.opened.chat-expanded .chat-messages { padding: 50px 0px 40px; margin: 0px auto; } .chat-expanded .chat-messages-container { max-width: 1500px; width: 100%; margin: 0px auto; padding: 0px 30px; } .nav-sidebar.opened.chat-expanded .chat-widget-content .chat-panel-container .chat-messages > div, .nav-sidebar.opened.chat-expanded .chat-widget-content .chat-panel-container .chat-input { max-width: 740px; margin: 0px auto; width: 100%; } .nav-sidebar.opened.chat-expanded .chat-widget-content .chat-panel-container .chat-input textarea { padding-left: 0px; padding-right: 0px; } .tasks-nav-slider, .todos-nav-slider, .notifications-li-wrapper { will-change: transform; transform: translateZ(0); /* Force GPU acceleration */ } .opened .nav-sidebar { right: 0px; transform: translate(0px, 0px); } nav .opened i { color: var(--primary); } nav .opened .notification-alert { background-color: var(--white); color: var(--primary); font-weight: 500!important; } .dark nav .opened .notification-alert { background-color: var(--awhite); } .dropdown-content.public-users.active li a { background-color: var(--white); } .tasks-nav-slider.opened { background-color: var(--extra-light)!important; } .strategy-page .m3.ta-right .btn i {color: var(--black);} .ui-grid-cell .indent-1 { padding-left: 20px; } .ui-grid-cell .indent-1::before, .ui-grid-cell .indent-2::before, .ui-grid-cell .indent-3::before, .ui-grid-cell .indent-4::before, .ui-grid-cell .indent-5::before { content: '• '; margin-right: 5px; } .ui-grid-cell .indent-2 { padding-left: 40px; } .ui-grid-cell .indent-3 { padding-left: 60px; } .ui-grid-cell .indent-4 { padding-left: 80px; } nav .notification-thread { z-index: 9; } nav .notification-meta-text i { line-height: 30px!important; height: 30px!important; color: var(--black); } .task-assignee-icon { margin-right: 10px; } .notifications-queue .task-assignee-icon { display: inline-block; float: left; } .task-assignee-icon i { color: var(--primary)!important; font-size: 16pt; height: 30px!important; line-height: 30px!important; } .plan-features { margin-top: -1px; } .plan-features:first-child { border-radius: 10px 10px 0px 0px; } .plan-features:last-child { border-radius: 0px 0px 10px 10px; } .plan-feature { color: var(--primary); } .account-info .row.container { background-color: var(--extra-light); width: 100%; padding: 30px; border-radius: 15px; } .account-info .row.container .col.s12:first-child label {font-size: 12pt!important;} .list-wrap { padding: 40px; border-radius: var(--border-radius-tiny); box-shadow: var(--box-shadow); background-color: var(--background-color); height: 100%; } .account .list-wrap { background-color: var(--white); } .intelligence-current-plan.list-wrap { padding: 0; background-color: transparent; box-shadow: none; } .intelligence-current-plan.list-wrap .s3 span { color: var(--primary)!important; } .intelligence-current-plan .stats-grid { padding-top: 5px; gap: 5px; } .intelligence-current-plan.list-wrap .stat-item { background-color: var(--white)!important; box-shadow: var(--box-shadow)!important; border-color: var(--white)!important; } .plan-quick-ref.list-wrap { padding: 0; background: none; box-shadow: none; } .account-compare-page .plan-quick-ref.list-wrap { display: none!important; } .plan-quick-ref.list-wrap > .row { display: flex; gap: 5px; } .plan-quick-ref.list-wrap > .row::after { display: none; } .buy-credits-section.list-wrap { background: none; box-shadow: none; padding: 0; margin-top: 50px; } .account-plans .intelligence-cta.list-wrap { max-width: calc(50% - 5px); margin-right: 5px; float: left; width: 100%; } /* The CTA wears .ai-button (ring at rest, gradient fill when engaged). At rest its label needs a colour of its own: a.btn.btn-secondary has no background, and .btn text is white, so the label was white on the card. A button, so no link underline. */ .intelligence-cta .ai-button { color: var(--primary); } .intelligence-cta .ai-button:hover, .intelligence-cta .ai-button:focus { text-decoration: none; } .account-plans .feature-comparison-link.list-wrap { max-width: 50%; display: inline-block; width: 100%; } .account .account-invoices-page .account-info.row { margin-bottom: 5px!important; } .intelligence-addons.list-wrap { margin-bottom: 50px; } .account-stats.list-wrap { padding: 0; background-color: transparent; box-shadow: none; } .account-stats.list-wrap .stat-item { border: none!important; box-shadow: var(--box-shadow); } .account-stats.list-wrap .stats-grid { gap: 5px; } .account-billing .account-stats.list-wrap { /* margin-bottom: 25px; */ margin-top: 5px; } .account-plan.list-wrap { height: 100%; } .intelligence-plans .account-plan.list-wrap { margin: 5px 0; } .background-color { background-color: var(--background-color); } .open-sans-regular { font-family: var(--body-font); } .font-14px { font-size: 14px!important; } html body .list-editor { background-color: var(--background-color); } .padding-lg { padding: var(--padding-lg)!important; } .bg-bg { background-color: var(--background-color)!important; } .inner-box { box-shadow: 0px 1px 3px var(--shadow) inset!important; } .border-radius-tiny { border-radius: var(--border-radius-tiny)!important; } .island-container { box-shadow: 0px 1px 3px var(--shadow); border-radius: var(--border-radius-tiny); margin-bottom: 20px; } .card-wrapper { background-color: var(--background-color); padding: 30px; border-radius: var(--border-radius-tiny); border: 1px solid var(--light-border); } .br1 { border-right: 1px solid var(--border); } .ask-ai { mask-image: url('/images/openai-logomark.svg'); background-repeat: no-repeat; background-color: var(--black); -webkit-mask-image: url('/images/openai-logomark.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .ask-ai:hover {/* filter: invert(1); */} .ask-ai-action .ask-ai { width: 20px !important; height: 20px; margin-top: 10px; margin-left: 11px; } .bgcolor { background-color: var(--background-color); } /* AI */ .embedding-status { padding: 10px; margin-bottom: 15px; border-radius: 5px; } .status-indicator { display: flex; align-items: center; } .embedding-ready { color: green; margin-right: 10px; } .embedding-missing { color: orange; margin-right: 10px; } .embedding-tools { margin-top: 20px; } .ai-tool-link { display: flex; align-items: center; } .ai-tool-link i { margin-right: 10px; } /* Search styles */ .embedding-search { padding: 20px; } .search-input { margin-bottom: 20px; } .search-input input { flex-grow: 1; margin-right: 10px; } .result-item { /* border: 1px solid #ddd; */ /* border-radius: 5px; */ padding: 10px 15px; margin-bottom: 0px; background-color: var(--background-color); } .strategy-detail-section:hover .result-item { background-color: var(--background-color); } .strategy-item-row .result-item { padding: 10px 15px!important; min-height: 50px; gap: 10px; font-size: 13px; /* height: 50px; */ background-color: var(--background-color); } .strategy-item-row .result-item:first-child { border-top-left-radius: 5px; border-top-right-radius: 5px; } .strategy-item-row .result-item:last-child { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; margin-left: 1px; width: 100%; } .project-outline-item .result-header { margin-bottom: 0px; } .project-outline-item .result-header .title { line-height: 20px; } .similarity { padding: 3px 8px; border-radius: 10px; font-size: 12px; } .search-bar.ai-search-bar { position: relative; } .search-bar.ai-search-bar .search-icon { position: absolute; right: 0px; top: 0px; width: 50px; text-align: center; line-height: 50px; cursor: pointer; } .search-bar.ai-search-bar .search-icon i { font-size: 14pt; line-height: 47px; } .search-bar.ai-search-bar input { background-color: var(--background-color)!important; padding: 0px 50px 0px 15px!important; border-radius: var(--border-radius-tiny)!important; height: 50px!important; } .indented-item::before { content: "• "; position: absolute; margin-left: -14px; } .level-1::before { content: "• "; } .level-2::before { content: "◦ "; } .level-3::before { content: "▪ "; } .level-4::before { content: "• "; } .level-5::before { content: "◦ "; } .level-6::before { content: "▪ "; } .level-7::before { content: "• "; } .level-8::before { content: "◦ "; } .level-9::before { content: "▪ "; } .btn.btn-transparent.un-selectable { user-select: none; cursor: default; } .btn.btn-transparent.un-selectable:hover i { color: var(--icon-color)!important; } .todos-dropdown-container { display: inline-block; float: right; font-size: 11px; line-height: 20px; text-align: right; }.todos-dropdown-container:hover i { color: var(--awhite); } .todos-dropdown-container > div { background-color: transparent!important; } .pproject .circle-number-text { padding-left: 2px; display: inline-block; color: var(--black); } nav ul a:hover { background-color: initial!important; } .search-input .ai-btn { position: absolute; right: 35px; height: 50px; width: 60px; cursor: pointer; padding: 0 5px; font-size: 12px; line-height: 50px; display: inline-flex; gap: 5px; user-select: none; } .ai-search-response { padding: 20px 40px; margin-bottom: 20px; overflow-y: auto; transition: all .5s ease-in-out; border-bottom: 1px solid var(--light-border); border-top: 1px solid var(--light-border); } .ai-search-response ul, .ai-chat-panel ul { padding-left: 15px!important; } .ai-search-response h1, .ai-search-response h2, .ai-search-response h3, .ai-search-response h4, .ai-chat-panel h1, .ai-chat-panel h2, .ai-chat-panel h3, .ai-chat-panel h4{ font-size: 15px; font-weight: 500!important; font-family: var(--body-font)!important; margin-top: 20px!important; margin-bottom: 1px!important; line-height: 23px; } .ai-chat-panel .message-content { font-family: var(--body-font)!important; border: 1px solid transparent; border-radius: var(--border-radius-tiny); border: none!important; background-color: transparent; padding: 0px; } .expanded .ai-chat-panel .message-content { padding: 0 30px; } .dark .ai-chat-panel .message-content {border-color: var(--555);} .chat-send button[disabled] i { color: var(--icon-color); } .chat-send button i { color: var(--awhite); } html h3 { font-size: 32px; } html h4 { font-size: 21px; } .top-user-nav.right > span > li { width: 50px; text-align: center; } .work-panel-header i, .work-panel-header .btn { height: 50px!important; line-height: 50px!important; vertical-align: top; color: var(--black)!important; margin: 0px!important; font-size: 17px!important; } .work-panel-header { line-height: 23px; }.todos-nav-footer .custom-dropdown, .todos-nav-footer > .btn { height: 50px!important; line-height: 50px!important; } .todos-nav-footer > .btn { margin-right: 0px; } .todos-nav-footer .btn i { line-height: 50px!important; height: 50px!important; position: relative!important; bottom: 0px; margin-top: 0px; } .jtsyn-chat-widget-header .ta-right .btn { margin-right: 0px; padding-right: 0px!important; font-size: 9pt; height: 50px; line-height: 50px; } .jtsyn-chat-widget-header .chat-actions.right .btn { margin-top: 0px!important; margin-right: -10px; float: right!important; padding-left: 0px!important; } .popup-mode .jtsyn-chat-widget-header .chat-actions .full-screen-toggle { display: none; } .jtsyn-chat-widget-header .chat-actions.right .btn i { font-size: 16px!important; line-height: 50px!important; width: 50px!important; color: var(--icon-color); } .open-in-new-window .full-screen { display: none!important; } .popup-mode .new-window { display: none!important; } .popup-mode .open-in-new-window .full-screen { display: inline-block!important; position: relative!important; } .btn.at-btn { height: 51px!important; } .ai-btn .openai-logo { width: 16px; height: 16px; background-color: var(--black); -webkit-mask-image: url('/images/openai-logomark.svg'); -webkit-mask-size: cover; mask-image: url('/images/openai-logomark.svg'); mask-size: cover; margin-top: 10px; } .ai-btn.selected .openai-logo { background-color: var(--primary); } .btn.ai-btn.selected { background-color: var(--primary)!important; } .btn.ai-btn:hover { color: var(--primary)!important; } .btn.ai-btn:hover .openai-logo { background-color: var(--primary); } .jtsyn-chat-widget-header .ta-right { padding-right: 20px!important; } .chat-widget-trigger i, .work-widget-trigger i, .btn-timer i, .notifications > i { font-size: 20px!important; } .jtsyn-chat-widget-header i { font-size: 21px!important; } .jtsyn-chat-widget-header .btn:first-child i { font-size: 16px!important; } .contact-info-details { cursor: pointer; margin-top: 25px; } .right-side-container .contact-info-details { margin-top: 0px; padding-left: 5px; } .timelog-list-items { line-height: 50px; padding: 0; background-color: var(--background-color); border-radius: var(--border-radius-tiny); border: 1px solid var(--light-border); margin-bottom: 5px; }.profile-info { line-height: 30px; } .row.category-item { margin-bottom: -5px!important; } .row.category-item .col {padding-right: 1px!important;} .account-spaces .list-editor { padding: 30px!important; border: 1px solid var(--light-border)!important; border-radius: var(--border-radius-tiny); } .account .account-spaces .list-editor { background-color: var(--white); box-shadow: var(--box-shadow); padding: 40px!important; } .account .account-spaces .list-editor input { background-color: var(--background-color)!important; } .mention-dropdown { position: absolute; bottom: 108px; background-color: var(--xwhite); padding: 0px; } .mention-dropdown .mention-item { height: 50px; display: flex; line-height: normal; align-items: center; gap: 15px; padding: 0px 20px; cursor: pointer; } .mention-dropdown .mention-item:hover { background-color: var(--extra-light); } .mention-dropdown .mention-avatar {max-width: 50px;float: left;} html body b { font-weight: 600; } .todo-list .todo-summary-text:hover .todo-summary-text {text-decoration: underline!important;} /* Notification System - Minimal additions */ /* Project notification dropdown */ .notification-dropdown-container { position: relative; } /* Notification tabs */ .notification-tabs { display: flex; list-style: none; margin: 0; padding: 0; } .notification-tabs > .btn { width: 50px; position: relative; } .notification-tabs > .btn i { color: var(--icon-color) !important; } .notification-tabs > .btn .active i { color: var(--primary)!important; } /* Per-tab unread badge. Matches the bell's .notification-alert language (primary fill, 3px radius, awhite text) at a smaller footprint so five of them can sit in the footer without crowding the icons. */ .notification-tabs > .btn .tab-count { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 3px; line-height: 16px; border-radius: 3px; background-color: var(--primary); color: var(--awhite); font-size: 6.5pt; font-weight: 500; text-align: center; pointer-events: none; } .notification-tabs > .btn.selected .tab-count { background-color: var(--awhite); color: var(--primary); } .notification-tabs .tab { flex: 1; text-align: center; } .notification-tabs .tab a { display: block; padding: 0; height: 50px; line-height: 50px; color: var(--light-text); text-decoration: none; border-bottom: 2px solid transparent; transition: all 0.2s ease; } .notification-tabs .tab a.active { color: var(--primary); border-bottom-color: var(--primary); } .notification-tabs .tab a:hover { color: var(--primary); } /* `.notification-dropdown` (the project-overview notification panel) removed 2026-08-23: the overview bell became a link to the full project notifications page, so the inline dropdown no longer exists. The `.notification-dropdown-container` rule above is still live — it styles the bell itself. */ /* Notification pagination styles */ .notification-pagination { text-align: center; border-radius: var(--border-radius-tiny); background-color: var(--background-color); font-size: 12px; cursor: pointer; margin-top: 0px; } .notification-pagination:hover { background-color: var(--extra-light); } .notification-pagination:hover button { color: var(--primary)!important; } .pagination-loading { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--light-text); height: 50px!important; } .pagination-loading i { animation: rotation 1s infinite linear; font-size: 14px; } .pagination-load-more { display: flex; justify-content: center; background-color: var(--extra-light); color: var(--primary); border-radius: var(--border-radius-tiny); } .pagination-load-more:hover { background-color: var(--extra-light)!important; } .pagination-load-more:hover button.btn.btn-transparent { color: var(--primary)!important; } .pagination-load-more:hover button { color: var(--awhite)!important; } .pagination-load-more .btn { display: inline-flex; align-items: center; font-size: 11px; color: var(--black)!important; background-color: transparent; border-radius: 3px; transition: all 0.15s ease; cursor: pointer; text-decoration: none; line-height: unset; height: 50px; border: none!important; } .pagination-load-more .btn:hover { background-color: var(--primary); color: white; border-color: var(--primary); } .pagination-load-more .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .pagination-load-more .btn i { font-size: 14px; line-height: 36px!important; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .favorite-active { color: var(--primary) !important; font-variation-settings: 'FILL' 1 !important; } /* Enhanced JIRA Permission Notification */ .jira-permission-notification { padding: 8px 0; min-width: 350px; } .jira-permission-notification .notification-content { margin-bottom: 8px; display: flex; align-items: flex-start; } .jira-permission-notification .notification-content i { margin-right: 8px; margin-top: 2px; } .jira-permission-notification .notification-actions { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; } .jira-permission-notification .notification-actions .btn-flat { margin: 0 2px; padding: 0 8px; height: 28px; line-height: 28px; font-size: 12px; text-transform: none; color: #fff; background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.3); } .jira-permission-notification .notification-actions .btn-flat:hover { background-color: rgba(255, 255, 255, 0.1); } .jira-permission-notification .configure-btn { background-color: var(--primary) !important; border-color: var(--primary) !important; } .jira-permission-notification .later-btn { background-color: #FF9800 !important; border-color: #FF9800 !important; } .jira-permission-notification .dismiss-btn { background-color: #757575 !important; border-color: #757575 !important; } .jira-notification-toast { background-color: #FF6F00 !important; color: #fff !important; border-radius: 4px !important; max-width: 400px !important; } .view-all-updates { width: 100%; text-align: center; height: 30px; line-height: 30px; background-color: var(--extra-light); margin-top: 3px; border-radius: var(--border-radius-tiny); cursor: pointer; transition: none; font-size: 12px; } .view-all-updates:hover { background-color: var(--primary); color: var(--awhite); } .collection-dropdown-wrapper a i { font-size: 13pt; margin-right: 5px!important; } #projectViewSelector a i.rotate90 { height: 40px; line-height: 44px; margin-top: 7px; } .collection-dropdown-wrapper li a { padding: 0px 18px!important; height: 50px!important; line-height: 50px!important; } .btn.checklist-selector { position: absolute; right: 30px; top: 25px; left: unset!important; height: 50px; line-height: 50px; width: 50px; } .panel-viewer .btn.checklist-selector { right: -10px; top: -10px; } .project-quick-todos .btn.btn-transparent.checklist-selector { right: -16px; top: 0; } .empty-response { text-align: center; padding: 0px!important; margin: 30px 0 0px!important; vertical-align: top; color: var(--primary); } .chat-expanded .right-side-container { width: calc(100% - 310px); display: flex; } .chat-expanded .chat-widget { display: flex; } .smart-result:hover, .smart-result:hover > div { background-color: var(--background-color)!important; } .smart-result { padding: 10px 30px!important; } .project-outline-meta .search-result-actions { padding: 0 30px 30px; } .project-role-container .light-text.right { font-size: 12px; padding-left: 5px; } .todo-summary-text { width: 100%; font-weight: 400; } .todo-summary-text ol {padding: 0 0 0 5px;} .todo-summary-text .todo-priority { display: flex; float: left; } .todo-summary-text .todo-priority i { height: unset; line-height: unset; font-size: 20px; margin-right: 5px; } .work-nav-item .nav-sidebar { width: 100%!important; max-width: 520px; } .edit-business-data-icon { margin-right: -15px; margin-top: -10px; } .full-centered-page {text-align: center;display: block;overflow-y: auto;height: calc(100dvh - 64px);} .section-header-row { padding: 20px; line-height: normal; display: flex; flex-direction: column; width: 100%; } .profile-page .section-header-row { padding: 30px; } .opened .section-header-row { background-color: var(--white); } .dark nav .opened .section-header-row { /* background-color: var(--extra-light); */ } .flex-container { display: flex!important; align-items: normal; gap: 5px; } .flex-item { display: flex; flex: 1; } .upload-text { display: flex; flex-direction: column; padding-top: 10px; font-size: 15pt; font-weight: 200; } .upload-text .error-upload-message { font-size: 9pt; color: var(--awhite); margin-top: 3px; font-weight: 400; } .jtsyn-bg-water { position: fixed; width: 100%; top: 0px; left: 0px; right: 0px; bottom: 0px; display: flex; z-index: 0!important; pointer-events: none; user-select: none; } .jtsyn-bg-water::before, .jtsyn-bg-water::after { content: ''; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: 0!important; user-select: none; pointer-events: none; } .jtsyn-bg-water::before { background: radial-gradient(circle at 30% 40%, rgba(25, 118, 210, 0.5) 0%, rgba(25, 118, 210, 0.2) 25%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 20%, transparent 45%), radial-gradient(circle at 50% 80%, rgba(66, 165, 245, 0.4) 0%, rgba(13, 71, 161, 0.2) 30%, transparent 48%), radial-gradient(circle at 85% 20%, rgba(0, 0, 0, 0.1) 0%, transparent 35%); animation: waterFlow1 12s ease-in-out infinite; } .jtsyn-bg-water::after { background: radial-gradient(circle at 60% 30%, rgba(66, 165, 245, 0.45) 0%, rgba(66, 165, 245, 0.15) 28%, transparent 48%), radial-gradient(circle at 20% 70%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.25) 22%, transparent 42%), radial-gradient(circle at 80% 50%, rgba(13, 71, 161, 0.35) 0%, transparent 46%), radial-gradient(circle at 15% 15%, rgba(0, 0, 0, 0.1) 0%, transparent 38%); animation: waterFlow2 15s ease-in-out infinite; } .dark .jtsyn-bg-water::before { background: radial-gradient(circle at 30% 40%, rgba(25, 118, 210, 0.5) 0%, rgba(25, 118, 210, 0.2) 25%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 20%, transparent 45%), radial-gradient(circle at 50% 80%, rgba(66, 165, 245, 0.4) 0%, rgba(13, 71, 161, 0.2) 30%, transparent 48%), radial-gradient(circle at 85% 20%, rgba(0, 0, 0, 0.5) 0%, transparent 35%); animation: waterFlow1 12s ease-in-out infinite; } .dark .jtsyn-bg-water::after { background: radial-gradient(circle at 60% 30%, rgba(66, 165, 245, 0.45) 0%, rgba(66, 165, 245, 0.15) 28%, transparent 48%), radial-gradient(circle at 20% 70%, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.25) 22%, transparent 42%), radial-gradient(circle at 80% 50%, rgba(13, 71, 161, 0.35) 0%, transparent 46%), radial-gradient(circle at 15% 15%, rgba(0, 0, 0, 0.55) 0%, transparent 38%); animation: waterFlow2 15s ease-in-out infinite; } @keyframes waterFlow1 { 0%, 100% { transform: translate(0%, 0%) rotate(0deg) scale(1); } 25% { transform: translate(8%, -5%) rotate(3deg) scale(1.08); } 50% { transform: translate(-6%, 7%) rotate(-4deg) scale(0.94); } 75% { transform: translate(5%, 4%) rotate(2deg) scale(1.05); } } @keyframes waterFlow2 { 0%, 100% { transform: translate(0%, 0%) rotate(0deg) scale(1); } 30% { transform: translate(-7%, 6%) rotate(-3deg) scale(1.06); } 60% { transform: translate(6%, -8%) rotate(4deg) scale(0.92); } 80% { transform: translate(-4%, -3%) rotate(-2deg) scale(1.04); } } .water-background-nav-switch { cursor: pointer; } .strategy-page .centered-page > div {margin: 0px auto 60px;z-index: 9;/* position: relative; */height: 100%;width: 100%;} .strategy\.focuses > .focus-settings { max-width: 1200px; } .strategy-bg-wrapper { position: absolute; top: 0px; bottom: 0px; /* right: 0px; */ /* left: 0px; */ height: 100dvh; width: stretch; background-size: cover; background-position: center; opacity: .5; } .initiatives-page { max-width: 1200px!important; } .programs-page { max-width: 1200px!important; } .okrs-page { width: 1200px!important; /* display: flex; */ /* position: sticky!important; */ /* top: 20px; */ } .focus-settings > div { /* max-width: 900px!important; */ margin: 0 auto 10px!important; display: block; } .pillar-detail, .focus-detail, .program-detail, .initiative-detail { margin: 0 auto; max-width: 800px; } .strategy-vision { max-width: 900px!important; } .project-peeps.row.list-item-editor { display: flex; gap: 5px; } .overview-section .project-peeps.row.list-item-editor { flex-direction: column; } .overview-section .project-peeps.row.list-item-editor .col.m6.s12 { padding: 0px!important; margin-bottom: 20px!important; width: 100%; } .overview-section .project-peeps.row.list-item-editor .col.m6.s12:last-child { margin-bottom: 0!important; } .flex-wrapr { display: flex; gap: 5px; } .admin-settings-section { padding: 50px; overflow-y: auto; height: calc(100dvh - 62px); } .admin-settings-section .card .dropdown-selector { background-color: var(--background-color); } .admin-settings-section > div { max-width: 1040px; margin: 0px auto; height: unset; overflow: unset; } .message-sender .lazy-image-wrapper { width: 25px; float: left; margin-right: 15px; margin-top: -4px; margin-bottom: -5px; } .message-sender .lazy-image-wrapper img { border-radius: 3px; } .project-doc { position: fixed; top: 0; right: 0; left: 0; bottom: 0; background-color: var(--white); } .admin-settings > .card { margin-top: 40px!important; margin-bottom: 40px!important; } .strategy-settings .card { max-width: 1040px; display: flex; flex-direction: column; margin: 0 auto 5px!important; } .admin-settings.vision-editor > div { max-width: 1040px; } .add-new-version { display: flex; background-color: var(--background-color); border-radius: var(--border-radius-tiny); padding-right: 0px; margin-bottom: 5px; } .add-new-version .add-new { height: 50px; width: 50px; text-align: center; line-height: 50px; padding: 0!important; float: right; display: flex; border-left: 1px solid var(--light-border); border-radius: 0!important; } .add-new-version .add-new i {margin: 0 auto!important;} .version-item { display: flex; background-color: var(--background-color); border-radius: var(--border-radius-tiny); position: relative; margin-bottom: 1px; } .version-item .btn { height: 50px; line-height: 50px; width: 51px; border-radius: 0!important; } .version-item .btn.delete-version { border-left: 1px solid var(--light-border); } .version-item .btn:first-child { border-right: 1px solid var(--light-border); } .drag-handle { cursor: grabbing!important; } .version-item .btn:last-child { border-left: 1px solid var(--light-border); width: 51.5px!important; } .version-item .btn i { margin: 0; color: var(--icon-color); } .version-field-number { width: 120px; border-right: 1px solid var(--light-border); } .version-field-name { width: calc(100% - 152px); } html body .warning-btn:hover { color: var(--awhite)!important; background-color: var(--warning)!important; } .dropdown-content li.main-nav-dd i { margin-right: 0; padding-right: 0px!important; width: 50px; margin: 0!important; text-align: center; cursor: pointer; } .dropdown-content li.main-nav-dd i.right { font-size: 14pt; color: var(--icon-color); } .dropdown-content.top-nav-sub li.main-nav-dd i.active { transform: rotate( 180deg ); color: var(--primary)!important; } .dropdown-content.top-nav-sub li.main-nav-dd i:hover { color: var(--primary)!important; cursor: pointer; } .dropdown-content li.main-nav-dd a { padding: 0 0 0 20px!important; height: 50px; line-height: 50px; } .dropdown-content.top-nav-sub.active > li > a, .dropdown-content.top-nav-sub.active > li > a i { color: var(--black)!important; } .date-header-wrapper { margin: 0px auto 5px; max-width: 720px; } ul.sub-section-menu { transition: all .3s ease-in-out; } .api-key-section { padding: 30px!important; border-radius: var(--border-radius-tiny); box-shadow: var(--box-shadow); margin-bottom: 5px!important; background-color: var(--background-color); border: none!important; /* max-width: calc(50% - 5px); */ width: 100%; display: inline-block; margin-right: 5px; margin-bottom: 4px!important; } .api-key-section:nth-child(2n) { margin-right: 0; } .api-key-section img { max-width: 25px; margin-right: 10px; } /* AI Provider Logo Dark Mode Support */ .dark img[src*="openai-logomark"] { filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)!important; border-radius: 0; } /* jtsyn Intelligence Logo Text */ .jtsyn-ai-logo { font-family: var(--nothing); color: var(--primary); display: inline-block; vertical-align: middle; font-size: 1em; vertical-align: top; } .jtsyn-ai-logo.sm { font-size: 14px; margin-right: 6px; margin-left: 5px; } .model-toggle-item .jtsyn-ai-logo.sm { font-size: 20px; } .jtsyn-ai-logo.md { font-size: 16px; margin-right: 8px; } #defaultModelDropdown .jtsyn-ai-logo { margin-left: 5px!important; } .jtsyn-ai-logo.lg { font-size: 24px; margin-right: 8px; margin-left: 9px; } .jtsyn-ai-logo.xl { font-size: 24px; } .new-card { padding: 40px; background-color: var(--white); border-radius: var(--border-radius-tiny); box-shadow: var(--box-shadow); } .prompt-container .btn, .prompt-container .btn .ds-text { height: 30px; line-height: 30px!important; display: flex; align-items: center; justify-content: end; } .prompt-container .btn .list-text img { align-items: center; } .jt1 { font-family: var(--nothing); } .research-model-name .jt1 { margin-right: 5px; color: var(--primary); font-size: 18px; } .contact-info .jt1 { color: var(--primary); } .the-profile-image.intelligence-img.jt1 { font-size: 17pt; margin-top: -1px; margin-left: 5px; } .mention-menu { display: block; max-height: 300px; overflow: auto; margin: 0; padding: 6px 0; list-style: none; background: var(--xwhite); border: 1px solid var(--border-color, rgba(0,0,0,0.12)); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); min-width: 260px; } .mention-menu .mention-header { padding: 6px 12px; font-size: 10px; font-weight: 400; letter-spacing: 0.06em; color: var(--light-text); text-transform: uppercase; } .mention-menu .mention-item { padding: 8px 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .mention-menu .mention-item.active, .mention-menu .mention-item:hover { background: var(--background-color); } .mention-menu .mention-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .mention-menu .mention-icon { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; flex: 0 0 auto; margin-top: 0px; } .mention-menu .mention-meta { min-width: 0; flex: 1; } .mention-menu .mention-title { font-size: 13px; font-weight: 400; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .mention-menu .mention-subtitle { font-size: 11px; color: var(--light-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; line-height: 1.2; } .menu-highlighted { font-weight: 400!important; } .private-ai-message .ai-model-indicator { margin-left: 0px!important; } button.visibility-toggle-btn { line-height: 20px; vertical-align: middle; } .oauth-btn-content { display: flex; gap: 6px; align-items: anchor-center; text-align: center; } .oauth-btn-content svg { width: 16px; height: 16px; } .apple-btn .oauth-btn-content svg { width: 24px; height: 24px; } .authenticate-me.oauth-buttons { display: flex; justify-content: center; gap: 5px; margin-top: 40px; margin-bottom: 10px; } .authenticate-me.oauth-buttons.sso-enabled { margin-top: 20px; } .ai-convo svg, .ai-convo img { max-width: 100%; } .login-container { max-width: 400px!important; background-color: var(--white); padding: 80px 50px ; margin: 10dvh auto; box-shadow: var(--box-shadow); border-radius: var(--border-radius-tiny); } .full-centered-page .login-container { /* max-width: 700px!important; */ } .login-container.account-chooser-container { max-width: 380px; padding: 60px 50px; margin-bottom: 0; } .main-chat-panel .chat-input { position: fixed; bottom: 0; left: 0; right: 0; background-color: var(--white); } .chat-collapsed .main-chat-panel .chat-input { padding: 0 15px 15px; background-color: var(--light-white); } .chat-collapsed .main-chat-panel .chat-input-wrapper { border: 1px solid transparent; border-radius: var(--border-radius-tiny); box-shadow: var(--box-shadow); background-color: var(--white); } .dark .chat-collapsed .main-chat-panel .chat-input-wrapper { /* border-color: var(--border); */ } .chat-collapsed .main-chat-panel .chat-input-divider { display: none; } .chat-expanded .main-chat-panel .chat-input { width: 100%; left: unset; right: unset; position: relative; } .chat-expanded .simple-chat .main-chat-panel .chat-input, .chat-expanded .intelligence-chat .main-chat-panel .chat-input { max-width: 800px; margin: 0 auto; } .chat-expanded .has-thread-sidebar .chat-input { width: 100%; } .value-text .cke { background-color: var(--background-color); padding: 20px; border-radius: var(--border-radius-tiny); } .vision-editor .vision-editor { max-width: 900px; margin: 0px auto; } .streaming-cursor { width: 5px!important; height: 5px!important; border-radius: var(--border-radius-tiny); } button.btn-flat.stop-streaming-btn { height: 25px; padding: 0!important; line-height: 25px!important; height: 25px!important; display: flex; align-items: anchor-center; text-transform: capitalize; font-size: 9pt; gap: 4px; color: var(--primary)!important; } button.btn-flat.stop-streaming-btn i { height: 25px; line-height: 25px; } button.btn-flat.stop-streaming-btn i { color: var(--primary)!important; } .project-docs > .card { max-width: 900px; margin: 50px auto; padding: 40px; } .project-docs > .card input { background-color: var(--background-color)!important; padding: 0px 15px!important; border-right: 1px solid var(--white)!important; } .text-field .sub-text a { display: inline-block; padding: 0; font-size: unset; } .provider-status-item { height: 40px; line-height: 40px; display: flex; } nav .provider-status-item > img { margin-top: 10px; } .ai-actions .ds-text img { max-width: 17px; width: 100%; margin-right: 7px; box-shadow: none; line-height: 40px; } .ai-settings .ai-icon.jt1 { color: var(--primary); font-size: 13pt!important; margin-right: 0px!important; margin-left: 0px; text-align: right; padding-right: 10px; padding-left: 10px; text-decoration: none!important; } .model-selector .ai-action .ai-icon.jt1 { margin-left: -7px; margin-right: 4px!important; } ai-chat .model-selector .ai-action .ai-icon.jt1 { margin-left: -3px!important; } .ai-icon.jt1.ai-icon-wrp { width: 24px!important; height: 25px!important; padding: 0; } .ai-chat .second-container.model-selector .ai-action { margin-left: 0!important; } .ai-action.the-model-selector .ai-icon-wrp { width: 28px!important; height: 28px!important; padding: 0!important; } .ai-action.the-model-selector { padding-right: 55px; display: flex; align-items: start!important; } .ai-action.the-model-selector.the-agent-selector { display: flex; line-height: normal; height: fit-content; padding: 10px 20px; } .ai-action.the-model-selector .ai-icon-wrp { width: 32px; } .ai-action.the-model-selector > span > *:last-child {} .ai-action.the-model-selector i { height: 50px; line-height: 50px; } .admin-card { background-color: var(--white); padding: 40px; border-radius: var(--border-radius-tiny); box-shadow: var(--box-shadow); margin-bottom: 5px; } .admin-card .text-field input, .admin-card .text-field .dropdown-selector { background-color: var(--background-color)!important; } .feature-toggles { display: flex; flex-wrap: wrap; gap: 5px; box-sizing: border-box; } .feature-toggle-title { font-weight: 400; } .intelligence-settings .sub-text { margin-bottom: 0px!important; font-size: 12px; } .flex-between { display: flex!important; justify-content: space-between!important; align-content: flex-start; } .project-intelligence-convo-header { margin-top: 20px; margin-bottom: 5px; } .ideas-detail-footer-actions {gap: 20px;vertical-align: top;align-items: center;} .ideas-detail-footer-actions .btn.btn-transparent { font-size: 13px; font-weight: 400; vertical-align: middle; } .integration-section > .flex-between .switch .lever { background-color: var(--background-color)!important; } html body .locked i, html body i.locked { color: var(--orange)!important; } .user-meta-actions .btn.btn-icon { height: 20px!important; line-height: 20px!important; } .user-meta-actions { display: flex; padding-top: 10px; } .jt1-logo-bg .jt1 { font-size: 16pt; } .jt1-logo-bg .jt1 { margin-left: 5px; color: var(--primary); margin-right: 5px; } .byok-user-selector input { background-color: var(--white)!important; padding: 0px 20px!important; font-size: 13px!important; } .model-item { display: flex; align-items: center; justify-content: space-between; background-color: var(--bgc); border: 1px solid var(--light-border); padding: 15px 30px; border-radius: var(--border-radius-tiny); margin-bottom: 5px; } .integration-actions i { color: var(--primary)!important; } .sli-header { text-transform: uppercase; color: var(--light-text); font-size: 9pt; } .profile-menu .sli-header { margin-top: 10px; } .profile-sidebar-collapsed .sli-header { display: none; } .sli-header.mt-16 { margin-top: 32px; margin-bottom: 5px; } .fwf { /* display: flex; */ /* width: 100%; */ } .strategy-sidebar-list .sli-header { /* color: var(--primary); */ /* margin-top: 20px; */ /* margin-bottom: 5px; */ } .focus-item .cke { background-color: var(--background-color); padding: 25px; border-radius: var(--border-radius-tiny); } .focus-item .cke_top { margin-bottom: 10px; } .initiatives-editor { padding: 0 50px; } .value-text .cke_top { margin-bottom: 10px; } .linked-goals-toggle { background-color: var(--background-color); height: 50px; line-height: 50px; padding: 0px 10px; border-radius: var(--border-radius-tiny); } .goal-selector-panel { padding: 30px; background-color: var(--background-color); color: var(--light-text); margin-bottom: 5px; border-radius: var(--border-radius-tiny); } .goal-selector-label { margin-bottom: 5px; } .goal-chip { display: flex; align-items: anchor-center; gap: 10px; cursor: pointer; } .goal-chip, .goal-chip i { color: var(--icon-color)!important; user-select: none; } .goal-chip:hover, .goal-chip:hover i { color: var(--primary)!important; } .user .project-editor { padding: 40px; background-color: var(--white); border-radius: var(--border-radius-tiny); box-shadow: var(--box-shadow); } .profile-page .user .project-editor { padding: 0; box-shadow: none; background-color: transparent; } .initiatives-list.col { background-color: var(--white); padding: 40px!important; box-shadow: var(--box-shadow); border-radius: var(--border-radius-tiny); } .memory-item-meta-right { display: flex; justify-content: space-between; margin-left: auto; gap: 5px; line-height: 22px; } li.dropdown-section-header i, li.dropdown-section-header { line-height: 50px; font-size: 13px; } li.dropdown-section-header { border-bottom: 1px solid var(--border); text-transform: uppercase!important; font-size: 11px; font-weight: 400; color: var(--light-text)!important; } .user.team-user.profile-page { padding: 40px; background-color: var(--white); box-shadow: var(--box-shadow); } .user-name-meta .user-name { font-weight: 400; font-size: 15px; } .users-table { margin-top: 8px; } .admin-spaces-page .users-table { background-color: var(--white); padding: 25px 40px 40px; border-radius: var(--border-radius-tiny); box-shadow: var(--box-shadow); } .profile-header-container { padding: 0 3px; margin-bottom: 5px; } .bceo-title { font-weight: 400; } .chooser-footer-actions .btn { font-size: 13px; color: var(--light-text)!important; padding: 0!important; height: 30px; line-height: 30px; width: 30px; } .chooser-footer-actions .btn i, .chooser-footer-actions .btn { color: var(--icon-color)!important; } .chooser-footer-actions .btn:hover i, .chooser-footer-actions .btn:hover { color: var(--primary)!important; } .user-info-wrapper { display: flex; flex-direction: column; gap: 0px; padding-top: 15px; padding-bottom: 0px; border-radius: var(--border-radius-tiny); justify-content: center; width: auto; } .user-info-wrapper .user-provider span { font-size: 11px!important; } .user-info-content { text-align: left; } button.btn.btn-text.cancel-switch { color: var(--primary)!important; margin: 0 auto; } .shimmer-text { position: relative; display: inline-block; color: var( --light-text); /* Slight base polish */ /* text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.15 ); */ } /* Shimmer overlay */ .shimmer-text::after { content: attr( data-text ); position: absolute; inset: 0; /* Pure white highlight — blend does the magic */ color: white; background: linear-gradient( 110deg, transparent 0%, rgba( 255, 255, 255, 0.9 ) 12%, transparent 24% ); background-size: 200% 100%; background-position: -120% 0; /* Clip gradient to text */ -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* Lighten instead of replace */ mix-blend-mode: screen; pointer-events: none; animation: shimmer-sweep 1s linear infinite; } @keyframes shimmer-sweep { 0% { background-position: -120% 0; } 100% { background-position: 120% 0; } } .shimmer-overlay { --shimmer-highlight: white; background: linear-gradient( 110deg, currentColor 0%, currentColor 50%, var( --shimmer-highlight ) 50%, currentColor 60%, currentColor 100% ); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer-overlay-sweep 1.5s ease-in-out infinite; } .dark .shimmer-overlay { --shimmer-highlight: rgba( 255, 255, 255, 0.9 ); } @keyframes shimmer-overlay-sweep { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .user-info-content-wrapper { display: flex; gap: 14px; /* border: 1px solid var(--light-border); */ padding: 5px; border-radius: 3px; max-width: 420px; margin: 0 auto; } .chooser-footer-actions .btn i { font-size: 17px!important; color: var(--primary)!important; line-height: 16px!important; } .chooser-footer-actions { text-align: right; margin-left: auto; padding-top: 3px; display: flex; gap: 5px; } .alert i.material-icons { color: var(--warning); } .alert.alert-success i.material-icons { color: var(--good); } .status-display { padding: 20px; background-color: transparent!important; border: 1px solid var(--light-border); border-radius: var(--border-radius-tiny); margin-top: 20px; font-weight: 400; } .status-display i { float: left; margin-right: 10px; font-size: 15pt; } .admin-settings-body button { background-color: transparent!important; color: var(--primary); } .admin-settings-body button { font-size: 13px!important; } .plan-option .btn.btn-small { font-size: 13px!important; text-transform: uppercase; padding: 0!important; font-weight: 500; } .admin-settings-body button:first-of-type { padding-left: 0!important; font-size: 13px; } .admin-settings-body .plan-ref-card button:first-of-type { padding-right: 0!important; } .description button.btn.btn-secondary i { margin-right: 5px; } .security-settings .grouping button { height: 50px; line-height: 50px; width: 50px; text-align: center; padding: 0px!important; margin-left: -4px; background-color: var(--background-color)!important; border: none!important; border-radius: 0 5px 5px 0!important; margin-top: .5px; } .security-settings .grouping button:hover { background-color: var(--primary)!important; } .security-settings .grouping button.btn i { margin-right: 0px!important; height: 50px!important; line-height: 50px!important; } .admin-settings-body button:hover { background-color: transparent!important; text-decoration: underline; } .toggle-options .toggle-option {padding: 20px!important;background-color: var(--background-color);border-radius: var(--border-radius-tiny);width: calc(50% - 5px)!important;border: 1px solid var(--light-border);cursor: pointer;} .toggle-options .toggle-option:hover { background-color: var(--extra-light); } .toggle-options { gap: 5px; display: flex!important; padding-bottom: 40px!important; } .toggle-option.active { /* background-color: var(--extra-light); */ color: var(--primary); border: 1px solid var(--primary); } .toggle-option.active i { color: var(--primary); } .toggle-option-title { font-weight: 500; } .admin-pillars { margin: 40px 0; } .inline-warning-message { padding: 20px 30px!important; border-radius: var(--border-radius-tiny); line-height: 25px; border: 1px solid var(--light-border); color: var(--light-text)!important; background-color: var(--white)!important; } .inline-warning-message p { color: var(--black); } .inline-warning-message i { color: var(--orange); line-height: 25px; vertical-align: middle; margin-right: 10px; font-size: 22px; } .thread-reply .reply-sender .lazy-image-wrapper { padding-top: 7px; } .idp-config-settings .card .setting-option { padding-bottom: 0; } #newMappingRoleDropdown li a { padding: 0; } #newMappingRoleDropdown li { padding: 10px 20px; } .input-with-button { display: flex; } html body .input-with-button input { border-radius: 5px 0 0 5px!important; } .input-with-button button.btn { height: 50px!important; line-height: 50px!important; background-color: var(--background-color)!important; padding-right: 0px!important; width: 50px!important; border: none!important; margin-left: 1px; max-width: 50px!important; min-width: 50px!important; border-radius: 0 5px 5px 0!important; text-align: center; } html body .input-with-button button.btn i { margin: 0px auto!important; height: 50px; line-height: 50px!important; width: 50px; right: 0; } .feature-card-content .premium-badge .material-symbols-outlined { font-size: 17px!important; } .flex-row { display: flex!important; box-sizing: border-box; } /* html body { background: radial-gradient( 120% 80% at 50% -20%, rgba(255, 255, 255, 0.9) 0%, rgba(245, 245, 245, 0.8) 40%, rgba(235, 235, 235, 0.9) 70% ), linear-gradient( 180deg, #f4f4f4 0%, #f1f1f1 60%, #ededed 100% ); } */ .addon-items .addon-item { padding: 30px; background-color: var(--white); border-radius: var(--border-radius-tiny); box-shadow: var(--box-shadow); display: flex; flex: 1 0 calc(50% - 15px); border: 1px solid var(--white); } .storage-addons .addon-items .addon-item { flex: 1; } .addon-items .addon-item.selected { color: var(--black)!important; background-color: var(--xwhite); } .addon-items .addon-item { font-size: 14px!important; } .addon-category-header { color: var(--black); text-transform: uppercase; font-size: 12px; padding-bottom: 5px; padding-left: 5px; display: flex; align-items: center; } .addon-total-container { margin-top: 50px; } .addon-storage-badge { margin-left: auto; padding: 3px 10px; font-size: 11px; font-weight: 500; color: var(--light-text); background: var(--background); border-radius: 12px; text-transform: none; display: flex; align-items: center; gap: 4px; letter-spacing: 0; } .addon-storage-badge i { font-size: 13px !important; color: var(--light-text) !important; margin-right: 0 !important; } .plan-limit-usage { font-size: 11px; color: var(--light-text); /* margin-left: auto; */ } /* Billing Summary (settings page) */ .billing-summary-lines { padding: 0; padding-top: 10px; } .billing-summary-line { display: flex; justify-content: space-between; align-items: center; padding: 15px 0 3px; } .billing-summary-line:first-child { padding-top: 0; } .billing-summary-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--black); } .billing-summary-label i { font-size: 16px !important; color: var(--primary); } .billing-summary-value { font-size: 13px; font-weight: 500; color: var(--black); white-space: nowrap; } .billing-summary-sub { font-size: 12px; color: var(--light-text); padding: 0 0 13px 24px; margin-top: -4px; border-bottom: 1px solid var(--light-border); } .billing-summary-category-line { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 0px 24px; font-size: 12px; color: var(--light-text)!important; } .billing-summary-category-label { display: flex; align-items: center; gap: 6px; color: var(--black); } .billing-summary-category-label i { height: 10px; line-height: 10px; } .billing-summary-category-label i { font-size: 14px !important; color: var(--light-text); } .billing-summary-category-cost { font-size: 13px; font-weight: 500; color: var(--black); white-space: nowrap; } .billing-summary-category-sub { font-size: 12px; color: var(--light-text); padding: 0 0 6px 44px; } /* Add-on line items on billing page */ .addon-billing-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--light-border); } .addon-billing-item:last-child { border-bottom: none; } .addon-billing-info { display: flex; align-items: center; gap: 10px; } .addon-billing-item .addon-billing-info > i { font-size: 20px; color: var(--light-text); vertical-align: top; } .addon-billing-name { font-size: 13px; font-weight: 500; color: var(--black); } .addon-billing-price { font-size: 12px; color: var(--light-text); margin-top: 1px; } .addon-billing-total { font-size: 13px; font-weight: 500; color: var(--black); white-space: nowrap; } .billing-summary-total { display: flex; justify-content: space-between; align-items: center; padding: 20px 0 0; margin-top: 4px; } .addon-category-header i { vertical-align: middle; font-size: 17px!important; } .addon-category-header i { color: var(--primary); } .stat-operator { position: absolute; right: -20px; top: 51px; font-size: 18pt; background-color: var(--white); padding: 10px; z-index: 999; color: var(--black); border-radius: var(--border-radius-tiny); /* box-shadow: inset 0px 1px 3px var(--shadow); */ } .add-on-header { margin-top: 20px; font-size: 12px; text-transform: uppercase; color: var(--light-text); } .add-on-header.top-border { /* border-top: 1px solid var(--light-border); */ /* padding-top: 20px; */ margin-top: 0px; } .bs-bold { font-weight: bold; } .addons-total-bar.list-wrap { margin-top: 0px!important; color: var(--primary); padding: 30px; } .strategy-setting { background-color: var(--white); box-shadow: var(--box-shadow); padding: 30px; border-radius: var(--border-radius-tiny); flex: 1 0 calc(50% - 5px); cursor: pointer; flex-grow: inherit; } .strategy-setting:hover { background-color: var(--extra-light); } .dark .strategy-setting:hover { background-color: var(--xwhite); } .strategy-setting .btn { padding: 0!important; } .card .strategy-settings { display: flex; flex-wrap: wrap; gap: 5px; } .strategy-setting-title { font-weight: 500; font-size: 15px; display: flex; align-items: center; } .alignment-gap-count-badge { font-size: 13px; margin-left: 10px; color: var(--orange); } .provider-models-section { margin-top: 40px!important; } .settings-wrapper-1 .text-field, .integration-section .setting-option .text-field { padding-bottom: 0!important; } .program-group { background-color: var(--light-glass); box-shadow: var(--box-shadow); border-radius: var(--border-radius-tiny); margin-bottom: 5px; padding: 40px; transition: background-color .3s ease-in-out; } .program-group:hover { background-color: var(--white); } .focus-group { /* background-color: var(--light-glass); */ /* padding: 40px; */ border-radius: var(--border-radius-tiny); /* box-shadow: var(--box-shadow); */ } .nav-wrapp {position: relative;} .pi-sidebar-footer { position: absolute; border: 0; left: 0; right: 0; width: 100%; } .pi-add-new-chat-btn { display: flex; height: 50px; line-height: 50px; align-items: center; padding: 0 30px; margin-bottom: 0px; color: var(--primary); cursor: pointer; font-weight: 400; width: 100%; float: left; font-size: 13px; margin-top: 10px; } .pi-add-new-chat-btn i { font-size: 20px; margin-left: -2px; margin-right: 10px; color: var(--primary); line-height: 50px; } .pi-add-new-chat-btn:hover { background-color: var(--primary); color: var(--awhite); } .pi-add-new-chat-btn:hover i { color: var(--awhite)!important; } .pi-add-new-chat-btn:hover i { color: var(--primary); } .chat-input-footer-wrapper { background-color: var(--background-color); position: absolute; bottom: 0; left: 10px; right: 10px; z-index: 1; height: 170px; top: unset; } .start-a-new-intelligence-session .chat-input-footer-wrapper { position: relative; /* margin-top: 20px; */ left: 0; height: auto; display: flex; margin-top: 0px; background-color: transparent; } .second-container { max-height: 40dvh; overflow-y: auto; position: relative; bottom: 0px; } .second-container.agent-mode-selector .ai-action { width: auto; } .auto-mode span, .auto-mode i, .btn-transparent.auto-mode span, .btn-transparent.auto-mode i, .auto-mode:hover span, .auto-mode:hover i, .btn-transparent.auto-mode:hover span, .btn-transparent.auto-mode:hover i { color: var(--orange)!important; } .collaborate-mode span, .collaborate-mode i, .collaborate-mode:hover span, .collaborate-mode:hover i, .btn-transparent.collaborate-mode span, .btn-transparent.collaborate-mode i, .btn-transparent.collaborate-mode:hover span, .btn-transparent.collaborate-mode:hover i { color: var(--highlight)!important; } .plan-mode span, .plan-mode i, .plan-mode:hover span, .plan-mode:hover i, .btn-transparent.plan-mode span, .btn-transparent.plan-mode i, .btn-transparent.plan-mode:hover span, .btn-transparent.plan-mode:hover i { color: #44b8c6 !important; } .auto-mode span.sub-text, .collaborate-mode span.sub-text, .plan-mode span.sub-text { color: var(--light-text)!important; } .set-agent-mode.plan-mode .ai-action-with-subtext span:first-child, .set-agent-mode.plan-mode i { color: var(--good); } .second-container .ai-action.justify-start .switch { width: 100%; } .second-container.agent-mode-selector { display: flex; flex-direction: column; /* max-width: 200px; */ } .second-container.agent-mode-selector .ai-action-with-subtext { flex-direction: column; } .second-container.agent-mode-selector .ai-action-with-subtext > span:first-child { font-weight: 500; } .second-container.agent-mode-selector .ai-action, .second-container.grounding-selector .ai-action { height: unset!important; align-items: center!important; cursor: pointer; padding: 10px 20px!important; } .second-container.grounding-selector { display: flex; flex-direction: column; align-items: start; } .project-ai-list-composer .second-container { max-height: 40dvh; } .second-container.reasoning-depth-selector .ai-action { display: flex; flex-direction: column; justify-content: start; align-items: center; } .reasoning-depth-selector .ai-action { flex-direction: column!important; display: flex!important; justify-content: start!important; text-align: left; } .ai-action.personality-selector { flex-direction: column; height: auto; line-height: unset; gap: 0!important; padding: 10px 20px; } .ai-action.personality-selector .sub-text { margin-left: 0!important; font-weight: 300; } .pi-chat-footer .sub-text { font-size: 12px; } .intel-convo-header .pi-chat-header { background-color: transparent!important; box-shadow: none!important; padding-left: 0!important; font-size: 17px!important; font-weight: 400; gap: 6px!important; line-height: 30px; display: flex; align-items: anchor-center; } .intel-convo-header .pi-chat-header i { line-height: 28px; display: flex; } .intel-convo-header-right { display: flex; gap: 10px; } .intel-convo-header-right > div, .intel-convo-header-right > div i { width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 20px; cursor: pointer; } .embedded-item .iframely-responsive { height: calc(100dvh - 114px)!important; overflow-y: auto; padding: 40px; box-sizing: border-box; } .message-group { display: flex; flex-direction: column; align-items: flex-end; } .all-contacts-section.display-current-project { height: calc(100dvh - 312px); overflow-y: auto; } .search-input .right-buttons { position: absolute; right: 0; top: 0; padding-right: 5px; } .search-input .right-buttons i { padding: 0 5px; cursor: pointer; user-select: none; } .search-input .right-buttons i:hover { color: var(--primary); } .highlighted-text em { background-color: var(--highlight); color: var(--ablack); font-style: normal!important; } .btn.btn-transparent.ask-intelligence-btn { width: 100%; height: 50px; line-height: 50px; border: 1px solid var(--light-border); margin-bottom: 30px; display: flex; justify-content: center; gap: 10px; padding: 0 12px!important; } .btn.btn-transparent.ask-intelligence-btn svg { max-width: 30px; height: 40px; line-height: 45px; } .btn.btn-transparent.ask-intelligence-btn:hover .jt-ai-word, .btn.btn-transparent.ask-intelligence-btn:hover .jt-ai-spark { fill: var(--awhite); } .btn.btn-transparent.ask-intelligence-btn:hover { background-color: var(--primary)!important; } .btn.btn-transparent.ask-intelligence-btn:hover, .btn.btn-transparent.ask-intelligence-btn:hover i { color: var(--awhite)!important; } .initiative-item.row .text-field { padding-bottom: 0; padding-right: 5px!important; } .overview-zoom-controls { position: fixed; right: 10px; width: 100px; left: unset!important; top: 90px; padding-top: 20px!important; margin-right: 20px; } .editor-option-card { padding: 20px; background-color: var(--background-color); border-radius: var(--border-radius-tiny); margin-bottom: 5px; /* box-shadow: var(--box-shadow); */ flex: 1; cursor: pointer; display: flex; gap: 10px; border: 1px solid var(--light-border); } .editor-option-card:hover { background-color: var(--extra-light); } .editor-option-card:hover .editor-option-card__icon i { color: var(--primary); } .editor-option-card.editor-option-card--active { border: 1px solid var(--primary); } .dark .editor-option-card.editor-option-card--active { background-color: var(--extra-light); } .editor-option-card.editor-option-card--active .editor-option-card__icon i { color: var(--primary); } .editor-option-cards { display: flex; gap: 5px; } .focus-group-group { padding-bottom: 30px; } .program-group-group .program-group-header { background-color: transparent!important; } .program-group-group { margin-bottom: 30px; } .sli-icon i { font-size: 21px; /* margin-top: 3px; */ } .nested-node .nested-node-name { padding-right: 20px; min-width: 200px; line-height: normal; } .jtsyn-color-picker-wrapper { display: inline-block; } jtsyn-drag-handle-btn i { color: var(--light-text)!important; } .jtsyn-drag-handle-btn i.material-icons { color: var(--light-border); } .jtsyn-drag-handle-btn:hover i.material-icons { color: var(--primary); } .jtsyn-bubble-more-dropdown { display: flex; flex-direction: column; /* text-align: left; */ align-items: flex-start; /* justify-content: center; */ /* padding: 0 20px; */ /* width: 100%; */ } .jtsyn-bubble-more-dropdown button { display: flex; width: 100%; gap: 15px; justify-content: start; align-items: center; padding: 0 15px; } .alignment-gap-list { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; margin-bottom: 20px; } .alignment-gap-header { display: flex; align-items: center; gap: 5px; color: var(--black); } .alignment-gap-header i { font-size: 15px; } .alignment-gap-list .alignment-gap-item { height: 40px; line-height: 40px; padding: 0 20px; background-color: var(--background-color); border-radius: var(--border-radius-tiny); color: var(--black); width: 100%; } .alignment-gap-list .alignment-gap-item:hover { text-decoration: none!important; background-color: var(--white)!important; } .alignment-gap-section { min-height: 50px; line-height: 50px; padding: 0 15px; background-color: var(--background-color); border-radius: var(--border-radius-tiny); margin-bottom: 5px; /* box-shadow: var(--box-shadow); */ cursor: pointer; } .account.settings .alignment-gap-section .text-field input, .account.settings .alignment-gap-section .text-field select, .account.settings .alignment-gap-section .text-field .dropdown-selector { background-color: var(--white)!important; } .alignment-gap-section:hover { background-color: var(--extra-light)!important; } .ml-auto { margin-left: auto!important; } .strategy-settings .admin-settings { padding: 40px!important; } .admin-strategy-content { max-width: 880px; margin: 40px auto; background-color: var(--white); padding: 40px; } .ai-panel .ai-convo-card .ai-convo-card-response { /* color: var(--light-text); */ font-size: 13px; } .empty-text span { font-size: 13px; } .admin-section.admin-capacity-page { padding: 50px; } .admin-capacity-ooo-cell .btn { display: flex; gap: 5px; text-transform: uppercase; } input.myweek-task-est-input { margin-bottom: 0!important; height: 25px!important; width: 25px!important; border: none!important; background-color: var(--background-color)!important; border-radius: 3px!important; font-size: 11px!important; } .jtsyn-callout { display: flex; gap: 10px; align-items: flex-start; justify-content: left; border-left: 2px solid var(--light-border); padding: 15px; background-color: var(--background-color); border-radius: 5px; margin: 5px 0; } .jtsyn-callout.jtsyn-callout--tip { border-color: var(--good); } .jtsyn-callout.jtsyn-callout--info { border-color: var(--primary); } .jtsyn-callout.jtsyn-callout--danger { border-color: var(--warning); } .jtsyn-callout.jtsyn-callout--warning { border-color: var(--highlight); } .usage-items .usage-item > div:first-child {} .myweek-task-title-wrapper { display: flex; gap: 10px; } .myweek-task-title-wrapper .sub-text { font-size: 11px; } .myweek-task-title-wrapper i.myweek-task-type-icon { align-self: unset; } .nav-list { display: flex; gap: 0px; align-items: center; background-color: var(--white); height: 30px; border-radius: 5px; overflow: hidden; border: 1px solid var(--light-border); } .nav-list .dropdown-selector i { margin-right: 0!important; } .nav-list li { list-style: none; /* height: 30px; */ /* line-height: 30px; */ border-right: 1px solid var(--light-border); cursor: pointer; padding: 0 10px; font-size: 12px; display: flex; align-items: center; user-select: none; } .nav-list ul li { height: 50px!important; line-height: 50px!important; } .nav-list .dropdown-selector { border-right: none; padding: 0 11px!important; } .nav-list li:last-child { border-right: 0; } .settings jtsyn-editor { /* padding: 30px!important; */ display: flex; flex-direction: column; margin: 5px 0; border-radius: var(--border-radius-tiny); background-color: var(--background-color); border: 1px solid var(--light-border); } .intelligence-setting-option jtsyn-editor { padding: 20px; } .settings .vision-editor jtsyn-editor { background-color: var(--white); box-shadow: var(--box-shadow); border: none; padding: 40px; } .settings .integration-section jtsyn-editor { background-color: var(--background-color)!important; padding: 30px; } .settings .agents-editor .integration-section jtsyn-editor { padding: 30px!important; } .settings .focus-item jtsyn-editor { background-color: var(--background-color); position: relative; padding: 30px!important; } .settings .admin.admin-settings .focus-item jtsyn-editor { padding: 20px!important; } .values-editor jtsyn-editor { border: 1px solid var(--light-border); background-color: var(--background-color); margin: 0; padding: 25px; } .ckeditor-wrapper .values-editor jtsyn-editor { background-color: var(--white)!important; } .dark .values-editor jtsyn-editor { } .myweek-wh-inputs input.myweek-wh-time-input { margin-bottom: 0; background-color: var(--background-color); padding: 0 10px; border-bottom: none; border-radius: var(--border-radius-tiny); font-size: 12px; } .myweek-action-buttonz { display: flex; } .myweek-wh-total .flex-between { align-items: center; } .notifications-footer .inline-dialog.delete.delete-notifications { padding: 0 15px!important; bottom: 0px!important; } .notifications-footer .inline-dialog.delete.delete-notifications a { font-size: 13px; } .myweek-wh-save { background-color: var(--primary); border-radius: var(--border-radius-tiny); } .overview-page-header-center { width: 500px; flex: 3; width: 670px; flex: 2.01; } .overview-page-header-center .overview-search { /* background-color: var(--white)!important; */ margin-bottom: 0; } .space-permissions-tab-content { background-color: var(--white); /* margin-top: 5px; */ padding: 30px 40px; box-shadow: var(--box-shadow); border-radius: var(--border-radius-tiny); position: relative; } .space-permissions-tab-content.team-create-section { margin-bottom: 25px; } .space-permissions-tab-content table { /* display: flex; */ /* flex-direction: column; */ margin-top: 20px; margin-bottom: 20px; } .space-permissions-tab-content table td { font-size: 12px; padding: 10px 2.5px; } td.space-members-cell-role { display: flex; } td.space-members-cell-role .select-wrapper { width: 100%; } .space-permissions-tab-content table .user-name { font-size: 14px; } .space-permissions-tab-content table .status-chip.enabled span { background-color: var(--primary)!important; } .space-permissions-tab-content table .status-chip span { font-size: 12px!important; background-color: var(--background-color)!important; height: 50px!important; display: inline-flex; align-items: center; margin-top: 0px; padding: 0 5px; border-radius: var(--border-radius-tiny); } .space-permissions-tab-content table tr { } .space-permissions-tab-content td, .space-permissions-tab-content th { padding: 5px 0; } .space-permissions-tab-content td select { display: flex; max-width: 290px; } .space-permissions-tab-content th { font-weight: 600; } .thin-sidebar-icon { display: none; } .thin-sidebar .thin-sidebar-icon { display: inline-block; align-items: center; margin: 0 auto; height: 50px; line-height: 50px; margin-left: 25px; } .viewer-banner i { color: var(--orange); font-size: 16px; line-height: 23px; padding-left: 8px; } .thin-sidebar .the-sidebar-header.sidebar-header { visibility: hidden; opacity: 0; display: none; } a .material-symbols-outlined, i.material-symbols-outlined, span.material-symbols-outlined { text-decoration: none!important; } i.material-symbols-outlined.strategy-link-add-icon { font-size: 14px; } .card.visibility-card .select-wrapper { background-color: var(--background-color); padding: 0 15px; border-radius: var(--border-radius-tiny); } .project-users .empty-state.sub-text { padding: 20px; border: 1px solid var(--light-border); margin-top: 10px; border-radius: var(--border-radius-tiny); text-align: center; user-select: none; } ul#viewerTeamList { right: 40px; } .space-permissions-tab-content select { display: flex; } .card.visibility-card .select-wrapper input.select-dropdown { font-size: 13px; } .col.s12.thin-active-sidebar { width: calc(100% - 70px); float: right!important; } li.myweek-wh-toggle { min-width: auto!important; } li.myweek-wh-toggle span {} ul#myweekOooPicker {min-width: 120px!important;width: 200px!important;} .pr10 { padding-right: 10px; } .group-creation-modal-container { width: 100%; position: relative; } .group-creation-modal-container > div { width: 100%; } .group-creation-modal-container > div .modal-body {padding: 20px 40px;} .badge-small { background-color: var(--light-white); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 10px; border-radius: var(--border-radius-tiny); } .ui-grid-render-container-left.ui-grid-render-container.left { border-radius: 5px 0 0 5px; border: none!important; box-shadow: none; } .ai-model-selector-container > span.ai-icon.jt1 { font-size: 18px!important; margin-top: -6px; width: 110%!important; } .rotate-180 { transform: rotate(180deg); } #rshStatusDropdown li a { padding: 0 15px; height: 50px; line-height: 50px; } #rshStatusDropdown li a i { font-size: 18px; margin: 0 5px 0 0; } .todo-comment-message-author { font-weight: 400; font-size: 12px; padding-bottom: 2px; margin-bottom: 0!important; } .flex { display: flex; } .flex.flex-col { flex-direction: column; } .ql-editor ol.flex.flex-col { flex-direction: column; } .align-center { align-items: center; } .just-initials { font-family: var(--nothing); font-size: 18px; width: 100%; height: 100%; line-height: 200%; text-align: center; } img.ai-icon { box-shadow: none!important; max-width: 65px!important; } svg.ai-icon { position: relative; height: 60px; width: 60px; } .ai-icon svg { font-family: var(--nothing); font-size: 30pt; line-height: 30px; } .ai-icon svg g { z-index: 0; } .ai-icon { position: relative; max-width: 60px; max-height: 60px; display: flex; align-items: center; margin: 0 auto; /* overflow: hidden; */ } .empty-message .ai-icon { max-width: 40px; max-height: 40px; margin-bottom: 0px; } .ai-panel .empty-message .ai-icon { max-width: 50px; max-height: 50px; } .spec-item-agents-list .ai-icon { max-width: 70px!important; max-height: 50px!important; } .ai-icon.agent-glyph { font-family: var(--nothing); min-width: 13px; font-size: 12px; /* color: var(--primary); */ margin-top: 2px; margin-right: 5px; } .ai-agent-picker .ai-icon.agent-glyph { height: 20px; line-height: 20px; min-width: 20px; display: flex; align-items: center; justify-content: center; background-color: var(--light-white); border-radius: 5px; margin-right: 9px!important; margin-top: 0px; padding: 2px 1px 0 0!important; /* border: 1px solid var(--primary); */ color: var(--primary); font-size: 13px; } .ai-icon.agent-glyph, .ai-icon.agent-glyph:hover { text-decoration: none!important; } .agents-btn > .ai-icon { max-height: 30px; max-width: 30px; } .btn.btn-transparent.spec-item-view-selector span.agents-btn { padding-left: 10px!important; } .btn.btn-transparent.spec-item-view-selector span.agents-btn svg { max-width: 32px; } .agents-btn { display: flex; align-items: center; gap: 5px; } .list-header h5 { font-family: var(--nothing); font-size: 23px; } .left5 { } .ql-editor textarea.cke_source { padding: 20px; width: 100%; box-sizing: border-box; background-color: var(--white); } .work-mt-2 { margin-top: 30px; } .integrations-body .card table.work-mt-2 tr td { padding: 15px; } nav .todos-nav-body .nav-todos-list-container {background-color: var(--light-white);} .dropdown-content.dropdown-menu-right { right: 0!important; left: unset!important; } .double-column { display: flex; flex-direction: column; gap: 5px; } .pa-compose-section-container { position: sticky; top: 20px; z-index: 99; } .focus-mention-preview { font-weight: 400; font-size: 12px; line-height: 19px; padding-top: 0px; padding-bottom: 1px; } .invite-role-field .select-wrapper { background-color: var(--background-color); border-radius: var(--border-radius-tiny); padding: 0 0 0 20px; } .integrations-body .card .card-content { padding: 0!important; } .integrations-body .card .card-action a.btn.btn-transparent { background-color: var(--background-color)!important; } .inline-flex-wrap { display: inline-flex; align-items: center; } .container-nospace { display: flex; align-items: center; gap: 5px; } .container-nospace .okr-cycle-badge { margin-top: 0px; margin-left: auto; } ul.top-user-nav.right > div i { line-height: normal!important; height: unset!important; } .nav-wrapper { } .warning > i { color: var(--warning); } .fir-rank-handle { opacity: 0; visibility: hidden; position: absolute; left: -8px; top: -2px; background-color: var(--hover-item); cursor: grab; } .fir-rank-handle i { color: var(--icon-color); } .focus-item:hover .fir-rank-handle { opacity: 1; visibility: visible; } .account-users > .settings-section, .account-roles > .settings-section { max-width: 800px; /* margin: 0 auto; */ } .grid-link { color: var(--primary); cursor: pointer; } .grid-link:hover { text-decoration: underline; } /* ── Invitation acceptance states (first-run audit 2026-09-01) ──────────────── The accept-invite page used to show one spinner captioned "Loading your invitation..." across the whole five-round-trip acceptance, then a hardcoded 2s delay. These classes back the real step progress, the success moment, and the wrong-account state. */ .invite-step { margin-top: 15px; color: var(--light-text); min-height: 1.2em; } /* The step caption used to animate a trailing "..." through ::after content. The caption is centred, so every dot that appeared re-centred the line and the words visibly jittered. A shimmer sweeps across the glyphs instead: the text never moves, and the motion still reads as "working". Guarded by @supports because background-clip:text needs transparent glyphs — without the guard an unsupporting browser would render the caption invisible. */ .invite-step-shimmer { display: inline-block; color: var(--light-text); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .invite-step-shimmer { --shimmer-base: var(--light-text, #747474); --shimmer-glow: #1f1f1f; background-color: var(--shimmer-base); background-image: linear-gradient( 100deg, var(--shimmer-base) 35%, var(--shimmer-glow) 50%, var(--shimmer-base) 65% ); background-size: 250% 100%; background-repeat: no-repeat; background-position: 150% 0; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: inviteShimmer 2s ease-in-out infinite; } :root.dark .invite-step-shimmer { --shimmer-glow: #ededed; } } @keyframes inviteShimmer { to { background-position: -50% 0; } } .invite-success { padding: 36px 20px 28px; text-align: center; } .invite-success-mark { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--primary); color: var(--white); display: flex; align-items: center; justify-content: center; animation: invitePop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } .invite-success-mark i { font-size: 30px; line-height: 1; } @keyframes invitePop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .invite-success-title { margin: 0 0 6px 0; color: var(--black); } .invite-success-sub { margin: 0; color: var(--light-text); } .invite-mismatch { padding: 30px 20px; text-align: center; } .invite-mismatch-detail { margin: 12px 0 22px 0; color: var(--light-text); } .invite-error-actions { margin-top: 22px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } @media (prefers-reduced-motion: reduce) { .invite-success-mark { animation: none; } .invite-step-shimmer { animation: none; background: none; color: var(--light-text, #747474); -webkit-text-fill-color: currentColor; } } /* ── o6: deep-link anchor highlight ──────────────────────────────────────── A settings link can carry ?anchor= (the hash-bang router owns the fragment, so a real #hash is unavailable). routing.js scrolls the matching element into view and flashes this class on it so the eye lands on the right control. Colors come from the theme variables — no hard-coded hex, and the flash is suppressed under prefers-reduced-motion. */ .anchor-target-flash { animation: anchorTargetFlash 1.8s ease-out 1; border-radius: 6px; } @keyframes anchorTargetFlash { 0% { box-shadow: 0 0 0 3px var(--primary-color, #2196f3); background-color: var(--hover-bg, rgba(33, 150, 243, 0.08)); } 70% { box-shadow: 0 0 0 3px var(--primary-color, #2196f3); background-color: var(--hover-bg, rgba(33, 150, 243, 0.08)); } 100% { box-shadow: 0 0 0 0 transparent; background-color: transparent; } } @media (prefers-reduced-motion: reduce) { .anchor-target-flash { animation: none; outline: 2px solid var(--primary-color, #2196f3); outline-offset: 2px; } } .post-uploads { padding-bottom: 20px; } /* App Loading Overlay - Shows during authentication and initialization */ .app-loading-overlay { position: fixed!important; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; z-index: 9999999999999999999; background-color: var(--black); /* Added: predictable stacking + prevents weird blend/stack behavior */ position: relative; isolation: isolate; overflow: hidden; } /* Dark mode support */ .dark .app-loading-overlay { background: var(--ablack); /* Option #1 (enabled): dark-mode tint that deepens everything without killing brand color */ box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.45); /* tune 0.35–0.65 */ } .app-loading-container { text-align: center; padding: 40px; /* Added: ensure content is always above the moving gradients */ position: relative; z-index: 2; } .feature-loading-container.app-loading-container { height: 50px !important; padding: 0 !important; } .spec-description .feature-loading-container.app-loading-container { padding-top: calc(50dvh - 130px)!important; } /* Spinner Animation — used by feature-loading-container and task-field-spinner. Overlay no longer renders a spinner; the animated wordmark IS the motion. */ .app-loading-spinner { width: 40px; height: 40px; margin: 0 auto 20px; border: 2px solid var(--primary); border-top: 0px solid var(--primary); border-radius: 50%; animation: app-spinner-rotate 1s cubic-bezier(0.46, 0.19, 0.42, 0.85) infinite; } .search-result-actions .app-loading-spinner { height: 20px; width: 20px; margin: 10px auto; } body > .app-loading-spinner { border-color: var(--awhite); } .feature-loading-container .app-loading-spinner { margin: 0 auto !important; } @keyframes app-spinner-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes app-message-pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } } /* Small inline variant for status/assignee buttons */ .task-field-spinner { width: 16px !important; height: 16px !important; border-width: 2px !important; margin: 0 !important; display: inline-block; vertical-align: middle; flex-shrink: 0; border-top: none; } /* Loading Message */ .app-loading-message { animation: app-message-pulse 2s ease-in-out infinite; margin-top: 13px; margin-bottom: 20px; color: var(--awhite); font-family: var(--body-font); opacity: .8; } /* Ensure pseudo elements are behind content and don't capture clicks */ .app-loading-overlay::before, .ai-bg::before, .app-loading-overlay::after, .ai-bg::after{ content: ''; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; pointer-events: none; /* Added: lock gradients behind the content */ z-index: 0; } /* Base (light mode) watery gradients */ .ai-bg::before, .app-loading-overlay::before { background: radial-gradient(circle at 30% 40%, rgba(25, 118, 210, 0.5) 0%, rgba(25, 118, 210, 0.2) 25%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 20%, transparent 45%), radial-gradient(circle at 50% 80%, rgba(66, 165, 245, 0.4) 0%, rgba(13, 71, 161, 0.2) 30%, transparent 48%), radial-gradient(circle at 85% 20%, rgba(0, 0, 0, 0.5) 0%, transparent 35%); animation: waterFlow1 12s ease-in-out infinite; } .app-loading-overlay::after, .ai-bg::after{ background: radial-gradient(circle at 60% 30%, rgba(66, 165, 245, 0.45) 0%, rgba(66, 165, 245, 0.15) 28%, transparent 48%), radial-gradient(circle at 20% 70%, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.25) 22%, transparent 42%), radial-gradient(circle at 80% 50%, rgba(13, 71, 161, 0.35) 0%, transparent 46%), radial-gradient(circle at 15% 15%, rgba(0, 0, 0, 0.55) 0%, transparent 38%); animation: waterFlow2 15s ease-in-out infinite; } /* Option #2 (enabled): dark-mode gradient tweaks (darker, still branded) */ .dark .app-loading-overlay::before, .dark .ai-bg::before { background: radial-gradient(circle at 30% 40%, rgba(25, 118, 210, 0.38) 0%, rgba(25, 118, 210, 0.12) 25%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.42) 20%, transparent 45%), radial-gradient(circle at 50% 80%, rgba(66, 165, 245, 0.20) 0%, rgba(13, 71, 161, 0.16) 30%, transparent 48%), radial-gradient(circle at 85% 20%, rgba(0, 0, 0, 0.72) 0%, transparent 35%); } .dark .app-loading-overlay::after, .dark .ai-bg::after { background: radial-gradient(circle at 60% 30%, rgba(66, 165, 245, 0.18) 0%, rgba(66, 165, 245, 0.07) 28%, transparent 48%), radial-gradient(circle at 20% 70%, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.36) 22%, transparent 42%), radial-gradient(circle at 80% 50%, rgba(13, 71, 161, 0.18) 0%, transparent 46%), radial-gradient(circle at 15% 15%, rgba(0, 0, 0, 0.74) 0%, transparent 38%); } /* Option #3 (COMMENTED OUT): blend mode to sink highlights into the dark base Uncomment to test. If it looks muddy, comment it back out. */ .dark .app-loading-overlay::before, .dark .app-loading-overlay::after, .dark .ai-bg::before, .dark .ai-bg::after{ mix-blend-mode: lighten; opacity: .6; } @keyframes waterFlow1 { 0%, 100% { transform: translate(0%, 0%) rotate(0deg) scale(1); } 25% { transform: translate(8%, -5%) rotate(3deg) scale(1.08); } 50% { transform: translate(-6%, 7%) rotate(-4deg) scale(0.94); } 75% { transform: translate(5%, 4%) rotate(2deg) scale(1.05); } } @keyframes waterFlow2 { 0%, 100% { transform: translate(0%, 0%) rotate(0deg) scale(1); } 30% { transform: translate(-7%, 6%) rotate(-3deg) scale(1.06); } 60% { transform: translate(6%, -8%) rotate(4deg) scale(0.92); } 80% { transform: translate(-4%, -3%) rotate(-2deg) scale(1.04); } } .myweek-view-loading { width: 100%; display: flex; flex-direction: column; gap: 10px; height: calc(100dvh - 220px); background-color: var(--white); align-items: center; justify-content: center; box-shadow: var(--box-shadow); border-radius: var(--border-radius-tiny); } /* ============================================================ jtsyn loader v2 (Trista's design) — pure CSS, no JS. Choreography (7s cycle): 1. 15 noise letters + 5 hero letters (j t s y n) tumble in from off-screen left as one moving mass, rolling rightward. 2. Noise letters keep rolling all the way across and off-right. 3. Hero letters settle upright in the center at ~25%, spelling "jtsyn", and hold through ~55%. 4. The same forward spin then sweeps jtsyn off to the right. Tunables (Trista's settled values): --jtsyn-cycle: 7s --jtsyn-roll: 60 (deg of spin per em of rightward travel) --jtsyn-lane: 0.65 (multiplier on each noise letter's height lane) --jtsyn-shift: -0.5 (optical centering nudge for wordmark, em) --jtsyn-size: clamp(56px, 6vw, 72px) — responsive around 60px Colors come from existing app vars: --primary (light) / --awhite (dark) ============================================================ */ .jtsyn-loader { --jtsyn-cycle: 5s; --jtsyn-roll: 60; --jtsyn-lane: 0.65; /* --jtsyn-shift nudges the wordmark horizontally to compensate for the cursive font's visual mass leaning left (long j descender). Positive = nudge right; negative = nudge left. Tune to taste. */ --jtsyn-shift: 0.15; --jtsyn-size: clamp(56px, 6vw, 72px); position: relative; width: 100vw; height: 5px; line-height: 1; font-family: var(--nothing); font-weight: 400; font-size: var(--jtsyn-size); color: var(--awhite); pointer-events: none; } /* Each letter anchors at the loader's center. `translate: -50% 0` is an *individual* transform property that composes with the animated `transform` property, so glyphs self-center regardless of width and the centering survives every keyframe. Custom props are UNITLESS so rotation can derive from horizontal position in plain calc() without dividing one length by another: --px noise lane horizontal phase offset (em) --py noise lane height offset (em, negative = up) --pr noise tumble phase offset (deg) --ax assembled x for the heroes (em) */ .jtsyn-loader .letter { position: absolute; left: 50%; bottom: 50%; display: inline-block; transform-origin: 50% 100%; translate: -50% 0; backface-visibility: hidden; will-change: transform, opacity; opacity: 1; } .jtsyn-loader .letter.jtsyn { color: var(--awhite); } .jtsyn-loader .letter.pile { /* noise reads ~4px smaller than the hero wordmark for hierarchy */ font-size: calc(var(--jtsyn-size) - 4px); animation: jtsyn-roll-across var(--jtsyn-cycle) infinite; } .jtsyn-loader .letter.jtsyn { animation: jtsyn-roll-and-stay var(--jtsyn-cycle) infinite; } /* True rolling, never backwards: rotation is tied to horizontal travel at --jtsyn-roll deg/em. Every letter enters at x ≈ -19em and exits at x ≈ +19em; the loop reset (+19 → -19) happens entirely off-screen. */ @keyframes jtsyn-roll-across { 0% { transform: translate(calc((-19 + var(--px, 0)) * 1em), calc(var(--py, 0) * var(--jtsyn-lane, 1) * 1em)) rotate(calc(var(--pr, 0) * 1deg)); animation-timing-function: cubic-bezier(0.1, 0, 0.5, 0.8); } 25% { transform: translate(calc(var(--px, 0) * 1em), calc(var(--py, 0) * var(--jtsyn-lane, 1) * 1em)) rotate(calc(var(--pr, 0) * 1deg + 19 * var(--jtsyn-roll) * 1deg)); animation-timing-function: cubic-bezier(0.5, 0.2, 0.7, 0.9); } 50% { transform: translate(calc((19 + var(--px, 0)) * 1em), calc(var(--py, 0) * var(--jtsyn-lane, 1) * 1em)) rotate(calc(var(--pr, 0) * 1deg + 38 * var(--jtsyn-roll) * 1deg)); animation-timing-function: linear; } 100% { /* parked off-screen right — invisible until loop reset */ transform: translate(calc((19 + var(--px, 0)) * 1em), calc(var(--py, 0) * var(--jtsyn-lane, 1) * 1em)) rotate(calc(var(--pr, 0) * 1deg + 38 * var(--jtsyn-roll) * 1deg)); } } /* Hero letters share the noise letters' entry curve through 0→25% so the whole mass arrives at center together. The heroes then settle upright and HOLD through 55% while noise letters tumble off; the same forward spin carries jtsyn off after them (55→90%). */ @keyframes jtsyn-roll-and-stay { 0% { transform: translate(calc((-19 + var(--ax) + var(--jtsyn-shift, 0)) * 1em), 0) rotate(calc(-19 * var(--jtsyn-roll) * 1deg)); animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); } 25% { transform: translate(calc((var(--ax) + var(--jtsyn-shift, 0)) * 1em), 0) rotate(0deg); animation-timing-function: linear; } 55% { transform: translate(calc((var(--ax) + var(--jtsyn-shift, 0)) * 1em), 0) rotate(0deg); animation-timing-function: cubic-bezier(0.4, 0, 0.65, 0.85); } 90% { transform: translate(calc((19 + var(--ax) + var(--jtsyn-shift, 0)) * 1em), 0) rotate(calc(19 * var(--jtsyn-roll) * 1deg)); animation-timing-function: linear; } 100% { /* parked off-screen right — empty beat before loop reset */ transform: translate(calc((19 + var(--ax) + var(--jtsyn-shift, 0)) * 1em), 0) rotate(calc(19 * var(--jtsyn-roll) * 1deg)); } } /* Reduced motion: drop the tumble entirely and show the static wordmark. */ @media (prefers-reduced-motion: reduce) { .jtsyn-loader .letter.pile { display: none; } .jtsyn-loader .letter.jtsyn { animation: none; transform: translate(calc((var(--ax) + var(--jtsyn-shift, 0)) * 1em), 0) rotate(0deg); opacity: 1; } } /* Boot recovery (audit-051) — built by /third-party/js/boot-guard.js, never by Angular, so it works even when the app bundle didn't boot. "Slow" sits under the loader's wordmark with a way out; "failed" takes the whole screen. Colours are the loader's own (--ablack ground, --awhite text), which hold in light and dark. */ .boot-recovery { position: fixed; left: 0; right: 0; z-index: 2147483647; display: flex; justify-content: center; padding: 0 16px; font-family: var(--body-font); color: var(--awhite); pointer-events: none; } .boot-recovery[hidden] { display: none; } .boot-recovery.is-slow { bottom: calc(env(safe-area-inset-bottom, 0px) + 12vh); animation: boot-recovery-in .4s ease-out both; } .boot-recovery.is-failed { top: 0; bottom: 0; align-items: center; background: var(--ablack); } .boot-recovery-card { max-width: 420px; text-align: center; pointer-events: auto; } /* Under the loader's wordmark: a quiet dark card, legible on whatever is behind it. */ .boot-recovery.is-slow .boot-recovery-card { padding: 16px 20px 18px; border-radius: 14px; background: rgba(17, 17, 17, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, .25); } .boot-recovery-title { margin: 0 0 6px; font-size: 16px; font-weight: 600; } .boot-recovery.is-failed .boot-recovery-title { font-size: 22px; margin-bottom: 10px; } .boot-recovery-body { margin: 0 0 18px; font-size: 14px; line-height: 1.5; opacity: .75; } .boot-recovery-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .boot-recovery-btn { min-height: 40px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 20px; background: transparent; color: var(--awhite); font: inherit; font-size: 14px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .boot-recovery-btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .7); } .boot-recovery-btn:focus-visible { outline: 2px solid var(--awhite); outline-offset: 2px; } .boot-recovery-btn--primary { border-color: var(--awhite); background: var(--awhite); color: var(--ablack); font-weight: 600; } .boot-recovery-btn--primary:hover { background: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .88); } .boot-recovery-btn:disabled { opacity: .5; cursor: default; } @keyframes boot-recovery-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .boot-recovery.is-slow { animation: none; } } @media screen and (max-width: 1600px) { body .spec-item .cke .cke_contents { height: calc(100vh - 227px)!important; } } .spec-description-actions { text-align: right; padding-right: 0px !important; display: inline-block; float: right; width: 100%; } .zj-specification-description-edit { vertical-align: top; top: 0px; padding: 0px; display: inline-block; width: 100%; tab-size: 0!important; line-height: 1; } .spec-description-edit .btn-group { display: inline-block; float: left; height: 35px; } .spec-description-edit .btn-toolbar { display: inline-block; width: 100%; padding-left: 20px; } div#toolbarWC, #toolbarCC { background-color: transparent!important; display: inline-block; float: right; font-size: 8.5pt; } #toolbarCC { display: none!important; } .spec-description-edit .ta-text.ta-editor { border: none!important; box-shadow: none!important; height: calc(100vh - 228px); overflow: auto; vertical-align: top; } .spec-description-edit .ta-text.ta-editor .ta-bind { outline: none; padding: 10px 20px 20px; font-weight: 500; height: 100%; } .spec-description-actions .btn.save-btn { background-color: var(--primary); color: white; border-radius: 0px!important; } .spec-description-actions .btn.save-btn i { color: var(--awhite); } .spec-description-actions .btn.save-btn:hover { background-color: var(--primary)!important; } .spec-description-actions .btn.cancel-btn { color: #F44336; margin-right: -4px; } .spec-description-actions .btn.publish-btn { margin-right: -4px; } .spec-description-actions .btn.delete-item:hover i { color: var(--warning)!important; } .spec-description-actions .btn.cancel-btn:hover i { color: var(--primary)!important; } .spec-item { position: relative; left: 0px !important; height: calc(100vh - 64px); display: inline-block; background-color: var(--white); border-right: 1px solid var(--extra-light); float: left; } .meta-panel .spec-item { max-height: calc(100vh - 215px); margin-bottom: 0px!important; left: 0px!important; } .spec-item p { margin-top: 0px; margin-bottom: 0px; } .spec-description-actions .btn:hover, .spec-description-actions .btn:hover i { color: white; } .spec-item textarea.ta-editor { border: none; box-shadow: none; outline: none; padding: 20px; height: calc(100vh - 248px); } .view-notes { color: var(--icon-color); line-height: 1.2; padding-top: 8px; text-align: center; } body .spec-item-details .btn { height: 50px !important; min-width: 45px; line-height: 50px; display: inline-block; box-shadow: none; background-color: transparent; color: var(--black) !important; text-transform: initial; font-size: 9pt; } body .meta-panel .spec-item-details .btn.edit-description-button { position: fixed!important; bottom: 0px!important; right: 5px; z-index: 9999999999999; background-color: var(--white)!important; } .spec-item-details .btn:hover i, .spec-item-details .btn:hover { color: white; } .change-assignee-btn .assignee-photoURL { max-width: 28px; max-height: 45px; display: inline-block; line-height: 39px; float: left; padding: 8px 10px 8px 0px; } .change-assignee-btn > .assignee-photoURL img { width: 18px; max-width: 18px; } .change-assignee-btn > .assignee-name { text-align: left; display: inline-block; text-transform: initial; } .spec-item-details .btn i.right { margin-left: 7px; padding-top: 1px; } #changeAssignee input { padding-left: 10px; margin-bottom: 0px; border-bottom-color: var(--light-plus); } #changeAssignee .dropdown-menu .assignee-photoURL { max-width: 30px; display: inline-block; float: left; margin-right: 10px; margin-left: 10px; margin-top: 0px; margin-bottom: 0px; } .change-assignee li .assignee-photoURL { width: 30px; display: inline-block; float:left; margin-right: 10px; height: 45px; margin-bottom: 0px; padding-left: 10px; border-radius: 4px!important; } .change-assignee li .assignee-photoURL img { vertical-align: middle; border-radius: 4px; } .change-assignee li { line-height: 45px; list-style: none!important; padding: 5px 0px; } .change-assignee li:focus { box-shadow: none!important; border: none!important; outline: none!important; background-color: var(--background-color); } .spec-item .btn.sidebar-btn { padding: 0px !important; width: 45px !important; min-width: 20px; left: 0px; float: left; } .zj-specification-description-edit .text-angular-editor button { width: 35px!important; height: 35px!important; line-height: 30px; font-size: 10pt!important; } .drag-target { width: 0px; } .commentsActive .zj-specification-comments { padding: 0px!important; } .images-only .zj-specification-item-details.col { width: 100% !important; right: 0px !important; } .zj-specification-item-details.col { position: absolute; right: 0px !important; transition: width 0.9s ease; float: right !important; display: inline-block; } .zj-specification-item-details .font11 { font-size: 16px; font-weight: 400; } .meta-panel .zj-specification-item-details.col { display: none; } .full-screen-no-sidebar .zj-specification-item-details.col { width: 100% !important; transition: none !important; } .spec-description-action-bar > div > ul { max-height: calc(60vh); bottom: 0px; top: inherit!important; overflow: hidden; } .spec-description-action-bar > div > ul .assignee-list { overflow-y: auto; max-height: calc(60vh - 45px); margin-bottom: 45px; } .btn.btn-attach { float: left; } .zj-body .zj-specification ol.a li { list-style-type: decimal; } .zj-body .zj-specification ul li { list-style-type: disc; margin-left: 0px; position: relative; } body .zj-sl-section-epic a.epicItem { color: var(--black)!important; } ul.version-selector.dropdown-content li a { background-color: transparent !important; text-align: right; display: inline-block; width: 100%; padding: 0px !important; } .non-editable-outline ul li { list-style-type: none!important; } .spec-item .zj-specification-details ng-quill-editor ul li { list-style-type: inherit; } ol { padding-left: 40px; margin-top: 1em; margin-bottom: 1em; } #attachmentz .menu-item.active { background-color: #507294; } #attachmentz .menu-item.active a { color: white!important; text-decoration: none; user-select: none; } .counting-timer { line-height: 66px; font-size: 8.5pt; margin-right: 5px; } .current-status i { font-size: 18pt; } #attachmentz li i { margin-right: 0px; } .ticket-todos .todo-items { max-width: 720px; margin: 0px auto; position: relative; } .overview-section.project-checklist .todo-items.spec-todos { margin: 0px -40px; } .the-spec-timeline { padding-top: 40px; padding-bottom: 40px; height: calc(100vh - 64px); overflow-y: auto; } .the-spec-timeline .timeline-item { border-bottom: 1px solid var(--border); padding-bottom: 20px; /* border-radius: var(--border-radius-tiny)!important; */ } .spec-item-main-body .the-spec-timeline .timeline-item { padding: 30px; border: none; } html.dark .spec-item-main-body .the-spec-timeline .timeline-item { margin-bottom: 2px !important; } .spec-item-main-body .the-spec-timeline .activity-card .timeline-item { padding: 20px; margin-left: -18px; margin-right: 0px !important; margin-bottom: 0!important; width: 100%; max-width: 100%; box-shadow: var(--box-shadow); border-bottom: 1px solid var(--light-border); /* flex-direction: column; */ display: flex; border-radius: 0; } .spec-item-main-body .the-spec-timeline .timeline-item:hover { background-color: var(--extra-light)!important; } .zj-specification-item-details .zj-section .the-spec-timeline { height: calc(100vh - 114px); overflow-y: auto; padding: 40px 40px 0px; } .distraction-free.zj-specification-item-details .zj-section .the-spec-timeline { height: calc(100vh - 50px); } .the-spec-timeline ul > li .row { background-color: transparent; padding: 0px 0px; border-radius: 0px; vertical-align: top; } .the-spec-timeline ul > li .row.removed { background-color: transparent!important; } .the-spec-timeline ul > li .row.attached, .the-spec-timeline ul > li .row.created { border-color: #8BC34A; } .the-spec-timeline ul > li .row.deleted { border-color: #F44336; } .the-spec-timeline ul > li .row.deleted .timeline-item-type-icon i { color: #F44336; } .the-spec-timeline ul > li .row.completed { border-color: #ff9800; } .the-spec-timeline ul > li .row.completed .the-timeline-meta { color: var(--good); } .the-spec-timeline ul > li { background-color: var(--white); margin-bottom: 20px!important; list-style: none!important; border-radius: 0px; } .timeline-time { text-align: left; font-size: 8.5pt; font-weight: 500; padding: 3px 10px; line-height: 1.5; } .attachment-count { position: absolute; right: 7px; top: 7px; background-color: #16a4d2; width: 17px; height: 17px; line-height: 17px; color: white; border-radius: 50%; font-size: 7pt; display: inline-block; } .btn.attachments-btn i.right { margin-left: 0px; } .the-timeline-meta { color: var(--light-text); font-size: 9.5pt; margin-bottom: 2px; display: inline-block; width: 100%; float: left; line-height: 18px; } .added .the-timeline-meta { color: var(--good); } .task-activity .the-timeline-meta { width: 100%; } .deleted .the-timeline-meta { color: #f44236; } .row.completed .timeline-item-type-icon i { background-color: #ffffff!important; color: #ff9800!important; } .row.created .timeline-item-type-icon i, .row.attached .timeline-item-type-icon i { color: #8ac349; } .row.updated .timeline-item-type-icon i { color: #16a3d1; border-radius: 2px; margin-right: 0px; } .timeline-item-type-icon.type-attachment i { transform: rotate(90deg); } text-angular ul li > span { margin: 0px!important; } .the-timeline-content { display: inline-block; padding: 0px !important; width: 100%; line-height: 24px !important; font-size: 10pt !important; } .the-timeline-content.ql-editor { position: relative; right: 0px; } .the-timeline-content.ql-editor:hover rich-text-diff { border: 1px solid var(--primary)!important; border-radius: var(--border-radius-tiny); cursor: pointer; } .the-timeline-content.ql-editor rich-text-diff { border: 1px solid var(--border)!important; } .btn.more-btn { padding: 0px!important; text-align: center; } .spec-upload-items { position: absolute; top: 20px; bottom: 20px; right: 20px; left: 20px; width: calc(100% - 40px); height: calc(100vh - 105px); z-index: 999; background-color: var(--primary); color: white; font-size: 16pt; transition: opacity .2s ease-in-out; } .distraction-free .spec-upload-items { height: calc(100vh - 90px); } .meta-panel .spec-upload-items { height: calc(100vh - 250px); } .spec-upload-items .upload-frame { position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px; padding-top: calc(50vh - 130px); display: none; } .reference-project .spec-upload-items .upload-frame { padding-top: 10px; } .hovered .spec-upload-items .upload-frame { display: block; } .ng-invalid-max-size { background-color: var(--warning); } .ng-invalid-max-size .default-upload-message { display: none; } .ng-invalid-max-size .error-upload-message { display: block; } .zj-specification-assets.hovered .spec-upload-items { visibility: visible!important; opacity: 1!important; } .image-upload { background-color: white; width: 70%; margin: 10px auto; border-radius: 50px; font-size: 10pt; color: #18add6; } .upload-icon i { font-size: 50pt!important; color: var(--awhite); padding: 0 10px; } .upload-icon { margin-bottom: -20px; padding: 0px!important; } #attachmentz { margin-bottom: 0px; background-color: var(--white)!important; display: flex; flex-direction: column; border-radius: var(--border-radius-tiny); box-shadow: var(--box-shadow); overflow: hidden; } .spec-comments-header-section { margin-bottom: 20px; border: 1px solid var(--extra-light); padding: 0px; background-color: var(--white); border-radius: 0px; } .zj-comment { text-align: left; width: 100%; padding: 20px 25px; border: 1px solid var(--extra-light); border-radius: 2px; border-top-left-radius: 0px; background-color: white; } .spec-comments-wrapper { max-width: 780px; margin: 0px auto; } .zj-comment-time { font-size: 10pt; color: var(--icon-color); padding-left: 5px; } .zj-comment-text p:last-child:empty { display: none; } .spec-attachments { width: 100%; max-width: 860px; margin: 0px auto; } .spec-attachment-tabs { display: inline-block; width: 100%; margin-bottom: -2px; } #attachmentz li { padding: 0px 20px; /* margin-bottom: 1px !important; */ /* height: 50px; */ /* line-height: 50px; */ text-align: left; width: 100%; display: inline-flex; align-items: center; float: left; user-select: none; cursor: pointer; /* background-color: var(--white); */ /* box-shadow: var(--box-shadow); */ border-radius: 0; border-bottom: 1px solid var(--light-border); } #attachmentz li a { display: inline-flex; } #attachmentz li a { color: var(--black); } .favicon-image.left { padding: 10px 0; } #attachmentz li:first-child { border-radius: 5px 5px 0 0!important; } #attachmentz li:last-child { border-radius: 0 0 5px 5px; } .dark #attachmentz li { } .file-uploads li:hover { background-color: var(--extra-light); } #attachmentz li:hover a { color: var(--primary)!important; } #attachmentz li:hover { background-color: var(--extra-light); } #attachmentz li a .col { text-decoration: none; color: var(--black); font-size: 10pt; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .link-favicon { width: 30px !important; max-height: 20px; /* line-height: 50px; */ padding-right: 15px; display: inline-flex; vertical-align: top; padding-top: 3px; } .link-favicon img { line-height: 50px; } #attachmentz li i { line-height: 50px; text-align: center; /* padding-right: 10px; */ font-size: 16px; align-self: start; } #attachmentz li i:not(.file-type-icon):hover { color: var(--primary); } /* File-type icon colours — one rule per `fti-*` class emitted by fileTypeIcons (services.js), one token per rule in variables.css. The `i.` prefix is load- bearing: it beats the global i.material-symbols-outlined { color: var(--icon-color) }. */ i.material-symbols-outlined.file-type-icon.fti-pdf { color: var(--file-pdf); } i.material-symbols-outlined.file-type-icon.fti-doc { color: var(--file-doc); } i.material-symbols-outlined.file-type-icon.fti-sheet { color: var(--file-sheet); } i.material-symbols-outlined.file-type-icon.fti-slide { color: var(--file-slide); } i.material-symbols-outlined.file-type-icon.fti-image { color: var(--file-image); } i.material-symbols-outlined.file-type-icon.fti-video { color: var(--file-video); } i.material-symbols-outlined.file-type-icon.fti-audio { color: var(--file-audio); } i.material-symbols-outlined.file-type-icon.fti-archive { color: var(--file-archive); } i.material-symbols-outlined.file-type-icon.fti-code { color: var(--file-code); } i.material-symbols-outlined.file-type-icon.fti-data { color: var(--file-data); } i.material-symbols-outlined.file-type-icon.fti-text { color: var(--file-text); } i.material-symbols-outlined.file-type-icon.fti-link { color: var(--file-link); } i.material-symbols-outlined.file-type-icon.fti-3d { color: var(--file-3d); } i.material-symbols-outlined.file-type-icon.fti-design { color: var(--file-design); } i.material-symbols-outlined.file-type-icon.fti-font { color: var(--file-font); } i.material-symbols-outlined.file-type-icon.fti-mail { color: var(--file-mail); } i.material-symbols-outlined.file-type-icon.fti-calendar { color: var(--file-calendar); } i.material-symbols-outlined.file-type-icon.fti-security { color: var(--file-security); } i.material-symbols-outlined.file-type-icon.fti-package { color: var(--file-package); } i.material-symbols-outlined.file-type-icon.fti-unknown { color: var(--file-unknown); } #attachmentz li i.open-in-external { font-size: 12pt; margin-left: 4px; vertical-align: middle; float: right; } .spec-attachments.has-file-list { max-width: 1000px; } /* ============================================================================================= FILES TAB v2 (Files Program P3) — views/pages/task/spec.item.files.html A table with explicit ARIA roles, laid out as a 32px · 1fr · auto grid: two-line rows at EVERY width (name, then size · uploader · date), actions always visible (never hover-reveal). Replaces the #attachmentz.file-list columns, whose meta line only existed under 720px. ============================================================================================= */ .files-v2 .file-table { display: block; width: 100%; margin: 0; border-collapse: separate; border-radius: var(--border-radius-tiny); background-color: var(--white); box-shadow: var(--box-shadow); } .files-v2 .file-table thead, .files-v2 .file-table tbody { display: block; border-bottom: none; } .files-v2 .file-table tr { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 60px; padding: 8px 16px 8px 16px; box-sizing: border-box; border-bottom: 1px solid var(--light-border); } .files-v2 .file-table tbody tr:last-child { border-bottom: none; } .files-v2 .file-table th, .files-v2 .file-table td { display: block; min-width: 0; padding: 0; border-radius: 0; text-align: left; font-weight: 400; } .files-v2 .file-table .fl-head { min-height: 44px; border-radius: var(--border-radius-tiny) var(--border-radius-tiny) 0 0; background-color: var(--veryvery-light); } .files-v2 .file-table .fl-head .fl-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; } .files-v2 .fl-count { color: var(--light-text); font-size: 12px; } .files-v2 .fl-sort { display: inline-flex; gap: 2px; } .files-v2 .fl-sort-btn { display: inline-flex; align-items: center; gap: 2px; min-height: 28px; padding: 0 8px; border: none; border-radius: var(--border-radius-xs); background: transparent; color: var(--light-text); font-family: inherit; font-size: 12px; cursor: pointer; } .files-v2 .fl-sort-btn:hover { background-color: var(--hover-light); } .files-v2 .fl-sort-btn.is-sorted { color: var(--primary); } .files-v2 .fl-sort-btn .fl-sort-dir.material-symbols-outlined { font-size: 16px; color: inherit; } /* Lead: thumbnail or type glyph */ .files-v2 .file-table .fl-lead { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; } .files-v2 .fl-thumb { display: block; width: 32px; height: 32px; border-radius: var(--border-radius-xs); background-color: var(--extra-light); background-size: cover; background-position: center; background-repeat: no-repeat; } .files-v2 .fl-lead i.material-symbols-outlined { font-size: 16px; line-height: 1; } /* Name + meta */ .files-v2 .fl-line { display: flex; align-items: center; min-width: 0; } .files-v2 .fl-name-btn { display: block; max-width: 100%; min-height: 22px; padding: 0; border: none; border-radius: var(--border-radius-xs); background: transparent; color: var(--black); font-family: inherit; text-align: left; cursor: pointer; } .files-v2 .fl-name-btn:hover { color: var(--primary); } .files-v2 .fl-name-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--black); font-size: 13px; line-height: 1.4; font-weight: 400; } .files-v2 .fl-name-btn:hover .fl-name-text { color: var(--primary); } .files-v2 .file-name-input { flex: 1; min-width: 0; height: 28px; margin: 0; padding: 0 6px; border: none; border-bottom: 1px solid var(--primary); box-shadow: none; background: transparent; color: var(--black); font-size: 13px; line-height: 28px; } .files-v2 .file-name-input:focus { border-bottom: 1px solid var(--primary); box-shadow: none; } .files-v2 .fl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-top: -4px; color: var(--light-text); font-size: 11px; line-height: 1.5; font-weight: 300; } .files-v2 .fl-meta-item:not(:last-child)::after { content: "·"; margin-left: 8px; color: var(--light-text); } .files-v2 .fl-person { display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .files-v2 .fl-person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .files-v2 .fl-avatar { display: inline-block; flex-shrink: 0; width: 13px; height: 13px; border-radius: var(--border-radius-xs); background-size: cover; background-position: center; background-repeat: no-repeat; } .files-v2 .fl-avatar-initials { font-size: 7px; line-height: 16px; text-align: center; background-color: var(--extra-light); color: var(--icon-color); } /* Actions — always visible, every target >= 24x24 (WCAG 2.2 2.5.8) */ .files-v2 .file-table .fl-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; } .files-v2 .fl-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--border-radius-xs); background: transparent; color: var(--icon-color); cursor: pointer; text-decoration: none; } .files-v2 .fl-icon-btn i.material-symbols-outlined { font-size: 15px; color: inherit; } .files-v2 .fl-icon-btn:hover, .files-v2 .is-menu-open .fl-menu-wrap > .fl-icon-btn { background-color: var(--hover-light); color: var(--black); } .files-v2 .fl-text-btn { min-width: 24px; min-height: 32px; padding: 0 10px; border: none; border-radius: var(--border-radius-xs); background: transparent; color: var(--black); font-family: inherit; font-size: 13px; cursor: pointer; } .files-v2 .fl-text-btn:hover { background-color: var(--hover-light); } /* materialize.min.css paints every focused