/*
 * DirectLine Checklist V5.3 - UOG PCO SaaS UI
 * Version: 2026-07-20.6 (Fixed Hidden Def Boxes & Inline Notes Expansion)
 *
 * Scope:
 *   All rules are intentionally scoped to .dl-checklist-page.
 *   The checklist procedure must add that class to the jQuery Mobile page.
 */

 .dl-checklist-page {
  --ck-bg: #f4f7fb;
  --ck-card: #ffffff;
  --ck-card-muted: #fbfcfe;
  --ck-border: #dce3ec;
  --ck-border-strong: #c6d1df;
  --ck-text: #223044;
  --ck-text-muted: #64748b;
  --ck-primary: #1f67b1;
  --ck-primary-soft: rgba(31, 103, 177, 0.12);
  --ck-pass: #2f7d4a;
  --ck-pass-soft: #edf8f1;
  --ck-fail: #c53b3b;
  --ck-fail-soft: #fff3f3;
  --ck-skip: #64748b;
  --ck-shadow-sm: 0 2px 8px rgba(31, 42, 55, 0.06);
  --ck-shadow-md: 0 12px 30px rgba(15, 23, 42, 0.16);

  background: var(--ck-bg);
  color: var(--ck-text);
}

/* =========================================================
   CRITICAL FIX 1: STRICT HIDE FOR SYSTEM HIDDEN COLUMNS
   (Fixes unwanted Deficiency textboxes showing up)
   ========================================================= */
.dl-checklist-page [style*="display: none"],
.dl-checklist-page [style*="display:none"],
.dl-checklist-page ion-col[id*="_DEF"][style*="display: none"],
.dl-checklist-page ion-col[id*="_DEF"][style*="display:none"],
.dl-checklist-page ion-col[id*="_LASTRESULT"][style*="display: none"],
.dl-checklist-page ion-col[id*="_LASTRESULT"][style*="display:none"] {
  display: none !important;
}

/* Page layout */
.dl-checklist-page .dl-checklist-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 18px 88px;
}

.dl-checklist-page .dl-checklist-grid {
  background: transparent;
  padding: 0;
}

/* Work order / equipment summary */
.dl-checklist-page .dl-check-summary-card {
  margin: 0 0 14px;
  overflow: hidden;
  background: var(--ck-card);
  border: 1px solid var(--ck-border);
  border-radius: 12px;
  box-shadow: var(--ck-shadow-sm);
}

.dl-checklist-page .dl-check-summary-row {
  margin: 0;
  padding: 8px 14px;
  background: transparent;
}

.dl-checklist-page .dl-check-summary-row + .dl-check-summary-row {
  border-top: 1px solid var(--ck-border);
}

.dl-checklist-page .dl-check-summary-row .dlweb-label,
.dl-checklist-page .dl-check-summary-row .dlweb-label-left {
  color: var(--ck-text) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

/* Required progress */
.dl-checklist-page .dl-check-progress-row {
  position: relative;
  z-index: 25;
  display: block !important;
  box-sizing: border-box;
  width: auto;
  margin: 10px 0 14px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--ck-border);
  border-radius: 12px;
  box-shadow: 0 7px 20px rgba(15, 23, 42, 0.13);
  backdrop-filter: blur(9px);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.dl-checklist-page .dl-check-progress-row.is-floating {
  position: fixed !important;
  top: var(--ck-progress-fixed-top, 54px) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1050;
  margin: 0 !important;
}

.dl-checklist-page .dl-check-progress-placeholder {
  display: block;
  width: 100%;
  margin: 10px 0 14px;
  visibility: hidden;
  pointer-events: none;
}

.ui-page:not(.ui-page-active)
.dl-check-progress-row.is-floating {
  display: none !important;
}

.dl-checklist-page .dl-check-progress-row.is-complete {
  border-color: rgba(47, 125, 74, 0.42);
  box-shadow: 0 7px 20px rgba(47, 125, 74, 0.13);
}

.dl-checklist-page .dl-check-progress-line,
.dl-checklist-page .dl-check-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ck-text);
}

.dl-checklist-page .dl-check-progress-line {
  font-size: 13px;
  font-weight: 700;
}

.dl-checklist-page .dl-check-progress-meta {
  min-height: 21px;
  margin-top: 5px;
  color: var(--ck-text-muted);
  font-size: 12px;
  font-weight: 600;
}

.dl-checklist-page .dl-check-progress-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  white-space: nowrap;
}

