/* =========== Global / tiles (unchanged) =========== */
.content-area{padding-top:0!important;margin-top:0!important}
.dashboard-menu-grid{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;margin-top:20px}
.dashboard-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;width:220px;height:160px;border-radius:25px;text-decoration:none;font-weight:700;font-style:italic;box-shadow:0 4px 10px rgba(0,0,0,.1);transition:transform .2s,box-shadow .2s}
.dashboard-tile .icon{font-size:2.5rem;margin-bottom:10px}
.dashboard-tile .label{font-size:1.1rem;color:#1a334d}
.dashboard-tile:hover{transform:scale(1.05);box-shadow:0 6px 15px rgba(0,0,0,.2)}
.peach{background:#ffcaa7}.blue{background:#8ec1ce}.green{background:#d3ead3}

/* =========== Question card (catalog) =========== */
.mcq-option{margin-bottom:9px;display:block}
.mcq-image:empty{display:none;height:0!important;margin:0!important;padding:0!important}
.question-card{position:relative;box-sizing:border-box;width:100%;text-align:left;padding:12px 72px 12px 16px;border:1px solid #dbe2ea;border-radius:12px;background:#fff;--wp--style--block-gap:0;min-height:76px!important;overflow:hidden}
.question-card>*,.question-card .wp-block{margin:0!important}
.question-card .wp-block-jet-engine-dynamic-field{margin:0!important;line-height:1.25;white-space:normal}
.question-card .wp-block-jet-engine-dynamic-field p{margin:0!important}

/* button wrappers */
.question-card .wp-block-buttons{margin:0!important;padding:0!important;gap:0!important;width:auto!important;display:block!important}

/* add-to-test button pinned top-right */
.question-card .add-to-test,
.question-card .wp-block-button.add-to-test,
.question-card .wp-block-buttons.add-to-test{
  position:absolute!important;top:12px!important;right:12px!important;left:auto!important;transform:none!important;margin:0!important;padding:0!important;max-width:none!important
}
.question-card .add-to-test,
.question-card .add-to-test .wp-block-button__link{
  display:flex!important;align-items:center;justify-content:center;width:44px!important;height:44px!important;min-width:44px!important;border-radius:9999px!important;background:#1e4b5f;color:#fff;border:0;text-decoration:none;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,.08);cursor:pointer
}
@media (max-width:480px){
  .question-card{padding-right:60px;min-height:68px!important}
  .question-card .add-to-test,
  .question-card .add-to-test .wp-block-button__link{width:40px!important;height:40px!important}
}
/* hide per-card ids/marks in catalog */
.question-card .qid,.question-card .qmarks{display:none!important}

/* Show marks neatly when needed elsewhere */
.question-card .q-marks,.q-marks{
  display:inline-block!important;white-space:nowrap!important;width:auto!important;
  min-width:unset!important;line-height:1!important;margin:0 .35rem 0 0!important;padding:0!important
}
.q-marks>*{display:inline!important;white-space:inherit!important}
.question-card .q-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:.5rem!important}

/* ====================================================================== */
/* =========== Test Preview (RIGHT PANE) — single source of truth ======= */
/* ====================================================================== */

#test-preview{
  max-width:794px;margin:8px auto;background:#fff;line-height:1.5;
}
#test-preview .tp-list{list-style:none;padding:0;margin:8px 0}
#test-preview .tp-list>li{margin:6px 0;padding:6px 0;border-bottom:1px dashed #eee}

/* header/control bars: no clipping, wrap nicely */
#test-preview .tp-header,
#test-preview .tp-sections,
#test-preview .tp-groups{
  overflow:visible!important;display:flex!important;flex-wrap:wrap!important;
  gap:.5rem!important;align-items:center!important
}
#test-preview .tp-sections{margin-left:auto!important}
#test-preview .tp-header button,#test-preview .tp-groups button{
  white-space:nowrap!important;word-break:keep-all!important;line-height:1.15!important;padding:.45rem .6rem!important
}
#test-preview .tp-header select,#test-preview .tp-header input,
#test-preview .tp-groups select,#test-preview .tp-groups input{min-height:34px!important}

