/*
 * Genesis TIV skin - MOBILE (SALES-1228). OEM button/font compliance for Genesis dealers.
 *
 * Applied only when Model.CheckFCADealer == "GENESIS" (see Views/TradeInValet/TradeInValet.cshtml).
 * Scope is buttons + typography per the confirmed ticket scope - NOT a full retheme, and it does
 * NOT reuse the Audi/Lexus "isBlackLayout" inline theming.
 *
 * Genesis Core Palette (Brand Elements): Black #000000, Carbon #1A1A1A, Gray #AAA8A6, White #FFFFFF.
 * Mirror of the legacy TradeInValet genesis.css, with button geometry adapted to the mobile
 * default-flow buttons (padding-based, e.g. .bothnormalflag_step) rather than the desktop sprite
 * slot.
 */

/* ---- Genesis brand fonts (converted from the OEM .otf kit to web formats) ---- */
@font-face {
    font-family: 'GenesisSansText';
    src: url('../../fonts/GenesisSansText-Regular.woff2') format('woff2'),
         url('../../fonts/GenesisSansText-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GenesisSansText';
    src: url('../../fonts/GenesisSansText-Medium.woff2') format('woff2'),
         url('../../fonts/GenesisSansText-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GenesisSansText';
    src: url('../../fonts/GenesisSansText-Bold.woff2') format('woff2'),
         url('../../fonts/GenesisSansText-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GenesisSansHead';
    src: url('../../fonts/GenesisSansHead-Light.woff2') format('woff2'),
         url('../../fonts/GenesisSansHead-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GenesisSansHead';
    src: url('../../fonts/GenesisSansHead-Regular.woff2') format('woff2'),
         url('../../fonts/GenesisSansHead-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ---- Typography ---- */
.genesis-form,
.genesis-form input,
.genesis-form select,
.genesis-form textarea,
.genesis-form button,
.genesis-form label {
    font-family: 'GenesisSansText', 'Helvetica Neue', Arial, sans-serif;
}

.genesis-form h1,
.genesis-form h2,
.genesis-form h3,
.genesis-form h4,
.genesis-form .heading-text,
.genesis-form .aboutCar {
    font-family: 'GenesisSansHead', 'Helvetica Neue', Arial, sans-serif;
}

/*
 * Generic body text. The mobile bid form's own inline <style> (Views/TradeInValet/TradeInValet.cshtml)
 * carries a blanket `* { font-family: sans-serif }`. A universal rule matches every element DIRECTLY,
 * and a direct match beats an INHERITED value - so generic text (p, div, span, a, td, li, strong, b)
 * inside .genesis-form took the browser sans-serif instead of inheriting GenesisSansText from the
 * container above. Re-assert the Genesis body font on those text tags. Specificity (0,1,1) outranks
 * the `*` rule (0,0,0) yet stays below the heading rules (.heading-text/.aboutCar at (0,2,0)) - so
 * headings, INCLUDING heading text carried on <span class="heading-text">, keep GenesisSansHead - and
 * below the button/control rules. (Desktop has no universal rule, but the same block is mirrored there
 * to beat base-theme/partial fonts that hit generic tags directly.)
 */
.genesis-form p,
.genesis-form div,
.genesis-form a,
.genesis-form td,
.genesis-form th,
.genesis-form li,
.genesis-form span,
.genesis-form strong,
.genesis-form b {
    font-family: 'GenesisSansText', 'Helvetica Neue', Arial, sans-serif;
}
/*
 * Headings whose visible text sits in a plain child element - e.g. <h1><span>Enter your mileage</span></h1>
 * or <h1><span class="heading-text_mb">...</span></h1> - would have that child caught by the generic
 * body-text rule above and flipped to GenesisSansText. Re-assert the heading font on descendants of the
 * heading selectors. For h1-h4 descendants this ties the generic tag rules at (0,1,1) and wins by coming
 * later; for .heading-text/.aboutCar descendants it is (0,2,0) and wins outright. The Glyphicons rule
 * below is more specific still ((0,2,1)), so an icon inside a heading keeps its icon font.
 */
.genesis-form h1 *,
.genesis-form h2 *,
.genesis-form h3 *,
.genesis-form h4 *,
.genesis-form .heading-text *,
.genesis-form .aboutCar * {
    font-family: 'GenesisSansHead', 'Helvetica Neue', Arial, sans-serif;
}
/*
 * The gray vehicle-info sub-line (#spnvehicledetails / #spninfovehicledetails - JS-populated year/make/
 * model) sits inside the mileage/more-info <h1>, so the heading-descendant rule above would render it in
 * GenesisSansHead. It is secondary descriptive text, not heading text - keep it in the Genesis BODY
 * font. ID specificity (1,1,0) outranks the heading-descendant rule.
 */
.genesis-form #spnvehicledetails,
.genesis-form #spninfovehicledetails {
    font-family: 'GenesisSansText', 'Helvetica Neue', Arial, sans-serif;
}
/*
 * Keep the Glyphicons icon font on icon spans - the plain `span` rule above (0,1,1) would otherwise
 * flip them to GenesisSansText and render a missing glyph. This (0,2,1) rule outranks it. Icon spans
 * carry no text, so it is inert everywhere else.
 */
.genesis-form span[class*="glyphicon"] {
    font-family: 'Glyphicons Halflings';
}

/*
 * ---- Buttons ----
 * Compliant solid Genesis buttons that drop in for the mobile default-flow buttons. Some defaults
 * are CSS-colored with a text label (.bothnormalflag_step = #0f70a4); others are PNG sprites with
 * the label baked in and font-size:0 (.btnStartdetails_default, .back-step, .show-me-money). The
 * view assigns these classes for Genesis AND emits the Next/Back/submit text, so these rules must
 * force a readable text label (font-size + solid background) regardless of the sprite defaults.
 * Black fill / white label / Carbon hover / hairline Gray border. Geometry follows the padded
 * .bothnormalflag_step box so it fits every default-flow slot.
 */
.genesis-form .genesisnext-step,
.genesis-form .genesisback-step,
.genesis-form .genesis-show-me-money {
    display: inline-block;
    box-sizing: border-box;
    min-width: 120px;
    max-width: 400px;
    height: auto;
    margin-top: 16px;
    padding: 10px 20px;
    float: right;
    cursor: pointer;
    background: #000000 !important;      /* Genesis Black */
    color: #FFFFFF !important;           /* Genesis White */
    border: 1px solid #AAA8A6;           /* Genesis Gray (dividers/boxes) */
    font-family: 'GenesisSansText', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;                     /* override the sprite defaults' font-size:0 */
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    overflow: visible;
    background-image: none !important;   /* drop the blue sprite/background */
}

.genesis-form .genesisback-step {
    margin-right: 20px;
}

.genesis-form .genesisnext-step:hover,
.genesis-form .genesisback-step:hover,
.genesis-form .genesis-show-me-money:hover,
.genesis-form .genesisnext-step:focus,
.genesis-form .genesisback-step:focus,
.genesis-form .genesis-show-me-money:focus {
    background: #1A1A1A !important;      /* Genesis Carbon */
    color: #FFFFFF !important;
    background-image: none !important;
}
/* Keyboard focus ring (see legacy genesis.css) - :focus-visible so it shows for keyboard/AT only. */
.genesis-form .genesisnext-step:focus-visible,
.genesis-form .genesisback-step:focus-visible,
.genesis-form .genesis-show-me-money:focus-visible {
    outline: 2px solid #000000;          /* Genesis Black */
    outline-offset: 2px;
}

/*
 * ---- Single-line / Carfax fall-through buttons ----
 * The SLE/Carfax partials (_BothSinglelineandCarfax, _Singlelineentryview,
 * _SinglelineentryMockup) render INSIDE .genesis-form for a Genesis dealer, but several of their
 * buttons keep their default classes rather than a genesis* class: the blue .bothnormalflag_step
 * (#0f70a4), the DBStyle PNG-sprite .fcanext-stepinner_new (110x110 inactive-new.png),
 * .btnStartdetails_default and .next-step/.back-step. Give those the same Genesis skin so no blue
 * or sprite button leaks through. Scoped under .genesis-form so only Genesis is affected; the
 * two-class selector (0,2,0) also outranks DBStyle.css even though _SinglelineentryMockup injects
 * that stylesheet in the body AFTER genesis.css.
 */
.genesis-form .bothnormalflag_step,
.genesis-form .fcanext-stepinner_new,
.genesis-form .btnStartdetails_default,
.genesis-form .next-step,
.genesis-form .back-step {
    box-sizing: border-box;
    display: inline-block;
    width: auto !important;
    min-width: 120px;
    max-width: 400px;
    height: auto !important;
    margin-top: 16px;
    padding: 10px 20px !important;
    float: right;
    cursor: pointer;
    background: #000000 !important;          /* Genesis Black (drops #0f70a4 / sprite) */
    background-image: none !important;
    color: #FFFFFF !important;               /* Genesis White */
    border: 1px solid #AAA8A6 !important;    /* Genesis Gray */
    border-radius: 0 !important;             /* undo the round .fcanext-stepinner_new */
    font-family: 'GenesisSansText', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 16px !important;              /* override any sprite font-size:0 */
    line-height: 20px !important;            /* undo the 110px sprite line-height */
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    overflow: visible;
}

.genesis-form .bothnormalflag_step:hover,
.genesis-form .fcanext-stepinner_new:hover,
.genesis-form .btnStartdetails_default:hover,
.genesis-form .next-step:hover,
.genesis-form .back-step:hover,
.genesis-form .bothnormalflag_step:focus,
.genesis-form .fcanext-stepinner_new:focus,
.genesis-form .btnStartdetails_default:focus,
.genesis-form .next-step:focus,
.genesis-form .back-step:focus {
    background: #1A1A1A !important;          /* Genesis Carbon */
    background-image: none !important;
    color: #FFFFFF !important;
}
/* Keyboard focus ring for the SLE/Carfax fall-through controls. */
.genesis-form .bothnormalflag_step:focus-visible,
.genesis-form .fcanext-stepinner_new:focus-visible,
.genesis-form .btnStartdetails_default:focus-visible,
.genesis-form .next-step:focus-visible,
.genesis-form .back-step:focus-visible {
    outline: 2px solid #000000 !important;   /* Genesis Black */
    outline-offset: 2px;
}

/*
 * ---- Chrome recolor: replace the default blue accents with the Genesis palette ----
 * Mirrors the legacy TradeInValet genesis.css. The base theme (style-2.css) paints numerous UI
 * accents blue - #056c9c step-number circles, #0069b7 borders, #337ab7 links, #01345f checkboxes,
 * #308EDF focus glows - and a Genesis dealer (never smart/toyota/BMW) falls through to those
 * defaults. Recolor them here, scoped under .genesis-form so the two-class selectors outrank the
 * base one-class rules. These reach the single-line/carfax partials, which render inside
 * .genesis-form. Map: blue backgrounds -> Genesis Black; blue text/links -> Black; outlines ->
 * Gray; blue focus glows -> neutral Gray.
 */
.genesis-form .step-number_new {
    background: #000000 !important;      /* Genesis Black (was #056c9c) */
    color: #FFFFFF !important;
}

.genesis-form .step-number {
    border-color: #000000 !important;    /* was 4px #0069b7 */
    color: #000000 !important;
}

.genesis-form .blue_text_theme,
.genesis-form .blue_text,
.genesis-form .blue_text_new {
    color: #000000 !important;           /* Genesis Black (was #056c9c / #1b8fb3 / #0277bd) */
}

/* Blue input focus/hover ring in the DBStyle Carfax forms */
.genesis-form .form-control_new:focus,
.genesis-form .form-control_new:hover {
    border-color: #AAA8A6 !important;    /* Genesis Gray (was #0277bd) */
}
.genesis-form .form-control_new:focus label,
.genesis-form .form-control_new:hover label {
    color: #000000 !important;           /* Genesis Black (was #0277bd) */
}

.genesis-form .termsandcond li a {
    color: #1A1A1A !important;           /* Genesis Carbon (was #337ab7) */
}

/* Small "look up my plate" button in the Carfax flow (keep its compact geometry) */
.genesis-form .license-plate-button {
    background: #000000 !important;      /* Genesis Black (was #01629c) */
    color: #FFFFFF !important;
    border: 1px solid #AAA8A6 !important;
}
.genesis-form .license-plate-button:hover,
.genesis-form .license-plate-button:focus {
    background: #1A1A1A !important;      /* Genesis Carbon */
    color: #FFFFFF !important;
}
.genesis-form .license-plate-button:focus-visible {
    outline: 2px solid #000000 !important;   /* Genesis Black keyboard focus ring */
    outline-offset: 2px;
}

.genesis-form .checkbox_label .squire {
    border-color: #AAA8A6 !important;    /* Genesis Gray outline (was #01345f) */
}
.genesis-form input[type="checkbox"]:checked + input + .checkbox_label .squire {
    background: #000000 !important;      /* Genesis Black fill when checked (was #01345f) */
}

/*
 * Neutralize blue focus/hover glows on inputs. Two blue sources: the base style.css `input:hover`
 * 30px #308EDF glow, and Bootstrap's `.form-control:focus` rgba(102,175,233,.6) glow that fires
 * when a field is clicked into. Both become the same subtle neutral Gray glow the buttons use.
 */
.genesis-form input[type="text"]:hover,
.genesis-form input[type="password"]:hover,
.genesis-form select:hover,
.genesis-form input[type="checkbox"]:hover,
.genesis-form textarea:hover,
.genesis-form input[type="text"]:focus,
.genesis-form input[type="password"]:focus,
.genesis-form select:focus,
.genesis-form input[type="checkbox"]:focus,
.genesis-form textarea:focus,
.genesis-form .form-control:focus,
.genesis-form .form-control:hover {
    box-shadow: 0 0 6px #AAA8A6 !important;   /* subtle Gray (was 30px #308EDF / Bootstrap blue) */
    border-color: #AAA8A6 !important;         /* Genesis Gray (was Bootstrap #66afe9) */
}
/*
 * The Make dropdown carries its OWN blue focus glow via an ID-level !important rule
 * (`#CBRMakes:focus { box-shadow: 0 0 30px #308EDF !important }` in style-2*.css / style-2-desk.css).
 * An ID selector outranks the class rule above even with !important, so it needs a matching
 * ID-specificity override to fall in line with the other Genesis fields.
 */
.genesis-form #CBRMakes:focus {
    box-shadow: 0 0 6px #AAA8A6 !important;   /* subtle Gray (was 30px #308EDF blue glow) */
    border-color: #AAA8A6 !important;         /* Genesis Gray */
}
.genesis-form .custom-tab li.active-tab a {
    -webkit-filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #AAA8A6);
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #AAA8A6);
}

/*
 * ---- Option / rating / feature tiles (desaturate — no new images) ----
 * The mobile bid form renders the same blue sprite tiles as the desktop form: condition ratings
 * (.just-between-section), yes/no toggles (.first-or-not / .multi-or-not), transmission toggles
 * (.automatic-or-not / .manual-or-not) and equipment checkboxes (.got-any-of-these) — circular
 * sprites with a blue ring/glow and blue text/stars (~30-40% blue), with the icon and label baked
 * into the art. They can't be masked (that flattens the icon to a blob) and there is no DOM label
 * to preserve. Desaturate them so the blue reads as neutral Genesis Gray while every icon, star and
 * label stays legible across the default / hover / checked frames. Scoped to .genesis-form, applied
 * to the label (the element carrying the sprite) so layout is untouched. (Mobile has no VIN-decode
 * button or cloud nav-tabs, so only this block is needed here.)
 */
.genesis-form .just-between-section label,
.genesis-form .first-or-not label,
.genesis-form .multi-or-not label,
.genesis-form .automatic-or-not label,
.genesis-form .manual-or-not label,
.genesis-form .got-any-of-these-row .got-any-of-these label {
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
}

/*
 * ---- New/Used & Trade-In/Sell selection circles (desaturate — no new images) ----
 * The round New/Used, CPO and Trade-In/Sell selectors (_NeworUsedPage / _Tradeinorsellpage,
 * rendered inside the .genesis-form bid form) are .trademaker_labelimg circles. A Genesis dealer
 * matches none of the theme branches in Tradeinvalet.js, so on selection the tile falls through to
 * the `else` and is tagged .sterling_labelactvie -> circle-blue-active.png (blue); the colwidth
 * variant uses the light-blue new_circle_bg.png. Neither is reachable from the view (JS-applied) and
 * both bake the ring into the raster, so — as with the rating/feature tiles above — desaturate the
 * sprite-bearing label so the blue reads neutral (near-black) while the "New"/"Used"/"Trade-In"/
 * "Sell" label stays legible. filter is its own property, so it applies over whichever background
 * sprite the cascade picks. Mirror of the legacy TradeInValet genesis.css.
 */
.genesis-form .trademaker_labelimg {
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
}
/*
 * The desaturated New/Used tiles otherwise have no hover feedback -- the grayscale filter above
 * replaces any inherited hover drop-shadow (a `filter` holds a single value). Chain the same subtle
 * neutral Gray glow the Genesis buttons use ON TOP of the grayscale so the tiles keep their
 * desaturation AND gain a consistent hover cue.
 */
.genesis-form .trademaker_labelimg:hover {
    -webkit-filter: grayscale(1) drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #AAA8A6);
            filter: grayscale(1) drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #AAA8A6);
}

/*
 * ---- Success page (Sucess.cshtml) ----
 * The mobile success view carries no per-dealer theming, so a Genesis dealer got the default blue
 * chrome: the "Success!" headline is hard-coded #419BFB (.successhead) and the "Done" CTA is the
 * blue nextstep.png cloud sprite with its label baked in. The view now adds .genesis-form + this
 * stylesheet and emits the CTA as real DOM text tagged .genesis-alldone; recolor the headline to
 * Genesis Black and skin the CTA as the same flat Genesis button used across the bid form. Geometry
 * follows the padded mobile button box (see the default-flow buttons above).
 */
.genesis-form .successhead {
    color: #000000 !important;           /* Genesis Black (was #419BFB) */
}

.genesis-form .genesis-alldone {
    box-sizing: border-box;
    display: inline-block;
    min-width: 120px;
    max-width: 400px;
    padding: 10px 20px;
    cursor: pointer;
    background: #000000 !important;      /* Genesis Black */
    background-image: none !important;   /* drop the blue cloud sprite */
    color: #FFFFFF !important;           /* Genesis White */
    border: 1px solid #AAA8A6;           /* Genesis Gray */
    font-family: 'GenesisSansText', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    overflow: visible;
}
.genesis-form .genesis-alldone:hover,
.genesis-form .genesis-alldone:focus {
    background: #1A1A1A !important;      /* Genesis Carbon */
    color: #FFFFFF !important;
}
.genesis-form .genesis-alldone:focus-visible {
    outline: 2px solid #000000;          /* Genesis Black keyboard focus ring */
    outline-offset: 2px;
}

/*
 * ---- Landing-page CTA (LandingPage.cshtml) ----
 * The mobile landing page is un-themed for every dealer; its "Click Here to Start" button is the
 * blue .bule_btn (#5b92f4) and is the FIRST screen a Genesis consumer sees. For a Genesis dealer the
 * view now links this stylesheet and tags the button's container .genesis-form; recolor the CTA to
 * the flat Genesis palette (Black fill / white label / Carbon hover / Gray border). The label is DOM
 * text, so a plain recolor keeps it legible; the button keeps its own padding/size.
 */
.genesis-form .bule_btn {
    background: #000000 !important;      /* Genesis Black (was #5b92f4) */
    background-image: none !important;
    color: #FFFFFF !important;           /* Genesis White */
    border: 1px solid #AAA8A6;           /* Genesis Gray */
    font-family: 'GenesisSansText', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
}
.genesis-form .bule_btn:hover,
.genesis-form .bule_btn:focus {
    background: #1A1A1A !important;      /* Genesis Carbon */
    color: #FFFFFF !important;
    text-decoration: none;
}
.genesis-form .bule_btn:focus-visible {
    outline: 2px solid #000000;          /* Genesis Black keyboard focus ring */
    outline-offset: 2px;
}

/*
 * ---- Carfax "Go Back" toggle (_BothSinglelineandCarfax.cshtml) ----
 * The .frontPageBack "Go Back" control in the Carfax/single-line flow (rendered inside
 * .genesis-form) is only recolored for the Audi/Lexus isBlackLayout branch; a Genesis dealer falls
 * through to the default blue #01629c. Recolor it to the Genesis palette while keeping its compact
 * geometry.
 */
.genesis-form .frontPageBack {
    background: #000000 !important;      /* Genesis Black (was #01629c) */
    color: #FFFFFF !important;
    border: 1px solid #AAA8A6 !important;
}
.genesis-form .frontPageBack:hover,
.genesis-form .frontPageBack:focus {
    background: #1A1A1A !important;      /* Genesis Carbon */
    color: #FFFFFF !important;
}
.genesis-form .frontPageBack:focus-visible {
    outline: 2px solid #000000;          /* Genesis Black keyboard focus ring */
    outline-offset: 2px;
}

/*
 * ---- New-design (DBStyle) rating tiles (_SinglelineentryMockup, IsCarfaxNewDesign) ----
 * When a Genesis dealer's setup carries the new Carfax/single-line design flag, the condition,
 * yes/no, transmission and equipment tiles render from DBStyle.css multi-state sprites
 * (showrrom_*_star.png, new_circle_bg.png) with a blue ring/glow (#10a0c4) and blue text on
 * hover/checked, the icon + label baked into the art. As with the old-design tiles above they can't
 * be masked and carry no DOM label to preserve, so desaturate the sprite-bearing
 * .newdealer_circledIv label: the blue reads neutral Gray while every star, icon and label stays
 * legible across the default / hover / checked frames. Scoped to .genesis-form.
 */
.genesis-form .newdealer_circledIv label {
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
}

/*
 * ---- Neutralize the blue hover glow ----
 * The base style.css paints a blue #308EDF drop-shadow *filter* on .shadowed:hover and on
 * input[type=submit|button]:hover (unlike the legacy app, where that block is commented out). The
 * Genesis flat buttons carry .shadowed, so on hover they showed a blue halo even though their fill
 * is Genesis Black. Replace it with the same subtle neutral Gray glow used for the active tab, scoped
 * to the Genesis button classes only so the desaturated sprite tiles (which also flip filter on
 * hover) are untouched.
 */
.genesis-form .genesisnext-step:hover,
.genesis-form .genesisback-step:hover,
.genesis-form .genesis-show-me-money:hover,
.genesis-form .bothnormalflag_step:hover,
.genesis-form .fcanext-stepinner_new:hover,
.genesis-form .btnStartdetails_default:hover,
.genesis-form .next-step:hover,
.genesis-form .back-step:hover,
.genesis-form .genesis-alldone:hover,
.genesis-form .genesis-alldone:focus,
.genesis-form .bule_btn:hover,
.genesis-form .bule_btn:focus,
.genesis-form .frontPageBack:hover {
    -webkit-filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #AAA8A6) !important;
            filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #AAA8A6) !important;
}