.dl-checklist-page .dl-check-progress-percent {
  margin-left: 5px;
  color: var(--ck-primary);
  font-weight: 800;
}

.dl-checklist-page .dl-check-progress-remaining.is-ready {
  color: var(--ck-pass);
  font-weight: 800;
}

.dl-checklist-page .dl-check-progress-track {
  height: 7px;
  margin-top: 9px;
  overflow: hidden;
  background: #e7edf4;
  border-radius: 999px;
}

.dl-checklist-page .dl-check-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ck-primary);
  border-radius: 999px;
  transition:
    width 180ms ease,
    background-color 180ms ease;
}

.dl-checklist-page .dl-check-progress-row.is-complete
.dl-check-progress-bar {
  background: var(--ck-pass);
}

.dl-checklist-page .dl-check-fail-badge {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 3px 8px;
  color: var(--ck-fail);
  font-size: 12px;
  font-weight: 700;
  background: var(--ck-fail-soft);
  border-radius: 999px;
}

.dl-checklist-page .dl-check-fail-badge.is-clear {
  color: var(--ck-pass);
  background: var(--ck-pass-soft);
}

/* Section headers */
.dl-checklist-page ion-row.dl-check-section {
  margin: 20px 0 10px !important;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      rgba(31, 103, 177, 0.16),
      rgba(31, 103, 177, 0.05)
    ) !important;
  border: 1px solid rgba(31, 103, 177, 0.25) !important;
  border-left: 4px solid var(--ck-primary) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.dl-checklist-page ion-row.dl-check-section > ion-col {
  padding: 0 12px !important;
  background: transparent !important;
}

.dl-checklist-page ion-row.dl-check-section .dlweb-label-left {
  width: 100% !important;
  padding: 11px 4px !important;
  color: var(--ck-primary) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15px;
  text-align: left !important;
  text-shadow: none !important;
  border: 0 !important;
}

