/* =========================================================
   LEWISS Services — theme colors are CSS variables so they
   stay editable from Services > Settings without touching CSS.
   ========================================================= */
:root{
	--lewiss-red: #CC1F2E;
	--lewiss-blue: #0B1F3A;
	--lewiss-blue-2: #13315C;
	--lewiss-white: #FFFFFF;
	--lewiss-radius: 14px;
	--lewiss-shadow: 0 12px 30px rgba(11,31,58,0.18);
	/* Shared vertical rhythm between stacked sections (grid, Why Choose Us,
	   Connect With Us, Related Services) — one number to tune the spacing
	   between everything the plugin outputs consistently. The big hero
	   banners intentionally use their own larger padding since they're
	   meant to feel prominent, not part of this tighter content rhythm. */
	--lewiss-section-gap: 50px;
}

.lewiss-services-page{ color: var(--lewiss-blue); }
.lewiss-services-page a{ text-decoration:none; }
.lewiss-services-page *{ box-sizing:border-box; }

/* Full-width note: the single Service template already renders its own
   sections (hero, why-choose-us, connect-with-us) as edge-to-edge blocks
   with an inner max-width container — the same pattern your two custom
   sections use. That's enough for a "full width" look on themes whose
   content area is already wide/full. We deliberately do NOT force a
   100vw/negative-margin breakout here: that technique fights the active
   theme's own layout (it was causing a horizontal scrollbar and content
   overlapping the site footer).

   The blank strip / stray footer-widget column on the right of the single
   service page is a different, more common issue: many themes (Astra,
   GeneratePress, OceanWP, Kadence, etc.) reserve a sidebar column via
   their OWN layout setting — completely independent of whether a template
   calls get_sidebar() (ours never does). The real fix for that is
   includes/class-theme-compat.php, which hooks each of those themes' own
   "no sidebar on this page" filter directly — far more reliable than
   guessing CSS class names. The rules below are a CSS-only second line of
   defense for themes not covered there, scoped to the `lewiss-full-width`
   body class this plugin adds. If a gap still shows after updating, the
   theme's own per-page "Full Width" / "No Sidebar" template setting is the
   guaranteed fix, or tell your developer the theme name for an exact one. */
body.lewiss-full-width #secondary,
body.lewiss-full-width .widget-area,
body.lewiss-full-width .sidebar,
body.lewiss-full-width aside[role="complementary"],
body.lewiss-full-width .ast-sidebar,
body.lewiss-full-width .right-sidebar,
body.lewiss-full-width .left-sidebar,
body.lewiss-full-width #right-sidebar,
body.lewiss-full-width #left-sidebar,
body.lewiss-full-width .inner-right-sidebar,
body.lewiss-full-width .inner-left-sidebar{
	display: none !important;
}
body.lewiss-full-width #primary,
body.lewiss-full-width #main,
body.lewiss-full-width .content-area,
body.lewiss-full-width .site-main,
body.lewiss-full-width .ast-container,
body.lewiss-full-width .grid-container,
body.lewiss-full-width #main-content,
body.lewiss-full-width .content{
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	grid-template-columns: 1fr !important;
}

/* ---------- Buttons ---------- */
.lewiss-btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	background: var(--lewiss-red);
	color: var(--lewiss-white);
	font-weight:700;
	padding:12px 26px;
	border-radius:999px;
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
	box-shadow: 0 6px 16px rgba(204,31,46,0.35);
}
.lewiss-btn:hover{
	transform: translateY(-2px);
	background: var(--lewiss-blue);
	box-shadow: 0 10px 22px rgba(11,31,58,0.35);
	color: var(--lewiss-white);
}
.lewiss-btn .lewiss-arrow{ transition: transform .25s ease; }
.lewiss-btn:hover .lewiss-arrow{ transform: translateX(4px); }

.lewiss-btn-outline{
	background: transparent;
	color: var(--lewiss-blue);
	border:2px solid var(--lewiss-blue);
	box-shadow:none;
}
.lewiss-btn-outline:hover{
	background: var(--lewiss-blue);
	color: var(--lewiss-white);
}

