/* ==========================================================================
   تنسيق صفحة «الصفقات» (`#/deals`) — تخطيط مرجع م. قطب بتوكنز النظام.

   ⚠️ **كل كلاس هنا `dls-*` وكل قاعدة مربوطة بيه.** قاعدة عامة على وسم (زي
      `table` أو `label`) بتفضل تنطبق على عناصر صفحات تانية — وقاعدة اتكتبت
      لعنصر اتشال فضلت تغلب عنصر جديد بنفس الوسم وأكلت نص يوم في «قاعدة العملاء».
      📌 والمرجع مكتوب بقواعد عامة (`table`, `th`, `td`, `.stat`, `.dot`) —
         نقلها زي ما هي كان هيسرّب على **كل** صفحات النظام.
   ⚠️ **مافيش ولا لون `#hex`** — كله توكنز الثيم. المرجع لوحته مكتوبة بالإيد
      (`#f2f6f3` · `#08715b` · `#e8eeea`) والفريق شغّال على الدارك مود، فنقلها
      كان بيطلّع كارت أبيض وسط صفحات غامقة.
   ⚠️ **وشارة المرحلة مالهاش لون هنا خالص**: بتستعمل `.badge-*` المشتركة اللي
      `QStage.badgeClass` بترجّعها والمعرَّفة مرة واحدة في `styles.css` — فنفس
      المرحلة بتبان زي ما هي بالظبط في «قاعدة العملاء» وصفحة البحث. المرجع بيلوّن
      كل المراحل بلون أزرق واحد، وده بيضيّع المعلومة.
   ========================================================================== */

.dls { display: flex; flex-direction: column; gap: 14px; }

/* ── الترويسة: عنوان + وصف على الشمال، زراير على اليمين (تخطيط `.topbar`) ── */
.dls .dls-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.dls .dls-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.dls .dls-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; color: var(--ink); }
.dls .dls-note { font-size: .8rem; color: var(--muted); }
/* `direction: ltr` زي المرجع — الزرارين بترتيبهم [PDF][تحديث] مهما كان السياق */
.dls .dls-actions { display: flex; direction: ltr; gap: 10px; }

/* ── البانرات ── */
.dls .dls-stale,
.dls .dls-err,
.dls .dls-mock {
  padding: 10px 14px; border-radius: var(--radius-sm); font-size: .88rem; line-height: 1.7;
  border: 1px solid var(--line-strong); background: var(--card-2); color: var(--ink);
}
.dls .dls-err { border-color: var(--danger); }
/* 🟡 لافتة الأعمدة التجريبية — **أصفر مش أحمر**: دي بتوصف **حالة الصفحة**
   وبتتشال مع الجولة الجاية، مش خطأ في الداتا المعروضة. نفس تفرقة «بيانات
   تجريبية» ضد تنبيه الضريبة في «التعاقدات». */
.dls .dls-mock { border-color: var(--warn); background: var(--warn-tint); }