/* Checklist cards */
.dl-checklist-page ion-row.dl-check-card {
  margin: 12px 0 !important;
  padding: 12px 10px !important;
  background: var(--ck-card) !important;
  border: 1px solid var(--ck-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--ck-shadow-sm);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.dl-checklist-page ion-row.dl-check-card:hover {
  border-color: var(--ck-border-strong) !important;
  box-shadow: 0 4px 12px rgba(31, 42, 55, 0.09);
}

.dl-checklist-page .dl-check-card .dlweb-label {
  color: var(--ck-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  text-shadow: none;
}

/* =========================================================
   CRITICAL FIX 2: NOTES SECTION - INLINE & FULL WIDTH FIX
   ========================================================= */
.dl-checklist-page .dl-check-note-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  background: var(--ck-card-muted) !important;
}

.dl-checklist-page .dl-check-note-row > ion-col.dlweb-label {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding-right: 12px !important;
  margin-bottom: 0 !important;
}

.dl-checklist-page .dl-check-note-row .dlweb-label label {
  white-space: nowrap !important;
}

.dl-checklist-page .dl-check-note-row > ion-col.dlweb-data {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.dl-checklist-page .dl-check-meta-row {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  background: var(--ck-card-muted) !important;
}

/* =========================================================
   WRAPPER INNER DIV EXPANSION (Prevents Tiny Input Shrinkage)
   ========================================================= */
.dl-checklist-page .dl-check-card ion-col.dlweb-data:not([style*="display: none"]):not([style*="display:none"]) {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Force inner wrapper elements to stretch completely inside flexbox */
.dl-checklist-page .dl-check-card ion-col.dlweb-data > div:first-child,
.dl-checklist-page .dl-check-card ion-col.dlweb-data [id$="TD21"],
.dl-checklist-page .dl-check-card ion-col.dlweb-data [id$="-NA-FALSE"],
.dl-checklist-page .dl-check-card ion-col.dlweb-data .ui-input-text {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* Result states */
.dl-checklist-page ion-row.dl-result-pass {
  background: var(--ck-pass-soft) !important;
  border-left: 4px solid var(--ck-pass) !important;
}

.dl-checklist-page ion-row.dl-result-fail {
  background: var(--ck-fail-soft) !important;
  border-left: 4px solid var(--ck-fail) !important;
}

.dl-checklist-page ion-row.dl-result-skip {
  border-left: 4px solid var(--ck-skip) !important;
}

/* Form inputs */
.dl-checklist-page .dl-check-card input[type="text"],
.dl-checklist-page .dl-check-card input[type="number"],
.dl-checklist-page .dl-check-card textarea,
.dl-checklist-page .dl-check-card .ui-input-text {
  width: 100% !important;
  border-color: #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* PASS/FAIL/SKIP and YES/NO segmented controls */
.dl-checklist-page .dl-check-radio-group .ui-controlgroup-controls {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 8px !important;
}

.dl-checklist-page .dl-check-radio-group .ui-radio {
  flex: 1 1 0% !important; /* Equal distribution automatically */
  display: block !important;
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Reduced size for buttons */
.dl-checklist-page .dl-check-radio-group .ui-radio .ui-btn {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 34px !important; 
  margin: 0 !important;
  padding: 8px 8px !important; 
  color: var(--ck-text) !important;
  font-size: 13px !important; 
  text-align: center !important;
  text-shadow: none !important;
  background: #ffffff !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 9px !important;
  transition: all 150ms ease;
}

.dl-checklist-page .dl-check-radio-group .ui-radio .ui-btn:hover {
  background: #f6f9fd !important;
  border-color: #aebed1 !important;
}

.dl-checklist-page .dl-check-radio-group .ui-radio .ui-btn.ui-btn-active {
  color: #ffffff !important;
}

/* Active State Colors */
.dl-checklist-page ion-row[data-input-type="PASS-FAIL"] .ui-radio:first-of-type .ui-btn.ui-btn-active,
.dl-checklist-page ion-row[data-input-type="YES-NO"] .ui-radio:first-of-type .ui-btn.ui-btn-active {
  background: var(--ck-pass) !important;
  border-color: var(--ck-pass) !important;
}

.dl-checklist-page ion-row[data-input-type="PASS-FAIL"] .ui-radio:last-of-type .ui-btn.ui-btn-active,
.dl-checklist-page ion-row[data-input-type="YES-NO"] .ui-radio:last-of-type .ui-btn.ui-btn-active {
  background: var(--ck-fail) !important;
  border-color: var(--ck-fail) !important;
}

/* Fixing the "Skip" (Middle) button white-on-white issue */
.dl-checklist-page ion-row[data-input-type="PASS-FAIL"] .ui-radio:nth-of-type(2):not(:last-of-type) .ui-btn.ui-btn-active {
  background: var(--ck-skip) !important;
  border-color: var(--ck-skip) !important;
  color: #ffffff !important;
}

/* OPTION-LIST closed control */
.dl-checklist-page .dl-check-select-row .dlweb-listbox {
  position: relative;
}

.dl-checklist-page .dl-check-select-row .ui-select {
  width: 100%;
  margin: 0 !important;
}

.dl-checklist-page .dl-check-select-row .ui-select .ui-btn {
  box-sizing: border-box;
  min-height: 44px;
  padding: 11px 44px 11px 13px !important;
  color: var(--ck-text) !important;
  font-weight: 600 !important;
  text-align: left !important;
  text-shadow: none !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 9px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

.dl-checklist-page .dl-check-select-row .ui-select .ui-btn:after {
  background-color: var(--ck-primary) !important;
  border-radius: 50% !important;
}

.dl-checklist-page .dl-check-select-row .ui-select .ui-btn:hover {
  border-color: #9fb2ca !important;
  box-shadow: 0 0 0 3px rgba(31, 103, 177, 0.08) !important;
}

.dl-checklist-page .dl-check-select-row .ui-select .ui-btn:focus {
  border-color: var(--ck-primary) !important;
  box-shadow: 0 0 0 3px rgba(31, 103, 177, 0.14) !important;
}

.dl-checklist-page .dl-check-select-row .ui-select .ui-btn span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Scoped selectmenu popups */
.ui-selectmenu.ui-popup.dl-check-selectmenu {
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid #d7e0eb !important;
  border-radius: 12px !important;
  box-shadow: var(--ck-shadow-md) !important;
}

.dl-check-selectmenu .ui-selectmenu-list .ui-li-static,
.dl-check-selectmenu .ui-selectmenu-list .ui-btn {
  min-height: 44px !important;
  padding: 12px 16px !important;
  color: #223044 !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  background: #ffffff !important;
  border-color: #edf1f6 !important;
}

.dl-check-selectmenu .ui-selectmenu-list .ui-btn:hover {
  background: #f3f7fc !important;
}

.dl-check-selectmenu .ui-selectmenu-list .ui-btn.ui-btn-active {
  color: #ffffff !important;
  background: #1f67b1 !important;
}

/* Action and camera controls alignment cleanup */
.dl-checklist-page .dl-check-card [id$="TD2_BACTION"],
.dl-checklist-page .dl-check-card [id$="TD2_BCAM"] {
  float: none !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  top: auto !important;
  left: auto !important;
}

.dl-checklist-page .dl-check-card .ui-btn-icon-notext {
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* Additional deficiency and checklist completion */
.dl-checklist-page .dl-check-aux-card,
.dl-checklist-page .dl-check-completion-card {
  margin: 14px 0 !important;
  padding: 10px 12px !important;
  background: var(--ck-card);
  border: 1px solid var(--ck-border);
  border-radius: 12px;
}

/* Sticky save row */
.dl-checklist-page .dl-check-save-row {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin: 18px -18px 0 !important;
  padding: 10px 18px !important;
  background: rgba(244, 247, 251, 0.96) !important;
  border-top: 1px solid var(--ck-border);
  backdrop-filter: blur(8px);
}

.dl-checklist-page .dl-check-save-row .ui-btn {
  max-width: 460px;
  margin: 0 auto !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  background: var(--ck-primary) !important;
  border-color: var(--ck-primary) !important;
  border-radius: 9px !important;
}

/* Tablet/mobile */
@media (max-width: 700px) {
  .dl-checklist-page .dl-checklist-content {
    padding: 8px 8px 82px;
  }

  .dl-checklist-page ion-row.dl-check-card > ion-col {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .dl-checklist-page .dl-check-card .dlweb-label {
    padding-bottom: 8px !important;
  }

  .dl-checklist-page .dl-check-save-row {
    margin-right: -8px !important;
    margin-left: -8px !important;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .dl-checklist-page {
    --ck-bg: #111827;
    --ck-card: #1f2937;
    --ck-card-muted: #182231;
    --ck-border: #374151;
    --ck-border-strong: #4b5563;
    --ck-text: #f3f4f6;
    --ck-text-muted: #cbd5e1;
    --ck-primary: #60a5fa;
    --ck-pass-soft: #16291f;
    --ck-fail-soft: #2a1f23;
    --ck-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.22);
    --ck-shadow-md: 0 16px 40px rgba(0, 0, 0, 0.38);
  }

  .dl-checklist-page .dl-check-progress-row {
    background: rgba(31, 41, 55, 0.96);
  }

  .dl-checklist-page .dl-check-progress-track {
    background: #374151;
  }

  .dl-checklist-page ion-row.dl-check-section {
    background:
      linear-gradient(
        90deg,
        rgba(59, 130, 246, 0.24),
        rgba(59, 130, 246, 0.07)
      ) !important;
    border-color: rgba(96, 165, 250, 0.32) !important;
  }

  .dl-checklist-page ion-row.dl-check-section .dlweb-label-left {
    color: #93c5fd !important;
  }

  .dl-checklist-page .dl-check-card input,
  .dl-checklist-page .dl-check-card textarea,
  .dl-checklist-page .dl-check-card .ui-input-text,
  .dl-checklist-page .dl-check-radio-group .ui-radio .ui-btn,
  .dl-checklist-page .dl-check-select-row .ui-select .ui-btn {
    color: #f3f4f6 !important;
    background: #111827 !important;
    border-color: #4b5563 !important;
  }

  .ui-selectmenu.ui-popup.dl-check-selectmenu {
    background: #1f2937 !important;
    border-color: #4b5563 !important;
  }

  .dl-check-selectmenu .ui-selectmenu-list .ui-li-static,
  .dl-check-selectmenu .ui-selectmenu-list .ui-btn {
    color: #f3f4f6 !important;
    background: #1f2937 !important;
    border-color: #374151 !important;
  }

  .dl-check-selectmenu .ui-selectmenu-list .ui-btn:hover {
    background: #273449 !important;
  }

  .dl-checklist-page .dl-check-save-row {
    background: rgba(17, 24, 39, 0.96) !important;
  }
}

/* ------------------------------------------------------------------
 * Compact density overrides - UOG PCO
 * Version: 2026-07-20.6
 * ------------------------------------------------------------------ */

.dl-checklist-page .dl-checklist-content {
  padding: 10px 14px 76px;
}

.dl-checklist-page .dl-check-summary-row {
  padding: 6px 12px;
}

.dl-checklist-page .dl-check-summary-row .dlweb-label,
.dl-checklist-page .dl-check-summary-row .dlweb-label-left {
  font-size: 14px !important;
}

.dl-checklist-page .dl-check-progress-row {
  padding: 8px 12px;
  border-radius: 10px;
}

.dl-checklist-page .dl-check-progress-line {
  font-size: 12px;
}

.dl-checklist-page .dl-check-progress-meta {
  min-height: 18px;
  margin-top: 3px;
  font-size: 11px;
}

.dl-checklist-page .dl-check-progress-track {
  height: 6px;
  margin-top: 7px;
}

.dl-checklist-page .dl-check-fail-badge {
  padding: 2px 7px;
  font-size: 11px;
}

.dl-checklist-page ion-row.dl-check-section {
  margin: 13px 0 7px !important;
  border-radius: 9px !important;
}

.dl-checklist-page ion-row.dl-check-section > ion-col {
  padding: 0 10px !important;
}

.dl-checklist-page ion-row.dl-check-section .dlweb-label-left {
  padding: 8px 3px !important;
  font-size: 14px !important;
}

.dl-checklist-page ion-row.dl-check-card {
  margin: 8px 0 !important;
  padding: 8px 8px !important;
  border-radius: 10px !important;
}

.dl-checklist-page .dl-check-card .dlweb-label {
  font-size: 13px;
  line-height: 1.35;
}

.dl-checklist-page .dl-check-note-row {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.dl-checklist-page .dl-check-note-row .dlweb-label {
  font-size: 12px !important;
}

.dl-checklist-page .dl-check-note-row input[type="text"],
.dl-checklist-page .dl-check-note-row .ui-input-text {
  min-height: 34px !important;
}

.dl-checklist-page .dl-check-meta-row {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.dl-checklist-page .dl-check-card input[type="text"],
.dl-checklist-page .dl-check-card input[type="number"],
.dl-checklist-page .dl-check-card textarea,
.dl-checklist-page .dl-check-card .ui-input-text {
  min-height: 34px !important;
  font-size: 13px !important;
}

.dl-checklist-page .dl-check-radio-group .ui-controlgroup-controls {
  gap: 6px !important;
}

/* More compact buttons */
.dl-checklist-page .dl-check-radio-group .ui-radio .ui-btn {
  min-height: 30px !important;
  padding: 5px 6px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}

.dl-checklist-page .dl-check-select-row .ui-select .ui-btn {
  min-height: 38px;
  padding: 8px 40px 8px 11px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

.dl-check-selectmenu .ui-selectmenu-list .ui-li-static,
.dl-check-selectmenu .ui-selectmenu-list .ui-btn {
  min-height: 38px !important;
  padding: 9px 13px !important;
  font-size: 13px !important;
}

/* Adjusted alignment on compact view for side buttons */
.dl-checklist-page .dl-check-card .ui-btn-icon-notext {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
}

.dl-checklist-page .dl-check-aux-card,
.dl-checklist-page .dl-check-completion-card {
  margin: 10px 0 !important;
  padding: 8px 10px !important;
  border-radius: 10px;
}

.dl-checklist-page .dl-check-save-row {
  margin-top: 12px !important;
  padding: 8px 14px !important;
}

.dl-checklist-page .dl-check-save-row .ui-btn {
  min-height: 38px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
}

@media (max-width: 700px) {
  .dl-checklist-page .dl-checklist-content {
    padding: 6px 7px 72px;
  }

  .dl-checklist-page ion-row.dl-check-card {
    margin: 7px 0 !important;
    padding: 8px 7px !important;
  }

  .dl-checklist-page .dl-check-card .dlweb-label {
    padding-bottom: 5px !important;
  }

  .dl-checklist-page .dl-check-save-row {
    margin-right: -7px !important;
    margin-left: -7px !important;
  }
}

/* ;*DL-LL 2026-07-21 Keep checklist action buttons compact */
.dl-checklist-page .dl-check-card [id$="TD2_BACTION"],
.dl-checklist-page .dl-check-card [id$="TD2_BCAM"] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;

  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;

  padding: 0 !important;
  margin: 0 0 0 5px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;

  float: none !important;
  top: auto !important;
  left: auto !important;
  border-radius: 8px !important;
}

/* The jQuery Mobile input is only the transparent click target */
.dl-checklist-page .dl-check-card
[id$="TD2_BACTION"] > input[type="button"] {
  position: absolute !important;
  inset: 0 !important;

  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

/* Keep bullets and camera icons centered */
.dl-checklist-page .dl-check-card
[id$="TD2_BACTION"]::after,
.dl-checklist-page .dl-check-card
[id$="TD2_BCAM"]::after {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: -11px 0 0 -11px !important;
}