/* ==========================================================================
   Component: Manage Quotes admin view (body.page-view-manage-quotes)
   Internal staff tool (Views + Better Exposed Filters) for browsing,
   filtering, and acting on quotes — not customer-facing, so styled for
   legibility rather than as a marketing layout. Status colours here are the
   tool's own long-standing colour-coding (not the site's one-accent-red
   design tokens) — deliberately kept distinct per status for fast scanning.

   The "Action" column's <a> icons (fa fa-edit, fa fa-file-pdf-o, etc.) rely
   on Font Awesome 4 icon names, but no Font Awesome font was loaded
   anywhere on this site — see the `font-awesome` library added in
   cm26.libraries.yml (global-styling now depends on it) for the fix.
   ========================================================================== */

body.page-view-manage-quotes .cm-container {
  max-width: 1400px;
  padding-block: 32px 88px;
}

/* --- Header action links (Add new / View Calendar / Manage Booked Events) */
body.page-view-manage-quotes .view-header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

body.page-view-manage-quotes .view-header .btn-theme {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-pill);
  background: #fff;
  color: var(--cm-ink);
  text-decoration: none;
  transition: border-color var(--cm-dur) var(--cm-ease), color var(--cm-dur) var(--cm-ease);
}

body.page-view-manage-quotes .view-header .btn-theme:hover {
  border-color: var(--cm-ink);
}

body.page-view-manage-quotes .view-header .btn-theme:first-child {
  background: var(--cm-red);
  border-color: var(--cm-red);
  color: #fff;
}

body.page-view-manage-quotes .view-header .btn-theme:first-child:hover {
  background: var(--cm-red-hover);
  border-color: var(--cm-red-hover);
}

/* --- Exposed filters -------------------------------------------------------- */
body.page-view-manage-quotes .view-filters {
  background: #fff;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-card);
  padding: 24px 28px;
  margin-bottom: 32px;
}

/* Manage Booked Events specifically (scoped by path, not the shared body
   class, so the Manage Quotes display keeps its own 32px gap) — tighten
   the gap before the results table. */
body.path-manage-booked-events-new .view-filters {
  margin-bottom: 32px;
}

/* This display has no Client field pushing the Search button to the right
   (unlike Manage Quotes), so the status chips + Search just clustered at
   the left — center the whole row instead. */
body.path-manage-booked-events-new .views-exposed-form .d-flex {
  justify-content: center;
}

body.page-view-manage-quotes .views-exposed-form .d-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}




body.path-scanners-numbers3wy76d .views-field-sid-3, 
body.path-scanners-numbers3wy76d .views-field-sid-2, 
body.path-scanners-numbers3wy76d .views-field-webform-submission-value-14, 
body.path-scanners-numbers3wy76d .views-field-field-adnl-scnr-chrgs, 
body.path-scanners-numbers3wy76d .views-field-field-scnr-prc, 
body.path-scanner-numbers3wy76d .views-field-field-adnl-scnr-chrgs, 
body.path-scanner-numbers3wy76d .views-field-field-scnr-prc {
  display: none;
}

/* Status chips on the left; Client field + Search button (via the
   margin-left: auto on .js-form-item-client below) pushed to the right —
   all sharing a single row. Wraps to stacked rows only if the viewport is
   too narrow to fit everything (see the 900px media query further down).

   IDs below use attribute prefix/suffix matching, not exact #id selectors:
   Drupal's AJAX-rebuilt exposed filter form (submitting via the Search
   button, as opposed to a fresh page load of the same URL) appends a
   random unique-id suffix to every element id — e.g.
   "edit-status--wrapper" becomes "edit-status--zvI80t0n-LI--wrapper" and
   "edit-captcha" becomes "edit-captcha--Q3c5V6D3MuY". Exact #id selectors
   silently stop matching the moment that happens, so the whole filter
   block reverts to unstyled markup (visible "Status" legend, stacked
   checkboxes, visible CAPTCHA text) even though nothing is actually
   broken server-side — only after an AJAX-driven filter submit, not a
   plain page load. Tag names disambiguate the prefix matches below
   (fieldset vs. div vs. input all share the "edit-status" id root). */
body.page-view-manage-quotes fieldset[id^="edit-status--"][id$="--wrapper"] {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  overflow-x: auto;
}

/* "STATUS" legend removed entirely — the coloured chips are self-
   explanatory without it. */