/* ── الكروت: خمسة، بحدود ملوّنة للمستعجل والراكد (`.stat.danger`/`.warn`) ── */
.dls .dls-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.dls .dls-kpi {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 84px; padding: 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card);
}
.dls .dls-kpi .dls-n { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.dls .dls-kpi .dls-l { margin-top: 6px; font-size: .76rem; color: var(--muted); }
.dls .dls-kpi.dls-red { border-color: var(--danger); }
.dls .dls-kpi.dls-amber { border-color: var(--accent); }

/* ── الأدوات: بحث بعرض كامل، ثم القوايم، ثم صف الشرايط ── */
.dls .dls-controls { display: flex; flex-direction: column; gap: 8px; }
.dls .dls-selects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dls .dls-controls input,
.dls .dls-controls select {
  width: 100%; height: 36px; padding: 0 12px; font-size: .84rem; font-family: var(--font-body);
  border: 1px solid var(--line); border-radius: var(--radius-xs);
  background: var(--card); color: var(--ink);
}
.dls .dls-controls input:focus,
.dls .dls-controls select:focus,
.dls .dls-controls select.dls-sel-on { border-color: var(--primary); box-shadow: var(--ring); outline: none; }
/* القائمة المنسدلة بيرسمها المتصفّح وبياخد خلفيتها من `background-color` بتاع
   الـ`select` — الوراثة مابتوصلهاش، فلازم صريح وإلا أبيض على أبيض في الدارك. */
.dls .dls-controls select option { background: var(--card); color: var(--ink); }

.dls .dls-chips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
/* فاصل بصري بين شرايط الاستعجال وشرايط المراحل — **الصف واحد زي المرجع**، بس
   دول فلترين مستقلين وممكن يبقوا شغّالين مع بعض، فالفاصل بيقول كده من غير كلام. */
.dls .dls-chipsep { width: 1px; height: 20px; background: var(--line-strong); margin: 0 3px; }
.dls .dls-chip {
  height: 30px; padding: 0 13px; font-size: .78rem; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink);
}
.dls .dls-chip:hover { border-color: var(--primary); }
.dls .dls-chip.dls-on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* ── عدّاد النتيجة فوق الجدول (`.resultCount`) ── */
.dls .dls-count { font-size: .78rem; color: var(--muted); }
.dls .dls-count b { color: var(--ink); }

/* ── الجدول ──
   ١٩ عمود، فالتمرير جوّه الحاوية — الصفحة نفسها عمرها ما تمرّر أفقيًا. */
.dls .dls-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; }
.dls .dls-tablewrap { overflow-x: auto; }
.dls .dls-table { width: 100%; min-width: 1380px; border-collapse: collapse; font-size: .8rem; }
.dls .dls-table th,
.dls .dls-table td {
  padding: 9px 10px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
/* 🔴 أعمدة الأزرار **بعرض محتواها**. `width: 1%` مع `table-layout: auto` معناها
   «أصغر عرض ممكن» عند المتصفّح، فبتنكمش على الأيقونة وبس. من غيرها التسع أعمدة
   دي كانت بتاخد نصيب متساوي تقريبًا وتاكل نص الشاشة العريضة من الأعمدة اللي
   فيها كلام (المندوب · المرحلة · القيمة). والأرقام من `ICON_COLS` مش مكتوبة هنا. */
.dls .dls-table th.dls-c,
.dls .dls-table td.dls-c { width: 1%; padding-inline: 5px; }
/* أول عمودين (التذكرة والشركة) نص — التوسيط للأرقام والأيقونات */
.dls .dls-table th:nth-child(-n+5),
.dls .dls-table td:nth-child(-n+5) { text-align: right; }
.dls .dls-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-2); color: var(--muted); font-weight: 600; font-size: .74rem;
}
.dls .dls-table tbody tr:last-child td { border-bottom: 0; }
.dls .dls-table tbody tr:hover td { background: var(--card-2); }
.dls .dls-table a { color: var(--primary); text-decoration: none; }
.dls .dls-table a:hover { text-decoration: underline; }

/* شريط الاستعجال على أول الصف — إشارة بصرية جنب الشارة، بلا أي لون جديد. */
.dls .dls-row td:first-child { border-inline-start: 3px solid transparent; }
.dls .dls-row.dls-u0 td:first-child { border-inline-start-color: var(--danger); }
.dls .dls-row.dls-u1 td:first-child { border-inline-start-color: var(--accent); }
.dls .dls-row.dls-u2 td:first-child { border-inline-start-color: var(--ok); }

/* صف VIP وصف مقفول — `!important` على الـhover عشان تلوين الصف يغلب تلوينه */
.dls .dls-row.dls-viprow td { background: var(--accent-tint); }
.dls .dls-row.dls-viprow:hover td { background: var(--accent-tint) !important; }
.dls .dls-row.dls-lockedrow td,
.dls .dls-row.dls-lockedrow:hover td { background: var(--bg-2) !important; color: var(--muted); }