/* ---------- Hero ---------- */
.lewiss-hero{
	position:relative;
	background: linear-gradient(135deg, var(--lewiss-blue) 0%, var(--lewiss-blue-2) 100%);
	color: var(--lewiss-white);
	padding: 90px 24px;
	text-align:center;
	overflow:hidden;
}
.lewiss-hero::after{
	content:"";
	position:absolute;
	right:-10%;
	top:-20%;
	width:60%;
	height:140%;
	background: repeating-linear-gradient(120deg, rgba(204,31,46,0.18) 0 2px, transparent 2px 40px);
	pointer-events:none;
}
.lewiss-hero-inner{ position:relative; z-index:2; max-width:800px; margin:0 auto; }
.lewiss-hero-rule{
	display:block;
	width:110px;
	height:6px;
	background: var(--lewiss-red);
	border-radius:4px;
	margin:0 auto 22px;
}
.lewiss-hero-title{
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight:800;
	margin:0 0 14px;
	color: var(--lewiss-white);
}
.lewiss-hero-sub{
	font-size:1.05rem;
	opacity:.9;
	max-width:640px;
	margin:0 auto;
}
.lewiss-hero-single{ padding:110px 24px 80px; }
.lewiss-hero-bg{
	position:absolute; inset:0; z-index:0;
}
.lewiss-hero-bg img{
	width:100%; height:100%; object-fit:cover; opacity:.22;
}
.lewiss-hero-icon{
	display:inline-flex;
	width:84px; height:84px;
	border-radius:50%;
	background: var(--lewiss-white);
	border:4px solid var(--lewiss-red);
	align-items:center; justify-content:center;
	margin-bottom:18px;
	box-shadow:0 8px 20px rgba(0,0,0,.25);
	overflow:hidden;
}
.lewiss-hero-icon img{ width:56%; height:56%; object-fit:contain; }

/* ---------- Category Filter Tabs ---------- */
.lewiss-category-filters{
	max-width:1200px;
	margin:0 auto 34px;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:12px;
}
.lewiss-filter-btn{
	/* !important throughout this rule: Pagelayer/PopularFX (and some other
	   themes/builders) apply their own site-wide styling directly to the
	   <button> element, which otherwise wins over a plain class selector
	   here and makes these render as default gray browser buttons. */
	background: var(--lewiss-white) !important;
	border: 2px solid rgba(11,31,58,0.12) !important;
	color: var(--lewiss-blue) !important;
	font-weight:700 !important;
	font-size:.9rem !important;
	line-height:normal !important;
	padding:10px 22px !important;
	border-radius:999px !important;
	box-shadow:none !important;
	cursor:pointer;
	transition: all .25s ease;
}
.lewiss-filter-btn:hover{
	background: var(--lewiss-white) !important;
	border-color: var(--lewiss-red) !important;
	color: var(--lewiss-red) !important;
	transform: translateY(-2px);
}
.lewiss-filter-btn.is-active{
	background: var(--lewiss-red) !important;
	border-color: var(--lewiss-red) !important;
	color: var(--lewiss-white) !important;
	box-shadow: 0 8px 18px rgba(204,31,46,0.3) !important;
}
.lewiss-no-results{
	text-align:center;
	max-width:1200px;
	margin:0 auto;
	padding:20px;
	color:#64748b;
}

/* ---------- Services Grid ---------- */
.lewiss-services-grid-wrap{ padding: var(--lewiss-section-gap) 24px 20px; }
.lewiss-services-grid{
	--lewiss-columns: 3;
	max-width:1200px;
	margin:0 auto;
	display:grid;
	grid-template-columns: repeat(var(--lewiss-columns), 1fr);
	gap:32px;
}
@media (max-width: 992px){ .lewiss-services-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .lewiss-services-grid{ grid-template-columns: 1fr; } }

.lewiss-service-card{
	background: var(--lewiss-white);
	border-radius: var(--lewiss-radius);
	overflow:hidden;
	box-shadow: var(--lewiss-shadow);
	transition: transform .35s ease, box-shadow .35s ease;
	display:flex;
	flex-direction:column;
}
.lewiss-service-card:hover{
	transform: translateY(-8px);
	box-shadow: 0 22px 40px rgba(11,31,58,0.28);
}