body.page-view-manage-quotes fieldset[id^="edit-status--"][id$="--wrapper"] .fieldset-legend {
  display: none;
}

/* Unwrap the fieldset's own wrapper div so its checkbox row becomes a
   direct flex child of the fieldset. */
body.page-view-manage-quotes fieldset[id^="edit-status--"][id$="--wrapper"] .fieldset-wrapper {
  display: contents;
}

body.page-view-manage-quotes div[id^="edit-status"] {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

/* The actual checkbox row lives one level deeper, inside a
   .form-checkboxes.bef-checkboxes wrapper div that Better Exposed Filters
   renders between #edit-status and each .form-check — flex needs to be
   set HERE, not just on #edit-status, or the checkboxes stack as normal
   block-level siblings inside it. */
body.page-view-manage-quotes div[id^="edit-status"] .form-checkboxes {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

/* Status checkboxes as toggle chips: the native checkbox stays functional
   and keyboard-focusable (just visually hidden via a "visually-hidden"
   clip, not display:none, so it's still tabbable) and its label becomes
   the clickable pill. Each chip is coloured to match its own status's pill
   colour in the results table below (see "Status pills" further down) —
   an outline of that colour while unchecked, filled solid when checked.
   Targeted via the stable per-option classes Drupal/BEF generate
   (.form-item-status-quoted, .form-item-status-won, etc.), not the
   option text, since "Won" is the actual submitted value for
   "Won Attending" (not a typo). */
body.page-view-manage-quotes .form-check {
  display: flex;
  align-items: center;
  margin-bottom: 0 !important;
}

body.page-view-manage-quotes .form-check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.page-view-manage-quotes .form-check-label {
  margin: 0;
  padding: 7px 16px;
  border: 1.5px solid var(--cm-hairline);
  border-radius: var(--cm-radius-pill);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cm-ink);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--cm-dur) var(--cm-ease), border-color var(--cm-dur) var(--cm-ease),
    color var(--cm-dur) var(--cm-ease);
}

body.page-view-manage-quotes .form-check-label:hover {
  opacity: 0.82;
}

body.page-view-manage-quotes .form-check-input:focus-visible + .form-check-label {
  outline: 2px solid var(--cm-red);
  outline-offset: 2px;
}

body.page-view-manage-quotes .form-item-status-quoted .form-check-label {
  border-color: #464a8e;
}

body.page-view-manage-quotes .form-item-status-won .form-check-label {
  border-color: #1e8e3e;
}

body.page-view-manage-quotes .form-item-status-won-not-attending .form-check-label {
  border-color: #add8e6;
}

body.page-view-manage-quotes .form-item-status-complete .form-check-label {
  border-color: #000;
}

body.page-view-manage-quotes .form-item-status-lost .form-check-label {
  border-color: #cb1313;
}

body.page-view-manage-quotes .form-item-status-quoted .form-check-input:checked + .form-check-label {
  background: #464a8e;
  color: #fff;
}

body.page-view-manage-quotes .form-item-status-won .form-check-input:checked + .form-check-label {
  background: #1e8e3e;
  color: #fff;
}

body.page-view-manage-quotes .form-item-status-won-not-attending .form-check-input:checked + .form-check-label {
  background: #add8e6;
  color: #182029;
}

body.page-view-manage-quotes .form-item-status-complete .form-check-input:checked + .form-check-label {
  background: #000;
  color: #fff;
}

body.page-view-manage-quotes .form-item-status-lost .form-check-input:checked + .form-check-label {
  background: #cb1313;
  color: #fff;
}

body.page-view-manage-quotes .js-form-item-client {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

body.page-view-manage-quotes .js-form-item-client label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cm-muted-2);
  white-space: nowrap;
  margin: 0;
}

body.page-view-manage-quotes input[id^="edit-client"] {
  min-width: 260px;
  padding: 10px 16px;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-pill);
  font: inherit;
  font-size: 14.5px;
  color: var(--cm-ink);
}

body.page-view-manage-quotes input[id^="edit-client"]:focus {
  outline: none;
  border-color: var(--cm-ink);
}

/* CAPTCHA admin notice — informational only (shown to users who can bypass
   CAPTCHA), not part of the actual filter form. Not useful here. Prefix
   match, not exact #id — see the comment above the Status fieldset rule
   for why (AJAX-rebuilt forms get a randomized id suffix). */
