/* ============================================================ DOOTEE ACCOUNT PANEL V2.1 Standalone / body-mounted ============================================================ */ #dooteeAccountPanelV21 { /* * V22.21P * Geometry intentionally owned by * dootee-account-panel-v21.js only. */ position: fixed; z-index: 2147483600; display: none; overflow: hidden; border: 1px solid rgba(115, 215, 225, .24); border-radius: 14px; background: rgba(9, 35, 43, .98); color: #f5fbfc; box-shadow: 0 18px 50px rgba(0,0,0,.42); backdrop-filter: blur(12px); } #dooteeAccountPanelV21.is-open { display: flex; flex-direction: column; } .dootee-v21-scroll { overflow-y: auto; overscroll-behavior: contain; } .dootee-v21-user { padding: 14px 15px 12px; border-bottom: 1px solid rgba(255,255,255,.09); } .dootee-v21-name { font-size: 15px; font-weight: 800; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dootee-v21-email { margin-top: 3px; color: rgba(255,255,255,.56); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dootee-v21-section { padding: 13px 15px; border-bottom: 1px solid rgba(255,255,255,.075); } .dootee-v21-label { display: block; margin-bottom: 5px; color: rgba(255,255,255,.55); font-size: 11px; } .dootee-v21-credit-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #dooteeV21Credits { font-size: 23px; font-weight: 900; line-height: 1.1; } .dootee-v21-buy { min-height: 34px; border: 1px solid rgba(73, 218, 139, .34); border-radius: 8px; padding: 6px 10px; background: rgba(53, 190, 112, .12); color: #e2ffee; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; } .dootee-v21-buy:hover { background: rgba(53, 190, 112, .21); } #dooteeV21ProjectName { margin-bottom: 9px; font-size: 14px; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; } .dootee-v21-save { width: 100%; min-height: 38px; border: 0; border-radius: 9px; background: #eaf5f7; color: #09212a; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; } .dootee-v21-save:disabled { cursor: wait; opacity: .62; } #dooteeV21Message { display: none; margin-top: 8px; padding: 7px 9px; border-radius: 7px; font-size: 11px; line-height: 1.45; } #dooteeV21Message.show { display: block; } #dooteeV21Message.success { background: rgba(57, 190, 113, .13); } #dooteeV21Message.error { background: rgba(220, 75, 75, .14); } #dooteeV21Message.info { background: rgba(70, 158, 210, .13); } .dootee-v21-title { margin-bottom: 8px; font-size: 13px; font-weight: 800; } #dooteeV21Search { box-sizing: border-box; width: 100%; height: 38px; margin-bottom: 9px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; padding: 0 10px; outline: none; background: rgba(255,255,255,.055); color: #fff; font: inherit; font-size: 12px; } #dooteeV21Search:focus { border-color: rgba(117,220,229,.5); } #dooteeV21List { display: grid; gap: 6px; max-height: 245px; overflow-y: auto; } .dootee-v21-project { display: grid; grid-template-columns: minmax(0,1fr) 36px; gap: 5px; } .dootee-v21-open { min-width: 0; border: 0; border-radius: 8px; padding: 8px 9px; text-align: left; background: rgba(255,255,255,.045); color: inherit; cursor: pointer; } .dootee-v21-open:hover { background: rgba(255,255,255,.085); } .dootee-v21-project-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; } .dootee-v21-project-date { display: block; margin-top: 2px; color: rgba(255,255,255,.48); font-size: 10px; } .dootee-v21-delete { border: 0; border-radius: 8px; background: rgba(210,70,70,.11); color: rgba(255,255,255,.75); font-size: 19px; cursor: pointer; } .dootee-v21-delete:hover { background: rgba(210,70,70,.25); } .dootee-v21-empty { padding: 12px 8px; text-align: center; color: rgba(255,255,255,.48); font-size: 11px; } .dootee-v21-footer { padding: 0; } #dooteeV21Logout { width: 100%; border: 0; padding: 13px 15px; text-align: left; background: rgba(0,0,0,.08); color: #fff; font: inherit; font-size: 13px; cursor: pointer; } #dooteeV21Logout:hover { background: rgba(255,255,255,.06); } /* Desktop with DevTools / narrower viewport */ /* * V22.21P * Old <=1100 Profile geometry retired. * Account Panel JS owns responsive geometry. */ /* Mobile */ @media (max-width: 767px) { /* * V22.21P * Profile geometry removed from CSS. * JS Single Owner handles phone/tablet/desktop. */ #dooteeV21List { max-height: 190px; } } /* ============================================================ DOOTEE THB REPORT UI V1.5 — DRY RUN ============================================================ */ #dooteeV21Credits { white-space: nowrap; } .dootee-report-v15-overlay { position: fixed; z-index: 2147483645; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; box-sizing: border-box; background: rgba(0, 10, 14, .68); backdrop-filter: blur(5px); } .dootee-report-v15-modal { position: relative; width: min(430px, 100%); max-height: calc(100dvh - 36px); overflow-y: auto; box-sizing: border-box; border: 1px solid rgba(116, 221, 230, .28); border-radius: 16px; padding: 20px; background: rgba(8, 32, 40, .99); color: #f5fbfc; box-shadow: 0 24px 70px rgba(0,0,0,.55); } .dootee-report-v15-close { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 8px; background: rgba(255,255,255,.06); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; } .dootee-report-v15-title { padding-right: 42px; font-size: 20px; font-weight: 900; } .dootee-report-v15-subtitle { margin-top: 5px; margin-bottom: 16px; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.5; } .dootee-report-v15-levels { display: grid; gap: 9px; } .dootee-report-v15-level { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; border: 1px solid rgba(255,255,255,.11); border-radius: 11px; padding: 10px 13px; text-align: left; background: rgba(255,255,255,.045); color: #fff; font: inherit; cursor: pointer; } .dootee-report-v15-level:hover { background: rgba(255,255,255,.09); border-color: rgba(110,219,228,.38); } .dootee-report-v15-level:disabled { opacity: .6; cursor: wait; } .dootee-report-v15-level-name { font-size: 14px; font-weight: 800; } .dootee-report-v15-level-price { flex: 0 0 auto; font-size: 16px; font-weight: 900; color: #dfffee; } .dootee-report-v15-quote { display: none; } .dootee-report-v15-quote.is-visible { display: block; } .dootee-report-v15-loading { padding: 20px 0; text-align: center; color: rgba(255,255,255,.7); } .dootee-report-v15-quote-title { margin-bottom: 14px; font-size: 17px; font-weight: 900; } .dootee-report-v15-summary { display: grid; gap: 1px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.07); } .dootee-report-v15-summary > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 12px; background: rgba(5, 27, 34, .96); } .dootee-report-v15-summary span { color: rgba(255,255,255,.6); font-size: 12px; } .dootee-report-v15-summary strong { text-align: right; font-size: 13px; font-weight: 900; } .dootee-report-v15-status { margin-top: 11px; border-radius: 9px; padding: 9px 11px; font-size: 12px; font-weight: 800; } .dootee-report-v15-status.ok { background: rgba(55, 190, 112, .14); color: #dffff0; } .dootee-report-v15-status.insufficient { background: rgba(215, 75, 75, .15); color: #ffe5e5; } .dootee-report-v15-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px; margin-top: 14px; } .dootee-report-v15-actions button { min-height: 42px; border: 0; border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 12px; font-weight: 900; cursor: pointer; } .dootee-report-v15-back { background: rgba(255,255,255,.08); color: #fff; } .dootee-report-v15-confirm { background: #eaf5f7; color: #09212a; } .dootee-report-v15-confirm:disabled { opacity: .45; cursor: not-allowed; } .dootee-report-v15-error { margin-top: 10px; color: #ffdede; font-size: 12px; line-height: 1.5; } @media (max-width: 520px) { .dootee-report-v15-overlay { align-items: flex-end; padding: 10px; } .dootee-report-v15-modal { width: 100%; max-height: calc(100dvh - 20px); border-radius: 16px 16px 10px 10px; padding: 18px 14px 14px; } .dootee-report-v15-actions { grid-template-columns: 1fr; } } /* END DOOTEE THB REPORT UI V1.5 */ /* ============================================================ V22.16C5 PROFILE PROJECT ROW — CANONICAL OWNER Active Project: [ checkbox ][ project information ][ Share ][ X ] This is the sole active Project-row layout owner. ============================================================ */ #dooteeV21List .dootee-v21-project { display: grid !important; grid-template-columns: 36px minmax(0, 1fr) 76px 44px !important; grid-template-areas: "select info share close" !important; grid-template-rows: minmax(82px, auto) !important; align-items: stretch !important; column-gap: 7px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 0 8px 0 !important; padding: 7px !important; box-sizing: border-box !important; overflow: hidden !important; } /* Neutralize older row placement. */ #dooteeV21List .dootee-v21-project > * { position: static !important; grid-column: auto !important; grid-row: auto !important; float: none !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; margin: 0 !important; min-width: 0; box-sizing: border-box !important; } /* Checkbox */ #dooteeV21List .dootee-v21-project > .dootee-v21-project-select { grid-area: select !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: auto !important; padding: 0 !important; align-self: stretch !important; } #dooteeV21List .dootee-v21-project-select [data-v2216c-project-select] { width: 18px !important; min-width: 18px !important; max-width: 18px !important; height: 18px !important; min-height: 18px !important; max-height: 18px !important; margin: auto !important; } /* Project information */ #dooteeV21List .dootee-v21-project > .dootee-v21-open { grid-area: info !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 82px !important; padding: 8px 11px !important; text-align: left !important; overflow: hidden !important; } #dooteeV21List .dootee-v21-open > span { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; word-break: normal !important; overflow-wrap: normal !important; } #dooteeV21List .dootee-v21-project-name { margin: 0 0 3px !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.35 !important; } #dooteeV21List .dootee-v21-project-filename { margin: 0 0 2px !important; font-size: 12px !important; line-height: 1.35 !important; } #dooteeV21List .dootee-v21-project-date { margin: 0 !important; font-size: 11px !important; line-height: 1.35 !important; } /* Share */ #dooteeV21List .dootee-v21-project > .dootee-v21-share { grid-area: share !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 76px !important; min-width: 76px !important; max-width: 76px !important; min-height: 44px !important; padding: 0 8px !important; align-self: stretch !important; border: 1px solid rgba(82,170,255,.45) !important; border-radius: 10px !important; background: rgba(27,108,190,.22) !important; color: #dff1ff !important; font: inherit !important; font-size: 11px !important; font-weight: 700 !important; cursor: pointer !important; } /* X / restore */ #dooteeV21List .dootee-v21-project > .dootee-v21-delete { grid-area: close !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; min-height: 44px !important; padding: 0 !important; align-self: stretch !important; } /* Archived row: info + restore only */ #dooteeV21List .dootee-v21-project > .dootee-v21-open:first-child { grid-column: 1 / 4 !important; } #dooteeV21List .dootee-v21-project > .dootee-v21-open:first-child + .dootee-v21-delete { grid-column: 4 !important; } /* Tablet — one Project row remains one row */ @media (max-width: 900px) { #dooteeV21List .dootee-v21-project { grid-template-columns: 30px minmax(0, 1fr) 64px 40px !important; column-gap: 5px !important; padding: 6px !important; } #dooteeV21List .dootee-v21-project > .dootee-v21-project-select { width: 30px !important; min-width: 30px !important; max-width: 30px !important; } #dooteeV21List .dootee-v21-project > .dootee-v21-share { width: 64px !important; min-width: 64px !important; max-width: 64px !important; font-size: 10px !important; } #dooteeV21List .dootee-v21-project > .dootee-v21-delete { width: 40px !important; min-width: 40px !important; max-width: 40px !important; } } /* Mobile — still one horizontal Project row */ @media (max-width: 600px) { #dooteeV21List .dootee-v21-project { grid-template-columns: 25px minmax(0, 1fr) 52px 34px !important; grid-template-rows: minmax(70px, auto) !important; column-gap: 4px !important; padding: 5px !important; } #dooteeV21List .dootee-v21-project > .dootee-v21-project-select { width: 25px !important; min-width: 25px !important; max-width: 25px !important; } #dooteeV21List .dootee-v21-project-select [data-v2216c-project-select] { width: 16px !important; min-width: 16px !important; max-width: 16px !important; height: 16px !important; min-height: 16px !important; max-height: 16px !important; } #dooteeV21List .dootee-v21-project > .dootee-v21-open { min-height: 70px !important; padding: 6px !important; } #dooteeV21List .dootee-v21-project-name { font-size: 12px !important; } #dooteeV21List .dootee-v21-project-filename { font-size: 10px !important; } #dooteeV21List .dootee-v21-project-date, #dooteeV21List .dootee-v21-open > span:last-child { font-size: 9px !important; } #dooteeV21List .dootee-v21-project > .dootee-v21-share { width: 52px !important; min-width: 52px !important; max-width: 52px !important; padding: 0 3px !important; font-size: 9px !important; } #dooteeV21List .dootee-v21-project > .dootee-v21-delete { width: 34px !important; min-width: 34px !important; max-width: 34px !important; } } /* END V22.16C5 PROFILE PROJECT ROW */ /* ============================================================ V22.24B-R — SAVED PROJECT RENAME ============================================================ */ /* * Retire old current-project Save-name area only. * * New Project form is separate and remains active. */ #dooteeV21ProjectName, #dooteeV21Save, #dooteeV2212UI { display: none !important; } /* * Rename appears immediately after saved Project name. */ #dooteeAccountPanelV21 .dootee-v21-rename { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 4px; background: transparent; border: 0; box-shadow: none; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 700; line-height: 1.25; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; pointer-events: auto; } #dooteeAccountPanelV21 .dootee-v21-rename:hover, #dooteeAccountPanelV21 .dootee-v21-rename:focus { color: #fff; } #dooteeAccountPanelV21 .dootee-v21-rename[aria-disabled="true"] { opacity: .45; cursor: default; } /* ============================================================ V22.24C SAVED PROJECT ROW INLINE Wide platform: [check] [Project information] [Rename] [Share] [X] Project information stays on one line when space allows. When space becomes narrow it wraps naturally. Backend / Project data / Report state are unchanged. ============================================================ */ /* ---------- ROW OWNER ---------- */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto auto 56px !important; grid-template-areas: "check info rename share close" !important; align-items: stretch !important; column-gap: 8px !important; row-gap: 6px !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* ---------- CHECKBOX ---------- */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-project-select { grid-area: check !important; order: initial !important; align-self: stretch !important; } /* ---------- INFORMATION ---------- */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-open { grid-area: info !important; order: initial !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; align-content: center !important; gap: 4px 12px !important; width: 100% !important; min-width: 0 !important; padding-top: 9px !important; padding-bottom: 9px !important; box-sizing: border-box !important; text-align: left !important; } /* * Every information element participates in one inline row. */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-name, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-filename, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-date, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-report { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 !important; flex: 0 1 auto !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; } /* Project name gets highest visual priority. */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project-name { flex-shrink: 0 !important; } /* * Filename may shrink first when width starts becoming tight. */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project-filename { min-width: 120px !important; flex: 1 1 260px !important; } /* ---------- RENAME ---------- */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-rename { grid-area: rename !important; order: initial !important; align-self: stretch !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 68px !important; max-width: none !important; margin: 0 !important; padding: 0 10px !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 10px !important; background: rgba(255,255,255,.035) !important; box-shadow: none !important; color: rgba(255,255,255,.88) !important; text-decoration: none !important; font-size: 11px !important; font-weight: 750 !important; cursor: pointer !important; box-sizing: border-box !important; } /* ---------- SHARE ---------- */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-share { grid-area: share !important; order: initial !important; align-self: stretch !important; position: static !important; margin: 0 !important; min-width: 78px !important; box-sizing: border-box !important; } /* ---------- ARCHIVE X ---------- */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-delete { grid-area: close !important; order: initial !important; align-self: stretch !important; position: static !important; width: 56px !important; min-width: 56px !important; max-width: 56px !important; margin: 0 !important; box-sizing: border-box !important; } /* ============================================================ MEDIUM / NARROW PLATFORM Information gets its own full-width second row. Actions remain grouped at upper-right. [check] [Rename] [Share] [X] [ information ] ============================================================ */ @media (max-width: 820px) { #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project { grid-template-columns: 38px minmax(0, 1fr) auto auto 44px !important; grid-template-areas: "check spacer rename share close" "info info info info info" !important; grid-template-rows: auto auto !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-open { grid-area: info !important; padding: 8px 10px !important; gap: 4px 10px !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-rename { min-width: 62px !important; padding: 7px 8px !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-share { min-width: 62px !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-delete { width: 44px !important; min-width: 44px !important; max-width: 44px !important; } } /* ============================================================ SMALL MOBILE Information itself may wrap into several readable lines. ============================================================ */ @media (max-width: 520px) { #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project { grid-template-columns: 30px minmax(0,1fr) 58px 40px !important; grid-template-areas: "check rename share close" "info info info info" !important; column-gap: 4px !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-open { flex-direction: row !important; flex-wrap: wrap !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-name, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-filename, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-date, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-report { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-rename { min-width: 0 !important; width: 100% !important; padding: 6px 4px !important; font-size: 10px !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-share { min-width: 58px !important; width: 58px !important; font-size: 10px !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-delete { width: 40px !important; min-width: 40px !important; max-width: 40px !important; } } /* ============================================================ V22.24D SAVED ROW FINAL Desired wide layout: [☐] บ้านมะขาม | เชียงใหม่_แม่ออน_ออนกลาง_บ้านมะขาม_A0001 | 10/9/69 18:11 | Report: พื้นฐาน [Rename] [Share] [×] Wide screen: one row when it fits. Narrow screen: information wraps naturally to following line. ============================================================ */ /* ------------------------------------------------------------ 1. FORCE INFORMATION TO START FROM LEFT EDGE ------------------------------------------------------------ */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-open { justify-content: flex-start !important; justify-items: start !important; align-items: center !important; align-content: center !important; text-align: left !important; margin: 0 !important; padding-left: 12px !important; padding-right: 12px !important; min-width: 0 !important; transform: none !important; } /* * Remove any inherited centering from individual children. */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-name, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-filename, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-date, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-report { text-align: left !important; align-self: center !important; margin-left: 0 !important; margin-right: 0 !important; position: static !important; transform: none !important; } /* ------------------------------------------------------------ 2. VERTICAL SEPARATORS — visual only ------------------------------------------------------------ */ @media (min-width: 821px) { #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-name::after, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-filename::after, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-date::after { content: " |"; display: inline; margin-left: 10px; color: rgba(255,255,255,.32); font-weight: 400; } } /* ------------------------------------------------------------ 3. NAME ------------------------------------------------------------ */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project-name { flex: 0 0 auto !important; white-space: nowrap !important; font-weight: 800 !important; } /* ------------------------------------------------------------ 4. FULL AUTOMATIC FILENAME Do not let the filename collapse to a tiny center block. ------------------------------------------------------------ */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project-filename { flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; max-width: min(52vw, 620px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ------------------------------------------------------------ 5. DATE + REPORT ------------------------------------------------------------ */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project-date, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project-report { flex: 0 0 auto !important; white-space: nowrap !important; } /* ------------------------------------------------------------ 6. DESKTOP: use all remaining space from the LEFT, not center. ------------------------------------------------------------ */ @media (min-width: 821px) { #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project { grid-template-columns: 44px minmax(0,1fr) auto auto 56px !important; grid-template-areas: "check info rename share close" !important; justify-items: stretch !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-open { width: 100% !important; justify-self: stretch !important; } } /* ------------------------------------------------------------ 7. NARROW: move the information to the next line. Rename / Share / X remain grouped on the right. ------------------------------------------------------------ */ @media (max-width: 820px) { #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project { grid-template-columns: 34px minmax(0,1fr) auto auto 44px !important; grid-template-areas: "check spacer rename share close" "info info info info info" !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-open { padding-left: 8px !important; padding-right: 8px !important; justify-content: flex-start !important; flex-wrap: wrap !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project-filename { max-width: 100% !important; } } /* ------------------------------------------------------------ 8. MOBILE: permit full readable wrapping. ------------------------------------------------------------ */ @media (max-width: 520px) { #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-name, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-filename, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-date, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-report { white-space: normal !important; max-width: 100% !important; overflow: visible !important; text-overflow: clip !important; } } /* ============================================================ V22.25B-R FINAL PROFILE ROW OWNER Wide: ☐ Name | Province_District_Subdistrict_Name_Code | Date | Report Rename Share × Narrow: data wraps to following line. This final block intentionally overrides legacy row styles. ============================================================ */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project { display:grid !important; grid-template-columns: 44px minmax(0,1fr) 82px 100px 56px !important; grid-template-areas: "check info rename share close" !important; align-items:stretch !important; gap:8px !important; width:100% !important; min-width:0 !important; box-sizing:border-box !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project-select { grid-area:check !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-open { grid-area:info !important; display:flex !important; flex-flow:row wrap !important; justify-content:flex-start !important; align-items:center !important; align-content:center !important; gap:5px 10px !important; width:100% !important; min-width:0 !important; margin:0 !important; padding:10px 12px !important; position:static !important; text-align:left !important; transform:none !important; box-sizing:border-box !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-name, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-filename, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-date, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-report { display:inline-block !important; width:auto !important; min-width:0 !important; margin:0 !important; position:static !important; text-align:left !important; white-space:nowrap !important; transform:none !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project-name { flex:0 0 auto !important; font-weight:800 !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project-filename { flex:1 1 360px !important; max-width:720px !important; overflow:hidden !important; text-overflow:ellipsis !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project-date, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project-report { flex:0 0 auto !important; } @media (min-width:821px) { #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project-name::after, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project-filename::after, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project-date::after { content:" |" !important; margin-left:8px !important; color: rgba(255,255,255,.34) !important; } } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-rename { grid-area:rename !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-share { grid-area:share !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-delete { grid-area:close !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-rename, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-share, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-delete { position:static !important; align-self:stretch !important; margin:0 !important; transform:none !important; box-sizing:border-box !important; } @media (max-width:820px) { #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project { grid-template-columns: 34px minmax(0,1fr) 68px 68px 44px !important; grid-template-areas: "check spacer rename share close" "info info info info info" !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-open { grid-area:info !important; justify-content:flex-start !important; flex-wrap:wrap !important; padding:8px !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project-filename { flex:1 1 100% !important; max-width:100% !important; } } @media (max-width:520px) { #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project { grid-template-columns: 32px minmax(0,1fr) 58px 40px !important; grid-template-areas: "check rename share close" "info info info info" !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-name, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-filename, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-date, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-open > .dootee-v21-project-report { flex:1 1 100% !important; width:100% !important; max-width:100% !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; } } /* ========================================================= V22.25C-K DARK REPORT PANEL Restore readable Profile presentation. This is the final visual owner for the multi-Project Report foundation. Do not use the old white/translucent panel because Profile uses light text. ========================================================= */ #dooteeAccountPanelV21 #dooteeV2216CBatchPanel { background: rgba(19, 49, 58, .96) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #f4f8fa !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important; } #dooteeAccountPanelV21 #dooteeV2216CBatchPanel > div { color: #f4f8fa !important; } #dooteeAccountPanelV21 #dooteeV2216CBatchPanel select { background: rgba(8,35,43,.98) !important; color: #f4f8fa !important; border: 1px solid rgba(255,255,255,.16) !important; outline: none !important; } #dooteeAccountPanelV21 #dooteeV2216CBatchPanel select option { background: #102f38 !important; color: #f4f8fa !important; } #dooteeAccountPanelV21 #dooteeV2216CBatchQuoteButton { background: rgba(29,85,102,.96) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.15) !important; } #dooteeAccountPanelV21 #dooteeV2216CBatchQuoteButton:hover { background: rgba(38,105,124,.98) !important; } #dooteeAccountPanelV21 #dooteeV2216CBatchQuote { color: #f4f8fa !important; } #dooteeAccountPanelV21 #dooteeV2216CBatchPanel input { background: rgba(8,35,43,.92) !important; color: #f4f8fa !important; border-color: rgba(255,255,255,.15) !important; } /* * Keep Saved Project information readable against * the dark Profile theme. */ #dooteeAccountPanelV21 .dootee-v21-project-filename { color: rgba(223,241,255,.82) !important; } #dooteeAccountPanelV21 .dootee-v21-project-date { color: rgba(255,255,255,.58) !important; } #dooteeAccountPanelV21 .dootee-v21-project-report { color: rgba(224,244,235,.88) !important; } /* * ========================================================== * V22.26B1 COMPACT SAVED PROJECT ACTIONS * ========================================================== * * Presentation only. * No change to Update / Rename / Share / Archive behaviour. */ #dooteeV21List .dootee-v21-project { column-gap: 8px !important; gap: 8px !important; } #dooteeV21List .dootee-v21-update, #dooteeV21List .dootee-v21-rename, #dooteeV21List .dootee-v21-share, #dooteeV21List .dootee-v21-hide, #dooteeV21List [data-v21-archive] { width: auto !important; min-width: 64px !important; max-width: 78px !important; height: 42px !important; min-height: 42px !important; padding: 0 10px !important; margin: 0 !important; font-size: 12px !important; line-height: 1 !important; white-space: nowrap !important; box-sizing: border-box !important; flex: 0 0 auto !important; } /* * Slightly smaller Hide because the word is short. */ #dooteeV21List .dootee-v21-hide, #dooteeV21List [data-v21-archive] { min-width: 56px !important; max-width: 64px !important; } /* * Keep the project-information section flexible. * Actions must not force text to overlap. */ #dooteeV21List .dootee-v21-open { min-width: 0 !important; } /* * Normal desktop: * keep all four actions on one line. */ @media (min-width: 900px) { #dooteeV21List .dootee-v21-project { align-items: center !important; } #dooteeV21List .dootee-v21-update, #dooteeV21List .dootee-v21-rename, #dooteeV21List .dootee-v21-share, #dooteeV21List .dootee-v21-hide, #dooteeV21List [data-v21-archive] { font-size: 11px !important; min-width: 58px !important; max-width: 70px !important; padding-left: 8px !important; padding-right: 8px !important; } #dooteeV21List .dootee-v21-hide, #dooteeV21List [data-v21-archive] { min-width: 52px !important; max-width: 58px !important; } } /* * DevTools / narrow desktop: * reduce one step more instead of overlapping. */ @media (min-width: 650px) and (max-width: 1100px) { #dooteeV21List .dootee-v21-project { column-gap: 5px !important; gap: 5px !important; } #dooteeV21List .dootee-v21-update, #dooteeV21List .dootee-v21-rename, #dooteeV21List .dootee-v21-share, #dooteeV21List .dootee-v21-hide, #dooteeV21List [data-v21-archive] { min-width: 52px !important; max-width: 62px !important; height: 38px !important; min-height: 38px !important; padding: 0 6px !important; font-size: 10px !important; } #dooteeV21List .dootee-v21-hide, #dooteeV21List [data-v21-archive] { min-width: 46px !important; max-width: 52px !important; } } /* ============================================================ * V22.26B2 ACTION GROUP ROOT FIX * * Root cause: * Update + Hide inherited .dootee-v21-rename and therefore * inherited grid-area:rename from legacy Saved Project CSS. * * Canonical layout: * * [select] [project information] [actions] * * actions: * [Update] [Rename] [Share] [Hide] * * No absolute positioning. * No lifecycle changes. * ============================================================ */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project { grid-template-columns: 36px minmax(0,1fr) auto !important; grid-template-areas: "select info actions" !important; column-gap: 8px !important; align-items: stretch !important; } /* * Project information remains the flexible owner. */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-open { grid-area: info !important; min-width: 0 !important; } /* * Every customer action is placed in the same Grid area, * then arranged horizontally using flex. * * CSS display:contents makes the four direct buttons * participate as a compact right-side action sequence * without introducing another lifecycle/DOM owner. */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-project-action { position: static !important; grid-area: actions !important; transform: none !important; float: none !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; align-self: center !important; width: auto !important; min-width: 52px !important; max-width: 66px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; margin: 0 !important; padding: 0 7px !important; border-radius: 9px !important; font-size: 10px !important; line-height: 1 !important; text-decoration: none !important; box-sizing: border-box !important; z-index: auto !important; } /* * IMPORTANT: * Direct grid children cannot share the same grid cell without * overlapping. Give each action its own explicit column. */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project { grid-template-columns: 36px minmax(0,1fr) repeat(4, minmax(52px,66px)) !important; grid-template-areas: "select info update rename share hide" !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > [data-v21-update] { grid-area: update !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > [data-v21-rename] { grid-area: rename !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > [data-v21-share] { grid-area: share !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > [data-v21-archive] { grid-area: hide !important; } /* * Neutralize legacy Rename-specific visual placement. */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-rename.dootee-v21-project-action { position: static !important; margin: 0 !important; transform: none !important; } /* * Share keeps its blue visual identity, * but no longer owns a large fixed column. */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-share.dootee-v21-project-action { width: auto !important; min-width: 52px !important; max-width: 66px !important; min-height: 38px !important; padding: 0 7px !important; } /* * Update / Rename / Hide use compact neutral style. */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-update, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-rename.dootee-v21-project-action, #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-hide { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(255,255,255,.055) !important; border: 1px solid rgba(255,255,255,.14) !important; color: rgba(255,255,255,.90) !important; box-shadow: none !important; cursor: pointer !important; } /* * DevTools / narrower desktop. */ @media (max-width: 1100px) { #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project { grid-template-columns: 30px minmax(0,1fr) repeat(4, minmax(46px,58px)) !important; column-gap: 5px !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-project-action { min-width: 46px !important; max-width: 58px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 0 4px !important; font-size: 9px !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-share.dootee-v21-project-action { min-width: 46px !important; max-width: 58px !important; min-height: 36px !important; padding: 0 4px !important; } } /* * Small mobile: * Keep all actions visible and non-overlapping. */ @media (max-width: 600px) { #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project { grid-template-columns: 24px minmax(0,1fr) repeat(4,44px) !important; column-gap: 3px !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-project-action { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; padding: 0 2px !important; font-size: 8px !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-share.dootee-v21-project-action { width: 44px !important; min-width: 44px !important; max-width: 44px !important; min-height: 34px !important; padding: 0 2px !important; } } /* END V22.26B2 ACTION GROUP ROOT FIX */ /* ============================================================ * V22.26B3 CHECKBOX LEFT OF PROJECT NAME * * Canonical row: * [checkbox] [project info] [Update] [Rename] [Share] [Hide] * ============================================================ */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project { grid-template-columns: 34px minmax(0,1fr) repeat(4,minmax(52px,66px)) !important; grid-template-areas: "select info update rename share hide" !important; } /* Checkbox must always be first */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-project-select { grid-area: select !important; grid-column: 1 !important; grid-row: 1 !important; order: 0 !important; position: static !important; align-self: center !important; justify-self: center !important; margin: 0 !important; transform: none !important; } /* Project information immediately follows checkbox */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-open { grid-area: info !important; grid-column: 2 !important; grid-row: 1 !important; order: 1 !important; min-width: 0 !important; } /* Explicit action positions */ #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > [data-v21-update] { grid-area: update !important; grid-column: 3 !important; grid-row: 1 !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > [data-v21-rename] { grid-area: rename !important; grid-column: 4 !important; grid-row: 1 !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > [data-v21-share] { grid-area: share !important; grid-column: 5 !important; grid-row: 1 !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > [data-v21-archive] { grid-area: hide !important; grid-column: 6 !important; grid-row: 1 !important; } /* DevTools / narrow desktop */ @media (max-width:1100px) { #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project { grid-template-columns: 30px minmax(0,1fr) repeat(4,minmax(46px,58px)) !important; } } /* Mobile */ @media (max-width:600px) { #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project { grid-template-columns: 24px minmax(0,1fr) repeat(4,44px) !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-project-select { grid-column: 1 !important; } #dooteeAccountPanelV21 #dooteeV21List .dootee-v21-project > .dootee-v21-open { grid-column: 2 !important; } } /* END V22.26B3 CHECKBOX LEFT OF PROJECT NAME */ /* ========================================================= DOOTEE PROFILE IDENTITY + SINGLE SCROLL V22.16E-R3T ========================================================= */ #dooteeAccountPanelV21 #dooteeV21IdentityRow { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; } #dooteeAccountPanelV21 #dooteeV21IdentityRow #dooteeV21Email { display: flex !important; align-items: center !important; flex: 0 1 auto !important; min-width: 0 !important; height: 30px !important; min-height: 30px !important; margin: 0 !important; padding: 0 !important; line-height: 30px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #dooteeAccountPanelV21 #dooteeV21IdentityRow #dooteeV21Logout { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: auto !important; min-width: 96px !important; height: 30px !important; min-height: 30px !important; margin: 0 !important; padding: 0 12px !important; line-height: 30px !important; font-size: 12px !important; border-radius: 10px !important; cursor: pointer !important; pointer-events: auto !important; } /* * No nested scrollbar. */ html body #dooteeAccountPanelV21.is-open .dootee-v21-scroll { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; height: auto !important; max-height: none !important; min-height: 0 !important; flex: none !important; } /* * Profile panel is the only vertical scroll owner. */ html body #dooteeAccountPanelV21.is-open { overflow-x: hidden !important; overflow-y: auto !important; height: calc(100dvh - 56px) !important; max-height: calc(100dvh - 56px) !important; box-sizing: border-box !important; } /* ========================================================= DOOTEE PROFILE FINAL SINGLE SCROLL V22.16E-R3U ========================================================= */ /* * Profile panel owns vertical scrolling. * Top bar occupies 56px. */ html body #dooteeAccountPanelV21.is-open { height: calc(100dvh - 56px) !important; max-height: calc(100dvh - 56px) !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; box-sizing: border-box !important; overscroll-behavior: contain !important; } /* * Remove the old nested scrollbar completely. */ html body #dooteeAccountPanelV21.is-open .dootee-v21-scroll { display: block !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; flex: 0 0 auto !important; box-sizing: border-box !important; padding-bottom: 24px !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } html body #dooteeAccountPanelV21.is-open .dootee-v21-scroll::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* * Keep only panel scrollbar. */ html body #dooteeAccountPanelV21.is-open::-webkit-scrollbar { width: 8px; } /* ========================================================= DOOTEE PROFILE OUTER SCROLL + LIST EXPAND V22.16E-R3V ========================================================= */ /* * Correct scroll architecture: * * Account Panel * -> .dootee-v21-scroll = ONE main scrollbar * -> #dooteeV21List = expand naturally, NO scrollbar */ /* * Panel itself must not become a second scroll owner. */ html body #dooteeAccountPanelV21.is-open { overflow: hidden !important; overflow-x: hidden !important; overflow-y: hidden !important; height: calc(100dvh - 56px) !important; max-height: calc(100dvh - 56px) !important; min-height: 0 !important; box-sizing: border-box !important; } /* * Restore the original outer Profile scrollbar. */ html body #dooteeAccountPanelV21.is-open > .dootee-v21-scroll { display: block !important; height: 100% !important; max-height: 100% !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; box-sizing: border-box !important; padding-bottom: 28px !important; scrollbar-width: auto !important; -ms-overflow-style: auto !important; overscroll-behavior: contain !important; } /* * Restore the visible main scrollbar. */ html body #dooteeAccountPanelV21.is-open > .dootee-v21-scroll::-webkit-scrollbar { display: block !important; width: 8px !important; } /* * Saved Project list must NOT own a scrollbar. * All Project rows expand naturally into the Profile content. */ html body #dooteeAccountPanelV21 #dooteeV21List { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } /* * Hide any browser scrollbar belonging specifically * to the Saved Project list. */ html body #dooteeAccountPanelV21 #dooteeV21List::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* * Bottom breathing room replaces the visual space that * disappeared when the old Logout-only footer was retired. * * Logout itself remains beside Email. */ html body #dooteeAccountPanelV21.is-open > .dootee-v21-scroll::after { content: "" !important; display: block !important; width: 100% !important; height: 28px !important; flex: 0 0 28px !important; pointer-events: none !important; } /* ========================================================= R2Z.61D — RECIPIENT SHARED-WITH-ME Separate from owner Saved Projects. ========================================================= */ #dooteeV21SharedWithMeSection { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); } .dootee-v21-shared-heading { margin: 0 0 8px 0; font-size: 13px; font-weight: 700; line-height: 1.35; } #dooteeV21SharedWithMe { display: flex; flex-direction: column; gap: 7px; width: 100%; height: auto; max-height: none; overflow: visible; box-sizing: border-box; } .dootee-v21-shared-project { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 9px 10px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; } .dootee-v21-shared-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .dootee-v21-shared-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dootee-v21-shared-owner, .dootee-v21-shared-access { font-size: 11px; line-height: 1.35; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dootee-v21-shared-open { flex: 0 0 auto; min-height: 30px; padding: 0 10px; border-radius: 9px; cursor: pointer; } .dootee-v21-shared-report-only { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 28px; padding: 0 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; font-size: 11px; opacity: .72; } .dootee-v21-shared-empty { padding: 8px 2px; font-size: 12px; opacity: .65; } @media (max-width: 600px) { .dootee-v21-shared-project { align-items: stretch; flex-direction: column; } .dootee-v21-shared-open, .dootee-v21-shared-report-only { width: 100%; min-height: 34px; box-sizing: border-box; } }