/* ---------- Unified grid: number | text | marks | (optional remove) ---------- */
:root{
  --tp-num-col:56px;   /* outer number column */
  --tp-gap:12px;
  --tp-marks-col:72px; /* a bit wider so [15] etc. never wraps */
}
#test-preview .preview-row{
  display:grid !important;
  grid-template-columns: var(--tp-num-col) 1fr var(--tp-marks-col) max-content !important;
  column-gap: var(--tp-gap) !important;
  align-items:start !important;
}
#test-preview .tp-num{
  text-align:right!important;font-weight:600!important;padding-top:2px!important;
  white-space:nowrap;font-variant-numeric:tabular-nums;margin:0!important;
}
#test-preview .preview-q{min-width:0!important;margin:0!important}
#test-preview .preview-q p{margin:4px 0!important}
#test-preview .preview-marks{
  text-align:right!important;font-weight:600!important;white-space:nowrap!important;margin:0!important
}
#test-preview .remove-from-test{margin:0 0 0 .3rem!important;padding:0!important}

/* ---------- Group header (“Vraag 1 … [5]”) aligns with grid ---------- */
/* 56 num + 12 gap = 68px left gutter before the title */
#test-preview .tp-group{
  display:grid !important;
  grid-template-columns: calc(var(--tp-num-col) + var(--tp-gap)) 1fr var(--tp-marks-col) !important;
  column-gap: var(--tp-gap) !important;
  align-items:baseline !important;
}
#test-preview .tp-group > :first-child{ grid-column: 2 !important; }   /* the title */
#test-preview .tp-group-bar{
  grid-column: 3 !important;
  text-align:right !important; white-space:nowrap !important; font-weight:700 !important;
}

/* headings + per-section total */
#test-preview .tp-section{text-align:center;font-weight:700;margin:.6rem 0 .3rem}
#test-preview .tp-section-total{ text-align:right!important; white-space:nowrap!important; font-weight:700!important; margin:.2rem 0 .35rem }

/* ---------- Multiple-choice choices: hanging indents ---------- */
#test-preview .preview-q ol{
  list-style: upper-alpha outside !important;   /* A. B. C. D. */
  padding-left: 2.2em !important;               /* room for the letter + period */
  margin: 4px 0 6px 0 !important;
}
#test-preview .preview-q ol li{ margin: 2px 0 !important; }

/* ---------- Subquestion list (a, b, c…) for long items ---------- */
.subq-list{list-style:lower-alpha;padding-left:1.8rem;margin:.35rem 0 .5rem}
.subq-list li::marker{font-weight:600}
.subq-item{display:flex;align-items:flex-start;gap:.6rem;margin:.45rem 0}
.subq-text{flex:1 1 auto;min-width:0}
.subq-mark{flex:0 0 auto;width:2.5rem;text-align:right;white-space:nowrap;color:#444}
.sub-label{font-weight:600;margin-right:.35rem}

/* ====================================================================== */
/* =========== Print (SA exam spec): just the essentials ================ */
/* ====================================================================== */
@media print{
  /* A4 with 2.54 cm margins */
  @page{size:A4;margin:25.4mm}

  /* Hide site chrome & builder controls */
  header, footer, .site-header, .site-footer,
  .elementor-location-header, .elementor-location-footer,
  .wp-block-template-part, .navigation, .sidebar,
  .widget-area, .admin-bar, .tp-actions,
  #test-preview .tp-header, #test-preview .tp-sections, #test-preview .tp-groups,
  #test-preview button, #test-preview .btn, #test-preview .remove-from-test,
  #test-preview select, #test-preview input, #test-preview label{
    display:none!important;
  }

  /* Ensure preview prints fully */
  #test-preview, #test-preview *{visibility:visible!important}
  #test-preview{display:block!important;position:static!important}

  /* 1.5 line spacing everywhere in the paper */
  #test-preview{line-height:1.5!important}
}