body.page-view-manage-quotes [id^="edit-captcha"] {
  display: none;
}

body.page-view-manage-quotes .form-actions {
  margin: 0;
}

body.page-view-manage-quotes .form-actions .form-submit {
  appearance: none;
  background: var(--cm-red);
  border: 1px solid var(--cm-red);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  padding: 10px 28px;
  border-radius: var(--cm-radius-pill);
  cursor: pointer;
  transition: background var(--cm-dur) var(--cm-ease), border-color var(--cm-dur) var(--cm-ease);
}

body.page-view-manage-quotes .form-actions .form-submit:hover {
  background: var(--cm-red-hover);
  border-color: var(--cm-red-hover);
}

/* --- Results table ----------------------------------------------------------*/
body.page-view-manage-quotes .view-content {
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-card);
}

body.page-view-manage-quotes table.table {
  margin: 0;
  font-size: 14px;
  color: var(--cm-ink);
}

body.page-view-manage-quotes table.table thead th {
  background: var(--cm-navy);
  color: var(--cm-on-dark);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 16px;
  border: none;
  white-space: nowrap;
}

body.page-view-manage-quotes table.table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  border-top: 1px solid var(--cm-paper-3);
}

body.page-view-manage-quotes table.table tbody tr:nth-child(even) {
  background: var(--cm-paper);
}

body.page-view-manage-quotes table.table tbody tr:hover {
  background: var(--cm-paper-2);
}

/* Numeric columns, right-aligned with trustworthy tabular figures. */
body.page-view-manage-quotes .views-field-field-qtn-sb-ttl,
body.page-view-manage-quotes .views-field-field-vat-reversal {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Quote no., Date, Status, Action, and Starting date columns, centered
   (both header and body). */
body.page-view-manage-quotes th.views-field-field-qt-no,
body.page-view-manage-quotes th.views-field-field-qt-dt,
body.page-view-manage-quotes th.views-field-field-qt-sts,
body.page-view-manage-quotes th.views-field-nid,
body.page-view-manage-quotes th.views-field-field-qt-srtdt,
body.page-view-manage-quotes .views-field-field-qt-no,
body.page-view-manage-quotes .views-field-field-qt-dt,
body.page-view-manage-quotes .views-field-field-qt-sts,
body.page-view-manage-quotes .views-field-nid,
body.page-view-manage-quotes .views-field-field-qt-srtdt {
  text-align: center;
}

/* --- Status pills -------------------------------------------------------------
   The field template outputs the status value AS the span's class, e.g.
   <span class="Quoted">, <span class="Won Attending"> (two class tokens:
   Won + Attending), <span class="Won Not Attending"> (three: Won + Not +
   Attending). The 3-class selector for "Won Not Attending" has higher
   specificity than the 2-class "Won Attending" one, so it wins correctly
   even though both match a "Won Not Attending" span. */
body.page-view-manage-quotes .views-field-field-qt-sts span {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--cm-radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--cm-paper-3);
  color: var(--cm-muted);
}

body.page-view-manage-quotes .views-field-field-qt-sts span.Quoted {
  background: #464a8e;
  color: #fff;
}

body.page-view-manage-quotes .views-field-field-qt-sts span.Won.Attending {
  background: #1e8e3e;
  color: #fff;
}

/* Higher specificity (3 classes) than "Won Attending" above (2 classes),
   so "Won Not Attending" wins even though it also matches .Won.Attending. */
body.page-view-manage-quotes .views-field-field-qt-sts span.Won.Not.Attending {
  background: #add8e6;
  color: #182029;
}

body.page-view-manage-quotes .views-field-field-qt-sts span.Complete {
  background: #000;
  color: #fff;
}

body.page-view-manage-quotes .views-field-field-qt-sts span.Lost {
  background: #cb1313;
  color: #fff;
}

/* --- Action column ---------------------------------------------------------
   Each link's `title` attribute (Edit, Quotation, Invoice, ...) still carries
   the accessible/hover-tooltip label; the icon itself is now the visible
   content once Font Awesome is loaded (see cm26.libraries.yml). */
body.page-view-manage-quotes .views-field-nid {
  min-width: 210px;
  white-space: nowrap;
}

