/*
 * Salescore brand theme for django-baton 5.x.
 * Loaded AFTER baton's own baton/css/root.css (linked in base_site.html extrahead,
 * after block.super), so equal-specificity variable declarations here win the cascade.
 * Only brand-relevant variables are overridden; baton's layout/radii are left intact.
 * Brand source: sdd/docs/brand/.
 */

:root,
[data-bs-theme="light"] {
    /* main */
    --bs-primary: #336699;
    --bs-secondary: #333366;
    --bs-btn-active-bg: #336699;
    --bs-btn-active-border-color: #336699;
    --bs-baton-accent-color: #0099CC; /* replaces baton orange */

    /* dark slate sidebar */
    --bs-baton-menu-bg: #1d2428;
    --bs-baton-menu-color: #ffffff;
    --bs-baton-menu-branding-bg: #1d2428;
    --bs-baton-menu-branding-color: #ffffff;
    --bs-baton-menu-border-color: #263238;
    --bs-baton-menu-link-color: #CCCCCC;
    --bs-baton-menu-link-hover-color: #ffffff;
    --bs-baton-menu-li-hover-bg: #263238;
    --bs-baton-menu-active-voice-bg: #0099CC;
    --bs-baton-menu-active-voice-color: #ffffff;
    --bs-baton-menu-active-voice-border-color: transparent;
    --bs-baton-menu-user-links-color: #0099CC;
    --bs-baton-menu-title-bg: #263238;
    --bs-baton-menu-voice-title-bg: #263238;
    --bs-baton-menu-voice-title-color: #ffffff;
    --bs-baton-menu-selected-sub-bg: #263238;
    --bs-baton-menu-mobile-title-bg: #263238;
    --bs-baton-menu-mobile-title-color: #ffffff;
    --bs-baton-menu-mobile-back-bg: #263238;
    --bs-baton-menu-depth1-border-color: #2f3e46;

    /* accents elsewhere */
    --bs-link-color: #336699;
    --bs-link-hover-color: #28527a;
    --bs-link-color-rgb: 51, 102, 153;
    --bs-nav-link-color: #336699;
    --bs-nav-link-hover-color: #28527a;
    --bs-baton-dashboard-icon-color: #336699;
    --bs-baton-changelist-filters-title-bg: #336699;
    --bs-baton-footer-link-color: #0099CC;
    --bs-baton-footer-link-hover-color: #007fa8;
    --bs-baton-calendar-shortcuts-color: #0099CC;
}

[data-bs-theme="dark"] {
    /* main */
    --bs-primary: #4a90c2; /* lighter blue for contrast on dark surfaces */
    --bs-secondary: #336699;
    --bs-btn-active-bg: #336699;
    --bs-btn-active-border-color: #336699;
    --bs-baton-accent-color: #0099CC;
    --bs-link-color: #4a90c2;
    --bs-link-hover-color: #6aa9d6;
    --bs-link-color-rgb: 74, 144, 194;

    /* sidebar (dark slate) */
    --bs-baton-menu-bg: #1d2428;
    --bs-baton-menu-color: #ffffff;
    --bs-baton-menu-branding-bg: #1d2428;
    --bs-baton-menu-branding-color: #ffffff;
    --bs-baton-menu-active-voice-bg: #0099CC;
    --bs-baton-menu-active-voice-color: #ffffff;
    --bs-baton-menu-active-voice-border-color: transparent;
    --bs-baton-menu-user-links-color: #0099CC;
    --bs-baton-menu-title-bg: #263238;
    --bs-baton-menu-voice-title-bg: #263238;

    /* accents */
    --bs-nav-link-color: #4a90c2;
    --bs-baton-dashboard-icon-color: #4a90c2;
    --bs-baton-changelist-filters-title-bg: #336699;
    --bs-baton-footer-link-color: #0099CC;
    --bs-baton-footer-link-hover-color: #33adda;
    --bs-baton-calendar-shortcuts-color: #0099CC;
}