/* ===== Utility for any totals/marks lines ===== */
.align-right,[data-align="right"],.total{ text-align:right!important; }
/* === Fix: put the question text exactly next to the number === */
#test-preview .preview-row{                     /* keep your grid */
  grid-template-columns: 56px 1fr 72px max-content !important;
  column-gap: 12px !important;                  /* the ONLY horizontal gap */
}

#test-preview .tp-num{
  text-align:right!important; font-weight:600!important; padding-top:2px!important;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}

/* kill any stray left padding/indents the theme adds inside the text cell */
#test-preview .preview-q{ min-width:0!important; margin:0!important; padding:0!important; }
#test-preview .preview-q > :not(ol):not(ul){
  margin-left:0!important; padding-left:0!important; text-indent:0!important;
}
#test-preview .preview-q .wp-block,
#test-preview .preview-q .wp-block-paragraph,
#test-preview .preview-q p{
  margin-left:0!important; padding-left:0!important; text-indent:0!important;
}

/* keep options with proper hanging indent */
#test-preview .preview-q ol{
  list-style: upper-alpha outside !important;
  padding-left: 2.2em !important;
  margin: 4px 0 6px 0 !important;
}
#test-preview .preview-q ol li{ margin: 2px 0 !important; }
/* —— FIX: make question text sit exactly next to the number —— */

/* 1) Lock the grid spacing */
#test-preview .preview-row{
  grid-template-columns: 56px 1fr 72px max-content !important; /* num | text | [marks] | remove */
  column-gap: 12px !important;
}

/* 2) Remove ALL inherited left indents inside the text cell */
#test-preview .preview-row .preview-q{
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}
#test-preview .preview-row .preview-q > *,
#test-preview .preview-row .preview-q .wp-block,
#test-preview .preview-row .preview-q .wp-block-paragraph,
#test-preview .preview-row .preview-q p,
#test-preview .preview-row .preview-q div{
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
}

/* keep MCQ choices with proper hanging indent */
#test-preview .preview-row .preview-q ol{
  list-style: upper-alpha outside !important;
  padding-left: 2.2em !important;   /* for the A./B. labels */
  margin: 4px 0 6px 0 !important;
}
#test-preview .preview-row .preview-q ol li{ margin: 2px 0 !important; }

/* number cell stays right-aligned */
#test-preview .preview-row .tp-num{
  text-align: right !important;
  font-weight: 600 !important;
  padding-top: 2px !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
}
/* === ZERO OUT all hidden indents/padding inside the question text cell === */
#test-preview .preview-row{ 
  grid-template-columns: 56px 1fr 72px max-content !important;
  column-gap: 12px !important;
}

#test-preview .preview-row .preview-q,
#test-preview .preview-row .preview-q *{
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;      /* kills first-line indents from theme */
}

/* Keep regular paragraph spacing only */
#test-preview .preview-row .preview-q p{ margin: 4px 0 !important; }

/* Restore hanging indent for choices (A., B., …) only */
#test-preview .preview-row .preview-q ol{
  list-style: upper-alpha outside !important;
  padding-left: 2.2em !important;  /* space for the letter marker */
  margin: 4px 0 6px 0 !important;
}
#test-preview .preview-row .preview-q ol li{ margin: 2px 0 !important; }

/* Number cell stays right-aligned, tight to the grid gap */
#test-preview .preview-row .tp-num{
  text-align:right !important;
  font-weight:600 !important;
  padding-top:2px !important;
  white-space:nowrap !important;
  font-variant-numeric: tabular-nums;
}
/* === FINAL SNAP: text flush next to number in the preview === */

/* Lock the grid once more (num | text | marks | remove) */
#test-preview .preview-row{
  display:grid !important;
  grid-template-columns: 56px 1fr 72px max-content !important;
  column-gap: 12px !important;
  align-items: start !important;
}