body.page-view-manage-quotes .views-field-nid a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 2px;
  border: 1px solid var(--cm-hairline);
  border-radius: 50%;
  color: var(--cm-ink);
  text-decoration: none;
  transition: border-color var(--cm-dur) var(--cm-ease), color var(--cm-dur) var(--cm-ease),
    background var(--cm-dur) var(--cm-ease);
}

body.page-view-manage-quotes .views-field-nid a:hover {
  border-color: var(--cm-red);
  color: var(--cm-red);
  background: var(--cm-red-tint);
}

body.page-view-manage-quotes .views-field-nid a i {
  font-size: 14px;
}

/* --- Action column: settings dropdown ---------------------------------------
   js/manage-quotes.js collapses the row of icon links above into a single
   "settings" gear button; the links themselves are moved (not cloned) into
   a menu appended to <body> and positioned with fixed coordinates so it
   floats above the table regardless of the table's own scroll container.
   The rules above remain as a no-JS fallback if the behavior hasn't run. */
body.page-view-manage-quotes .views-field-nid {
  min-width: 60px;
}

body.page-view-manage-quotes .cm-qa-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--cm-hairline);
  border-radius: 50%;
  background: transparent;
  color: var(--cm-ink);
  cursor: pointer;
  transition: border-color var(--cm-dur) var(--cm-ease), color var(--cm-dur) var(--cm-ease);
}

body.page-view-manage-quotes .cm-qa-toggle:hover,
body.page-view-manage-quotes .cm-qa-toggle[aria-expanded="true"] {
  border-color: var(--cm-red);
  color: var(--cm-red);
}

body.page-view-manage-quotes .cm-qa-toggle i {
  font-size: 18px;
}

body.page-view-manage-quotes .cm-qa-menu {
  display: none;
  position: fixed;
  z-index: 1000;
  min-width: 200px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-insert);
  box-shadow: var(--cm-shadow);
}

body.page-view-manage-quotes .cm-qa-menu.is-open {
  display: block;
}

body.page-view-manage-quotes .cm-qa-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--cm-radius-insert);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cm-ink);
  text-decoration: none;
  white-space: nowrap;
}

body.page-view-manage-quotes .cm-qa-menu-item:hover {
  background: var(--cm-paper);
  color: var(--cm-red);
}

body.page-view-manage-quotes .cm-qa-menu-item i {
  width: 16px;
  text-align: center;
  font-size: 13px;
}

body.page-view-manage-quotes .cm-qa-menu-item::after {
  content: attr(title);
}

@media (max-width: 900px) {
  body.page-view-manage-quotes .views-exposed-form .d-flex {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  body.page-view-manage-quotes .js-form-item-client {
    margin-left: 0;
  }

  body.page-view-manage-quotes .form-actions {
    align-self: flex-start;
  }
}

/* ==========================================================================
   Manage Booked Events (same view/body class, "manage-booked-events-new"
   display) — adds per-row editable entity-form-field columns (Type, Badge
   Code, Source, Checklist) on top of the read-only Manage Quotes table
   above. Two issues specific to this display:
   1) The sitewide `strong{ font-size:20px; line-height:28px; ... }` rule in
      base.css (meant for content pseudo-headings) bleeds into the "Title -"
      / "Client -" labels this view's row template wraps in <strong>,
      blowing every row out to ~380px tall. Reset back to the table's own
      14px text here (see the same fix applied to the events calendar in
      calendar-view.css).
   2) Each single-field column (Type/Badge Code/Source) renders its own
      Drupal form-item <label> that just repeats the column header
      ("Type" under a "TYPE" header) — visually hidden here, same
      clip-based pattern already used above for the status filter chips.
   ========================================================================== */
body.page-view-manage-quotes table.views-table strong {
  font-size: inherit;
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  line-height: inherit;
  padding-bottom: 0;
  display: inline;
}

body.page-view-manage-quotes table.views-table tbody td {
  vertical-align: top;
}

/* Status/Type/Badge Code/Source only ever hold a single short control each,
   while Title and Checklist stack several fields and end up setting the
   (much taller) row height — center the short columns within that height
   instead of leaving them pinned to the top with dead space below. */
body.page-view-manage-quotes table.views-table tbody .views-field-field-qt-srtdt,
body.page-view-manage-quotes table.views-table tbody .views-field-field-qt-sts,
body.page-view-manage-quotes table.views-table tbody .views-field-form-field-field-badge-type,
body.page-view-manage-quotes table.views-table tbody .views-field-form-field-field-badge-code,
body.page-view-manage-quotes table.views-table tbody .views-field-form-field-field-data-means {
  vertical-align: middle;
}

body.page-view-manage-quotes .views-field-title {
  min-width: 220px;
  line-height: 1.5;
}

/* The row template inserts a manual <br> after the Badgely URL field for
   paragraph spacing (same pattern as .evntSummary elsewhere), but the
   field wrapper itself also carries Bootstrap's mb-3 (16px) margin —
   stacking both left a large blank gap before "View Quote" below it. */
body.page-view-manage-quotes .views-field-title .field--name-field-badgely-url {
  margin-bottom: 0 !important;
}

body.page-view-manage-quotes .views-field-title .field--name-field-badgely-url label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cm-muted-2);
  margin: 6px 0 3px;
}

