/* ============================================================
   ATLEARN LMS REDESIGN — Design System CSS
   Based on: lms.atlearn.in application UIUX redesign/Atlearn LMS Redesign.dc.html
   ============================================================ */

/* ── Google Font ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── Design Tokens ── */
:root {
  --al-bg: #F4F6FB;
  --al-surface: #FFFFFF;
  --al-surface2: #FAFBFF;
  --al-line: #E7E9F2;
  --al-line2: #EFF1F8;
  --al-tx: #0D1330;
  --al-tx2: #5A6480;
  --al-tx3: #98A0B8;
  --al-pri: #4F46E5;
  --al-priw: #EDECFD;
  --al-ok: #128A4D;
  --al-okw: #E6F6EE;
  --al-warn: #B45309;
  --al-warnw: #FCF2E1;
  --al-dang: #C62828;
  --al-dangw: #FDECEC;
  --al-shadow: 0 1px 2px rgba(13,19,48,.04), 0 8px 24px rgba(13,19,48,.06);
  --al-shadow2: 0 2px 6px rgba(13,19,48,.06), 0 20px 48px rgba(13,19,48,.10);
  --al-side-bg: #0E1A3C;
  --al-side-tx: #FFFFFF;
  --al-side-tx2: #93A0C4;
  --al-side-line: rgba(255,255,255,.08);
  --al-rowpad: 14px;
}

/* ── Base ── */
body,
#page,
#page-wrapper {
  background: var(--al-bg) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  color: var(--al-tx) !important;
}

* { box-sizing: border-box; }

a { color: var(--al-pri); text-decoration: none; }
a:hover { color: var(--al-tx); }
::selection { background: rgba(79,70,229,.18); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--al-line);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* ============================================================
   NAVBAR / TOPBAR
   ============================================================ */
.navbar,
nav.navbar {
  background: var(--al-surface) !important;
  border-bottom: 1px solid var(--al-line) !important;
  height: 66px !important;
  min-height: 66px !important;
  box-shadow: none !important;
  padding: 0 22px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

.navbar .navbar-brand {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: var(--al-tx) !important;
}

/* Search bar in topbar */
.navbar .nav-search,
.navbar .simplesearchform,
.navbar form[role="search"] {
  background: var(--al-surface2) !important;
  border: 1px solid var(--al-line) !important;
  border-radius: 10px !important;
  height: 38px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 520px !important;
  color: var(--al-tx3) !important;
  font-size: 13px !important;
  transition: border-color .15s;
}
.navbar .nav-search:focus-within,
.navbar form[role="search"]:focus-within {
  border-color: var(--al-pri) !important;
}
.navbar .nav-search input,
.navbar form[role="search"] input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  color: var(--al-tx) !important;
}

/* Topbar icon buttons (notifications, messages) */
.navbar .nav-link,
.navbar .popover-region-toggle {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--al-line) !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--al-tx2) !important;
  transition: background .15s, color .15s;
  padding: 0 !important;
}
.navbar .nav-link:hover,
.navbar .popover-region-toggle:hover {
  background: var(--al-priw) !important;
  color: var(--al-pri) !important;
  border-color: var(--al-priw) !important;
}

/* Notification badge */
.navbar .count-container,
.navbar .badge-circle {
  background: var(--al-pri) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
  min-width: 17px !important;
  height: 17px !important;
}

/* User avatar in navbar */
.navbar .userinitials,
.navbar .userpicture,
.navbar .userbutton .avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: var(--al-pri) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* ============================================================
   SIDEBAR / DRAWER (NAV)
   ============================================================ */