/* Number cell */
#test-preview .preview-row .tp-num{
  text-align:right !important;
  font-weight:600 !important;
  padding-top:2px !important;
  white-space:nowrap !important;
  font-variant-numeric: tabular-nums;
}

/* ——— Nuke ALL left indents inside the question text cell ——— */
#test-preview .preview-row .preview-q{
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* kill margins/padding/first-line indents set by theme blocks */
#test-preview .preview-row .preview-q,
#test-preview .preview-row .preview-q *{
  margin-left:0 !important;
  padding-left:0 !important;
  text-indent:0 !important;
}

/* remove pseudo-element bullets/indents some themes inject */
#test-preview .preview-row .preview-q::before,
#test-preview .preview-row .preview-q::after,
#test-preview .preview-row .preview-q > *::before,
#test-preview .preview-row .preview-q > *::after{
  content:none !important;
  display:none !important;
}

/* flatten common Gutenberg wrappers that add internal padding */
#test-preview .preview-row .preview-q .wp-block-group,
#test-preview .preview-row .preview-q .wp-block{
  display:contents !important;   /* pass content directly into the grid cell */
}

/* keep normal paragraph rhythm only (no left offset) */
#test-preview .preview-row .preview-q p{ margin:4px 0 !important; }

/* keep MCQ options with proper hanging indent */
#test-preview .preview-row .preview-q ol{
  list-style: upper-alpha outside !important;
  padding-left: 2.2em !important;   /* space for A./B./C./D. */
  margin: 4px 0 6px 0 !important;
}
#test-preview .preview-row .preview-q ol li{ margin:2px 0 !important; }
/* === 3rd-column BUILDER PREVIEW: put text flush next to the number === */

/* Lock the grid gap to 12px for both row types */
#test-preview .tb-question{
  display:grid !important;
  grid-template-columns: 56px 1fr 72px !important;  /* num | text | marks */
  column-gap: 12px !important;
  align-items: start !important;
}
#test-preview .preview-row{
  display:grid !important;
  grid-template-columns: 56px 1fr 72px max-content !important; /* num | text | [marks] | remove */
  column-gap: 12px !important;
  align-items: start !important;
}

/* Number cells (both structures) */
#test-preview .tb-number,
#test-preview .tp-num{
  text-align: right !important;
  font-weight: 600 !important;
  padding-top: 2px !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
}

/* —— Nuke hidden left indents inside the TEXT cell (both structures) —— */
#test-preview .tb-text,
#test-preview .tb-text *,
#test-preview .preview-q,
#test-preview .preview-q *{
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
}
#test-preview .tb-text p,
#test-preview .preview-q p{
  margin: 4px 0 !important;
}

/* Keep MCQ choices with proper hanging indent */
#test-preview .tb-text ol,
#test-preview .preview-q ol{
  list-style: upper-alpha outside !important;  /* A. B. C. D. */
  padding-left: 2.2em !important;
  margin: 4px 0 6px 0 !important;
}
#test-preview .tb-text ol li,
#test-preview .preview-q ol li{ margin: 2px 0 !important; }

/* Marks always flush right */
#test-preview .tb-marks,
#test-preview .preview-marks{
  text-align: right !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
/* === 3rd-column builder preview: make text sit flush next to the number === */

/* lock the row grid (num | text | [marks] | remove) */
#test-preview .preview-row{
  display:grid !important;
  grid-template-columns: 56px 1fr 72px max-content !important;
  column-gap: 12px !important;
  align-items:start !important;
}

/* number cell */
#test-preview .tp-num{
  text-align:right !important;
  font-weight:600 !important;
  padding-top:2px !important;
  white-space:nowrap !important;
  font-variant-numeric:tabular-nums;
}

/* --- flatten & zero-out ALL Gutenberg wrappers inside the text cell --- */
#test-preview .preview-q{
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* kill any preset padding/indent */
#test-preview .preview-q,
#test-preview .preview-q *{
  text-indent:0 !important;
  margin-left:0 !important;
  padding-left:0 !important;
}