/* Bootstrap's .btn-primary is compiled by baton with $primary baked in as a literal
   (#208075). On the login page baton also @extends .btn-primary onto an id-scoped selector
   (#container .submit-row input, specificity 1,2,1), so a class-level override can't win —
   !important is required to recolor the primary buttons to brand blue. */
.btn-primary,
.submit-row input[type="submit"] {
    --bs-btn-bg: #336699;
    --bs-btn-border-color: #336699;
    --bs-btn-hover-bg: #28527a;
    --bs-btn-hover-border-color: #28527a;
    --bs-btn-active-bg: #28527a;
    --bs-btn-active-border-color: #28527a;
    --bs-btn-disabled-bg: #336699;
    --bs-btn-disabled-border-color: #336699;
    background-color: #336699 !important;
    border-color: #336699 !important;
}
.btn-primary:hover,
.submit-row input[type="submit"]:hover {
    background-color: #28527a !important;
    border-color: #28527a !important;
}

/* Baton's fixed changeform action bar (.baton-fixed-submit-row .submit-row, z-index 1000)
   sits BELOW the absolute footer (.site-footer, z-index 1001), so at short or scrolled
   viewports the footer paints over the Save buttons and hides them. Lift the action bar
   above the footer so it stays visible and clickable at every resolution. */
.baton-fixed-submit-row .submit-row {
    z-index: 1002 !important;
}

/* The brand pack ships no white-wordmark export. Render the color horizontal logo
   solid white on the dark sidebar. Scoped to .sidebar-menu so the login-page logo
   (#header #branding, light bg) is untouched. */
.sidebar-menu #branding img {
    filter: brightness(0) invert(1);
}

/* Hide the dark-mode (theme) toggle and the "view site" link in the sidebar user area.
   The visible sidebar sun icon is .theme-link-toggler (not .theme-toggle); also drop the
   "Dark theme" dropdown entry. Keep change-password (.password) and logout (.logout).
   Search field is removed via BATON config (SEARCH_FIELD dropped in settings.py). */
.theme-toggle,
.theme-link-toggler,
.dropdown-item-theme,
.view-site {
    display: none !important;
}

/* Remove the per-access icons in the side menu (Material Symbols glyphs before each
   model link). Scoped to menu voice links; user-area icons render via ::before, untouched. */
.sidebar-menu a > i.material-symbols-outlined {
    display: none !important;
}

/* Changelist action texts (e.g. VER RESERVA): were teal/green and looked like plain text.
   Make them black, bold and underlined so they read as clickable. */
#result_list tbody td a,
#result_list tbody th a {
    color: #000000 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

/* ============================================================
   UI MODERNIZATION — visual layer only. No layout, flow, label,
   control position or navigation change (zero UX friction).
   Tokens: primary #336699 / hover #28527a · accent #0099CC ·
   secondary #546e7a / hover #44565f · danger stays #dc3545.
   ============================================================ */

/* --- A. Button color consistency: kill residual baton teal (#208075) --- */
.addlink {
    background-color: #336699 !important;
    border-color: #336699 !important;
    color: #ffffff !important;
}
.addlink:hover { background-color: #28527a !important; border-color: #28527a !important; }

.historylink {
    background-color: #546e7a !important;
    border-color: #546e7a !important;
    color: #ffffff !important;
}
.historylink:hover { background-color: #44565f !important; border-color: #44565f !important; }

/* --- E. Buttons: unified radius, transitions, subtle hover lift --- */
.btn,
.button,
input[type="submit"],
.addlink,
.historylink,
.deletelink,
.submit-row input,
.submit-row a.deletelink {
    border-radius: 8px !important;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}
.btn:hover,
.button:hover,
input[type="submit"]:hover,
.addlink:hover,
.historylink:hover,
.deletelink:hover,
.submit-row input:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(16, 24, 40, .12);
}

/* --- B. Inputs: rounder + clear cyan focus ring --- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
textarea,
select,
.vTextField,
.form-control,
.form-select {
    border-radius: 8px !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
input:focus,
textarea:focus,
select:focus,
.vTextField:focus,
.form-control:focus,
.form-select:focus {
    border-color: #0099CC !important;
    box-shadow: 0 0 0 3px rgba(0, 153, 204, .18) !important;
    outline: none !important;
}

/* --- C. Panels: soft shadow + rounded corners (card feel), no extra borders --- */
fieldset.module,
#result_list,
#changelist .results,
.inline-group .module {
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04) !important;
}