#nav-drawer,
.drawer-left,
[data-region="drawer"] {
  background: var(--al-side-bg) !important;
  color: var(--al-side-tx) !important;
  border-right: none !important;
  box-shadow: none !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* Sidebar logo area */
#nav-drawer .logo,
.drawer-left .site-name {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: var(--al-side-tx) !important;
  border-bottom: 1px solid var(--al-side-line) !important;
  padding: 0 18px !important;
  height: 66px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Nav section labels */
#nav-drawer .list-group-item-action.type_system,
#nav-drawer .list-group-item-action[data-key="home"],
.drawer-left .nav-section-label {
  font-size: 10px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--al-side-tx2) !important;
  font-weight: 700 !important;
  padding: 18px 10px 8px !important;
  background: transparent !important;
  border: 0 !important;
}

/* Nav items */
#nav-drawer .list-group-item-action,
.drawer-left .nav-item a,
.primary-navigation .nav-link,
[data-region="primary-navigation"] .nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px !important;
  border-radius: 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--al-side-tx2) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background .15s, color .15s;
}

#nav-drawer .list-group-item-action:hover,
.drawer-left .nav-item a:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--al-side-tx) !important;
}

#nav-drawer .list-group-item-action.active,
.drawer-left .nav-item.active a,
#nav-drawer .list-group-item-action[aria-current="true"] {
  background: var(--al-pri) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}

/* Nav badge */
#nav-drawer .list-group-item-action .badge,
.drawer-left .badge {
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
  padding: 2px 7px !important;
  margin-left: auto !important;
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
#page-content,
#region-main,
.main-inner,
#page .main-inner {
  background: var(--al-bg) !important;
}

#region-main {
  padding: 26px 28px 40px !important;
}

/* Page heading */
.page-header-headings h1,
#region-main h1,
.pagetitle h1 {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: var(--al-tx) !important;
  margin: 0 0 6px !important;
}

#region-main h2 {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: var(--al-tx) !important;
}

/* ============================================================
   CARDS / BLOCKS
   ============================================================ */
