/* ========================================================================== Bulk Email Offline Questionnaire page (OfflineQuestionnaireBulkEmail.ascx) Port of the Create Questionnaire refresh (QEN-8290) — same card chrome, Inter font, teal accent, bathymetric background. Scoped to the cpBulkEmail module container so shared .StdTable / .Label / .ColHeader classes remain untouched on every other page. ========================================================================== */ body.sidebar-nav [id$="cpBulkEmail_divMod"].modContainerStd { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 12px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); padding: 24px; margin: 24px 48px; width: calc(100% - 96px) !important; max-width: none !important; table-layout: fixed; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text-primary); } body.sidebar-nav [id$="cpBulkEmail_divMod"].modContainerStd > tbody > tr > td { padding: 0 !important; } /* Break the DNN content pane width constraint so the card fills the content area next to the sidebar — matches the Create Questionnaire full-bleed card. */ body.sidebar-nav:has([id$="cpBulkEmail_divMod"]) .ContentPane, body.sidebar-nav:has([id$="cpBulkEmail_divMod"]) .ContentPaneBody, body.sidebar-nav:has([id$="cpBulkEmail_divMod"]) #ctl00_cphMiddle, body.sidebar-nav:has([id$="cpBulkEmail_divMod"]) #cphMiddle_ctl00_divWrap { width: 100% !important; max-width: none !important; } /* Bathymetric contour watermark — same ornamental layer as Create Questionnaire */ body.sidebar-nav:has([id$="cpBulkEmail_divMod"]) .q88-content { position: relative; isolation: isolate; } body.sidebar-nav:has([id$="cpBulkEmail_divMod"]) .q88-content::before { content: ''; position: absolute; inset: 0; background-image: url('/images/page/bathymetric-pattern.png'); background-repeat: repeat-y; background-size: 100% auto; background-position: top center; filter: invert(1); opacity: 0.15; pointer-events: none; z-index: 0; } body.sidebar-nav:has([id$="cpBulkEmail_divMod"]) .q88-content > * { position: relative; z-index: 1; } body.sidebar-nav:has([id$="cpBulkEmail_divMod"]) .ContentPane, body.sidebar-nav:has([id$="cpBulkEmail_divMod"]) .ContentPaneBody, body.sidebar-nav:has([id$="cpBulkEmail_divMod"]) .MainTableContent, body.sidebar-nav:has([id$="cpBulkEmail_divMod"]) #ctl00_cphMiddle, body.sidebar-nav:has([id$="cpBulkEmail_divMod"]) #cphMiddle_ctl00_divWrap { background: transparent !important; background-color: transparent !important; } /* -------------------------------------------------------------------------- Module title — "Bulk Email Offline Questionnaire" + optional Edit Template -------------------------------------------------------------------------- */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modTitle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 14px 0; border: 0; background: transparent; } body.sidebar-nav [id$="cpBulkEmail_divMod"] .modTLeft { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 600; line-height: 28px; color: var(--text-primary); padding: 0; background: transparent; border: 0; } body.sidebar-nav [id$="cpBulkEmail_divMod"] .modTRight { display: flex; align-items: center; gap: 12px; padding: 0; background: transparent; border: 0; } /* "Edit Template" — Figma renders this top-right action as a plain text-only link in the primary brand color (no fill, no border, no icon). Override the global LinkButton chrome and hide the ImageManager icon. */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modTRight a[id$="_btnSettings"], body.sidebar-nav a[id$="cpBulkEmail_btnSettings"].LinkButton, body.sidebar-nav a[id$="cpBulkEmail_btnSettings"]:link, body.sidebar-nav a[id$="cpBulkEmail_btnSettings"]:visited { display: inline-flex !important; align-items: center; justify-content: center; gap: 0; box-sizing: border-box !important; height: 36px !important; padding: 0 8px !important; background: transparent !important; background-color: transparent !important; background-image: none !important; color: var(--brand-primary) !important; font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; border: 0 !important; border-radius: 6px !important; text-decoration: none !important; cursor: pointer; box-shadow: none !important; text-shadow: none !important; margin: 0 !important; } body.sidebar-nav a[id$="cpBulkEmail_btnSettings"]:hover, body.sidebar-nav a[id$="cpBulkEmail_btnSettings"]:focus, body.sidebar-nav a[id$="cpBulkEmail_btnSettings"]:active { background: rgba(var(--primary-tint), 0.08) !important; color: var(--brand-primary-hover) !important; text-decoration: none !important; } /* Drop the Settings gear icon + the LinkButton spacer so only the "Edit Template" text shows. */ body.sidebar-nav [id$="cpBulkEmail_divMod"] a[id$="_btnSettings"] img, body.sidebar-nav [id$="cpBulkEmail_divMod"] a[id$="_btnSettings"] ins { display: none !important; } /* -------------------------------------------------------------------------- modSub1 (SubHeader1) — Questionnaire selector + Fleet picker. Figma 1:25712 lays this out as 3 equal-width "Field" columns side-by-side: [Questionnaire | All Types ▼] [Vessel search ▼] [Fleet | Fleet ▼] The legacy markup is a 2-row where row 1's
contains the QuestionnaireSelector (label + type select + combobox) and row 2's contains the FleetVessel dropdown. We flatten the table with display:contents and pin individual children to grid cells via grid-template-areas so we land on the Figma layout without touching the ASCX markup. -------------------------------------------------------------------------- */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modSub1 { padding: 0 0 20px 0; margin: 0 0 20px 0; border-bottom: 1px solid var(--border-default); background: transparent; } body.sidebar-nav [id$="cpBulkEmail_divMod"] .modSub1 .StdTable { display: grid; width: 100%; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "lblQ . lblF" "selQ search selF"; column-gap: 16px; row-gap: 8px; border: 0; border-collapse: collapse; border-spacing: 0; background: transparent; margin: 0; padding: 0; } /* Flatten table chrome so direct cells participate in the grid above. */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modSub1 .StdTable > tbody, body.sidebar-nav [id$="cpBulkEmail_divMod"] .modSub1 .StdTable > tbody > tr, body.sidebar-nav [id$="cpBulkEmail_divMod"] .modSub1 .StdTable > tbody > tr > td { display: contents; } /* Field 1 — Questionnaire label + Type dropdown QuestionnaireSelector emits its "Questionnaire:" label as a raw inline ...; force it to behave as a Figma-style label sitting in row 1 col 1. */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modSub1 span[id$="_lblQuestionnaire"] { grid-area: lblQ; display: block; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--text-primary); padding: 0; margin: 0; align-self: end; } body.sidebar-nav [id$="cpBulkEmail_divMod"] .modSub1 span[id$="_lblQuestionnaire"] > b { font-weight: 500; } body.sidebar-nav [id$="cpBulkEmail_divMod"] .modSub1 select[id$="_ddlQuestionnaireType"] { grid-area: selQ; width: 100%; min-width: 0; max-width: none; margin: 0; } /* Field 2 — Vessel search ComboBox (no visible label, Figma shows blank space) */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modSub1 input[id$="_cbQuestionnaire_txtComboBox"], body.sidebar-nav [id$="cpBulkEmail_divMod"] .modSub1 input[id$="_cbQuestionnaire_txtComboBox"].cbArrow { grid-area: search; width: 100% !important; min-width: 0; max-width: none; } /* Field 3 — Fleet label + Fleet dropdown. Legacy markup is "Fleet:" — promote into the row-1 col-3 label slot and hide the IE6-era pixel spacer. */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modSub1 tr[id$="_trFleet"] > td > b { grid-area: lblF; display: block; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--text-primary); padding: 0; margin: 0; align-self: end; } body.sidebar-nav [id$="cpBulkEmail_divMod"] .modSub1 tr[id$="_trFleet"] > td > b > span { display: none; } body.sidebar-nav [id$="cpBulkEmail_divMod"] .modSub1 select[id$="_FleetVessel1_dlFleet"] { grid-area: selF; width: 100%; min-width: 0; max-width: none; } /* Certificate Offline Form + Officer Matrix flows set trQuestionnaire.Visible = false in code-behind, so that row never renders and Fleet is the ONLY field in the table. It still lands in the lblF/selF (column 3) grid areas built for the Questionnaire flow, stranding it on the right. Re-pin to column 1 so it reads as left-aligned when it's the sole field. */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modSub1 .StdTable:not(:has(tr[id$="_trQuestionnaire"])) { grid-template-areas: "lblF . ." "selF . ."; } /* Hide the unused fallback dropdown emitted by QuestionnaireSelector when EnableAutoComplete is on (cbQuestionnaire is the visible control). Without this, ddlQuestionnaire would auto-place into the grid and break alignment. */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modSub1 select[id$="_ddlQuestionnaire"]:not([id$="_ddlQuestionnaireType"]) { display: none !important; } /* -------------------------------------------------------------------------- modMain — wraps the vessel repeater. Kill default padding/chrome. -------------------------------------------------------------------------- */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain { padding: 0; background: transparent; border: 0; } body.sidebar-nav [id$="cpBulkEmail_divMod"] .modInnerContainer { padding: 0; background: transparent; border: 0; } /* -------------------------------------------------------------------------- Vessel list — Repeater rendered as with a and one data row per vessel. Rebuild as a clean in-card list: muted uppercase header, thin row borders, Inter text. -------------------------------------------------------------------------- */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain .StdTable.BorderAll { width: 100% !important; border: 1px solid var(--border-default); border-radius: 8px; border-collapse: separate; border-spacing: 0; background: var(--surface-raised); overflow: hidden; font-family: 'Inter', sans-serif; margin: 0; } /* Header row — kill the legacy blue-gradient ColHeader background */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain .StdTable.BorderAll tr.ColHeader { background: var(--surface-card) !important; background-image: none !important; } body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain .StdTable.BorderAll tr.ColHeader > td { padding: 10px 14px !important; font-family: 'Inter', sans-serif; font-size: 12px !important; font-weight: 600 !important; line-height: 16px !important; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted) !important; background: transparent !important; background-image: none !important; border: 0 !important; border-bottom: 1px solid var(--border-default) !important; vertical-align: middle; text-align: left; } /* Replace the legacy "Select" select-all text link with the Figma checkbox rectangle (1:25726). We keep the element so the existing selectAllCheckbox('chkVessel') click handler still fires; the text is hidden via font-size:0 and a pseudo-element paints the 16×16 checkbox. */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain .StdTable.BorderAll tr.ColHeader a, body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain .StdTable.BorderAll tr.ColHeader a.whiteText { display: inline-block !important; position: relative; width: 16px; height: 16px; padding: 0 !important; margin: 0 !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; text-decoration: none !important; text-shadow: none !important; cursor: pointer; vertical-align: middle; } body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain .StdTable.BorderAll tr.ColHeader a::before { content: ''; display: block; width: 16px; height: 16px; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 4px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); box-sizing: border-box; } body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain .StdTable.BorderAll tr.ColHeader a:hover::before { border-color: var(--border-strong); } body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain .StdTable.BorderAll tr.ColHeader a:focus-visible::before { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.15); } /* Center-align the first column (Select checkbox) header */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain .StdTable.BorderAll tr.ColHeader > td:first-child { text-align: center; width: 80px; } /* Data rows */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain .StdTable.BorderAll > tbody > tr:not(.ColHeader) > td { padding: 10px 14px !important; font-family: 'Inter', sans-serif; font-size: 14px !important; line-height: 20px !important; color: var(--text-primary) !important; background: var(--surface-raised) !important; background-image: none !important; border: 0 !important; border-bottom: 1px solid var(--surface-muted) !important; vertical-align: middle; } /* Last row — no bottom border (the table wrapper already has one) */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain .StdTable.BorderAll > tbody > tr:last-child > td { border-bottom: 0 !important; } /* Row hover — subtle slate wash */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain .StdTable.BorderAll > tbody > tr:not(.ColHeader):hover > td { background: var(--surface-card) !important; } /* Center-align the Select column data cells too */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain .StdTable.BorderAll > tbody > tr:not(.ColHeader) > td:first-child { text-align: center; } /* Checkbox — accent color teal so it matches the rest of the interactive chrome */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain input[type="checkbox"] { accent-color: var(--brand-primary); width: 16px; height: 16px; cursor: pointer; margin: 0; vertical-align: middle; } /* Vessel-name label — sits inline without extra wrapping */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain span[id*="_lblVessel"] { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: var(--text-primary); } /* Email input cell — the textbox inherits the shared input chrome below, but we cap its width so long emails don't blow out the row */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain input[id*="_txtEmail"] { width: 100% !important; max-width: 360px; } /* Validator messages next to the email box */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain span[id*="_rfvEmail"], body.sidebar-nav [id$="cpBulkEmail_divMod"] .modMain span[id*="_revEmail"] { display: inline-block; margin-left: 8px; font-size: 12px; color: var(--red-600); font-family: 'Inter', sans-serif; } /* -------------------------------------------------------------------------- Shared inputs / selects — match Figma "Type=Input, State=Default" h:32px, border var(--border-default), radius 8, px 12 py 4, Inter 14/20 -------------------------------------------------------------------------- */ body.sidebar-nav [id$="cpBulkEmail_divMod"] select, body.sidebar-nav [id$="cpBulkEmail_divMod"] input[type="text"], body.sidebar-nav [id$="cpBulkEmail_divMod"] input[type="search"], body.sidebar-nav [id$="cpBulkEmail_divMod"] input[type="email"], body.sidebar-nav [id$="cpBulkEmail_divMod"] .NormalTextBox, body.sidebar-nav [id$="cpBulkEmail_divMod"] .NormalBox { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; font-weight: 400; line-height: 20px; color: var(--text-primary) !important; height: 32px !important; min-height: 32px; padding: 4px 12px !important; border: 1px solid var(--border-default) !important; border-radius: 8px !important; background-color: var(--surface-raised) !important; box-sizing: border-box; transition: border-color 150ms ease, box-shadow 150ms ease; } body.sidebar-nav [id$="cpBulkEmail_divMod"] select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; padding-right: 32px !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 16px 16px !important; } body.sidebar-nav [id$="cpBulkEmail_divMod"] select::-ms-expand { display: none !important; } /* ComboBox arrow used by QuestionnaireSelector's autocomplete textbox */ body.sidebar-nav [id$="cpBulkEmail_divMod"] input.cbArrow, body.sidebar-nav [id$="cpBulkEmail_divMod"] input.NormalTextBox.cbArrow { padding-right: 32px !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 16px 16px !important; background-color: var(--surface-raised) !important; cursor: pointer; } body.sidebar-nav [id$="cpBulkEmail_divMod"] select:focus, body.sidebar-nav [id$="cpBulkEmail_divMod"] input[type="text"]:focus, body.sidebar-nav [id$="cpBulkEmail_divMod"] input[type="search"]:focus, body.sidebar-nav [id$="cpBulkEmail_divMod"] input[type="email"]:focus, body.sidebar-nav [id$="cpBulkEmail_divMod"] .NormalTextBox:focus, body.sidebar-nav [id$="cpBulkEmail_divMod"] .NormalBox:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.15); } body.sidebar-nav [id$="cpBulkEmail_divMod"] select::placeholder, body.sidebar-nav [id$="cpBulkEmail_divMod"] input::placeholder { color: var(--text-muted); } /* Label class — normalize whatever the QuestionnaireSelector / FleetVessel emit so labels sit above inputs with 6px gap, Inter 14/20 medium */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .Label { display: block !important; width: 100% !important; font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; color: var(--text-primary) !important; padding: 0 0 6px 0 !important; margin: 0 !important; background: transparent; text-align: left !important; } /* -------------------------------------------------------------------------- Footer2 — Cancel (secondary) + Continue / Email (primary teal) -------------------------------------------------------------------------- */ body.sidebar-nav [id$="cpBulkEmail_divMod"] [id$="_pnlFooter2"], body.sidebar-nav [id$="cpBulkEmail_divMod"] .modFooter2 { padding: 20px 0 0 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; display: flex; align-items: center; justify-content: flex-end; /* gap is 0, NOT 10px: the legacy markup leaves a collapsible whitespace text node between Cancel and the primary button, which flexbox turns into a zero-width anonymous flex item. A container `gap` then applies on BOTH sides of it (Cancel <-> ws <-> primary), doubling the visible gap to 20px. The 10px spacing is set as margin-left on the primary button instead. font-size:0 zeroes the whitespace item's intrinsic width. */ gap: 0; margin-top: 20px; border-top: 1px solid var(--border-default); font-size: 0; } /* Restore button text size after the container's font-size:0 collapse */ body.sidebar-nav [id$="cpBulkEmail_divMod"] .modFooter2 > a, body.sidebar-nav [id$="cpBulkEmail_divMod"] [id$="_pnlFooter2"] > a { font-size: 14px; } /* Primary buttons — Continue + Email (teal var(--brand-primary)) */ body.sidebar-nav [id$="cpBulkEmail_divMod"] a[id$="_btnContinue"], body.sidebar-nav [id$="cpBulkEmail_divMod"] a[id$="_btnEmail"], body.sidebar-nav a[id$="cpBulkEmail_btnContinue"].LinkButton, body.sidebar-nav a[id$="cpBulkEmail_btnEmail"].LinkButton, body.sidebar-nav a[id$="cpBulkEmail_btnContinue"]:link, body.sidebar-nav a[id$="cpBulkEmail_btnEmail"]:link, body.sidebar-nav a[id$="cpBulkEmail_btnContinue"]:visited, body.sidebar-nav a[id$="cpBulkEmail_btnEmail"]:visited { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box !important; height: 36px !important; padding: 0 16px !important; background: var(--brand-primary) !important; background-color: var(--brand-primary) !important; background-image: none !important; color: var(--surface-raised) !important; font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; border: 1px solid var(--brand-primary) !important; border-radius: 8px !important; text-decoration: none !important; cursor: pointer; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); transition: background-color 150ms ease, border-color 150ms ease; text-shadow: none !important; /* 10px left margin = the gap to the Cancel button (container gap is 0; see the whitespace anonymous-flex-item note on the footer above) */ margin: 0 0 0 10px !important; } body.sidebar-nav a[id$="cpBulkEmail_btnContinue"]:hover, body.sidebar-nav a[id$="cpBulkEmail_btnEmail"]:hover, body.sidebar-nav a[id$="cpBulkEmail_btnContinue"]:focus, body.sidebar-nav a[id$="cpBulkEmail_btnEmail"]:focus, body.sidebar-nav a[id$="cpBulkEmail_btnContinue"]:active, body.sidebar-nav a[id$="cpBulkEmail_btnEmail"]:active { background: var(--brand-primary-hover) !important; background-color: var(--brand-primary-hover) !important; border-color: var(--brand-primary-hover) !important; text-decoration: none !important; color: var(--surface-raised) !important; } body.sidebar-nav a[id$="cpBulkEmail_btnContinue"]:focus, body.sidebar-nav a[id$="cpBulkEmail_btnEmail"]:focus { outline: none; box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.25); } body.sidebar-nav a[id$="cpBulkEmail_btnContinue"][disabled], body.sidebar-nav a[id$="cpBulkEmail_btnContinue"].aspNetDisabled, body.sidebar-nav a[id$="cpBulkEmail_btnEmail"][disabled], body.sidebar-nav a[id$="cpBulkEmail_btnEmail"].aspNetDisabled { opacity: 0.5; pointer-events: none; } /* Hide the ImageManager injected   wrapper + decorative so the button text sits centered on teal (same fix as Create Questionnaire) */ body.sidebar-nav [id$="cpBulkEmail_divMod"] a[id$="_btnContinue"] img, body.sidebar-nav [id$="cpBulkEmail_divMod"] a[id$="_btnContinue"] ins, body.sidebar-nav [id$="cpBulkEmail_divMod"] a[id$="_btnEmail"] img, body.sidebar-nav [id$="cpBulkEmail_divMod"] a[id$="_btnEmail"] ins { display: none !important; } /* Secondary Cancel link — ghost teal text, no background */ body.sidebar-nav [id$="cpBulkEmail_divMod"] a[id$="_btnCancel"], body.sidebar-nav a[id$="cpBulkEmail_btnCancel"].LinkButton, body.sidebar-nav a[id$="cpBulkEmail_btnCancel"].LinkButton.Secondary, body.sidebar-nav a[id$="cpBulkEmail_btnCancel"]:link, body.sidebar-nav a[id$="cpBulkEmail_btnCancel"]:visited { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box !important; height: 36px !important; padding: 0 16px !important; background: transparent !important; background-color: transparent !important; background-image: none !important; color: var(--text-muted) !important; font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; border: 1px solid var(--border-default) !important; border-radius: 8px !important; text-decoration: none !important; cursor: pointer; box-shadow: none !important; text-shadow: none !important; margin: 0 !important; } body.sidebar-nav a[id$="cpBulkEmail_btnCancel"]:hover, body.sidebar-nav a[id$="cpBulkEmail_btnCancel"]:focus, body.sidebar-nav a[id$="cpBulkEmail_btnCancel"]:active { background: var(--surface-card) !important; background-color: var(--surface-card) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important; text-decoration: none !important; } body.sidebar-nav [id$="cpBulkEmail_divMod"] a[id$="_btnCancel"] img, body.sidebar-nav [id$="cpBulkEmail_divMod"] a[id$="_btnCancel"] ins { display: none !important; } /* -------------------------------------------------------------------------- Autocomplete suggestion list (QuestionnaireSelector) — reuse the same menu styling as Create Questionnaire so the dropdown feels consistent. Global class, not module-scoped, but CreateQuestionnaire already defines this — leaving here as a safety net in case CreateQuestionnaire css isn't loaded on every path that shows the QuestionnaireSelector. -------------------------------------------------------------------------- */ body.sidebar-nav .AutoCompleteExtender_CompletionList.cbACList { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); padding: 4px; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-primary); } body.sidebar-nav .AutoCompleteExtender_CompletionListItem { padding: 6px 32px 6px 8px; border: 1px solid transparent; border-radius: 6px; color: #000000; cursor: pointer; line-height: 20px; } body.sidebar-nav .AutoCompleteExtender_CompletionListItem:hover, body.sidebar-nav .AutoCompleteExtender_CompletionListItem.AutoCompleteExtender_CompletionListItemHover { background-color: var(--surface-muted); border-color: var(--border-default); } body.sidebar-nav .AutoCompleteExtender_CompletionListItem.AutoCompleteExtender_CompletionListItemSelected { background-color: var(--border-default); border-color: var(--border-default); } /* ========================================================================== EDIT TEMPLATE view — pnlOfflineEmailSettings / cpBulkEmailSettings_divMod Karamasoft UltimateEditor (ueTemplateText) re-skin to Figma node 219:8100. Layout: Card 833px max-width, three rows — Header (h:56, pad 24/24/12/24) — Title + Help link (CircleHelp icon) Body (h:420) — Toolbar strip + iframe rich editor Footer (h:60, pad 24/12) — Hint text + Reset / Cancel / Save Toolbar (Karamasoft .EditorToolbar) gets Lucide-styled icons painted via ::after pseudos on the legacy .EditorButtonOut TDs; the original .gif children are hidden but kept in flow so Karamasoft's onclick handlers still fire. ========================================================================== */ /* --- Page-level break: same content-pane override + bathymetric pattern as cpBulkEmail_divMod, but triggered when the settings panel is open. --- */ body.sidebar-nav:has([id$="cpBulkEmailSettings_divMod"]) .ContentPane, body.sidebar-nav:has([id$="cpBulkEmailSettings_divMod"]) .ContentPaneBody, body.sidebar-nav:has([id$="cpBulkEmailSettings_divMod"]) #ctl00_cphMiddle, body.sidebar-nav:has([id$="cpBulkEmailSettings_divMod"]) #cphMiddle_ctl00_divWrap { width: 100% !important; max-width: none !important; background: transparent !important; background-color: transparent !important; } body.sidebar-nav:has([id$="cpBulkEmailSettings_divMod"]) .MainTableContent { background: transparent !important; background-color: transparent !important; } body.sidebar-nav:has([id$="cpBulkEmailSettings_divMod"]) .q88-content { position: relative; isolation: isolate; } body.sidebar-nav:has([id$="cpBulkEmailSettings_divMod"]) .q88-content::before { content: ''; position: absolute; inset: 0; background-image: url('/images/page/bathymetric-pattern.png'); background-repeat: repeat-y; background-size: 100% auto; background-position: top center; filter: invert(1); opacity: 0.15; pointer-events: none; z-index: 0; } body.sidebar-nav:has([id$="cpBulkEmailSettings_divMod"]) .q88-content > * { position: relative; z-index: 1; } /* --- Card chrome ------------------------------------------------------- */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"].modContainerStd { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 12px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); margin: 24px auto; max-width: 833px; width: calc(100% - 96px) !important; table-layout: fixed; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text-primary); overflow: hidden; /* clip radius corners */ } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"].modContainerStd > tbody > tr > td { padding: 0 !important; vertical-align: top; } /* Inner container resets (kill any legacy padding/borders) */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modInnerContainer { padding: 0; background: transparent; border: 0; } /* --- Header (modTitle = "Edit Offline Questionnaire Email Template" + Help) - */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modTitle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 24px 12px 24px; border: 0; background: transparent; width: 100%; box-sizing: border-box; overflow: visible; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modTLeft { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; line-height: 1; color: var(--text-primary); padding: 0; background: transparent; border: 0; flex: 0 0 auto; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modTRight { display: flex; align-items: center; gap: 0; padding: 0; background: transparent; border: 0; flex: 0 0 auto; } /* Help link — text-only with CircleHelp icon to the left, Inter Medium 14/20 teal. Override every cascading rule from MainWhiteout / LinkButton. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modTRight a[id$="_btnHelp"], body.sidebar-nav a[id$="cpBulkEmailSettings_btnHelp"], body.sidebar-nav a[id$="cpBulkEmailSettings_btnHelp"]:link, body.sidebar-nav a[id$="cpBulkEmailSettings_btnHelp"]:visited { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box !important; /* Figma: text-only link (no padding) so header content height stays 20 */ height: 20px !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; color: var(--brand-primary) !important; font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; border: 0 !important; border-radius: 4px !important; text-decoration: none !important; cursor: pointer; box-shadow: none !important; text-shadow: none !important; margin: 0 !important; } body.sidebar-nav a[id$="cpBulkEmailSettings_btnHelp"]:hover, body.sidebar-nav a[id$="cpBulkEmailSettings_btnHelp"]:focus, body.sidebar-nav a[id$="cpBulkEmailSettings_btnHelp"]:active { background: rgba(var(--primary-tint), 0.08) !important; color: var(--brand-primary-hover) !important; text-decoration: none !important; } /* ImageManager renders no for ImageIcon="help" — paint a Lucide CircleHelp via ::before on the anchor itself. The ::before sits to the left of the "Help" text thanks to inline-flex + gap:6. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] a[id$="_btnHelp"]::before { content: ''; display: inline-block; width: 16px; height: 16px; background-color: var(--brand-primary); -webkit-mask-image: var(--icon-circle-help); mask-image: var(--icon-circle-help); -webkit-mask-size: 16px 16px; mask-size: 16px 16px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; vertical-align: middle; flex: 0 0 auto; } /* If ImageManager DID render an img on a future codepath, hide it (the ::before handles the visual). Drop the LinkButton spacer too. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] a[id$="_btnHelp"] img, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] a[id$="_btnHelp"] ins { display: none !important; } /* --- modMain (wraps the UltimateEditor) -------------------------------- */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modMain { padding: 0; background: transparent; border: 0; } /* --- UltimateEditor outer chrome (.EditorContainer) -------------------- */ /* Karamasoft paints this gray rgb(218,218,218) and applies padding:2px + default border-spacing on every nested table. Kill ALL of it so the toolbar abuts the header and the iframe abuts the toolbar/footer. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorContainer { background: transparent !important; background-color: transparent !important; border: 0 !important; width: 100% !important; padding: 0 !important; border-spacing: 0 !important; border-collapse: collapse !important; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorContainer table { border-collapse: collapse !important; border-spacing: 0 !important; background: transparent; padding: 0 !important; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorContainer td { background: transparent; /* Default 0 padding — toolbar wrapper TD overrides below */ padding: 0; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorContainer tbody, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorContainer tr { background: transparent; margin: 0; } /* The unnamed TD that wraps the toolbar table — make it the full-width toolbar background strip. Karamasoft nests `.EditorToolbar` deep inside multiple table/tr/td levels, so `:has()` MUST be restricted to the IMMEDIATE parent (direct-child `>`) — otherwise the outer body-section TD also matches and paints gray over the iframe area too. `display: block` + `width: 100%` disconnects this TD from the table-row layout so the gray strip fills the full card width (Karamasoft sized the inner TD to the buttons-only ~650px width, narrower than the card). */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorContainer td:has(> .EditorToolbar) { display: block; width: 100%; background: var(--surface-muted) !important; background-color: var(--surface-muted) !important; border-bottom: 1px solid var(--border-default); padding: 10px 8px !important; box-sizing: border-box; } /* The unnamed TR/TD that hosts the toolbar wrapper also needs `display: block` so the outer table doesn't constrain the toolbar strip's width. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorContainer tr:has(> td > .EditorToolbar) { display: block; width: 100%; } /* The Karamasoft .EditorToolbar table is the actual buttons row. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorToolbar { background: transparent !important; background-color: transparent !important; border: 0 !important; width: 100%; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorToolbar > tbody, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorToolbar > tbody > tr { background: transparent !important; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorToolbar > tbody > tr > td { background: transparent !important; vertical-align: middle; } /* Hide the Karamasoft toolbar-bottom-line gif strip (we draw the divider via the parent TD's border-bottom). */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorToolbarBottomLine, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] img[src*="ToolbarLeft.gif"], body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] img[src*="ToolbarRight.gif"], body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] img[src*="ToolbarTopLine"], body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] img[src*="ToolbarBottomLine"] { display: none !important; } /* --- Toolbar separators (Karamasoft Separator.gif) -------------------- */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorToolbar img[src*="Separator.gif"] { width: 1px !important; height: 20px !important; background-color: var(--border-default) !important; margin: 0 4px !important; border: 0 !important; /* Hide the original gif content; the inline width/height + bg paints the divider */ -webkit-mask: linear-gradient(#000, #000); mask: linear-gradient(#000, #000); filter: brightness(0); opacity: 1 !important; } /* --- Font / Size dropdowns (.EditorDropDownOut) ----------------------- */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] table.EditorDropDownOut, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] table.EditorDropDownOver, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] table.EditorDropDownDown { background: var(--surface-raised) !important; background-color: var(--surface-raised) !important; border: 1px solid var(--border-default) !important; border-radius: 8px !important; height: 28px !important; box-sizing: border-box; padding: 0 6px 0 8px !important; margin-right: 4px; cursor: pointer; box-collapse: separate; overflow: hidden; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] table.EditorDropDownOver { border-color: var(--border-strong) !important; } /* FontName dropdown — width 86px to match Figma "Select: Arial" */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] table[id$="_ueTemplateTextFontName_Table"] { width: 86px !important; min-width: 86px; } /* FontSize dropdown — width 54px */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] table[id$="_ueTemplateTextFontSize_Table"] { width: 54px !important; min-width: 54px; } /* Dropdown text + chevron cells */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] table.EditorDropDownOut > tbody > tr > td { vertical-align: middle; padding: 0; height: 26px; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorDropDownText, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorDropDownShortText { font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: var(--text-muted) !important; padding: 0 !important; margin: 0 !important; background: transparent !important; text-align: left !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorDropDownText { min-width: 50px; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorDropDownShortText { min-width: 24px; } /* Replace Karamasoft DropTriangle.gif with a Lucide ChevronDown 16×16 */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] table.EditorDropDownOut img[src*="DropTriangle.gif"], body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] table.EditorDropDownOver img[src*="DropTriangle.gif"], body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] table.EditorDropDownDown img[src*="DropTriangle.gif"] { width: 16px !important; height: 16px !important; background-color: var(--text-muted) !important; -webkit-mask-image: var(--icon-chevron-down) !important; mask-image: var(--icon-chevron-down) !important; -webkit-mask-size: 16px 16px !important; mask-size: 16px 16px !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; filter: brightness(0) !important; margin: 0 !important; } /* --- Toolbar icon buttons (.EditorButtonOut) -------------------------- */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td.EditorButtonOut, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td.EditorButtonOver, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td.EditorButtonDown, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td.EditorButtonDisabled { position: relative; width: 28px !important; height: 28px !important; min-width: 28px; min-height: 28px; border-radius: 6px; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-sizing: border-box; padding: 0 !important; margin: 0 !important; text-align: center; vertical-align: middle; cursor: pointer; transition: background-color 150ms ease; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td.EditorButtonOver { background-color: rgba(15, 23, 42, 0.06) !important; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td.EditorButtonDown { background-color: rgba(15, 23, 42, 0.10) !important; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td.EditorButtonDisabled { opacity: 0.4; pointer-events: none; } /* Hide the original .gif image, but keep its hitbox so Karamasoft's onclick handlers on the cell still register. The pseudo paints the icon. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td.EditorButtonOut > img, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td.EditorButtonOver > img, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td.EditorButtonDown > img, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td.EditorButtonDisabled > img { visibility: hidden !important; width: 16px !important; height: 16px !important; border: 0 !important; } /* Shared icon-paint pseudo. background-color is TRANSPARENT by default so buttons without a per-button mask rule don't show a solid dark square; each per-button rule below sets BOTH mask-image AND background-color. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td.EditorButtonOut::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td.EditorButtonOver::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td.EditorButtonDown::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td.EditorButtonDisabled::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; background-color: transparent; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 16px 16px; mask-size: 16px 16px; pointer-events: none; } /* Per-button paint color. All Lucide masks below also re-assert background-color so buttons without a mask rule stay transparent. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextBold"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextItalic"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextUnderline"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextJustifyLeft"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextJustifyCenter"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextJustifyRight"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextJustifyFull"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextInsertOrderedList"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextInsertUnorderedList"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextOutdent"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextIndent"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextForeColor"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextForeColorPicker"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextStrikeThrough"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextSuperscript"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextSubscript"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextUltimateSpell"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextSpellAsYouType"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextInsertDate"]::after, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextInsertTime"]::after { background-color: var(--text-muted); } /* Per-button Lucide masks. Selector matches Karamasoft button ids (e.g. _ueTemplateTextBold). The icon is painted via mask-image. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextBold"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextItalic"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextUnderline"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextJustifyLeft"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextJustifyCenter"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextJustifyRight"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextJustifyFull"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextInsertOrderedList"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextInsertUnorderedList"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextOutdent"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextIndent"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* Font color (Baseline) icon */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextForeColor"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* Font color dropdown chevron — Karamasoft renders this as a second EditorButtonOut. Figma shows the dropdown trigger narrower (18px) but functionally identical; we keep 28×28 to match the rest of the row. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextForeColorPicker"]::after { -webkit-mask-image: var(--icon-chevron-down); mask-image: var(--icon-chevron-down); } /* StrikeThrough, Superscript, Subscript — present in toolbar but NOT in Figma 219:8100. Keep them styled consistently so the toolbar reads as a single coherent strip; flag the discrepancy in the report. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextStrikeThrough"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextSuperscript"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextSubscript"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextUltimateSpell"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextSpellAsYouType"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); opacity: 0.4; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextInsertDate"]::after { -webkit-mask-image: var(--icon-calendar); mask-image: var(--icon-calendar); } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] td[id$="_ueTemplateTextInsertTime"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* --- Iframe wrapper (the body content area, white background) --------- */ /* The iframe element + its parent TD live inside the same EditorContainer TD as the toolbar. Paint the iframe wrapper white so the email content sits on a white surface, regardless of the gray legacy chrome. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] iframe.EditorTextBox { background: var(--surface-raised) !important; border: 0 !important; width: 100% !important; min-height: 320px; display: block; } /* The TD that immediately wraps the iframe — give it the white background so the small gap between the toolbar strip and the iframe doesn't show the legacy gray. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorContainer td:has(> iframe.EditorTextBox) { background: var(--surface-raised) !important; background-color: var(--surface-raised) !important; padding: 0 !important; } /* --- Footer2 — Hint + Reset / Cancel / Save --------------------------- */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] [id$="_pnlFooter2"], body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modFooter2 { background: var(--surface-muted) !important; background-color: var(--surface-muted) !important; background-image: none !important; border: 0 !important; border-top: 1px solid var(--border-default) !important; box-shadow: none !important; padding: 12px 24px !important; display: flex !important; align-items: center; /* gap:0 + margin-left:8 on consecutive anchors. The legacy "  " text nodes between Footer2 LinkButtons become anonymous flex items and would otherwise double the gap (text node + button each get gap) — font-size:0 collapses their width and gap:0 removes the inter-item spacing; per-anchor margin-left:8 restores the intended 8px cluster spacing without an ASCX markup change. */ gap: 0; margin: 0; width: 100%; box-sizing: border-box; overflow: visible; } /* Hint sits flex:1 on the left; buttons cluster right with margin-left:8 */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modFooter2 > div:first-child { flex: 1 1 auto; text-align: left; margin: 0; } /* Reset (first button) absorbs hint→cluster gap via margin-left: auto. Cancel/Save carry their own margin-left:8 set in the per-button rules above (Save's margin uses the side-only form to avoid resetting the inline-flex item's vertical positioning). */ body.sidebar-nav a[id$="cpBulkEmailSettings_btnResetEdit"].LinkButton, body.sidebar-nav a[id$="cpBulkEmailSettings_btnResetEdit"].LinkButton.Secondary, body.sidebar-nav a[id$="cpBulkEmailSettings_btnResetEdit"]:link, body.sidebar-nav a[id$="cpBulkEmailSettings_btnResetEdit"]:visited { margin-left: auto !important; } /* Force the inner container chain to not exceed the card width — Karamasoft emits a fixed-width EditorContainer (798px) that doesn't respect the surrounding 100% width. Override every descendant table to fill the card. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modInnerContainer { width: 100%; box-sizing: border-box; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modMain { width: 100%; box-sizing: border-box; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modMain > table, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modMain > div, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] [id$="_ueTemplateText"], body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] [id$="_ueTemplateText"] > .EditorContainer, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] [id$="_ueTemplateText"] > table { width: 100% !important; box-sizing: border-box; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .EditorContainer table { width: 100% !important; } /* The legacy hint
— flatten it back into normal flow so it sits at flex-start (left) of the footer row. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modFooter2 > div[style*="absolute"] { position: static !important; flex: 1 1 auto; text-align: left; margin: 0; padding: 0; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modFooter2 .NormalSmallBold, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modFooter2 .NormalSmall { font-family: 'Inter', sans-serif; font-size: 12px !important; line-height: 16px !important; color: var(--text-muted) !important; font-weight: 400 !important; letter-spacing: 0 !important; background: transparent !important; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modFooter2 .NormalSmallBold { font-weight: 500 !important; } /* The legacy "Hint:" label hidden — Figma footer leads with $UserSignature$ */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modFooter2 .NormalSmallBold { display: none !important; } /* $UserSignature$ token inside the hint — Figma renders it in indigo medium */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modFooter2 .NormalSmall span[style*="DD0000"], body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modFooter2 .NormalSmall > span:first-child { color: #4f46e5 !important; font-weight: 500 !important; } /* Right-side action cluster — wrap the 3 LinkButtons in flex via :has(). Each link sits as a sibling to the hint
, so make the footer flex distribute them at the right. */ /* Reset (ghost) */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] a[id$="_btnResetEdit"], body.sidebar-nav a[id$="cpBulkEmailSettings_btnResetEdit"].LinkButton, body.sidebar-nav a[id$="cpBulkEmailSettings_btnResetEdit"].LinkButton.Secondary, body.sidebar-nav a[id$="cpBulkEmailSettings_btnResetEdit"]:link, body.sidebar-nav a[id$="cpBulkEmailSettings_btnResetEdit"]:visited { display: inline-flex !important; align-items: center; justify-content: center; gap: 0; box-sizing: border-box !important; height: 36px !important; padding: 0 16px !important; background: transparent !important; background-color: transparent !important; background-image: none !important; color: var(--text-primary) !important; font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; border: 0 !important; border-radius: 8px !important; text-decoration: none !important; cursor: pointer; box-shadow: none !important; text-shadow: none !important; margin: 0 !important; } body.sidebar-nav a[id$="cpBulkEmailSettings_btnResetEdit"]:hover, body.sidebar-nav a[id$="cpBulkEmailSettings_btnResetEdit"]:focus, body.sidebar-nav a[id$="cpBulkEmailSettings_btnResetEdit"]:active { background: rgba(15, 23, 42, 0.06) !important; color: var(--text-primary) !important; text-decoration: none !important; } /* Cancel (outline) — margin-left:8 set in this rule directly to win against the generic ghost rule above without specificity gymnastics. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] a[id$="_btnCancelEdit"], body.sidebar-nav a[id$="cpBulkEmailSettings_btnCancelEdit"].LinkButton, body.sidebar-nav a[id$="cpBulkEmailSettings_btnCancelEdit"].LinkButton.Secondary, body.sidebar-nav a[id$="cpBulkEmailSettings_btnCancelEdit"]:link, body.sidebar-nav a[id$="cpBulkEmailSettings_btnCancelEdit"]:visited { display: inline-flex !important; align-items: center; justify-content: center; gap: 0; box-sizing: border-box !important; height: 36px !important; padding: 0 16px !important; background: var(--surface-raised) !important; background-color: var(--surface-raised) !important; background-image: none !important; color: var(--text-primary) !important; font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; border: 1px solid var(--border-default) !important; border-radius: 8px !important; text-decoration: none !important; cursor: pointer; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none !important; margin: 0 0 0 8px !important; } body.sidebar-nav a[id$="cpBulkEmailSettings_btnCancelEdit"]:hover, body.sidebar-nav a[id$="cpBulkEmailSettings_btnCancelEdit"]:focus, body.sidebar-nav a[id$="cpBulkEmailSettings_btnCancelEdit"]:active { background: var(--surface-card) !important; background-color: var(--surface-card) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important; text-decoration: none !important; } /* Save (primary teal) */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] a[id$="_btnSaveEdit"], body.sidebar-nav a[id$="cpBulkEmailSettings_btnSaveEdit"].LinkButton, body.sidebar-nav a[id$="cpBulkEmailSettings_btnSaveEdit"]:link, body.sidebar-nav a[id$="cpBulkEmailSettings_btnSaveEdit"]:visited { display: inline-flex !important; align-items: center; justify-content: center; gap: 0; box-sizing: border-box !important; height: 36px !important; padding: 0 16px !important; background: var(--brand-primary) !important; background-color: var(--brand-primary) !important; background-image: none !important; color: var(--surface-raised) !important; font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; border: 1px solid var(--brand-primary) !important; border-radius: 8px !important; text-decoration: none !important; cursor: pointer; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); transition: background-color 150ms ease, border-color 150ms ease; text-shadow: none !important; margin: 0 0 0 8px !important; } body.sidebar-nav a[id$="cpBulkEmailSettings_btnSaveEdit"]:hover, body.sidebar-nav a[id$="cpBulkEmailSettings_btnSaveEdit"]:focus, body.sidebar-nav a[id$="cpBulkEmailSettings_btnSaveEdit"]:active { background: var(--brand-primary-hover) !important; background-color: var(--brand-primary-hover) !important; border-color: var(--brand-primary-hover) !important; text-decoration: none !important; color: var(--surface-raised) !important; } body.sidebar-nav a[id$="cpBulkEmailSettings_btnSaveEdit"]:focus { outline: none; box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.25); } /* Hide ImageManager icons + LinkButton spacers on the footer trio */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] a[id$="_btnResetEdit"] img, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] a[id$="_btnResetEdit"] ins, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] a[id$="_btnCancelEdit"] img, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] a[id$="_btnCancelEdit"] ins, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] a[id$="_btnSaveEdit"] img, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] a[id$="_btnSaveEdit"] ins { display: none !important; } /* Kill the "  " text nodes Karamasoft leaves between the Footer2 LinkButtons (they show as bare whitespace inside our flex row; the gap:8 above already provides spacing). The legacy   renders as wide spaces in Inter. Use font-size:0 on the footer container, restore on direct text children. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modFooter2 { font-size: 0; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modFooter2 > a, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modFooter2 > div, body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modFooter2 > div * { font-size: 12px; } body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modFooter2 > a { font-size: 14px; } /* Help-hint popup (TitleRight) — keep it functional, just freshen the chrome. Inline style on #hint1 hard-codes height:210px; width:325px; text-align:left — too small for the ~640-char body, so text overflowed past the white box and visually mixed with the UltimateEditor content underneath ("overlapping" report). Width + auto-height fix that. Padding intentionally mirrors the global `.hint` recipe in components.css §9.10 (10px 32px) — the 32px left padding reserves space for the Lucide AlertTriangle ::before glyph at left:8px (a flat 16px left padding caused the triangle to sit on top of the first line of text), and the 32px right padding reserves space for the Lucide X close glyph repositioned to top- right via `body.sidebar-nav .hint > span:has(> a[href*="HideHint"])`. `text-align: justify` defeats the inline `text-align:left` to fill the box width and avoid the ragged-right look. */ body.sidebar-nav [id$="cpBulkEmailSettings_divMod"] .modTitle .hint { background: var(--surface-raised) !important; border: 1px solid var(--border-default) !important; border-radius: 8px !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1) !important; padding: 32px 32px 10px !important; /* extra padding-top moves text one line below the AlertTriangle icon */ font-family: 'Inter', sans-serif; font-size: 13px !important; line-height: 18px !important; color: var(--text-primary) !important; width: 360px !important; height: auto !important; left: -385px !important; /* keep right edge aligned with Help button after 325→360 widen */ text-align: justify !important; text-justify: inter-word !important; z-index: 1000 !important; } /* ========================================================================== COMPOSE EMAIL view — pnlOfflineEmailForm / cpMain_divMod Body class set in Default.master.cs: body.page-bulk-email-compose Step 2 of the bulk-offline-questionnaire flow. Mirrors DESIGN.md §15.13.6 (Email.aspx Compose) chrome — same Inter typography, teal/slate token palette, UltimateEditor toolbar pattern as §15.13.7. Scoped to .page-bulk-email-compose to avoid colliding with the 5 other ASCX that also use ModuleTemplate id "cpMain". ========================================================================== */ /* Token override — rebind --brand-primary to teal on this page. MEMORY [brand-primary-vs-primary-token.md]: on plain body.sidebar-nav, --brand-primary resolves to LEGACY NAVY (#4f72a4) by default — only .q88-refresh co-class flips it to teal. The existing cpBulkEmail (step 1) + cpBulkEmailSettings (step 3) rules above reference --brand-primary, so without this override step 1's Continue button + step 3's Save button render navy too. Rebinding here makes ALL THREE panels share the teal accent the user asked for ("improper colors and old icons" comment). */ body.page-bulk-email-compose, body.sidebar-nav.page-bulk-email-compose { --brand-primary: var(--primary, #0d9488); --brand-primary-hover: var(--button-primary-hover, #0f766e); } /* --- Page-level: kill DNN/ContentPane caps + bathymetric watermark ----- */ body.page-bulk-email-compose .ContentPane, body.page-bulk-email-compose .ContentPaneBody, body.page-bulk-email-compose #ctl00_cphMiddle, body.page-bulk-email-compose #cphMiddle_ctl00_divWrap, body.page-bulk-email-compose .MainTableContent { width: 100% !important; max-width: none !important; background: transparent !important; background-color: transparent !important; } body.page-bulk-email-compose .q88-content { position: relative; isolation: isolate; } body.page-bulk-email-compose .q88-content::before { content: ''; position: absolute; inset: 0; background-image: url('/images/page/bathymetric-pattern.png'); background-repeat: repeat-y; background-size: 100% auto; background-position: top center; filter: invert(1); opacity: 0.15; pointer-events: none; z-index: 0; } body.page-bulk-email-compose .q88-content > * { position: relative; z-index: 1; } /* --- Card chrome (modContainerStd) ------------------------------------- */ body.page-bulk-email-compose [id$="cpMain_divMod"].modContainerStd { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 12px; box-shadow: none; padding: 24px; margin: 24px 48px; width: calc(100% - 96px) !important; max-width: none !important; table-layout: fixed; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text-primary); } body.page-bulk-email-compose [id$="cpMain_divMod"].modContainerStd > tbody > tr > td { padding: 0 !important; vertical-align: top; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modInnerContainer, body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain { padding: 0; background: transparent; border: 0; width: 100%; box-sizing: border-box; } /* --- Header (modTitle = envelope-icon + "Compose Email") --------------- */ body.page-bulk-email-compose [id$="cpMain_divMod"] .modTitle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 16px 0; border: 0; background: transparent; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modTLeft { display: flex; align-items: center; gap: 10px; font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 600; line-height: 28px; color: var(--text-primary); padding: 0; background: transparent; border: 0; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modTLeft img { display: none !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modTRight { display: flex; align-items: center; gap: 12px; padding: 0; background: transparent; border: 0; } /* --- Form table (To / Cc / Subject / Message / Options) ---------------- */ body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain > table { width: 100% !important; border-collapse: collapse !important; border-spacing: 0 !important; margin: 0; padding: 0; background: transparent; table-layout: fixed; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain > table > tbody > tr { background: transparent; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain > table > tbody > tr > td { padding: 8px 0 !important; background: transparent !important; border: 0 !important; vertical-align: top; font-family: 'Inter', sans-serif; color: var(--text-primary); } /* Label cell (To / Cc / Subject / Message / Options) — left-aligned */ body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain > table > tbody > tr > td:first-child { width: 100px !important; text-align: left !important; font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; color: var(--text-primary) !important; padding-right: 12px !important; padding-top: 14px !important; vertical-align: top; white-space: nowrap; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain > table > tbody > tr > td:nth-child(2) { width: auto !important; text-align: left; } /* --- Vessel / File(s) / Action table (rptTo) --------------------------- */ body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain table.StdTable.BorderAll { width: 100% !important; border: 1px solid var(--border-default); border-radius: 8px; border-collapse: separate; border-spacing: 0; background: var(--surface-raised); overflow: hidden; font-family: 'Inter', sans-serif; margin: 0; table-layout: auto; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain table.StdTable.BorderAll tr.ColHeader { background: var(--surface-card) !important; background-image: none !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain table.StdTable.BorderAll tr.ColHeader > td { padding: 10px 14px !important; font-family: 'Inter', sans-serif; font-size: 12px !important; font-weight: 600 !important; line-height: 16px !important; text-transform: none; color: var(--text-muted) !important; background: transparent !important; background-image: none !important; border: 0 !important; border-bottom: 1px solid var(--border-default) !important; vertical-align: middle; text-align: left; white-space: nowrap; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain table.StdTable.BorderAll tr.ColHeader > td:last-child { text-align: center; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain table.StdTable.BorderAll > tbody > tr:not(.ColHeader) > td { padding: 10px 14px !important; font-family: 'Inter', sans-serif; font-size: 14px !important; line-height: 20px !important; color: var(--text-primary) !important; background: var(--surface-raised) !important; background-image: none !important; border: 0 !important; border-bottom: 1px solid var(--surface-muted) !important; vertical-align: top; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain table.StdTable.BorderAll > tbody > tr:last-child > td { border-bottom: 0 !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain table.StdTable.BorderAll > tbody > tr:not(.ColHeader):hover > td { background: var(--surface-card) !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain table.StdTable.BorderAll > tbody > tr:not(.ColHeader) > td:last-child { text-align: center !important; vertical-align: middle !important; position: relative; } /* File hyperlinks in File(s) column — brand primary, no underline */ body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain table.StdTable.BorderAll a[id*="_hlkFileName"], body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain table.StdTable.BorderAll a[id*="_hlkFileName"]:link, body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain table.StdTable.BorderAll a[id*="_hlkFileName"]:visited { color: var(--brand-primary) !important; text-decoration: none !important; font-weight: 500; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain table.StdTable.BorderAll a[id*="_hlkFileName"]:hover, body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain table.StdTable.BorderAll a[id*="_hlkFileName"]:focus { color: var(--brand-primary-hover) !important; text-decoration: underline !important; } /* --- Delete-vessel ImageButton (red X .gif → ghost slate X) ------------ */ /* The bitmap is hidden via opacity:0 so clicks still register; a ::before on the surrounding
paints a Lucide X mask. pointer-events:none on the pseudo lets clicks reach the input behind it. */ body.page-bulk-email-compose [id$="cpMain_divMod"] input[type="image"][id*="_btnDelete"] { width: 28px !important; height: 28px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-sizing: border-box; cursor: pointer; vertical-align: middle; filter: opacity(0); position: relative; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain table.StdTable.BorderAll > tbody > tr:not(.ColHeader) > td:last-child::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; background-color: var(--text-muted); -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-size: 16px 16px; mask-size: 16px 16px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; pointer-events: none; z-index: 1; transition: background-color 150ms ease; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain table.StdTable.BorderAll > tbody > tr:not(.ColHeader):hover > td:last-child::before { background-color: var(--red-600, #dc2626); } /* --- Cc / Subject inputs ----------------------------------------------- */ /* The legacy markup carries inline style="border: solid 1px black;" on txtCC + txtSubject — kill it + apply the pill chrome. */ body.page-bulk-email-compose [id$="cpMain_divMod"] textarea[id$="_txtCC"], body.page-bulk-email-compose [id$="cpMain_divMod"] input[id$="_txtSubject"] { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; font-weight: 400; line-height: 20px; color: var(--text-primary) !important; width: 100% !important; padding: 6px 12px !important; border: 1px solid var(--border-default) !important; border-radius: 8px !important; background-color: var(--surface-raised) !important; box-sizing: border-box; transition: border-color 150ms ease, box-shadow 150ms ease; box-shadow: none !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] textarea[id$="_txtCC"] { height: 56px !important; min-height: 40px; resize: vertical; padding: 8px 40px 8px 12px !important; /* right pad reserves space for the overlaid address-book icon */ overflow: auto !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] input[id$="_txtSubject"] { height: 36px !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] textarea[id$="_txtCC"]:focus, body.page-bulk-email-compose [id$="cpMain_divMod"] input[id$="_txtSubject"]:focus { outline: none; border-color: var(--brand-primary) !important; box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.15) !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] span[id$="_rfvSubject"], body.page-bulk-email-compose [id$="cpMain_divMod"] span[id$="_revCC"] { display: inline-block; margin-left: 8px; font-size: 12px; color: var(--red-600, #dc2626); font-family: 'Inter', sans-serif; } /* --- Address-book icon (Cc row) — swap to Lucide BookOpen ghost -------- */ /* input[type="image"] paints its native src bitmap independent of background; filter:opacity(0) hides it and a sibling ::before on the wrapping cell paints the Lucide icon. */ body.page-bulk-email-compose [id$="cpMain_divMod"] input[type="image"][id$="_imgBtnCC"] { display: inline-block !important; width: 28px !important; height: 28px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; cursor: pointer; filter: opacity(0); position: absolute; top: 6px; right: 6px; z-index: 2; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain > table > tbody > tr:has(textarea[id$="_txtCC"]) > td:nth-child(2) { position: relative; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain > table > tbody > tr:has(textarea[id$="_txtCC"]) > td:nth-child(2)::after { content: ''; position: absolute; width: 16px; height: 16px; background-color: var(--text-muted); -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-size: 16px 16px; mask-size: 16px 16px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; pointer-events: none; /* Icon overlays the Cc textarea's top-right corner (the textarea now fills the content column with padding-right:40px reserving this gap). Sits over the opacity:0 imgBtnCC hit area so clicks pass through. */ right: 12px; top: 16px; z-index: 1; } /* --- Subject row content cell stays inline ---------------------------- */ body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain > table > tbody > tr:has(input[id$="_txtSubject"]) > td:nth-child(2) { white-space: nowrap; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain > table > tbody > tr:has(input[id$="_txtSubject"]) > td:nth-child(2) input[id$="_txtSubject"] { white-space: normal; } /* --- Message row: surround the UltimateEditor with the card border ----- */ body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain > table > tbody > tr:has(iframe[id$="_txtBodyi"]) > td:nth-child(2), body.page-bulk-email-compose [id$="cpMain_divMod"] .modMain > table > tbody > tr:has(textarea[id$="_txtBody"]) > td:nth-child(2) { background: var(--surface-raised) !important; border: 1px solid var(--border-default); border-radius: 8px; overflow: hidden; padding: 0 !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] textarea[id$="_txtBody"] { background: var(--surface-raised) !important; border: 0 !important; width: 100% !important; } /* ========================================================================== UltimateEditor toolbar — Karamasoft buttons named `` so this iteration uses `_txtBody*` IDs (the editor's id is "txtBody"). ========================================================================== */ body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorContainer { background: transparent !important; background-color: transparent !important; border: 0 !important; width: 100% !important; padding: 0 !important; border-spacing: 0 !important; border-collapse: collapse !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorContainer table { border-collapse: collapse !important; border-spacing: 0 !important; background: transparent; padding: 0 !important; width: 100% !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorContainer td { background: transparent; padding: 0; } body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorContainer tbody, body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorContainer tr { background: transparent; margin: 0; } body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorContainer td:has(> .EditorToolbar) { display: block; width: 100%; background: var(--surface-muted) !important; background-color: var(--surface-muted) !important; border-bottom: 1px solid var(--border-default); padding: 10px 12px !important; box-sizing: border-box; } body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorContainer tr:has(> td > .EditorToolbar) { display: block; width: 100%; } body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorToolbar { background: transparent !important; background-color: transparent !important; border: 0 !important; width: 100%; } body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorToolbar > tbody, body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorToolbar > tbody > tr { background: transparent !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorToolbar > tbody > tr > td { background: transparent !important; vertical-align: middle; } body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorToolbarBottomLine, body.page-bulk-email-compose [id$="cpMain_divMod"] img[src*="ToolbarLeft.gif"], body.page-bulk-email-compose [id$="cpMain_divMod"] img[src*="ToolbarRight.gif"], body.page-bulk-email-compose [id$="cpMain_divMod"] img[src*="ToolbarTopLine"], body.page-bulk-email-compose [id$="cpMain_divMod"] img[src*="ToolbarBottomLine"] { display: none !important; } /* Toolbar group dividers — match the Email.aspx compose toolbar (email-compose.css §820+). The legacy Separator.gif raster rendered BLACK here via `filter: brightness(0)`; instead hide the raster and paint a clean 1px × 20px --border-default (#e2e8f0) line on the wrapping td, so the colour is exactly the token, never black. */ body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorToolbar img[src*="Separator.gif"] { visibility: hidden !important; width: 1px !important; height: 20px !important; margin: 0 4px !important; border: 0 !important; filter: none !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorToolbar td:has(> img[src*="Separator.gif"]) { position: relative; } body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorToolbar td:has(> img[src*="Separator.gif"])::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1px; height: 20px; background-color: var(--border-default); } /* Collapse a separator TD immediately followed by another separator TD (an empty group when Karamasoft skips a button) — parity with email-compose. */ body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorToolbar td:has(> img[src*="Separator.gif"]) + td:has(> img[src*="Separator.gif"]) { display: none !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] table.EditorDropDownOut, body.page-bulk-email-compose [id$="cpMain_divMod"] table.EditorDropDownOver, body.page-bulk-email-compose [id$="cpMain_divMod"] table.EditorDropDownDown { background: var(--surface-raised) !important; background-color: var(--surface-raised) !important; border: 1px solid var(--border-default) !important; border-radius: 8px !important; height: 28px !important; box-sizing: border-box; padding: 0 6px 0 8px !important; margin-right: 4px; cursor: pointer; overflow: hidden; } body.page-bulk-email-compose [id$="cpMain_divMod"] table.EditorDropDownOver { border-color: var(--border-strong) !important; } /* Font / Size pickers — FILL their toolbar cell so each reads as a proper selector instead of a cramped chip. The toolbar strip is full-width, so table-layout:auto hands its leftover slack to these (flexible) cells — each cell ends up ~130px wide. Make the pill fill that cell (width:100%) and push the chevron flush against the cell's right edge (text td width:100%); the label stays left. NOTE: an earlier shrink-wrap (width:auto) left a 53px pill floating in the 130px cell with ~77px of dead space to its right — i.e. the "dropdowns don't fill the available space". */ body.page-bulk-email-compose [id$="cpMain_divMod"] table[id$="_txtBodyFontName_Table"], body.page-bulk-email-compose [id$="cpMain_divMod"] table[id$="_txtBodyFontSize_Table"] { /* fill the cell minus 6px reserved on the right → a small gap between the two pills (and before the icon group). margin-right can't do this once width is involved, so subtract it from the width instead. */ width: calc(100% - 6px) !important; min-width: 0 !important; } /* text cell grows so the chevron sits flush at the cell's right edge */ body.page-bulk-email-compose [id$="cpMain_divMod"] table[id$="_txtBodyFontName_Table"] > tbody > tr > td:first-child, body.page-bulk-email-compose [id$="cpMain_divMod"] table[id$="_txtBodyFontSize_Table"] > tbody > tr > td:first-child { width: 100% !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] table.EditorDropDownOut > tbody > tr > td { vertical-align: middle; padding: 0; height: 26px; } body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorDropDownText, body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorDropDownShortText { font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: var(--text-muted) !important; padding: 0 !important; margin: 0 6px 0 0 !important; background: transparent !important; text-align: left !important; display: inline-block !important; width: -moz-fit-content !important; width: fit-content !important; min-width: 0 !important; max-width: 120px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.page-bulk-email-compose [id$="cpMain_divMod"] table.EditorDropDownOut img[src*="DropTriangle.gif"], body.page-bulk-email-compose [id$="cpMain_divMod"] table.EditorDropDownOver img[src*="DropTriangle.gif"], body.page-bulk-email-compose [id$="cpMain_divMod"] table.EditorDropDownDown img[src*="DropTriangle.gif"] { width: 16px !important; height: 16px !important; background-color: var(--text-muted) !important; -webkit-mask-image: var(--icon-chevron-down) !important; mask-image: var(--icon-chevron-down) !important; -webkit-mask-size: 16px 16px !important; mask-size: 16px 16px !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; filter: brightness(0) !important; margin: 0 !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] td.EditorButtonOut, body.page-bulk-email-compose [id$="cpMain_divMod"] td.EditorButtonOver, body.page-bulk-email-compose [id$="cpMain_divMod"] td.EditorButtonDown, body.page-bulk-email-compose [id$="cpMain_divMod"] td.EditorButtonDisabled { position: relative; width: 28px !important; height: 28px !important; min-width: 28px; min-height: 28px; border-radius: 6px; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-sizing: border-box; padding: 0 !important; margin: 0 !important; text-align: center; vertical-align: middle; cursor: pointer; transition: background-color 150ms ease; } body.page-bulk-email-compose [id$="cpMain_divMod"] td.EditorButtonOver { background-color: rgba(15, 23, 42, 0.06) !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] td.EditorButtonDown { background-color: rgba(15, 23, 42, 0.10) !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] td.EditorButtonDisabled { opacity: 0.4; pointer-events: none; } body.page-bulk-email-compose [id$="cpMain_divMod"] td.EditorButtonOut > img, body.page-bulk-email-compose [id$="cpMain_divMod"] td.EditorButtonOver > img, body.page-bulk-email-compose [id$="cpMain_divMod"] td.EditorButtonDown > img, body.page-bulk-email-compose [id$="cpMain_divMod"] td.EditorButtonDisabled > img { visibility: hidden !important; width: 16px !important; height: 16px !important; border: 0 !important; } body.page-bulk-email-compose [id$="cpMain_divMod"] td.EditorButtonOut::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td.EditorButtonOver::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td.EditorButtonDown::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td.EditorButtonDisabled::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; background-color: transparent; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 16px 16px; mask-size: 16px 16px; pointer-events: none; } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyBold"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyItalic"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyUnderline"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyJustifyLeft"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyJustifyCenter"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyJustifyRight"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyJustifyFull"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyInsertOrderedList"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyInsertUnorderedList"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyOutdent"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyIndent"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyForeColor"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyForeColorPicker"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyStrikeThrough"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodySuperscript"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodySubscript"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyUltimateSpell"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodySpellAsYouType"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyInsertDate"]::after, body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyInsertTime"]::after { background-color: var(--text-muted); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyBold"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyItalic"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyUnderline"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyJustifyLeft"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyJustifyCenter"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyJustifyRight"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyJustifyFull"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyInsertOrderedList"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyInsertUnorderedList"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyOutdent"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyIndent"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyForeColor"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyForeColorPicker"]::after { -webkit-mask-image: var(--icon-chevron-down); mask-image: var(--icon-chevron-down); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyStrikeThrough"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodySuperscript"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodySubscript"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyUltimateSpell"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodySpellAsYouType"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); opacity: 0.4; } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyInsertDate"]::after { -webkit-mask-image: var(--icon-calendar); mask-image: var(--icon-calendar); } body.page-bulk-email-compose [id$="cpMain_divMod"] td[id$="_txtBodyInsertTime"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* Iframe — white surface, no chrome */ body.page-bulk-email-compose [id$="cpMain_divMod"] iframe.EditorTextBox, body.page-bulk-email-compose [id$="cpMain_divMod"] iframe[id$="_txtBodyi"] { background: var(--surface-raised) !important; border: 0 !important; width: 100% !important; min-height: 280px; display: block; } body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorContainer td:has(> iframe.EditorTextBox), body.page-bulk-email-compose [id$="cpMain_divMod"] .EditorContainer td:has(> iframe[id$="_txtBodyi"]) { background: var(--surface-raised) !important; background-color: var(--surface-raised) !important; padding: 0 !important; } /* --- Options row (ZIP CheckBoxList) ------------------------------------ */ body.page-bulk-email-compose [id$="cpMain_divMod"] table[id$="_cblOptions"] { border-collapse: collapse; background: transparent; margin: 0; padding: 0; } body.page-bulk-email-compose [id$="cpMain_divMod"] table[id$="_cblOptions"] td { background: transparent !important; border: 0 !important; padding: 4px 12px 4px 0 !important; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 20px; color: var(--text-primary); vertical-align: middle; } body.page-bulk-email-compose [id$="cpMain_divMod"] table[id$="_cblOptions"] input[type="checkbox"] { width: 16px !important; height: 16px !important; accent-color: var(--brand-primary); margin: 0 8px 0 0 !important; vertical-align: middle; cursor: pointer; } body.page-bulk-email-compose [id$="cpMain_divMod"] table[id$="_cblOptions"] label { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; color: var(--text-primary) !important; vertical-align: middle; cursor: pointer; } /* Hide the legacy zip.gif sprite — keep the "ZIP" text only */ body.page-bulk-email-compose [id$="cpMain_divMod"] table[id$="_cblOptions"] label img { display: none !important; } /* --- Footer (Cancel + Send Email) -------------------------------------- */ body.page-bulk-email-compose [id$="cpMain_divMod"] [id$="_pnlFooter2"], body.page-bulk-email-compose [id$="cpMain_divMod"] .modFooter2 { padding: 20px 0 0 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; display: flex; align-items: center; justify-content: flex-end; /* gap is 0, NOT 10px: the legacy Footer2 markup leaves a collapsible whitespace text node between Cancel and Send Email, which flexbox turns into a zero-width anonymous flex item. A container `gap` then applies on BOTH sides of it, doubling the visible gap to 20px. The 10px spacing is set as margin-left on the Send Email button instead. font-size:0 zeroes the whitespace item's intrinsic width. (Same fix as the cpBulkEmail footer above — see its note.) */ gap: 0; margin-top: 20px; border-top: 1px solid var(--border-default); font-size: 0; } body.page-bulk-email-compose [id$="cpMain_divMod"] .modFooter2 > a { font-size: 14px; } /* Secondary Cancel link — ghost slate */ body.page-bulk-email-compose [id$="cpMain_divMod"] a[id$="_LinkButton1"], body.page-bulk-email-compose a[id$="cpMain_LinkButton1"].LinkButton, body.page-bulk-email-compose a[id$="cpMain_LinkButton1"].LinkButton.Secondary, body.page-bulk-email-compose a[id$="cpMain_LinkButton1"]:link, body.page-bulk-email-compose a[id$="cpMain_LinkButton1"]:visited { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box !important; height: 36px !important; padding: 0 16px !important; background: transparent !important; background-color: transparent !important; background-image: none !important; color: var(--text-muted) !important; font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; border: 1px solid var(--border-default) !important; border-radius: 8px !important; text-decoration: none !important; cursor: pointer; box-shadow: none !important; text-shadow: none !important; margin: 0 !important; } body.page-bulk-email-compose a[id$="cpMain_LinkButton1"]:hover, body.page-bulk-email-compose a[id$="cpMain_LinkButton1"]:focus, body.page-bulk-email-compose a[id$="cpMain_LinkButton1"]:active { background: var(--surface-card) !important; background-color: var(--surface-card) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important; text-decoration: none !important; } /* Primary Send Email button — teal pill */ body.page-bulk-email-compose [id$="cpMain_divMod"] a[id$="_btnSendMail"], body.page-bulk-email-compose a[id$="cpMain_btnSendMail"].LinkButton, body.page-bulk-email-compose a[id$="cpMain_btnSendMail"]:link, body.page-bulk-email-compose a[id$="cpMain_btnSendMail"]:visited { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box !important; height: 36px !important; padding: 0 16px !important; background: var(--brand-primary) !important; background-color: var(--brand-primary) !important; background-image: none !important; color: var(--surface-raised) !important; font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; border: 1px solid var(--brand-primary) !important; border-radius: 8px !important; text-decoration: none !important; cursor: pointer; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); transition: background-color 150ms ease, border-color 150ms ease; text-shadow: none !important; /* 10px left margin = the gap to the Cancel button (container gap is 0; see the whitespace anonymous-flex-item note on the footer above) */ margin: 0 0 0 10px !important; } body.page-bulk-email-compose a[id$="cpMain_btnSendMail"]:hover, body.page-bulk-email-compose a[id$="cpMain_btnSendMail"]:focus, body.page-bulk-email-compose a[id$="cpMain_btnSendMail"]:active { background: var(--brand-primary-hover) !important; background-color: var(--brand-primary-hover) !important; border-color: var(--brand-primary-hover) !important; text-decoration: none !important; color: var(--surface-raised) !important; } body.page-bulk-email-compose a[id$="cpMain_btnSendMail"]:focus { outline: none; box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.25); } body.page-bulk-email-compose a[id$="cpMain_btnSendMail"][disabled], body.page-bulk-email-compose a[id$="cpMain_btnSendMail"].aspNetDisabled { opacity: 0.5; pointer-events: none; } /* Hide the ImageManager + LinkButton spacer */ body.page-bulk-email-compose [id$="cpMain_divMod"] a[id$="_btnSendMail"] img, body.page-bulk-email-compose [id$="cpMain_divMod"] a[id$="_btnSendMail"] ins, body.page-bulk-email-compose [id$="cpMain_divMod"] a[id$="_LinkButton1"] img, body.page-bulk-email-compose [id$="cpMain_divMod"] a[id$="_LinkButton1"] ins { display: none !important; }