/* ==========================================================================
   KBCDrive Admin - Google-Style Light Mode Theme
   Minimalist, Clean, Rounded — Inspired by Google Material Design 3
   ========================================================================== */

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

/* ── Design Tokens ──────────────────────────────────────────────────────── */
:root {
  --primary:        #1A73E8;
  --primary-hover:  #1558C0;
  --primary-light:  #E8F0FE;
  --primary-mid:    #D2E3FC;

  --surface:        #FFFFFF;
  --surface-2:      #F8F9FA;
  --surface-3:      #F1F3F4;
  --surface-4:      #E8EAED;

  --border:         #DADCE0;
  --border-light:   #E8EAED;

  --text-primary:   #202124;
  --text-secondary: #5F6368;
  --text-muted:     #9AA0A6;
  --text-link:      #1A73E8;

  --success:        #137333;
  --success-bg:     #E6F4EA;
  --warning:        #B06000;
  --warning-bg:     #FEF7E0;
  --danger:         #C5221F;
  --danger-bg:      #FCE8E6;
  --info:           #1A73E8;
  --info-bg:        #E8F0FE;

  --sidebar-w:      260px;
  --header-h:       64px;
  --radius-sm:      8px;
  --radius:         12px;
  --radius-lg:      20px;
  --radius-xl:      28px;
  --radius-full:    9999px;

  --shadow-xs: 0 1px 2px rgba(60,64,67,.10), 0 1px 3px 1px rgba(60,64,67,.05);
  --shadow-sm: 0 1px 3px rgba(60,64,67,.12), 0 2px 6px 2px rgba(60,64,67,.08);
  --shadow-md: 0 2px 6px rgba(60,64,67,.15), 0 4px 12px 4px rgba(60,64,67,.08);
  --shadow-lg: 0 4px 12px rgba(60,64,67,.18), 0 8px 24px 8px rgba(60,64,67,.08);

  --transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  background-color: var(--surface-2) !important;
  color: var(--text-primary) !important;
  margin: 0;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  /* Safari flex fix */
  -webkit-text-size-adjust: 100%;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6, .font-archivo {
  font-family: 'Inter', -apple-system, sans-serif;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* ── Safari-specific global fixes ────────────────────────────────────────── */

/* 1. Fix gap in flex (Safari < 14.1 doesn't support gap in flex) */
.sidebar-item {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 12px;          /* modern */
  padding: 10px 14px;
  border-radius: var(--radius-full) !important;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  margin: 1px 6px;
}

/* 2. Safari flex children */
.sidebar-item > * { -webkit-flex-shrink: 0; flex-shrink: 0; }
.sidebar-item > span { -webkit-flex-shrink: 1; flex-shrink: 1; }

/* 3. Webkit backdrop-filter global */
[style*="backdrop-filter"] {
  -webkit-backdrop-filter: blur(2px);
}

/* 4. Sticky positioning: header uses position sticky, needs webkit */
header[style*="position:sticky"],
header[style*="position: sticky"] {
  position: -webkit-sticky !important;
  position: sticky !important;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
#mobile-sidebar {
  background: var(--surface) !important;
  border-right: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-sm);
  -webkit-transition: -webkit-transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

/* ── Sidebar Nav Items (hover/active/icon — base defined in Safari-fixes above) ── */
.sidebar-item:hover {
  background: var(--surface-3) !important;
  color: var(--text-primary) !important;
}
.sidebar-item.active {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  font-weight: 600;
  box-shadow: none !important;
}
.sidebar-item iconify-icon { -webkit-flex-shrink: 0; flex-shrink: 0; font-size: 18px; }
.sidebar-item.active iconify-icon { color: var(--primary); }

/* ── Cards ──────────────────────────────────────────────────────────── */
.g-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
}
.g-card:hover { box-shadow: var(--shadow-sm); }
.card-shadow { box-shadow: var(--shadow-sm); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
  font-family: inherit;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); box-shadow: var(--shadow-sm); }