.card,
.block,
.dashboard-card,
[data-region="block-container"] .card {
  border: 1px solid var(--al-line) !important;
  border-radius: 14px !important;
  background: var(--al-surface) !important;
  box-shadow: var(--al-shadow) !important;
  overflow: hidden;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

.card:hover,
.dashboard-card:hover {
  box-shadow: var(--al-shadow2) !important;
  transform: translateY(-2px);
  transition: box-shadow .2s, transform .2s;
}

.card .card-header,
.block .card-header,
.block-header {
  background: var(--al-surface) !important;
  border-bottom: 1px solid var(--al-line2) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  color: var(--al-tx) !important;
  padding: 16px 18px !important;
}

.card .card-body,
.block .card-body {
  padding: 18px !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary,
button.btn-primary {
  background: var(--al-pri) !important;
  border-color: var(--al-pri) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  height: 38px !important;
  padding: 0 16px !important;
  box-shadow: 0 6px 16px rgba(79,70,229,.28) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  transition: filter .15s;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.btn-primary:hover,
.btn-primary:focus {
  filter: brightness(1.08) !important;
  background: var(--al-pri) !important;
  border-color: var(--al-pri) !important;
}

.btn-secondary,
button.btn-secondary,
.btn-outline-secondary {
  background: transparent !important;
  border: 1px solid var(--al-line) !important;
  border-radius: 10px !important;
  color: var(--al-tx) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  height: 38px !important;
  padding: 0 14px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  transition: border-color .15s, color .15s;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.btn-secondary:hover,
.btn-outline-secondary:hover {
  border-color: var(--al-pri) !important;
  color: var(--al-pri) !important;
  background: transparent !important;
}

.btn-sm {
  height: 30px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}

/* ============================================================
   FORMS & INPUTS
   ============================================================ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  background: var(--al-surface2) !important;
  border: 1px solid var(--al-line) !important;
  border-radius: 9px !important;
  color: var(--al-tx) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 12.5px !important;
  padding: 0 11px !important;
  height: 36px !important;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus,
input:focus {
  border-color: var(--al-pri) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important;
  outline: none !important;
  background: var(--al-surface) !important;
}
::placeholder { color: var(--al-tx3) !important; }

/* ============================================================
   TABLES
   ============================================================ */
.table,
table.generaltable {
  border-collapse: collapse !important;
  width: 100% !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

.table thead th,
table.generaltable thead th,
.table th {
  background: var(--al-surface2) !important;
  color: var(--al-tx3) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  padding: 10px 8px !important;
  border-bottom: 1px solid var(--al-line2) !important;
  border-top: none !important;
}

.table tbody tr,
table.generaltable tbody tr {
  border-top: 1px solid var(--al-line2) !important;
  transition: background .1s;
}
.table tbody tr:hover,
table.generaltable tbody tr:hover {
  background: var(--al-surface2) !important;
}

.table tbody td,
table.generaltable tbody td {
  padding: var(--al-rowpad) 8px !important;
  color: var(--al-tx2) !important;
  font-size: 13px !important;
  vertical-align: middle !important;
  border: none !important;
  border-top: 1px solid var(--al-line2) !important;
}

/* ============================================================
   BADGES & STATUS PILLS
   ============================================================ */
.badge,
.label {
  border-radius: 99px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.badge-success, .badge.bg-success,
.label-success { background: var(--al-okw) !important; color: var(--al-ok) !important; }

.badge-warning, .badge.bg-warning,
.label-warning { background: var(--al-warnw) !important; color: var(--al-warn) !important; }

.badge-danger, .badge.bg-danger,
.label-danger { background: var(--al-dangw) !important; color: var(--al-dang) !important; }

.badge-primary, .badge.bg-primary,
.label-primary { background: var(--al-priw) !important; color: var(--al-pri) !important; }

/* ============================================================
   PROGRESS BARS
   ============================================================ */
.progress {
  height: 6px !important;
  border-radius: 99px !important;
  background: var(--al-line2) !important;
  overflow: hidden !important;
}
.progress-bar {
  background: var(--al-pri) !important;
  border-radius: 99px !important;
}
.progress-bar.bg-success { background: var(--al-ok) !important; }
.progress-bar.bg-warning { background: var(--al-warn) !important; }
.progress-bar.bg-danger  { background: var(--al-dang) !important; }

/* ============================================================
   COURSE CARDS (My Courses / Dashboard)
   ============================================================ */
.coursebox,
.course-card,
[data-region="course-card"],
.dashboard-card.card {
  border: 1px solid var(--al-line) !important;
  border-radius: 14px !important;
  background: var(--al-surface) !important;
  box-shadow: var(--al-shadow) !important;
  overflow: hidden !important;
  transition: box-shadow .2s, transform .2s !important;
}
.coursebox:hover,
.course-card:hover,
[data-region="course-card"]:hover {
  box-shadow: var(--al-shadow2) !important;
  transform: translateY(-2px) !important;
}

.coursebox .course-title,
.course-card .card-title,
[data-region="course-card"] h3,
[data-region="course-card"] .card-title {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  line-height: 1.3 !important;
  color: var(--al-tx) !important;
}

/* Course card cover gradient area */
.coursebox .courseimage,
.course-card .card-img-top,
[data-region="course-card"] .card-img-top {
  height: 96px !important;
  object-fit: cover !important;
}

/* ============================================================
   KPI / STAT CARDS (Dashboard summary boxes)
   ============================================================ */
.stat-card,
.card.stat,
.block_myoverview .stat-item,
.coursestats .stat-item {
  padding: 16px 18px !important;
  border: 1px solid var(--al-line) !important;
  border-radius: 14px !important;
  background: var(--al-surface) !important;
  box-shadow: var(--al-shadow) !important;
}

.stat-card .stat-value,
.stat-value {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: var(--al-tx) !important;
}

.stat-card .stat-label,
.stat-label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--al-tx3) !important;
}

/* ============================================================
   DASHBOARD SUMMARY (existing my/courses.php blocks)
   ============================================================ */
.block_myoverview,
.block.block_myoverview {
  border: 1px solid var(--al-line) !important;
  border-radius: 14px !important;
  background: var(--al-surface) !important;
  box-shadow: var(--al-shadow) !important;
}

.block_myoverview .card-header {
  background: var(--al-surface) !important;
  border-bottom: 1px solid var(--al-line2) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--al-tx) !important;
  padding: 16px 18px !important;
}

/* ============================================================
   USER INITIALS AVATAR
   ============================================================ */
.userinitials,
.avatar-initials {
  border-radius: 10px !important;
  font-weight: 800 !important;
  background: var(--al-priw) !important;
  color: var(--al-pri) !important;
}

/* ============================================================
   TABS
   ============================================================ */
.nav-tabs {
  border-bottom: 1px solid var(--al-line) !important;
  gap: 4px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  padding: 0 4px !important;
}
.nav-tabs .nav-link {
  border: none !important;
  border-radius: 9px !important;
  padding: 7px 13px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--al-tx2) !important;
  background: var(--al-surface) !important;
  transition: background .15s, color .15s;
}
.nav-tabs .nav-link:hover {
  color: var(--al-pri) !important;
  background: var(--al-priw) !important;
}
.nav-tabs .nav-link.active {
  background: var(--al-pri) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: none !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination .page-item .page-link {
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  border: 1px solid var(--al-line) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--al-tx2) !important;
  background: var(--al-surface) !important;
  transition: background .15s, color .15s;
  padding: 0 !important;
}
.pagination .page-item.active .page-link {
  background: var(--al-pri) !important;
  border-color: var(--al-pri) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.pagination .page-item .page-link:hover {
  background: var(--al-priw) !important;
  color: var(--al-pri) !important;
  border-color: var(--al-priw) !important;
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert { border-radius: 12px !important; border: none !important; font-size: 13px !important; padding: 14px 16px !important; }
.alert-success  { background: var(--al-okw)   !important; color: var(--al-ok)   !important; }
.alert-warning  { background: var(--al-warnw) !important; color: var(--al-warn) !important; }
.alert-danger   { background: var(--al-dangw) !important; color: var(--al-dang) !important; }
.alert-info,
.alert-primary  { background: var(--al-priw)  !important; color: var(--al-pri)  !important; }

/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
  border-radius: 16px !important;
  border: 1px solid var(--al-line) !important;
  box-shadow: var(--al-shadow2) !important;
  background: var(--al-surface) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
.modal-header {
  border-bottom: 1px solid var(--al-line2) !important;
  padding: 16px 18px !important;
}
.modal-header .modal-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--al-tx) !important;
}
.modal-body { padding: 18px !important; }
.modal-footer {
  border-top: 1px solid var(--al-line2) !important;
  padding: 14px 18px !important;
  gap: 8px !important;
}

/* ============================================================
   SECTION HEADERS (course summary boxes on /my/)
   ============================================================ */
.summary-header,
.section-header h2,
[data-region="course-summary"] h2 {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  color: var(--al-tx) !important;
}

/* ============================================================
   CALENDAR
   ============================================================ */
.calendarwrapper,
#calendar-month-wrapper {
  border: 1px solid var(--al-line) !important;
  border-radius: 14px !important;
  background: var(--al-surface) !important;
  box-shadow: var(--al-shadow) !important;
  overflow: hidden !important;
}

.calendar_event_course,
.calendar-event-pill {
  border-radius: 5px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 3px 6px !important;
  background: var(--al-priw) !important;
  color: var(--al-pri) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer#page-footer,
.footer-support-link {
  background: var(--al-bg) !important;
  border-top: 1px solid var(--al-line) !important;
  color: var(--al-tx3) !important;
  font-size: 12px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* ============================================================
   UTILITY OVERRIDES
   ============================================================ */
.text-muted { color: var(--al-tx3) !important; }
.text-primary { color: var(--al-pri) !important; }
.bg-primary { background: var(--al-pri) !important; }
.border { border-color: var(--al-line) !important; }
.rounded { border-radius: 10px !important; }
.rounded-lg { border-radius: 14px !important; }
.shadow { box-shadow: var(--al-shadow) !important; }
.shadow-lg { box-shadow: var(--al-shadow2) !important; }

/* ============================================================
   DARK MODE (data-theme="dark")
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --al-bg: #070C1A;
    --al-surface: #101731;
    --al-surface2: #0C1226;
    --al-line: #1E2748;
    --al-line2: #18203E;
    --al-tx: #E9EDF9;
    --al-tx2: #98A2C0;
    --al-tx3: #6B7699;
    --al-pri: #7B72F2;
    --al-priw: #1E2050;
    --al-ok: #4ADE80;
    --al-okw: #12301F;
    --al-warn: #FBBF24;
    --al-warnw: #33250C;
    --al-dang: #F87171;
    --al-dangw: #3A1618;
    --al-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --al-shadow2: 0 2px 6px rgba(0,0,0,.45), 0 20px 48px rgba(0,0,0,.5);
    --al-side-bg: #0A122B;
  }
}


/* ---- Global Form and Modedit UI scaling (Highest Specificity) ---- */
.mform fieldset legend, .mform legend, .mform legend a, #region-main h2, #region-main h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
}
form.mform .col-form-label, form.mform label, form.mform .fitem .felement, form.mform .fitem .fstatic {
    font-size: 15px !important;
}
form.mform .form-control, form.mform select, form.mform input, form.mform textarea {
    font-size: 15px !important;
}
form.mform .btn, form.mform .btn-submit, #id_submitbutton, #id_submitbutton2, #id_cancel, .btn-secondary, .btn-primary {
    font-size: 15px !important;
}
.path-course-modedit #region-main h2 {
    font-size: 15px !important;
}
.path-course-modedit .mform legend {
    font-size: 15px !important;
}