.dls .dls-stage { display: inline-block; }
.dls .dls-stale7 { color: var(--danger); font-weight: 600; }
.dls .dls-sub { color: var(--muted); font-size: .72rem; }
/* «—» (مانعرفش) و«…» (لسه بنسأل) — اثنين مختلفين عن الصفر، ولونهم
   بيقول كده: باهتين مش رقم عادي. */
.dls .dls-na, .dls .dls-wait { color: var(--faint); }

.dls .dls-empty { padding: 34px; text-align: center; color: var(--muted); font-size: .88rem; }
/* 🔴 `display` هنا بتغلب قاعدة المتصفّح `[hidden]{display:none}` — من غير السطر
   ده الرسالة بتفضل ظاهرة تحت جدول فيه صفوف. نفس بق `.dls-replymenu` بالحرف. */
.dls .dls-empty[hidden] { display: none; }

/* ── الترقيم ── */
.dls .dls-pager { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding-top: 4px; }
.dls .dls-pg {
  min-width: 34px; height: 32px; padding: 0 10px; cursor: pointer; font-size: .78rem;
  font-family: var(--font-body);
  border: 1px solid var(--line); border-radius: var(--radius-xs);
  background: var(--card); color: var(--ink);
}
.dls .dls-pg:hover:not(:disabled) { border-color: var(--primary); }
.dls .dls-pg.dls-on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
/* الزرار المعطّل بيفضل **ظاهر** مش متشال: اختفاؤه بيحرّك باقي الأزرار تحت الماوس
   مع كل ضغطة، فالمستخدم يدوس «التالي» ويلاقي نفسه داس رقم. */
.dls .dls-pg:disabled { opacity: .45; cursor: default; }
.dls .dls-load { padding: 26px; text-align: center; color: var(--muted); }

.dls .dls-ico {
  width: 26px; height: 26px; padding: 0; cursor: pointer; font-size: .9rem; line-height: 1;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink);
}
.dls .dls-ico:hover { border-color: var(--primary); }
.dls .dls-fav { color: var(--faint); font-size: 1.02rem; }
.dls .dls-fav.dls-on { color: var(--accent); background: var(--accent-tint); border-color: var(--accent); }
.dls .dls-lock.dls-on { background: var(--line); }
/* اسم اللي قفل — بيترسم **بس لما يكون مقفول**، فالعمود بيفضل بعرض الأيقونة في
   الحالة العادية. ⚠️ و`white-space: nowrap` عشان الاسم مايتكسّرش على سطرين
   ويطوّل الصف كله. */
.dls .dls-lockby {
  display: inline-block; margin-inline-start: 5px; font-size: .72rem;
  color: var(--muted); white-space: nowrap;
}

/* 🎨 **أيقونات سلاك وأودو بقت `.eyebtn` العامة** — نفس جدول الاجتماعات
   بالحرف (طلب م. قطب إن الأيقونات تتوحّد). القواعد القديمة (`.dls-app` ·
   `.dls-slack` · `.dls-odoo`) **اتشالت** لأنها بقت ميتة — وقاعدة CSS ميتة
   مش محايدة: بتفضل تنطبق على عنصر جديد بنفس الاسم بعدين (درس فلاتر «قاعدة
   العملاء»). */

/* شارة VIP */
/* 🎯 **قواعد شارة VIP مش مقيّدة بـ`.dls` عن قصد (٢٠٢٦-٠٩-٠٩)** — «قاعدة
   العملاء» (`.cdb`) بقت بتعرض نفس الشارة وبتنده **نفس الراسم**
   (`QDeals.vipCell`). ونسخة تانية من الـCSS تحت `.cdb` معناها إن «أحمر
   للرقم» تفرق بين الصفحتين مع أول تعديل — وده أكتر بق بيتكرر في المشروع.
   ⚠️ **وكل ملفات CSS محمّلة على كل الصفحات** (`index.html`)، فشيل النطاق
      كفاية — مش محتاج نقل الملف.
   🔴 **وفيه حرس بيرفض إعادة تقييدها بـ`.dls`** — لو حصل، عمود قاعدة
      العملاء بيفضل بلا شكل **والصفحة مابتديش أي خطأ**. */