.lewiss-card-media{
	position:relative;
	display:block;
	aspect-ratio: 4 / 3;
	overflow:hidden;
	background: var(--lewiss-blue);
}
.lewiss-card-media img{
	width:100%; height:100%; object-fit:cover;
	transition: transform .5s ease;
}
.lewiss-service-card:hover .lewiss-card-media img{ transform: scale(1.1); }
.lewiss-card-media-placeholder{
	width:100%; height:100%;
	background: linear-gradient(135deg, var(--lewiss-blue), var(--lewiss-blue-2));
}
.lewiss-card-overlay{
	position:absolute; inset:0;
	background: linear-gradient(180deg, rgba(11,31,58,0) 40%, rgba(11,31,58,.75) 100%);
	opacity:.6;
	transition: opacity .35s ease;
}
.lewiss-service-card:hover .lewiss-card-overlay{ opacity:.85; }

.lewiss-card-icon{
	position:absolute;
	left:16px; top:16px;
	width:52px; height:52px;
	border-radius:50%;
	background: var(--lewiss-white);
	border:3px solid var(--lewiss-red);
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 6px 14px rgba(0,0,0,.25);
	transition: transform .35s ease;
	overflow:hidden;
}
.lewiss-service-card:hover .lewiss-card-icon{ transform: rotate(-8deg) scale(1.08); }
.lewiss-card-icon img{ width:60%; height:60%; object-fit:contain; }

.lewiss-card-body{
	padding:22px 22px 26px;
	display:flex;
	flex-direction:column;
	gap:10px;
	flex:1;
}
.lewiss-card-title{ margin:0; font-size:1.25rem; }
.lewiss-card-title a{ color: var(--lewiss-blue); }
.lewiss-service-card:hover .lewiss-card-title a{ color: var(--lewiss-red); }
.lewiss-card-text{
	margin:0;
	color:#555;
	font-size:.95rem;
	flex:1;
}
.lewiss-btn-card{ align-self:flex-start; margin-top:6px; padding:10px 22px; font-size:.9rem; }

/* ---------- Single service content ---------- */
.lewiss-single-content-wrap{
	max-width:1000px;
	margin:0 auto;
	padding: var(--lewiss-section-gap) 24px 20px;
}

.lewiss-content-card{
	background: var(--lewiss-white);
	border-radius: var(--lewiss-radius);
	box-shadow: var(--lewiss-shadow);
	border: 1px solid rgba(11,31,58,0.06);
	padding: 44px 44px 36px;
}
@media (max-width: 640px){ .lewiss-content-card{ padding: 30px 22px 26px; } }

.lewiss-content-tag{
	display:inline-flex;
	align-items:center;
	gap:10px;
	color: var(--lewiss-red);
	font-weight:700;
	font-size:13px;
	letter-spacing:2px;
	text-transform:uppercase;
	margin-bottom:18px;
}