/* --- D. Tables: sticky header, hover rows, lighter separators --- */
#result_list thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f1f4f6 !important;
    color: #37474f !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #dde3e7 !important;
}
#result_list tbody tr {
    transition: background-color .12s ease;
}
#result_list tbody tr:hover > * {
    background-color: #eef4f8 !important;
}
#result_list tbody td,
#result_list tbody th {
    border-bottom: 1px solid #eef1f3 !important;
}

/* --- F. Related action icons (pencil/x/eye/+): keep semantic colors, add hover feedback --- */
.related-widget-wrapper-link,
.related-lookup {
    transition: transform .15s ease, opacity .15s ease;
}
.related-widget-wrapper-link:hover,
.related-lookup:hover {
    transform: scale(1.12);
    opacity: .85;
}

/* --- G. Micro-interactions on sidebar links --- */
.sidebar-menu a {
    transition: background-color .15s ease, color .15s ease;
}

/* Login page: baton relocates #branding into the (hidden) sidebar via JS, leaving the
   login card header empty. Render the color logo as a centered banner there. Light header
   bg keeps the color (navy) wordmark legible. */
body.login #header {
    min-height: 92px;
    background-image: url('/static/img/salescore-logo.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 190px auto !important;
}

/* Inactive changeform tabs were baton teal; align to brand blue, keep active tab dark. */
.nav-tabs .nav-link {
    color: #336699 !important;
}
.nav-tabs .nav-link.active {
    color: #1a1a1a !important;
}

/* ============================================================
   STABILIZATION PASS — changelist density, status badges,
   actions toolbar, merged action column.
   ============================================================ */

/* --- Task 2: smaller table text + tighter cell padding so columns sit
   closer together (less dead horizontal space). --- */
#result_list th,
#result_list td {
    font-size: 0.75rem !important;   /* ~12px */
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* --- Task 5: the "Ejecutar la acción seleccionada" (Go) button was
   white-on-white. Brand it blue so it reads as the primary action. --- */
#changelist-form .actions button {
    background-color: #336699 !important;
    color: #ffffff !important;
    border: 1px solid #28527a !important;
}
#changelist-form .actions button:hover {
    background-color: #28527a !important;
}

/* --- Filter sidebar buttons (rangefilter "Buscar"/"Reiniciar") were
   white-on-white / borderless = invisible. Brand them: Buscar primary blue,
   Reiniciar secondary gray. Scoped to the filter panel + rangefilter .controls. --- */
#changelist-filter input[type="submit"],
#changelist-filter input[type="reset"],
.changelist-filter input[type="submit"],
.changelist-filter input[type="reset"],
.controls input[type="submit"],
.controls input[type="reset"] {
    border-radius: 6px !important;
    padding: 3px 12px !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
}
#changelist-filter input[type="submit"],
.changelist-filter input[type="submit"],
.controls input[type="submit"] {
    background-color: #336699 !important;
    color: #ffffff !important;
    border-color: #28527a !important;
}
#changelist-filter input[type="submit"]:hover,
.changelist-filter input[type="submit"]:hover,
.controls input[type="submit"]:hover {
    background-color: #28527a !important;
}
#changelist-filter input[type="reset"],
.changelist-filter input[type="reset"],
.controls input[type="reset"] {
    background-color: #546e7a !important;
    color: #ffffff !important;
    border-color: #44565f !important;
}
#changelist-filter input[type="reset"]:hover,
.changelist-filter input[type="reset"]:hover,
.controls input[type="reset"]:hover {
    background-color: #44565f !important;
}