.dls-vip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 22px; padding: 0 6px; border-radius: 7px;
  font-size: .62rem; font-weight: 900; letter-spacing: .04em;
  background: var(--accent); color: var(--on-primary);
}

/* 🔢 **أحمر = مميز بسبب رقمه · ذهبي = بسبب لقبه/جهته** (طلب فراس ٢٠٢٦-٠٩-٠٩).
   🔴 **مافيش `#hex`** — `var(--danger)` عشان بلوك الطباعة في `styles.css`
      يقلب اللوحة للنهار لوحده والورقة تطلع بيضا (نفس قاعدة الملف كله).
   ⚠️ **والتباين شغّال في الوضعين بلا توكن جديد**: `--on-primary` بتقلب مع
      الثيم في **نفس** اتجاه `--danger` — نهار أبيض على `#c0392b` الغامق،
      وليل `#06120d` الغامق على `#e0685c` الفاتح.
   ⚠️ **وبتغيّر الخلفية وبس** — المقاس والخط في `.dls-vip`، فشارة الرقم
      وشارة اللقب **نفس الشكل** والفرق اللون. */
.dls-vip.dls-vipnum { background: var(--danger); }

/* 💎 132 — الحالتين التانيتين في عمود VIP، وكل واحدة بلونها.
   🔴 **مافيش لون `#hex`** — كله توكنز النظام، فبلوك الطباعة في `styles.css`
      بيقلب اللوحة للنهار لوحده والورقة تطلع بيضا. نسخة تانية للألوان بتفرق
      عنها مع الوقت.
   ⚠️ **و«#» رمادي و«—» أبهت منها**: «#» **حقيقة اتفحصت** (برّه الشروط) و«—»
      **مش عارفين**. لو الاتنين بنفس اللون بيتقروا حاجة واحدة، وهي بالظبط
      التفرقة اللي العمود اتعمل عشانها. */
.dls-vipno { font-weight: 700; color: var(--muted); }
.dls-vipna { color: var(--line-strong); }

/* 💎 تنبيه «تقييم الرقم لسه مش واصل».
   ⚠️ **بنفس شكل `.dls-mock` وبلون التحذير**: ده بيوصف **حالة وصول الداتا**
      وبيتشال لوحده أول ما التغطية تكمّل — مش خطأ في المعروض. نفس تفرقة
      «بيانات تجريبية» مقابل التنبيهات الحمرا. */
.dls .dls-vipnote {
  margin-top: 10px;
  padding: 10px 14px; border-radius: var(--radius-sm); font-size: .88rem; line-height: 1.7;
  border: 1px solid var(--warn); background: var(--warn-tint); color: var(--ink);
}

/* ── قايمة «رد» ── */
.dls .dls-replycell { position: relative; }
.dls .dls-reply {
  padding: 5px 9px; cursor: pointer; font-size: .76rem; font-family: var(--font-body);
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--card-2); color: var(--primary);
}
.dls .dls-reply:hover { border-color: var(--primary); }
.dls .dls-replymenu {
  position: absolute; top: 38px; inset-inline-start: 4px; z-index: 20;
  width: 190px; padding: 5px; text-align: right;
  border: 1px solid var(--line); border-radius: var(--radius-xs);
  background: var(--card); box-shadow: var(--shadow);
}
/* 🔴 **مش تفصيلة**: `display: block` تحت بتغلب قاعدة المتصفّح
   `[hidden] { display: none }`، فمن غير السطر ده القايمة بتفضل مفتوحة على طول
   في كل صف — **نفس بق `.cch-calls` و`.toast` بالحرف**، وحرس بيثبّتها. */