.lewiss-single-content{ font-size:1.05rem; line-height:1.8; color:#334155; }
.lewiss-single-content h2{ color: var(--lewiss-blue); border-left:5px solid var(--lewiss-red); padding-left:14px; margin-top:34px; }

/* Lead-in paragraph: the first paragraph reads like an intro line */
.lewiss-single-content > p:first-of-type{
	font-size:1.2rem;
	font-weight:600;
	color: var(--lewiss-blue);
	line-height:1.6;
}

/* Turn plain bullet lists into hover-lift checklist cards, same visual
   language as the "Why Choose Us" benefit items. */
.lewiss-single-content ul{
	list-style:none;
	margin: 26px 0 10px;
	padding:0;
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap:14px;
}
@media (max-width: 640px){ .lewiss-single-content ul{ grid-template-columns: 1fr; } }
.lewiss-single-content ul li{
	position:relative;
	background:#F8FAFC;
	border:1px solid rgba(11,31,58,0.07);
	border-radius:12px;
	padding:16px 20px 16px 52px;
	font-weight:600;
	color: var(--lewiss-blue);
	line-height:1.5;
	transition: transform .3s cubic-bezier(.165,.84,.44,1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.lewiss-single-content ul li:hover{
	transform: translateY(-4px);
	background: rgba(204,31,46,0.04);
	border-color: rgba(204,31,46,0.3);
	box-shadow: 0 12px 26px rgba(11,31,58,0.12);
}
.lewiss-single-content ul li::before{
	content:"\2713";
	position:absolute;
	left:16px; top:15px;
	width:24px; height:24px;
	border-radius:50%;
	background: var(--lewiss-red);
	color:#fff;
	font-size:12px;
	font-weight:800;
	display:flex; align-items:center; justify-content:center;
	transition: transform .3s ease;
}
.lewiss-single-content ul li:hover::before{ transform: rotate(360deg); }

.lewiss-single-content ol{ padding-left:22px; }
.lewiss-single-content ol li{ margin-bottom:10px; }
.lewiss-single-content a{ color: var(--lewiss-red); text-decoration:underline; }
.lewiss-single-content img{ border-radius:10px; max-width:100%; height:auto; }

/* image gallery, lightbox trigger */
.lewiss-single-gallery{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:16px;
	margin: 34px 0;
}
@media (max-width: 640px){ .lewiss-single-gallery{ grid-template-columns: repeat(2,1fr); } }
.lewiss-gallery-item{
	position:relative;
	display:block;
	border-radius:10px;
	overflow:hidden;
	aspect-ratio: 1 / 1;
	box-shadow: 0 6px 16px rgba(11,31,58,0.18);
}
.lewiss-gallery-item img{
	width:100%; height:100%; object-fit:cover;
	transition: transform .4s ease;
}
.lewiss-gallery-item:hover img{ transform: scale(1.08); }
.lewiss-gallery-zoom{
	position:absolute; inset:0;
	display:flex; align-items:center; justify-content:center;
	background: rgba(11,31,58,.45);
	color:#fff; font-size:1.4rem;
	opacity:0;
	transition: opacity .3s ease;
}
.lewiss-gallery-item:hover .lewiss-gallery-zoom{ opacity:1; }

.lewiss-back-link{ margin-top: 30px; }

/* ---------- Related Services block (reuses the same "block" pattern) ----------
   Note: the "Why Choose Us" / "Connect With Us" sections are full self-contained
   HTML blocks edited in Settings and bring their own styling, so they don't use
   these .lewiss-block classes. */
.lewiss-block{ padding: 70px 24px; }
.lewiss-block:nth-of-type(odd){ background: #F5F7FA; }

.lewiss-block-inner{ max-width:900px; margin:0 auto; text-align:center; }
.lewiss-block-rule{
	display:block;
	width:80px; height:5px;
	background: var(--lewiss-red);
	margin:0 auto 18px;
	border-radius:4px;
}
.lewiss-block-heading{
	font-size:2rem;
	font-weight:800;
	margin:0 0 22px;
}
.lewiss-block-content{ text-align:left; font-size:1.05rem; line-height:1.75; }
.lewiss-block-content ul{
	list-style:none;
	padding:0;
	margin:0;
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap:14px;
}
@media (max-width: 640px){ .lewiss-block-content ul{ grid-template-columns: 1fr; } }
.lewiss-block-content ul li{
	position:relative;
	padding-left:30px;
	background: rgba(255,255,255,0.02);
}
.lewiss-block-content ul li::before{
	content:"\2713";
	position:absolute; left:0; top:0;
	color: var(--lewiss-red);
	font-weight:800;
}
.lewiss-connect-with-us .lewiss-block-content{ text-align:center; }

/* ---------- Related services ---------- */
.lewiss-related{ padding: var(--lewiss-section-gap) 24px; background:#F5F7FA; }
.lewiss-related .lewiss-services-grid{ margin-top:10px; }

/* ---------- Lightbox ---------- */
#lewiss-lightbox-overlay{
	position:fixed; inset:0; z-index:99999;
	background: rgba(11,31,58,.92);
	display:none;
	align-items:center; justify-content:center;
	padding:24px;
}
#lewiss-lightbox-overlay.is-open{ display:flex; }
#lewiss-lightbox-overlay img{
	max-width:90vw; max-height:85vh;
	border-radius:10px;
	box-shadow:0 20px 50px rgba(0,0,0,.5);
}
#lewiss-lightbox-close{
	position:absolute; top:24px; right:32px;
	color:#fff; font-size:2rem; cursor:pointer;
	background: var(--lewiss-red);
	width:44px; height:44px;
	border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	line-height:1;
}

/* ---------- Home / About Us teaser: grid + slider shortcodes ----------
   Deliberately no background/full-bleed padding here — this is meant to
   drop inside whatever section/container the theme or page builder (e.g.
   an Elementor Shortcode widget) already provides on the Home/About page. */
.lewiss-home-section{ width:100%; }
.lewiss-home-section .lewiss-services-grid{ margin-bottom: 8px; }

/* Section header (tag + title + description) — opt-in via the `title`
   attribute on [lewiss_services_home_grid] / [lewiss_services_home_slider],
   same tag/heading pattern as the "Why Choose Us" section: hover color
   shift on the tag/title, plus a fade-up entrance the first time it
   scrolls into view (JS toggles .is-visible; see initRevealAnimations()). */
.lewiss-home-header{
	max-width:700px;
	margin:0 auto 40px;
	text-align:center;
	opacity:0;
	transform: translateY(24px);
	transition: opacity .7s ease, transform .7s ease;
}
.lewiss-home-header.is-visible{
	opacity:1;
	transform: translateY(0);
}
.lewiss-home-tag{
	/* !important throughout this block: PopularFX applies its own brand
	   color directly to headings/text site-wide (same conflict as the
	   <button> reset fixed earlier), which otherwise wins over a plain
	   class selector and makes these render in the theme's teal/green
	   instead of this plugin's red/navy. */
	display:inline-flex;
	align-items:center;
	gap:8px;
	color: var(--lewiss-red) !important;
	font-weight:700;
	font-size:13px;
	letter-spacing:2px;
	text-transform:uppercase;
	margin-bottom:14px;
	cursor:default;
	transition: color .3s ease, transform .3s ease;
}
.lewiss-home-header:hover .lewiss-home-tag{
	color: var(--lewiss-blue) !important;
	transform: translateX(5px);
}
.lewiss-home-section.is-dark .lewiss-home-header:hover .lewiss-home-tag{ color: var(--lewiss-white) !important; }
.lewiss-home-title{
	font-size:2rem;
	font-weight:800;
	color: var(--lewiss-blue) !important;
	margin:0 0 14px;
	line-height:1.25;
	cursor:default;
	transition: color .4s ease, text-shadow .4s ease;
}
.lewiss-home-header:hover .lewiss-home-title{
	color: var(--lewiss-red) !important;
	text-shadow: 0 10px 25px rgba(204,31,46,0.25);
}
.lewiss-home-desc{
	color:#555 !important;
	font-size:1.05rem;
	line-height:1.7;
	margin:0;
}
.lewiss-home-section.is-dark .lewiss-home-title{ color: var(--lewiss-white) !important; }
.lewiss-home-section.is-dark .lewiss-home-header:hover .lewiss-home-title{ color: var(--lewiss-red) !important; }
.lewiss-home-section.is-dark .lewiss-home-desc{ color: rgba(255,255,255,0.75) !important; }
@media (prefers-reduced-motion: reduce){
	.lewiss-home-header{ opacity:1; transform:none; transition:none; }
}
.lewiss-home-cta{
	display:flex;
	justify-content:center;
	width:100%;
	margin-top:26px;
}

/* Your "Why Choose Us" / "Connect With Us" HTML blocks (edited in
   Settings) carry their own baked-in padding (60px top/bottom) inside
   their pasted <style> tag. That inline <style> is embedded later in the
   page than this stylesheet, so on equal specificity it would normally
   win the cascade — these two rules use the exact wrapper class names
   from that HTML to override it with !important, so every place these
   blocks appear (single pages, the grid archive, or stacked directly
   after [lewiss_services_home_grid]/[lewiss_why_choose_us]/
   [lewiss_connect_with_us] like on this Home page) shares the same
   --lewiss-section-gap rhythm as the rest of the plugin, instead of
   compounding into a bigger gap when two blocks sit back-to-back. */
.why-choose-section-wrapper,
.connect-section-wrapper{
	padding: var(--lewiss-section-gap) 20px !important;
}

/* Dark theme variant — use theme="dark" on either shortcode when you're
   dropping it into a section that already has a dark/navy background
   (e.g. next to your "Why Choose Us" section). Cards switch to navy with
   light text instead of white with dark text; the red button and
   checkmark badges stay the same either way. */
.lewiss-home-section.is-dark .lewiss-service-card{
	background: var(--lewiss-blue);
	border-color: rgba(255,255,255,0.1);
}
.lewiss-home-section.is-dark .lewiss-card-media-placeholder{
	background: linear-gradient(135deg, var(--lewiss-blue-2), var(--lewiss-blue));
}
.lewiss-home-section.is-dark .lewiss-card-title a{ color: var(--lewiss-white); }
.lewiss-home-section.is-dark .lewiss-service-card:hover .lewiss-card-title a{ color: var(--lewiss-red); }
.lewiss-home-section.is-dark .lewiss-card-text{ color: rgba(255,255,255,0.72); }
.lewiss-home-section.is-dark .lewiss-card-icon{ background: var(--lewiss-blue); }
.lewiss-home-section.is-dark .lewiss-slider-arrow{
	background: var(--lewiss-blue) !important;
	border-color: rgba(255,255,255,0.5) !important;
	color: var(--lewiss-white) !important;
}
.lewiss-home-section.is-dark .lewiss-slider-arrow:hover{
	background: var(--lewiss-red) !important;
	border-color: var(--lewiss-red) !important;
	color: var(--lewiss-white) !important;
}
.lewiss-home-section.is-dark .lewiss-slider-dots button{ background: rgba(255,255,255,0.28) !important; }
.lewiss-home-section.is-dark .lewiss-slider-dots button.is-active{ background: var(--lewiss-red) !important; }

.lewiss-slider-wrap{ position:relative; }
.lewiss-slider-track{
	display:flex;
	gap:24px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scrollbar-width:none;
	padding:6px 4px 14px;
	-ms-overflow-style:none;
}
.lewiss-slider-track::-webkit-scrollbar{ display:none; height:0; }
.lewiss-slide{
	flex:0 0 82%;
	max-width:340px;
	scroll-snap-align:start;
}
@media (min-width:600px){ .lewiss-slide{ flex:0 0 320px; } }

.lewiss-slider-arrow{
	/* !important throughout: same theme <button> reset issue as the
	   filter tabs above (confirmed on Pagelayer/PopularFX). */
	position:absolute;
	top:38%;
	transform:translateY(-50%);
	width:46px !important; height:46px !important;
	border-radius:50% !important;
	background: var(--lewiss-white) !important;
	border:2px solid var(--lewiss-red) !important;
	color: var(--lewiss-red) !important;
	font-size:1.1rem !important;
	line-height:normal !important;
	padding:0 !important;
	display:flex; align-items:center; justify-content:center;
	cursor:pointer;
	box-shadow: 0 8px 18px rgba(11,31,58,0.18) !important;
	transition: all .3s ease;
	z-index:3;
}
.lewiss-slider-arrow:hover{ background: var(--lewiss-red) !important; color: var(--lewiss-white) !important; transform: translateY(-50%) scale(1.08); }
.lewiss-slider-prev{ left:-8px; }
.lewiss-slider-next{ right:-8px; }
@media (max-width:640px){ .lewiss-slider-prev{ left:-4px; } .lewiss-slider-next{ right:-4px; } }

.lewiss-slider-dots{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:8px;
	margin-top:6px;
}
.lewiss-slider-dots button{
	width:9px !important; height:9px !important;
	border-radius:50% !important;
	background: rgba(11,31,58,0.2) !important;
	border:none !important;
	box-shadow:none !important;
	padding:0 !important;
	cursor:pointer;
	transition: all .25s ease;
}
.lewiss-slider-dots button.is-active{
	background: var(--lewiss-red) !important;
	width:24px !important;
	border-radius:5px !important;
}