/* --- Task 3: status columns rendered as colored pills (status_badge) --- */
.sc-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: .2px;
}
.sc-badge--paid      { background:#e6f4ea; color:#1e7e34; }
.sc-badge--pending   { background:#eceff1; color:#546e7a; }
.sc-badge--cancelled { background:#fdecea; color:#c0392b; }
.sc-badge--annulled  { background:#f5e0e0; color:#922b21; }
.sc-badge--reserved  { background:#e7f0f8; color:#336699; }
.sc-badge--operated  { background:#e0f3f3; color:#0a7d7d; }
.sc-badge--audited   { background:#efe7f5; color:#6f42c1; }
.sc-badge--noshow    { background:#fff3e0; color:#b25e00; }
.sc-badge--modified  { background:#fff8e1; color:#9a7d00; }
.sc-badge--default   { background:#eceff1; color:#37474f; }

/* --- Task 6: merged "Acciones" column (Ordersdetail + Orders) — text buttons
   laid out side by side, wrapping to a new line only if the cell runs out of
   room. Override the global underline/bold/black link rule.
   NOTE: no `width:1%` here — combined with flex-wrap it collapses the cell to
   min-content and forces every button onto its own row (the stacked bug).
   `min-width` floors the column so two side-by-side pills (~148px) always fit;
   without it the table auto-sizes the column to the "Acciones" header (~106px)
   and the second pill wraps under the first. The cell is a plain <td> on both
   changelists (no auto-linked column — see Ordersdetailadmin.get_list_display_links). --- */
#result_list td.field-acciones { text-align: left; vertical-align: middle; min-width: 160px; }
#result_list td.field-acciones .sc-acts {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}
/* Action buttons render as outline Material Symbols icons (no text). The label
   travels in the title attribute for hover/accessibility. */
#result_list td.field-acciones a.sc-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    color: #336699 !important;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 2px 4px;
    line-height: 1;
}
#result_list td.field-acciones a.sc-act .material-symbols-outlined {
    font-size: 20px;
    line-height: 1;
    font-variation-settings: 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
#result_list td.field-acciones a.sc-act:hover {
    background: #eef4f8;
    color: #28527a !important;
}

/* --- Task 6: column widths tuned to content type ---
   Itemsold gets room so long names stop wrapping into 10 lines;
   numeric/short columns shrink; headers never break per-character. */

/* ============================================================
   GLOBAL: auto-fit every changelist column to its header title.
   Permeates ALL admin list views (#result_list is the shared
   Django/baton table id; baton does not override it).
   - Headers never wrap -> column is at least as wide as its title.
   - Cells wrap + cap -> short values (numbers/dates/codes/status)
     collapse to title width; long descriptive values (item names,
     descriptions) grow to the cap then wrap, staying readable.
   Net width = clamp(title, content, cap). No per-column list needed.
   ============================================================ */
#result_list thead th,
#result_list th {
    white-space: nowrap;
    word-break: keep-all;
    hyphens: none;
}
#result_list tbody td {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 260px;
    vertical-align: middle;
}

#result_list td.field-itemsold,
#result_list th.column-itemsold {
    min-width: 280px;
    max-width: 360px;
    white-space: normal;
    overflow-wrap: anywhere; /* item names have no spaces, break is fine here */
}

/* Money columns: right-aligned with a "$" prefix (currency cue). */
#result_list td.field-unitPrice,    #result_list th.column-unitPrice,
#result_list td.field-discount,     #result_list th.column-discount,
#result_list td.field-total,        #result_list th.column-total,
#result_list td.field-itemsoldcost, #result_list th.column-itemsoldcost {
    text-align: right;
    white-space: nowrap;
}

/* Invoice column links straight to the parent order; keep it left-aligned text. */
#result_list td.field-order_invoice,
#result_list th.column-order_invoice {
    white-space: nowrap;
}

/* Reservaciones: Hotel/resort names need room (no min-width = collapses to title). */
#result_list td.field-Hotel,
#result_list th.column-Hotel {
    min-width: 160px;
    white-space: normal;
}
#result_list td.field-unitPrice::before,
#result_list td.field-discount::before,
#result_list td.field-total::before,
#result_list td.field-itemsoldcost::before {
    content: "$";
    margin-right: 1px;
}

/* Count + short category/status text: centered. */
#result_list td.field-qty,           #result_list th.column-qty,
#result_list td.field-itemCategory,  #result_list th.column-itemCategory,
#result_list td.field-customer_type, #result_list th.column-customer_type,
#result_list td.field-operSupplier,  #result_list th.column-operSupplier,
#result_list td.field-detail_status, #result_list th.column-detail_status {
    text-align: center;
    white-space: nowrap;
}