/* ---- LIGHT MODE DASHBOARD FIXES ---- */
body:not(.theme-dark) #region-main .block_html h1,
body:not(.theme-dark) #region-main .block_html h2,
body:not(.theme-dark) #region-main .block_html h3,
body:not(.theme-dark) #region-main .block_html h4,
body:not(.theme-dark) #region-main .block_html h5,
body:not(.theme-dark) #region-main .block_html p,
body:not(.theme-dark) #region-main .block_html span {
    color: #111827 !important;
}

body:not(.theme-dark) #region-main .block_html [style*="color: #fff"],
body:not(.theme-dark) #region-main .block_html [style*="color:#fff"],
body:not(.theme-dark) #region-main .block_html [style*="color: #ffffff"],
body:not(.theme-dark) #region-main .block_html [style*="color:#ffffff"],
body:not(.theme-dark) #region-main .block_html [style*="color: white"],
body:not(.theme-dark) #region-main .block_html [style*="color:white"],
body:not(.theme-dark) #region-main .block_html [style*="color: #f8fafc"],
body:not(.theme-dark) #region-main .block_html [style*="color:#f8fafc"],
body:not(.theme-dark) #region-main .block_html [style*="color: #f1f5f9"],
body:not(.theme-dark) #region-main .block_html [style*="color:#f1f5f9"] {
    color: #111827 !important;
}

body:not(.theme-dark) #region-main .block_html [style*="background"],
body:not(.theme-dark) #region-main .block_html [style*="background-color"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-color: #f1f5f9 !important;
}

body:not(.theme-dark) #region-main .block_html > div {
    background: transparent !important;
}

/* Ensure the icon boxes inside the cards keep their colors */
body:not(.theme-dark) #region-main .block_html [style*="border-radius"][style*="width: 48px"],
body:not(.theme-dark) #region-main .block_html [style*="border-radius"][style*="width:48px"],
body:not(.theme-dark) #region-main .block_html [style*="border-radius"][style*="width: 40px"],
body:not(.theme-dark) #region-main .block_html [style*="border-radius"][style*="width:40px"] {
    background-color: #f1f5f9 !important;
    background: #f1f5f9 !important;
}

body:not(.theme-dark) #region-main .block_html {
    background: transparent !important;
}