body.page-view-manage-quotes .views-field-title .field--name-field-badgely-url .description {
  display: none;
}

body.page-view-manage-quotes .views-field-form-field-field-badge-type .js-form-item > label,
body.page-view-manage-quotes .views-field-form-field-field-badge-code .js-form-item > label,
body.page-view-manage-quotes .views-field-form-field-field-data-means .js-form-item > label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Select2-enhanced <select> widgets (Type / Badge Code) — restyle the
   generated control to match the theme instead of Select2's default grey
   box, since the native <select> itself is visually hidden by Select2. */
body.page-view-manage-quotes .select2-container--default .select2-selection--single {
  height: auto;
  padding: 8px 12px;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-insert);
  font-family: var(--cm-font);
}

body.page-view-manage-quotes .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  font-size: 13.5px;
  color: var(--cm-ink);
  line-height: 1.3;
}

body.page-view-manage-quotes .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
}

/* Select2 renders as an inline-block narrower than its cell but doesn't
   center itself by default — it just sits at the cell's left edge. */
body.page-view-manage-quotes .views-field-form-field-field-badge-type .select2-container,
body.page-view-manage-quotes .views-field-form-field-field-badge-code .select2-container {
  display: block;
  margin: 0 auto;
}

body.page-view-manage-quotes .views-field-form-field-field-data-means input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-insert);
  font: inherit;
  font-size: 13.5px;
  color: var(--cm-ink);
}

/* Source ("Means") is actually a native <select multiple> listbox, not a
   text field — style and center it to match the Select2 dropdowns. */
body.page-view-manage-quotes .views-field-form-field-field-data-means select[multiple] {
  display: block;
  width: 150px;
  margin: 0 auto;
  padding: 6px;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-insert);
  font: inherit;
  font-size: 13px;
  color: var(--cm-ink);
}

/* --- Checklist column: visible checkbox + colour-coded label ---------------
   Reuses the same .form-check/.form-check-input/.form-check-label markup
   as the status filter chips above, but wants the opposite treatment here
   (per the user's reference from their old site): a real, visible checkbox
   next to bold italic text — red while unchecked, green with a
   strikethrough once checked — rather than a hidden checkbox turned into a
   pill button. The extra class in each selector below gives these rules
   enough specificity to win over the generic .form-check-input/-label
   rules further up this file. */
body.page-view-manage-quotes .views-field-form-field-field-echk-htl-bkd .fieldset-legend {
  display: none;
}

body.page-view-manage-quotes .views-field-form-field-field-echk-htl-bkd fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

body.page-view-manage-quotes .views-field-form-field-field-echk-htl-bkd .form-wrapper.mb-3 {
  margin-bottom: 8px !important;
}

body.page-view-manage-quotes .views-field-form-field-field-echk-htl-bkd .form-check {
  gap: 8px;
}

body.page-view-manage-quotes .views-field-form-field-field-echk-htl-bkd .form-check-input {
  position: static;
  width: 18px;
  height: 18px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  accent-color: #1e8e3e;
  cursor: pointer;
  flex-shrink: 0;
}

body.page-view-manage-quotes .views-field-form-field-field-echk-htl-bkd .form-check-label {
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  color: var(--cm-red);
  cursor: pointer;
}

body.page-view-manage-quotes .views-field-form-field-field-echk-htl-bkd .form-check-input:checked + .form-check-label {
  background: none;
  color: #1e8e3e;
  text-decoration: line-through;
}