/* Text columns shrink to content (no forced min-width = no dead gaps),
   wrap on spaces only. */
#result_list td.field-itemCategory,
#result_list td.field-operSupplier,
#result_list td.field-customer_name,
#result_list td.field-customer_type,
#result_list td.field-sale_name {
    max-width: 140px;
    white-space: normal;
    overflow-wrap: normal;
}

/* Itemsold: left-aligned, wide (already capped above). */
#result_list td.field-itemsold { text-align: left; }

/* --- App index "Agregar" links: drop the blue pill, render as plain
   text link prefixed with "+". Scoped to the dashboard so changelist
   .addlink buttons (e.g. Orders "Edit") keep their button look. --- */
body.dashboard .addlink,
.dashboard #content-main .addlink {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    color: #336699 !important;
    padding: 0 !important;
    box-shadow: none !important;
    font-weight: 600;
}
body.dashboard .addlink:hover,
.dashboard #content-main .addlink:hover {
    background: transparent !important;
    color: #28527a !important;
    transform: none;
    text-decoration: underline;
}
body.dashboard .addlink::before,
.dashboard #content-main .addlink::before {
    content: "+ ";
    font-weight: 700;
}

/* ============================================================
   Layout: el menú lateral tiene ~63 ítems (~2772px) y, al ser el
   `.row` un flex, estiraba la columna de contenido a ese alto,
   dejando un enorme espacio en blanco bajo el botón Guardar en
   páginas de poco contenido (p.ej. el change form de cotizaciones).
   Hacemos el menú sticky + scroll interno acotado al viewport para
   que NO imponga el alto de la página; el contenido manda su altura.
   Scoped a >=992px (donde baton muestra el sidebar fijo; abajo lo
   colapsa a un toggle propio que no debemos tocar).
   ============================================================ */
@media (min-width: 992px) {
    #content.colM {
        align-self: flex-start;
    }
    nav.sidebar-menu {
        position: sticky !important;  /* baton fija static; lo vencemos para que el menú no se vaya al scrollear páginas largas */
        top: 0;
        align-self: flex-start;
        max-height: 100vh;
        overflow-y: auto;
    }
}

/* ============================================================
   B6 — Home (dashboard) background.
   ============================================================ */
.dashboard #content,
body.dashboard #content {
    background: #f5f5f5;
}

/* ============================================================
   A3 — Change-form regression after the baton 2.x -> 5.x upgrade.
   Baton 5 (Django 5.1+) renders collapsible fieldset titles as a
   <summary> element instead of <h2>, which dropped the section
   header bar; the field grid also lost its two-column
   (label-left / input-right) layout. Restore both. Scoped to the
   change form so changelists are untouched.
   NOTE: verify selectors against the live baton-5 DOM (DevTools);
   tune flex-basis / container if baton already supplies a grid.
   ============================================================ */

/* Section header bar. The title is always <h2 class="fieldset-heading">,
   rendered directly inside the fieldset (open) or inside <summary> (collapsed);
   styling the heading restores the bar in both cases. */