.dls .dls-replymenu[hidden] { display: none; }
.dls .dls-replymenu button,
.dls .dls-replymenu a {
  display: block; width: 100%; padding: 9px; cursor: pointer; text-align: right;
  font: inherit; font-size: .78rem; text-decoration: none;
  border: 0; border-radius: 7px; background: none; color: var(--ink);
}
.dls .dls-replymenu button:hover,
.dls .dls-replymenu a:hover { background: var(--card-2); text-decoration: none; }
.dls .dls-tag {
  margin-inline-start: 6px; padding: 1px 5px; border-radius: 5px;
  font-size: .6rem; background: var(--warn-tint); color: var(--warn);
}

/* ── بطاقة التفاصيل ونافذة الحقل ──
   بتتبنى في `body` **برّه** `.dls`، فالقواعد لازم تتعلّق بكلاسها هي — نفس
   المصيدة اللي طلّعت كارت أبيض في الدارك مود قبل كده. */
.dls-detail { display: grid; gap: 9px; margin: 0; padding: 4px 0; }
.dls-detail > div {
  display: flex; justify-content: space-between; gap: 20px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.dls-detail > div:last-child { border-bottom: 0; }
.dls-detail dt { color: var(--muted); font-size: .84rem; }
.dls-detail dd { margin: 0; font-weight: 700; font-size: .86rem; color: var(--ink); text-align: left; }
.dls-detail dd a { color: var(--primary); }
.dls-pop { font-size: .9rem; line-height: 1.9; color: var(--ink); white-space: pre-wrap; }

@media (max-width: 1100px) {
  .dls .dls-kpis { grid-template-columns: repeat(2, 1fr); }
  .dls .dls-kpi:first-child { grid-column: span 2; }
  .dls .dls-selects { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .dls .dls-selects { grid-template-columns: 1fr; }
  .dls .dls-title { display: block; }
  .dls .dls-note { display: block; margin-top: 5px; }
  .dls-detail > div { flex-direction: column; gap: 3px; }
  .dls-detail dd { text-align: right; }
}

/* ------------------------------- الطباعة ------------------------------- */
/* ⚠️ مافيش لون مكتوب هنا: الملف ده بيستعمل **توكنز النظام العامة**، و
   `@media print` في `styles.css` بيعيد تعريفها بلوحة النهار بـ`!important` —
   فالورقة بتطلع بيضا لوحدها. نسخة تانية للألوان هنا كانت هتفرق عنها مع الوقت. */
/* الوجهات اللي اترد عليها جوّه القايمة — معلومة للكل، وزرار الفتح للسوبر أدمن. */
.dls .dls-replysep {
  padding: 6px 10px 2px; font-size: 10px; opacity: .6; border-top: 1px solid var(--line);
  margin-top: 4px;
}
.dls .dls-replydone {
  display: flex; align-items: center; gap: 6px; justify-content: space-between;
  padding: 5px 10px; font-size: 12px; opacity: .65;
}
.dls .dls-reopen {
  border: 0; background: none; cursor: pointer; color: inherit;
  font-size: 13px; line-height: 1; padding: 2px 4px; opacity: .8;
}
.dls .dls-reopen:hover { opacity: 1; }

/* 💬 فورم الرد (مودال). الكلاسات كلها `dls-` — قاعدة عامة على `textarea`
   كانت هتسرّب على كل صفحات النظام (درس فلاتر «قاعدة العملاء»). */
.dls-replyform { display: grid; gap: 10px; padding: 4px 2px 2px; }
.dls-replyto { font-size: 13px; line-height: 1.6; }
.dls-replyta {
  width: 100%; resize: vertical; min-height: 90px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); font: inherit; line-height: 1.7;
}
.dls-replynote { line-height: 1.6; }
.dls-replyerr { color: var(--danger); font-size: 12px; line-height: 1.6; }
.dls-replyactions { display: flex; gap: 8px; justify-content: flex-start; }
/* الزرار المقفول بعد ما كل الوجهات اترد عليها — باين ومعطّل، مش مختفي:
   خانة بتختفي بتزحلق الجدول، والمستخدم مايعرفش ليه. */
.dls .dls-reply.is-done { opacity: .55; cursor: default; }

/* نص الطباعة — مخفي على الشاشة، وبيحلّ محلّ الأيقونة على الورق. */
.dls .dls-pt { display: none; }

@media print {
  /* 🔴 الحاوية بتـscroll أفقي على الشاشة — و`overflow` على الورق **بيقصّ**
     الأعمدة اللي برّه العرض بلا أي علامة إنها اتقصّت. */
  .dls .dls-card { overflow: visible !important; border: 0 !important; }
  .dls .dls-tablewrap { overflow: visible !important; }
  /* 🔴 `table-layout: fixed` مش تجميل: كروم **بيتجاهل** اتجاه `@page` لو
     المستخدم غيّر «Layout» بإيده في حوار الطباعة، والورقة مالهاش سلطة على
     القرار ده. من غيره الأعمدة بتتفرد بمحتواها والجدول يعدّي حدّ الورقة
     ويتقصّ من الجنب. معاه الأعمدة **بتتقاسم** العرض والنص يلفّ — فمستحيل
     يتقصّ، أفقي كان ولا طولي. (نفس إصلاح `.ctr-table` بالحرف.) */
  .dls .dls-table {
    width: 100% !important; min-width: 0 !important; table-layout: fixed !important;
    font-size: 9px !important; border-collapse: collapse !important;
  }
  .dls .dls-table thead { display: table-header-group; }   /* الرأس يتكرر على كل ورقة */
  .dls .dls-table th, .dls .dls-table td { padding: 3px 4px !important; white-space: normal; word-break: break-word; }
  .dls .dls-row { break-inside: avoid; }
  .dls .dls-kpis { break-inside: avoid; }
  /* القايمة المنسدلة لو كانت مفتوحة وقت الطباعة بتطبع فوق الصف اللي تحتها */
  .dls .dls-replymenu { display: none !important; }

  /* 🔴 أعمدة الأزرار بتتشال من الورق: زرار على الورق مربّع فاضي وبياخد عرض من
     الأعمدة اللي بتفيد. **نفس قاعدة سلاك/أودو في جدول الاجتماعات.**
     🔴 **وبكلاس مش بـ`nth-child`**: عمود «رد» بيختفي لغير مطوّر الأعمال،
        فأرقام الأعمدة **بتتغيّر بالدور** — وأي رقم مكتوب هنا كان هيخبّي
        العمود الغلط لنص المستخدمين في صمت. ودي رابع مرة الفهرس يتزحلق في
        المشروع، فالمرة دي اتشال من الأساس.
     📌 و**VIP مش من دول عن قصد**: دي معلومة مش زرار. */
  .dls .dls-table th.dls-np, .dls .dls-table td.dls-np { display: none !important; }

  /* 🔴 **الأيقونة تُخفى والنص يبان.** الأعمدة الأربعة اللي فيها معلومة
     (الألم · مقترحات · سلاك · Odoo) شكلها على الشاشة زرار/أيقونة، وعلى الورق
     الزرار **مربّع فاضي** — فبنقلبهم لنصّهم. */
  .dls .dls-ico, .dls .eyebtn, .dls .dls-na { display: none !important; }
  .dls .dls-pt { display: block !important; }

  /* ⚠️ عرض أعمدة الأيقونات (`1%`) مبني للشاشة — مع `table-layout: fixed`
     بيخنق العمود اللي بقى فيه نص. */
  .dls .dls-table th.dls-c, .dls .dls-table td.dls-c { width: auto !important; }
  .dls .dls-table th.dls-p-ai, .dls .dls-table td.dls-p-ai { width: 11% !important; }
  .dls .dls-table th.dls-p-link, .dls .dls-table td.dls-p-link { width: 7% !important; }
  /* الرابط سطر واحد طويل بلا مسافات — من غير `break-all` بيفرد العمود ويقصّ الورقة */
  .dls .dls-p-link .dls-pt { word-break: break-all; font-size: 6.5px !important; }
}