.btn-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--border); }
.btn-outline:hover { background: var(--primary-light); border-color: var(--primary); }
.btn-danger { background: var(--danger-bg); color: var(--danger); border: 1.5px solid #F5C6C5; }
.btn-danger:hover { background: #F9D7D6; }
.btn-success { background: var(--success-bg); color: var(--success); border: 1.5px solid #C6E6D0; }
.btn-success:hover { background: #D4EDD9; }
.btn-warning { background: var(--warning-bg); color: var(--warning); border: 1.5px solid #F9D99B; }
.btn-warning:hover { background: #FDF0C7; }
.btn-sm { padding: 5px 14px; font-size: 12px; }
.btn-lg { padding: 12px 28px; font-size: 14px; }

/* ── Form Controls ─────────────────────────────────────────────────── */
.g-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  outline: none;
  transition: var(--transition);
}
.g-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,115,232,.15); }
.g-input::placeholder { color: var(--text-muted); }
.g-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* ── Tables ──────────────────────────────────────────────────────────── */
.g-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.g-table thead { background: var(--surface-2); }
.g-table thead th {
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.g-table tbody tr { border-bottom: 1px solid var(--border-light); transition: var(--transition); }
.g-table tbody tr:last-child { border-bottom: none; }
.g-table tbody tr:hover { background: var(--surface-2); }
.g-table tbody td { padding: 12px 16px; color: var(--text-primary); vertical-align: middle; }

/* ── Badges ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 600;
}
.badge-blue   { background: var(--info-bg);    color: var(--info); }
.badge-green  { background: var(--success-bg); color: var(--success); }
.badge-red    { background: var(--danger-bg);  color: var(--danger); }
.badge-yellow { background: var(--warning-bg); color: var(--warning); }
.badge-gray   { background: var(--surface-3);  color: var(--text-secondary); }

/* ── Alert Banners ──────────────────────────────────────────────────── */
.g-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; margin-bottom: 16px; border: 1px solid transparent;
}
.g-alert-info    { background: var(--info-bg);    color: #174EA6; border-color: #C5D9F8; }
.g-alert-success { background: var(--success-bg); color: var(--success); border-color: #B7DFC5; }
.g-alert-warning { background: var(--warning-bg); color: var(--warning); border-color: #F9D99B; }
.g-alert-danger  { background: var(--danger-bg);  color: var(--danger); border-color: #F5C6C5; }

/* ── Chart Grid ──────────────────────────────────────────────────────── */
.chart-grid {
  background-image:
    linear-gradient(var(--border-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-light) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ── Gradient Helper ─────────────────────────────────────────────────── */
.blue-gradient-bg { background: linear-gradient(135deg, #1A73E8 0%, #1558C0 100%); }

/* ── Overlay ─────────────────────────────────────────────────────────── */
#sidebar-overlay {
  background: rgba(32, 33, 36, 0.45) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(2px) !important;
  /* Use explicit coords instead of inset: shorthand for Safari */
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
}

/* ── Scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Tailwind Dark-class Overrides → Light Mode ──────────────────────── */
.bg-\[#0B0F19\]       { background-color: var(--surface-2) !important; }
.bg-\[#0B0F19\]\/90   { background-color: var(--surface) !important; }
.bg-\[#151C2C\]       { background-color: var(--surface) !important; }
.bg-slate-900         { background-color: var(--surface-2) !important; }
.bg-slate-800         { background-color: var(--surface-3) !important; }
.bg-slate-700         { background-color: var(--surface-4) !important; }
.text-slate-100       { color: var(--text-primary) !important; }
.text-white           { color: var(--text-primary) !important; }
.text-slate-400       { color: var(--text-secondary) !important; }
.text-slate-500       { color: var(--text-muted) !important; }
.border-slate-800     { border-color: var(--border) !important; }
.border-slate-800\/80 { border-color: var(--border-light) !important; }
.border-slate-800\/60 { border-color: var(--border-light) !important; }
.border-slate-700\/80 { border-color: var(--border) !important; }
.border-slate-800\/25 { border-color: var(--border-light) !important; }
.text-slate-300       { color: var(--text-secondary) !important; }
.text-slate-600       { color: var(--text-muted) !important; }
.text-slate-200       { color: var(--text-primary) !important; }

/* Header */
main > header,
.admin-header {
  background: var(--surface) !important;
  border-bottom-color: var(--border-light) !important;
  box-shadow: var(--shadow-xs);
}

/* Footer */
footer {
  background: var(--surface) !important;
  border-top-color: var(--border-light) !important;
  color: var(--text-muted) !important;
}

/* Burger button */
#burger-btn {
  background: var(--surface-3) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
}
#burger-btn:hover { background: var(--surface-4) !important; color: var(--text-primary) !important; }

/* Close sidebar button */
#close-sidebar-btn { color: var(--text-secondary) !important; }
#close-sidebar-btn:hover { color: var(--text-primary) !important; }

/* Backdrop blur header override */
.backdrop-blur-md { backdrop-filter: none !important; }

/* ════════════════════════════════════════════════════════════════════════════
   GLOBAL CARD / CONTAINER OVERRIDES
   Covers every dark Tailwind opacity variant used across all admin pages
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Dark card backgrounds → White ──────────────────────────────────────── */
.bg-slate-800\/40,
.bg-slate-800\/30,
.bg-slate-800\/20,
.bg-slate-800\/10,
.bg-slate-800\/80,
[class*="bg-slate-800"] {
  background-color: #FFFFFF !important;
  --tw-bg-opacity: 1 !important;
}

.bg-slate-900\/80,
.bg-slate-900\/60,
.bg-slate-900\/40,
.bg-slate-900\/30,
[class*="bg-slate-900"] {
  background-color: var(--surface-2) !important;
  --tw-bg-opacity: 1 !important;
}

.bg-slate-950,
[class*="bg-slate-950"] {
  background-color: var(--surface-3) !important;
  --tw-bg-opacity: 1 !important;
}

/* ── Border colors → Light ───────────────────────────────────────────────── */
.border-slate-700\/60,
.border-slate-700\/80,
.border-slate-700\/40,
[class*="border-slate-700"] {
  border-color: var(--border) !important;
}

[class*="border-slate-800"] {
  border-color: var(--border-light) !important;
}

[class*="divide-slate-800"] > * + * {
  border-color: var(--border-light) !important;
}

/* ── Table overrides ────────────────────────────────────────────────────── */
thead,
[class*="bg-slate-900"] thead {
  background-color: var(--surface-2) !important;
}

thead th,
[class*="text-slate-400"][class*="uppercase"] {
  color: var(--text-muted) !important;
}

tbody tr {
  border-color: var(--border-light) !important;
}

tbody tr:hover,
[class*="hover:bg-slate-800"] {
  background-color: var(--surface-2) !important;
}

/* table cell text */
tbody td p,
tbody td span.font-bold,
[class*="text-white"] {
  color: var(--text-primary) !important;
}

/* ── Form inputs (select, input) → Light ────────────────────────────────── */
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
textarea {
  background-color: #FFFFFF !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: 12px !important;
}

select:focus,
input:focus,
textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(26,115,232,.15) !important;
  outline: none !important;
}

select option {
  background: #fff !important;
  color: var(--text-primary) !important;
}

/* ── Dropzone / Upload Zone → Light ────────────────────────────────────── */
#drop-zone,
[class*="border-dashed"] {
  background-color: var(--surface-2) !important;
  border-color: var(--border) !important;
}

#drop-zone:hover,
[class*="hover:border-blue-500"]:hover {
  background-color: var(--primary-light) !important;
  border-color: var(--primary) !important;
}

/* ── Drop zone icon box ──────────────────────────────────────────────────── */
.bg-blue-500\/10 {
  background-color: var(--primary-light) !important;
}

/* ── Upload Queue Widget (Google Drive style) → Light ───────────────────── */
#gdrive-upload-widget {
  background: #FFFFFF !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}

#gdrive-upload-widget > div:first-child {
  background: var(--surface-2) !important;
  border-bottom-color: var(--border-light) !important;
}

#gdrive-upload-widget [class*="bg-slate-900"],
#gdrive-upload-widget [class*="bg-slate-950"] {
  background-color: var(--surface-2) !important;
}

#gdrive-upload-widget [class*="text-white"] {
  color: var(--text-primary) !important;
}

#gdrive-upload-widget [class*="text-slate-400"] {
  color: var(--text-secondary) !important;
}

#gdrive-upload-widget [class*="border-slate-800"],
#gdrive-upload-widget [class*="divide-slate-800"] > * + * {
  border-color: var(--border-light) !important;
}

#gdrive-upload-widget button {
  color: var(--text-secondary) !important;
}
#gdrive-upload-widget button:hover {
  background: var(--surface-3) !important;
  color: var(--text-primary) !important;
}

/* Queue item rows */
#widget-items-list > div {
  background: var(--surface-2) !important;
  border-color: var(--border-light) !important;
}

/* Progress bar track */
.bg-slate-800.h-full,
[class*="bg-slate-800"][class*="h-1"],
.w-full.h-1 {
  background-color: var(--surface-3) !important;
}

/* ── Dark pill / tag badges → Light ─────────────────────────────────────── */
[class*="bg-slate-800"][class*="rounded-full"],
[class*="bg-slate-800"][class*="rounded-2xl"],
[class*="bg-slate-800"][class*="rounded-xl"] {
  background-color: var(--surface-3) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}

/* ── Tab / filter bars ───────────────────────────────────────────────────── */
[class*="bg-slate-800"][class*="p-1"] {
  background-color: var(--surface-3) !important;
  border-color: var(--border) !important;
}

/* Active tab pill */
.bg-blue-600 {
  background-color: var(--primary) !important;
  color: #fff !important;
}
.bg-blue-600:hover {
  background-color: var(--primary-hover) !important;
}

/* Inactive tab link hover */
[class*="hover:text-white"]:not(.bg-blue-600):hover {
  color: var(--text-primary) !important;
}

/* ── Primary action buttons → Rounded blue ──────────────────────────────── */
button[type="submit"],
a.blue-gradient-bg,
[class*="bg-blue-600"]:not(iconify-icon):not(span):not(div),
[class*="bg-blue-500"]:not(iconify-icon):not(span):not(div) {
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: var(--radius-full) !important;
  border: none !important;
}

button[type="submit"]:hover,
[class*="bg-blue-600"]:not(iconify-icon):not(span):not(div):hover {
  background: var(--primary-hover) !important;
}

/* ── Danger action buttons → Light red rounded ──────────────────────────── */
[class*="text-rose-400"]:not(iconify-icon),
[class*="hover:bg-rose-500"] {
  color: var(--danger) !important;
}
[class*="hover:bg-rose-500"]:hover {
  background: var(--danger-bg) !important;
  border-radius: 8px;
}

/* ── Approve / verify action buttons → Light ─────────────────────────────── */
[class*="bg-emerald-600"],
[class*="bg-green-600"] {
  background: var(--success) !important;
  color: #fff !important;
  border-radius: var(--radius-full) !important;
}

[class*="bg-rose-600"],
[class*="bg-red-600"] {
  background: var(--danger) !important;
  color: #fff !important;
  border-radius: var(--radius-full) !important;
}

/* ── Amber/yellow warning buttons → Light ───────────────────────────────── */
[class*="bg-amber-600"],
[class*="bg-yellow-600"] {
  background: #F9AB00 !important;
  color: #fff !important;
  border-radius: var(--radius-full) !important;
}

/* ── Status badges (inline) ──────────────────────────────────────────────── */
[class*="bg-emerald-500\/10"],
[class*="bg-emerald-400\/10"] {
  background: var(--success-bg) !important;
  color: var(--success) !important;
}

[class*="bg-amber-500\/10"],
[class*="bg-amber-400\/10"],
[class*="bg-amber-500\/15"] {
  background: var(--warning-bg) !important;
  color: var(--warning) !important;
}

[class*="bg-rose-500\/10"],
[class*="bg-red-500\/10"] {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
}

[class*="bg-blue-500\/10"],
[class*="bg-blue-600\/10"] {
  background: var(--info-bg) !important;
  color: var(--info) !important;
}

[class*="bg-purple-500\/10"] {
  background: #F3E8FF !important;
  color: #7C3AED !important;
}

[class*="bg-orange-500\/10"] {
  background: #FEF3E2 !important;
  color: #C2410C !important;
}

/* ── Stat card icon boxes ────────────────────────────────────────────────── */
.w-12.h-12.rounded-2xl,
.w-11.h-11.rounded-2xl {
  box-shadow: none !important;
}

/* ── Photo thumbnail cell ────────────────────────────────────────────────── */
[class*="bg-slate-900"][class*="rounded-xl"],
[class*="bg-slate-900"][class*="border-slate-700"] {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
}

/* ── Alert/notification boxes ────────────────────────────────────────────── */
[class*="bg-emerald-500\/10"][class*="border-emerald-500"],
[class*="bg-emerald-500\/10"][class*="rounded"] {
  background: var(--success-bg) !important;
  border-color: #B7DFC5 !important;
  color: var(--success) !important;
  border-radius: 12px !important;
}

[class*="bg-rose-500\/10"][class*="border-rose-500"],
[class*="bg-rose-500\/10"][class*="rounded"] {
  background: var(--danger-bg) !important;
  border-color: #F5C6C5 !important;
  color: var(--danger) !important;
  border-radius: 12px !important;
}

[class*="bg-amber-500\/8"],
[class*="border-amber-500\/25"] {
  background: var(--warning-bg) !important;
  border-color: #F9D99B !important;
}

[class*="bg-emerald-500\/8"],
[class*="border-emerald-500\/25"] {
  background: var(--success-bg) !important;
  border-color: #B7DFC5 !important;
}

/* ── Overlay / Modal dark backdrops → keep functional ───────────────────── */
[class*="bg-black\/70"],
[class*="bg-black\/60"],
[class*="bg-black\/50"] {
  background: rgba(32,33,36,.5) !important;
}

/* ── Dark modal panels ──────────────────────────────────────────────────── */
[class*="fixed"][class*="bg-slate-900"],
[class*="absolute"][class*="bg-slate-900"] {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ── Overall progress bar inside widget ─────────────────────────────────── */
#widget-overall-progress {
  background: var(--primary) !important;
}

/* ── Animated highlight on newly added table row ────────────────────────── */
[class*="bg-blue-500\/5"] {
  background: var(--primary-light) !important;
}

/* ── Text color in cards: fix dark colors to light mode ─────────────────── */
.font-archivo,
[class*="font-archivo"] {
  color: var(--text-primary) !important;
}

p[class*="text-slate-400"],
span[class*="text-slate-400"],
div[class*="text-slate-400"],
td[class*="text-slate-400"] {
  color: var(--text-secondary) !important;
}

p[class*="text-slate-500"],
span[class*="text-slate-500"],
div[class*="text-slate-500"],
td[class*="text-slate-500"] {
  color: var(--text-muted) !important;
}

/* ── Hover row in logs / activity ───────────────────────────────────────── */
[class*="hover:bg-slate-800\/20"]:hover,
[class*="hover:bg-slate-800\/30"]:hover {
  background-color: var(--surface-2) !important;
}

/* ── Empty state text ────────────────────────────────────────────────────── */
[class*="text-slate-500"][class*="text-center"] {
  color: var(--text-muted) !important;
}

/* ── Pending topups: approve/reject form inputs ──────────────────────────── */
[class*="bg-slate-900"][class*="border"][class*="rounded"] {
  background: #fff !important;
  border-color: var(--border) !important;
}

/* ── chart label text ────────────────────────────────────────────────────── */
[class*="text-slate-500"][class*="font-bold"] {
  color: var(--text-muted) !important;
}

/* ── Progress bar background track ─────────────────────────────────────────*/
.h-2.bg-slate-800,
[class*="h-2"][class*="bg-slate-800"],
[class*="h-1"][class*="bg-slate-800"] {
  background-color: var(--surface-4) !important;
}

/* ── Animate-ping dot (Live badge) ─────────────────────────────────────── */
[class*="animate-ping"][class*="bg-emerald-400"] {
  background-color: #34A853 !important;
}
[class*="bg-emerald-400"]:not([class*="animate-ping"]) {
  background-color: #34A853 !important;
}