.change-form fieldset.module .fieldset-heading {
    background: #cfe0f1 !important;
    color: #1a1a1a !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 8px 14px !important;
    margin: 0 !important;
    border-radius: 6px;
}
.change-form fieldset.module > details > summary {
    cursor: pointer;
    list-style: none;
    padding: 0;
    margin-bottom: 12px;
}
.change-form fieldset.module > details > summary::-webkit-details-marker { display: none; }
.change-form fieldset.module > details > summary::marker { content: ''; }

/* B1 — Stacked field layout: label ABOVE its widget, with the label+input block
   indented to the right of the section-header text. Replaces the prior
   side-by-side (label-left / input-right) layout for a consistent look across
   ALL change forms. Field cells render as a .flex-container directly wrapping
   <label> + widget (single fields use a bare .flex-container; paired fields add
   .fieldBox). Target any label-bearing .flex-container; leave .form-multiline
   (which wraps the cells, not a label) and checkbox rows untouched.
   Indent value (--sc-field-indent) is tunable. */
@media (min-width: 768px) {
    .change-form fieldset.aligned .flex-container:has(> label):not(.checkbox-row) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
        padding-left: 28px; /* indent block past the section-header text (~14px) */
    }
    .change-form fieldset.aligned .flex-container:not(.checkbox-row) > label {
        flex: 0 0 auto;
        max-width: none;
        text-align: left;
        padding-right: 0;
        margin: 0 0 4px 0; /* small gap between the label and its input */
        line-height: 1.4;
    }
    .change-form fieldset.aligned .flex-container:not(.checkbox-row) > label + * {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }
}

/* B1b — Restore multi-field row wrapping (regressed in the baton 2.x -> 5.x upgrade,
   surfaced by B1's stacked layout). Django's .form-multiline already declares
   flex-wrap:wrap, but baton 5's runtime styles let the row run past the viewport and
   get clipped (.form-row has overflow:hidden). Re-assert wrap, keep cells left-
   aligned, and stop the cells from growing into huge gaps, so several fields share a
   line and any overflow drops to the next line instead of off-screen. Applies to ALL
   change forms. */
@media (min-width: 768px) {
    .change-form fieldset.aligned .form-row > .form-multiline {
        flex-wrap: wrap !important;
        justify-content: flex-start;
        align-items: flex-start;
        column-gap: 24px;
        row-gap: 8px;
    }
    .change-form fieldset.aligned .form-row > .form-multiline > div {
        flex: 0 1 auto;
        max-width: 100%;
    }
}

/* ============================================================
   Admin UI fixes (TST request) — A1 recent actions, B3 ordersdetail toolbar.
   ============================================================ */

/* A1 — Recent actions panel: Django reuses the .addlink/.changelink/.deletelink
   class names for BOTH changelist buttons AND the recent-actions <li> items, so
   the button styling above (and the dashboard "+ " reset that sets padding:0 and
   background-image:none) bleeds onto the list and the bold object text overlaps /
   is clipped over the status icon. Restore the intended icon + text spacing,
   scoped to the recent-actions module so changelist buttons stay untouched.
   Icon SVGs are Django admin's own (served from STATIC/admin/img after collectstatic). */
#recent-actions-module .actionlist li {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 20px !important; /* clear of the status icon */
    list-style: none;
}
#recent-actions-module .actionlist li::before {
    content: none !important; /* drop the leaked dashboard "+ " marker */
}
#recent-actions-module .actionlist li.addlink {
    background: url(../admin/img/icon-addlink.svg) 0 3px no-repeat !important;
    background-size: 14px 14px !important;
}
#recent-actions-module .actionlist li.changelink {
    background: url(../admin/img/icon-changelink.svg) 0 3px no-repeat !important;
    background-size: 14px 14px !important;
}
#recent-actions-module .actionlist li.deletelink {
    background: url(../admin/img/icon-deletelink.svg) 0 3px no-repeat !important;
    background-size: 14px 14px !important;
}