/* Gutenberg containers frequently add left padding — flatten them */
#test-preview .preview-q .wp-block-group,
#test-preview .preview-q .wp-block-columns,
#test-preview .preview-q .wp-block-column,
#test-preview .preview-q .wp-block,
#test-preview .preview-q [class*="wp-block-"]{
  display:contents !important;       /* pass content directly to the grid cell */
  margin-left:0 !important;
  padding-left:0 !important;
}

/* keep normal paragraph rhythm (no left offset) */
#test-preview .preview-q p{ margin:4px 0 !important; }

/* MCQ choices keep proper hanging indent */
#test-preview .preview-q ol{
  list-style: upper-alpha outside !important;
  padding-left: 2.2em !important;
  margin: 4px 0 6px 0 !important;
}
#test-preview .preview-q ol li{ margin:2px 0 !important; }

/* marks column always flush right */
#test-preview .preview-marks{
  text-align:right !important;
  font-weight:600 !important;
  white-space:nowrap !important;
  margin:0 !important;
}
/* === Fix MCQ choices stacking (don't flatten lists) === */

/* Only flatten containers, NOT lists */
#test-preview .preview-q .wp-block-group,
#test-preview .preview-q .wp-block-columns,
#test-preview .preview-q .wp-block-column{
  display: contents !important;
}

/* Explicitly keep lists as blocks */
#test-preview .preview-q ol,
#test-preview .preview-q ul,
#test-preview .preview-q .wp-block-list{
  display: block !important;
}

/* List items must render as list items (one per line) */
#test-preview .preview-q li{
  display: list-item !important;
  margin: 2px 0 !important;
}

/* MCQ hanging indent + spacing (same as before, kept here for clarity) */
#test-preview .preview-q ol{
  list-style: upper-alpha outside !important;
  padding-left: 2.2em !important;
  margin: 4px 0 6px 0 !important;
}
#test-preview .preview-q ol{
  display:block !important;
  list-style: upper-alpha outside !important;
  padding-left: 2.2em !important;
  margin: 4px 0 6px 0 !important;
}
#test-preview .preview-q li{
  display:list-item !important;
  margin: 2px 0 !important;
}
#test-preview .preview-q ol,
#test-preview .preview-q ol.mcq-fix {
  list-style: upper-alpha outside !important;  /* A. B. C. D. */
  padding-left: 2.2em !important;              /* hanging indent */
  margin: 4px 0 6px 0 !important;
}
#test-preview .preview-q ol li { margin: 2px 0 !important; }
/* MCQ list appearance */
#test-preview .preview-q ol.mcq-fixed{
  list-style: upper-alpha outside !important;
  padding-left: 2.2em !important;
  margin: 6px 0 !important;
}
#test-preview .preview-q ol.mcq-fixed li{ margin: 2px 0 !important; }

/* Section subtotal line: left + bold */
#test-preview .preview-item .tp-section-total{
  text-align: left !important;
  font-weight: 700 !important;
}
/* --- Test Preview buttons: match site style (peach rounded) --- */
#test-preview .tp-header button,
#test-preview .tp-sections button,
#test-preview .tp-groups button,
#test-preview .tp-list .remove-from-test,
.tp-actions button{
  appearance: none !important;
  background: #ffcaa7 !important;      /* peach */
  color: #1a334d !important;            /* dark teal text */
  border: 0 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  padding: .55rem .9rem !important;
  cursor: pointer !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.08) !important;
  transition: transform .02s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s ease !important;
}

/* Hover / active feedback */
#test-preview .tp-header button:hover,
#test-preview .tp-sections button:hover,
#test-preview .tp-groups button:hover,
#test-preview .tp-list .remove-from-test:hover,
.tp-actions button:hover{
  background: #ffb98a !important;       /* slightly darker peach */
  box-shadow: 0 2px 0 rgba(0,0,0,.14), 0 6px 14px rgba(0,0,0,.12) !important;
}
#test-preview .tp-header button:active,
#test-preview .tp-sections button:active,
#test-preview .tp-groups button:active,
#test-preview .tp-list .remove-from-test:active,
.tp-actions button:active{
  background: #f4a36c !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.14), 0 3px 8px rgba(0,0,0,.12) !important;
}

