/* ============================================================
 * Construction Lines Meeting — Modern UI overlay (v1.1)
 * Fixed for actual GCMS markup: .card-subitem .cuttext etc.
 * ============================================================ */

:root{
  --cl-primary: #2563eb;
  --cl-primary-dark: #1e40af;
  --cl-success: #10b981;
  --cl-warning: #f59e0b;
  --cl-danger: #ef4444;
  --cl-info: #06b6d4;
  --cl-purple: #8b5cf6;
  --cl-bg-soft: #f8fafc;
  --cl-text: #0f172a;
  --cl-text-muted: #64748b;
  --cl-border: #e2e8f0;
  --cl-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --cl-shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
  --cl-shadow-lg: 0 12px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --cl-radius-sm: 8px;
  --cl-radius-lg: 16px;
}

/* ===== Dashboard tiles ===== */
.dashboard.clear{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  float: none !important;
}
.dashboard.clear .card{
  border-radius: var(--cl-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--cl-shadow-md) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
  background: #ffffff !important;
  border: 1px solid var(--cl-border) !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
.dashboard.clear .card:hover{
  transform: translateY(-3px) !important;
  box-shadow: var(--cl-shadow-lg) !important;
}
.dashboard.clear .card .card-item{
  padding: 18px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  text-decoration: none !important;
  color: inherit !important;
  background: transparent !important;
  height: auto !important;
  min-height: 100px !important;
}

/* Color-coded left border per card */
.dashboard.clear > .card:nth-child(1){ border-left: 5px solid var(--cl-success) !important; }
.dashboard.clear > .card:nth-child(2){ border-left: 5px solid var(--cl-warning) !important; }
.dashboard.clear > .card:nth-child(3){ border-left: 5px solid var(--cl-purple) !important; }
.dashboard.clear > .card:nth-child(4){ border-left: 5px solid var(--cl-info) !important; }

/* ===== Card icon ===== */
.dashboard.clear .card-item .card-subitem.icon,
.dashboard.clear .card-item span.icon{
  flex: 0 0 auto !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  font-size: 28px !important;
  background: var(--cl-bg-soft) !important;
  color: var(--cl-primary) !important;
}
.dashboard.clear > .card:nth-child(1) .card-item .card-subitem.icon{
  background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
  color: var(--cl-success) !important;
}
.dashboard.clear > .card:nth-child(2) .card-item .card-subitem.icon{
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  color: var(--cl-warning) !important;
}
.dashboard.clear > .card:nth-child(3) .card-item .card-subitem.icon{
  background: linear-gradient(135deg, #ede9fe, #ddd6fe) !important;
  color: var(--cl-purple) !important;
}
.dashboard.clear > .card:nth-child(4) .card-item .card-subitem.icon{
  background: linear-gradient(135deg, #cffafe, #a5f3fc) !important;
  color: var(--cl-info) !important;
}

/* ===== Card text content ===== */
.dashboard.clear .card-item .card-subitem:not(.icon){
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.dashboard.clear .card-item .cuttext.title{
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--cl-text-muted) !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.dashboard.clear .card-item b.cuttext{
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--cl-text) !important;
  line-height: 1.1 !important;
  margin: 2px 0 !important;
}

/* ===== Calendar table ===== */
.content_bg table{
  border-collapse: separate !important;
  border-spacing: 4px !important;
  background: transparent !important;
  width: 100% !important;
}
.content_bg table thead th{
  background: var(--cl-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 10px 8px !important;
  border-radius: var(--cl-radius-sm) !important;
  font-size: 14px !important;
  border: none !important;
}
.content_bg table tbody td{
  background: #ffffff !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: var(--cl-radius-sm) !important;
  padding: 6px !important;
  vertical-align: top !important;
  min-height: 90px !important;
  height: 90px !important;
  transition: box-shadow .15s ease !important;
  position: relative !important;
}
.content_bg table tbody td:hover{
  box-shadow: var(--cl-shadow-sm) !important;
}
/* Today highlight */
.content_bg table tbody td.ex.mark,
.content_bg table tbody td.mark{
  background: linear-gradient(180deg, #fef9c3 0%, #ffffff 70%) !important;
  border-color: var(--cl-warning) !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .2) !important;
}
/* Days outside current month */
.content_bg table tbody td:not(.ex){
  background: #f8fafc !important;
  opacity: .55 !important;
}
.content_bg table tbody td > span:first-child{
  display: inline-block !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--cl-text-muted) !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  min-width: 28px !important;
  text-align: center !important;
}
.content_bg table tbody td.mark > span:first-child,
.content_bg table tbody td.ex.mark > span:first-child{
  background: var(--cl-danger) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.content_bg table tbody td:first-child:not(.mark) > span:first-child{
  color: var(--cl-danger) !important;
}

/* Calendar event chips */
.content_bg table tbody td > div > a,
.content_bg table tbody td a[class*="first"],
.content_bg table tbody td a[style*="background-color"]{
  display: block !important;
  padding: 4px 8px !important;
  margin: 3px 0 !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #fff !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.08) !important;
  transition: transform .12s ease, filter .12s ease !important;
  border: none !important;
}
.content_bg table tbody td > div > a:hover{
  transform: translateX(2px) scale(1.02) !important;
  filter: brightness(1.08) !important;
}

/* ===== Buttons ===== */
.button{
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  transition: all .18s ease !important;
  box-shadow: var(--cl-shadow-sm) !important;
  border: none !important;
  text-shadow: none !important;
}
.button:hover{
  transform: translateY(-1px) !important;
  box-shadow: var(--cl-shadow-md) !important;
  filter: brightness(1.05) !important;
}
.button.blue, a.button.blue{ background: var(--cl-primary) !important; }
.button.green, a.button.green{ background: var(--cl-success) !important; }
.button.orange, a.button.orange{ background: var(--cl-warning) !important; }
.button.red, a.button.red{ background: var(--cl-danger) !important; }
.button.ok{ background: var(--cl-success) !important; }

/* Status badges */
.term1, .term2, .term3,
span.term1, span.term2, span.term3{
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Form inputs */
input[type="text"], input[type="number"], input[type="email"],
input[type="tel"], input[type="password"], select, textarea{
  border: 1.5px solid var(--cl-border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, input[type="password"]:focus, select:focus, textarea:focus{
  border-color: var(--cl-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important;
  outline: none !important;
}

/* Mobile */
@media (max-width: 768px){
  .dashboard.clear{ grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .dashboard.clear .card-item{ padding: 14px !important; gap: 12px !important; min-height: 86px !important; }
  .dashboard.clear .card-item .card-subitem.icon{ width: 44px !important; height: 44px !important; font-size: 22px !important; border-radius: 10px !important; }
  .dashboard.clear .card-item b.cuttext{ font-size: 26px !important; }
  .content_bg table tbody td{ height: 60px !important; min-height: 60px !important; font-size: 11px !important; }
}

/* ============================================================
 * Calendar — bigger & roomier (v1.2 patch — appended)
 * ============================================================ */
.content_bg table.fullwidth,
.content_bg table{
  table-layout: fixed !important;
  width: 100% !important;
}
.content_bg table thead th{
  padding: 14px 8px !important;
  font-size: 16px !important;
}
.content_bg table tbody td{
  width: 14.28% !important;
  height: 140px !important;
  min-height: 140px !important;
  padding: 10px !important;
}
.content_bg table tbody td > span:first-child{
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  min-width: 36px !important;
  margin-bottom: 6px !important;
}
.content_bg table tbody td > div{
  margin-top: 4px !important;
}
.content_bg table tbody td > div > a,
.content_bg table tbody td a[class*="first"],
.content_bg table tbody td a[style*="background-color"]{
  padding: 6px 10px !important;
  margin: 4px 0 !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  white-space: normal !important;
  text-overflow: clip !important;
  line-height: 1.35 !important;
}

/* Mobile keeps a slightly larger size than before */
@media (max-width: 768px){
  .content_bg table tbody td{
    height: 90px !important;
    min-height: 90px !important;
    padding: 6px !important;
  }
  .content_bg table tbody td > span:first-child{
    font-size: 13px !important;
    padding: 4px 8px !important;
    min-width: 28px !important;
  }
  .content_bg table tbody td > div > a{
    font-size: 11px !important;
    padding: 3px 6px !important;
  }
}

/* ============================================================
 * Calendar event-chip width tweak (v1.2.1)
 * Single-line truncate + bigger chip
 * ============================================================ */
.content_bg table tbody td > div > a,
.content_bg table tbody td a[class*="first"],
.content_bg table tbody td a[style*="background-color"]{
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  padding: 5px 8px !important;
}
.content_bg table tbody td > div{
  width: 100% !important;
  display: block !important;
  overflow: hidden !important;
}

/* ============================================================
 * Grid escape for calendar (v1.2.2)
 * Calendar section/non-card siblings should span full grid width
 * ============================================================ */
.dashboard.clear > section,
.dashboard.clear > h2,
.dashboard.clear > div:not(.card){
  grid-column: 1 / -1 !important;
}
.dashboard.clear > section.content_bg,
.dashboard.clear > section{
  width: 100% !important;
  margin-top: 16px !important;
}

/* ============================================================
 * Grid scope fix (v1.2.3)
 * Only apply grid layout to dashboard containing cards.
 * Calendar dashboard (which contains a section, not cards) should
 * stay as a normal block so the calendar table can fill width.
 * ============================================================ */
.dashboard.clear:not(:has(> .card)){
  display: block !important;
  grid-template-columns: none !important;
  margin-bottom: 0 !important;
}
.dashboard.clear:not(:has(> .card)) > section{
  width: 100% !important;
  display: block !important;
}

/* ============================================================
 * Scope fix v1.3 — restrict calendar styling to .event-calendar
 * Cancels overly broad .content_bg table rules from earlier
 * ============================================================ */

/* Reset for non-calendar tables in content_bg */
.content_bg table:not(.event-calendar table){
  table-layout: auto !important;
  border-spacing: 0 !important;
  border-collapse: separate !important;
}
.content_bg table:not(.event-calendar table) thead th{
  background: transparent !important;
  color: inherit !important;
  border-radius: 0 !important;
  padding: 12px 8px !important;
  font-size: inherit !important;
}
.content_bg table:not(.event-calendar table) tbody td{
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--cl-border) !important;
  vertical-align: middle !important;
}
.content_bg table:not(.event-calendar table) tbody td > span:first-child{
  background: transparent !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  text-align: left !important;
}
.content_bg table:not(.event-calendar table) tbody td > div > a,
.content_bg table:not(.event-calendar table) tbody td a[style*="background-color"]{
  display: inline-block !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  width: auto !important;
}

/* Re-apply calendar styles ONLY to event-calendar */
.event-calendar table,
.event-calendar table.fullwidth{
  table-layout: fixed !important;
  width: 100% !important;
  border-spacing: 4px !important;
}
.event-calendar table thead th{
  background: var(--cl-primary) !important;
  color: #fff !important;
  border-radius: var(--cl-radius-sm) !important;
}
.event-calendar table tbody td{
  width: 14.28% !important;
  height: 140px !important;
}

/* term/badge size guards (don't make all .term* into pills - leave inline ones alone) */
[class*="term"]{
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* ============================================================
 * Opacity override (v1.3.1)
 * Earlier rule .content_bg table tbody td:not(.ex){opacity:0.55}
 * was meant for calendar-only "outside month" days but bled into
 * other tables (room list, member list). Reset to opaque for all
 * non-calendar tables.
 * ============================================================ */
.content_bg:not(:has(.event-calendar)) table tbody td,
.content_bg table tbody td.ex,
body table tbody td{
  opacity: 1 !important;
}
/* Only inside actual event-calendar should td:not(.ex) be faded */
.event-calendar table tbody td:not(.ex){
  opacity: .55 !important;
  background: #f8fafc !important;
}
/* Reset any background-only rule that may have darkened non-cal cells */
.content_bg table:not(.fullwidth) tbody td.ex.mark,
.content_bg table tbody td.ex.mark:not(.event-calendar table td){
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.event-calendar table tbody td.ex.mark{
  background: linear-gradient(180deg, #fef9c3 0%, #ffffff 70%) !important;
  border-color: var(--cl-warning) !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .2) !important;
}

/* Menu flatten v6 */
.booking.toplevelmenu > ul,
.booking.toplevelmenu .submenu{ display: none !important; }
.booking.toplevelmenu > .menu-arrow{ cursor: pointer !important; }
.booking.toplevelmenu > .menu-arrow:after,
.booking.toplevelmenu > .menu-arrow .arrow{ display: none !important; }
.booking.toplevelmenu.hover > ul{ display: none !important; }

/* fix: pseudo-icon must not block clicks */
.g-input[class*=" icon-"]::before, .g-input[class^="icon-"]::before { pointer-events: none; }


/* === FIX: icon-input padding override === */
.g-input[class*=" icon-"] > .input-select,
.g-input[class^="icon-"] > .input-select,
.g-input[class*=" icon-"] > textarea,
.g-input[class^="icon-"] > textarea,
.g-input[class*=" icon-"] > select,
.g-input[class^="icon-"] > select,
.g-input[class*=" icon-"] > input[type="text"],
.g-input[class^="icon-"] > input[type="text"],
.g-input[class*=" icon-"] > input[type="number"],
.g-input[class^="icon-"] > input[type="number"],
.g-input[class*=" icon-"] > input[type="email"],
.g-input[class^="icon-"] > input[type="email"],
.g-input[class*=" icon-"] > input[type="tel"],
.g-input[class^="icon-"] > input[type="tel"],
.g-input[class*=" icon-"] > input[type="password"],
.g-input[class^="icon-"] > input[type="password"],
.g-input[class*=" icon-"] > input[type="date"],
.g-input[class^="icon-"] > input[type="date"],
.g-input[class*=" icon-"] > input[type="time"],
.g-input[class^="icon-"] > input[type="time"],
.g-input[class*=" icon-"] > input[type="url"],
.g-input[class^="icon-"] > input[type="url"] {
    padding-left: 2.8em !important;
}
/* === END FIX === */

/* ============================================================
 * Dashboard contrast & button vibrancy v1.4
 * - Darker title/label text
 * - More saturated button colors
 * - 4th tile (available rooms) styling
 * ============================================================ */
:root{
  --cl-text-muted: #475569 !important;     /* darker than #64748b */
  --cl-primary: #1d4ed8;                   /* slightly darker blue */
  --cl-success: #059669;                   /* darker green */
  --cl-warning: #d97706;                   /* darker amber */
  --cl-danger: #dc2626;                    /* slightly darker red */
  --cl-info: #0891b2;                      /* darker cyan */
  --cl-purple: #7c3aed;                    /* darker purple */
}

/* ===== Dashboard text — darker & bolder ===== */
.dashboard.clear .card-item .cuttext.title{
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.dashboard.clear .card-item b.cuttext{
  color: #0f172a !important;
  font-weight: 900 !important;
}

/* ===== Button colors — vivid ===== */
.button.blue, a.button.blue{ background: #1d4ed8 !important; color:#fff !important; }
.button.blue:hover, a.button.blue:hover{ background: #1e40af !important; }
.button.green, a.button.green{ background: #059669 !important; color:#fff !important; }
.button.green:hover, a.button.green:hover{ background: #047857 !important; }
.button.orange, a.button.orange{ background: #d97706 !important; color:#fff !important; }
.button.orange:hover, a.button.orange:hover{ background: #b45309 !important; }
.button.red, a.button.red{ background: #dc2626 !important; color:#fff !important; }
.button.red:hover, a.button.red:hover{ background: #b91c1c !important; }
.button.ok, a.button.ok{ background: #059669 !important; color:#fff !important; }

/* Status badges — slightly darker for readability */
.term1{ background: #059669 !important; color:#fff !important; }
.term2{ background: #d97706 !important; color:#fff !important; }
.term3, .term4{ background: #dc2626 !important; color:#fff !important; }
.term0{ background: #6b7280 !important; color:#fff !important; }

/* ===== 4th card (available rooms) ===== */
.dashboard.clear > .card.card-available{
  border-left: 5px solid #06b6d4 !important;
}
.dashboard.clear > .card.card-available .card-item .card-subitem.icon{
  background: linear-gradient(135deg, #cffafe, #67e8f9) !important;
  color: #0891b2 !important;
}
.dashboard.clear > .card.card-available .card-item .card-subitem.icon::before{
  content: "✓";
  font-size: 28px;
  font-weight: 900;
}


/* ============================================================
 * Dashboard contrast boost (v1.5)
 * - Solid colored icon backgrounds (no more pastel gradients)
 * - White icons for max contrast
 * - Darker text everywhere
 * ============================================================ */

/* Solid icon backgrounds with white icon */
.dashboard.clear .card-item .card-subitem.icon{
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
}
.dashboard.clear > .card:nth-child(1) .card-item .card-subitem.icon{
  background: #059669 !important;        /* solid green */
  color: #ffffff !important;
}
.dashboard.clear > .card:nth-child(2) .card-item .card-subitem.icon{
  background: #d97706 !important;        /* solid amber */
  color: #ffffff !important;
}
.dashboard.clear > .card:nth-child(3) .card-item .card-subitem.icon{
  background: #7c3aed !important;        /* solid purple */
  color: #ffffff !important;
}
.dashboard.clear > .card.card-available .card-item .card-subitem.icon{
  background: #0891b2 !important;        /* solid cyan */
  color: #ffffff !important;
}

/* Title labels — darker, bolder */
.dashboard.clear .card-item .cuttext.title{
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
}
/* Numbers — pure black */
.dashboard.clear .card-item b.cuttext{
  color: #000000 !important;
  font-weight: 900 !important;
  font-size: 40px !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.05) !important;
}

/* Card border thicker on left side */
.dashboard.clear > .card{
  border-left-width: 6px !important;
  background: #ffffff !important;
}

/* Calendar — boost faded out-of-month days a bit */
.event-calendar table tbody td:not(.ex){
  opacity: 0.7 !important;     /* was 0.55 — make legible */
}
.event-calendar table tbody td:not(.ex) > span:first-child{
  color: #94a3b8 !important;
  font-weight: 600 !important;
}

/* Make calendar day number darker overall */
.event-calendar table tbody td > span:first-child{
  color: #1e293b !important;
  font-weight: 700 !important;
}

/* Page heading "Dashboard" larger and darker */
.content_bg h1.icon-dashboard,
.content_bg h2,
.content_bg .icon-dashboard{
  color: #0f172a !important;
  font-weight: 800 !important;
}


/* ============================================================
 * Calendar class semantics fix (v1.5.1)
 * .ex = expired (past days, can't book) -> slightly faded
 * .curr = current/future days (bookable) -> fully visible
 * .curr.today = today highlight
 * .mark = day has bookings (within either)
 * ============================================================ */

/* Reset any previous opacity rule */
.event-calendar table tbody td{
  opacity: 1 !important;
}
.event-calendar table tbody td:not(.ex){
  opacity: 1 !important;
}

/* Past days (expired) — subtle fade with gray bg, but day number still readable */
.event-calendar table tbody td.ex{
  background: #f1f5f9 !important;
  opacity: 0.85 !important;
}
.event-calendar table tbody td.ex > span:first-child{
  color: #64748b !important;
  font-weight: 600 !important;
}

/* Current/future bookable days — fully clear */
.event-calendar table tbody td.curr{
  background: #ffffff !important;
  opacity: 1 !important;
}
.event-calendar table tbody td.curr > span:first-child{
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* TODAY — strong highlight */
.event-calendar table tbody td.curr.today,
.event-calendar table tbody td.today{
  background: linear-gradient(180deg, #dbeafe 0%, #ffffff 70%) !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .25) !important;
}
.event-calendar table tbody td.today > span:first-child,
.event-calendar table tbody td.curr.today > span:first-child{
  background: #2563eb !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* Days with bookings (.mark) — soft yellow tint */
.event-calendar table tbody td.curr.mark,
.event-calendar table tbody td.ex.mark{
  background: linear-gradient(180deg, #fef9c3 0%, #ffffff 70%) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .2) !important;
}
.event-calendar table tbody td.curr.mark > span:first-child,
.event-calendar table tbody td.ex.mark > span:first-child{
  background: #ef4444 !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* Sunday column number color */
.event-calendar table tbody td.curr:first-child > span:first-child{
  color: #dc2626 !important;
}