/* Focus ring for accessibility */
#test-preview .tp-header button:focus-visible,
#test-preview .tp-sections button:focus-visible,
#test-preview .tp-groups button:focus-visible,
#test-preview .tp-list .remove-from-test:focus-visible,
.tp-actions button:focus-visible{
  outline: 3px solid rgba(26,51,77,.22) !important;   /* teal-ish */
  outline-offset: 2px !important;
}

/* Disabled state */
#test-preview .tp-header button:disabled,
#test-preview .tp-sections button:disabled,
#test-preview .tp-groups button:disabled,
.tp-actions button:disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Make the inline “Remove” buttons petite but consistent */
#test-preview .tp-list .remove-from-test{
  padding: .35rem .6rem !important;
  font-size: .9rem !important;
}

/* Optional: make “danger” actions a softer red-peach */
#clear-test,
#tp-del-section{
  background: #ffd8cc !important;
  color: #6b1f1f !important;
}
#clear-test:hover,
#tp-del-section:hover{ background:#ffc6b6 !important; }
#tp-prev-sec, #tp-next-sec{ padding:.55rem 1.1rem !important; }
/* ===== A4 page view for builder ===== */
/* A4 @ 96dpi is ~1123px tall. We preview the printable area:
   total - 2 × 1" margins (2×96px) = ~931px content height. */
#test-preview { --tp-page-h: 931px; position: relative; }

/* Sticky page bar (top of the preview area) */
#test-preview .tp-pagebar{
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: .5rem;
  justify-content: flex-end;
  background: rgba(255,255,255,.9);
  padding: .35rem 0 .45rem;
  backdrop-filter: saturate(120%) blur(2px);
  border-bottom: 1px dashed #e9e9e9;
  font-weight: 600;
}
#test-preview .tp-pagebar .tp-pagecount{ margin-right: .5rem; color:#1a334d; }

/* Reuse your peach button style (the rules you added earlier) */
#test-preview .tp-pagebar button{
  appearance:none; background:#ffcaa7; color:#1a334d;
  border:0; border-radius:10px; font-weight:700;
  line-height:1.15; padding:.4rem .7rem; cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.12),0 4px 10px rgba(0,0,0,.08);
}
#test-preview .tp-pagebar button:hover{ background:#ffb98a; }
#test-preview .tp-pagebar button:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }

/* Invisible overlay that draws page “boxes” at the right heights */
#test-preview .tp-pageframes{
  position:absolute; left:0; right:0; z-index:0; pointer-events:none;
}
#test-preview .tp-pageframe{
  position:absolute; left:-8px; right:-8px;    /* tiny bleed for a nice box look */
  height: var(--tp-page-h);
  border: 1px solid #e5e5e5;
  box-shadow: 0 0 0 10px #fafafa inset;        /* light page background */
  border-radius: 6px;
}
/* Section header layout */
#test-preview .tp-section{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem;
}
#test-preview .tp-sec-title{ font-weight:700; }

/* Action buttons next to section title */
#test-preview .tp-sec-actions{
  display:inline-flex; gap:.35rem; align-items:center;
}

/* Slim button look to match your site */
#test-preview .btn-slim{
  appearance:none; border:0; cursor:pointer;
  padding:.38rem .6rem; line-height:1.1; border-radius:8px;
  background:#1e4b5f; color:#fff; font-weight:600; font-size:.9rem;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
#test-preview .btn-slim:hover{ filter:brightness(1.05); }
#test-preview .btn-slim:disabled{ opacity:.6; cursor:not-allowed; }

/* Danger variant for Remove */
#test-preview .btn-slim.danger{ background:#b63a3a; }
#test-preview .btn-slim.danger:hover{ filter:brightness(1.06); }

.asap-answer {
  color: red !important;
  font-weight: 700;
}