@charset "UTF-8";
/* Baseline anchor hover: keep the base colour and DON'T change opacity — no visual feedback on
   the header, nav, footer, or generic anchors. `color: inherit` is the only override, and it's
   there purely to block Bootstrap's default `a:hover{color:#2A6496}` blue from bleeding through.
   (Previously this rule set color:#83FFC1 → then color:#0f6e56 → then opacity:0.75, but the
   opacity fade on hover was too aggressive for chrome elements that shouldn't animate at all.) */
a:hover,
a:focus {
  color: inherit; }

/* Content-area hover: anchors inside .category-container (city-nearby links, related-category
   cards, article/product cards, breadcrumbs, captions) — anywhere the legacy design used a light
   green hover to indicate "clickable". Swap the light-green (#83FFC1, illegible on white) for
   dark EA green (#0f6e56) so the shade shift stays but is readable. Scoped to .category-container
   so header/footer/nav stay static per the rule above. Card outer border/glow is intentionally
   left to the legacy category-rfq-cro.min.css rule (subtle grey box-shadow) — matches portals. */
.category-container a:hover,
.video-item a:hover .item-caption,
.article-item a:hover .item-caption,
a:hover .item-caption,
.category .articles-carousel-control_cat .item-desc a:hover,
#breadcrumbs a:hover {
  color: #0f6e56; }

/* Related-category and product cards live inside .product__scroller. The legacy
   category-rfq-cro.min.css sets .product__scroller a:hover { color:#333 } which loads
   AFTER theme-fm.css, so at equal specificity it beats the rule above. Bump specificity
   with the .category-container prefix so the dark-EA-green hover wins for these cards
   too (matches the "connected/related categories on hover" ask). */
.category-container .product__scroller a:hover {
  color: #0f6e56; }

/* Article-page related-category cards (.category__item--with-image, rendered by ArticleView).
   Legacy articles3.min.css sets `.category__item--with-image:hover > span {
     text-decoration: underline; color: var(--bgcolor-theme) !important;
   }` — the underline is desired but var(--bgcolor-theme)=#83FFC1 renders as illegible
   light-mint text. Keep everything else (underline + the card's border-highlight/scale from
   the portals design) and just neutralise the colour swap — the text keeps its base grey. */
.category__wrapper .category__item--with-image:hover > span,
.related-category-desktop .category__item--with-image:hover > span {
  color: inherit !important; }



.panel-enquiryform {
    background-color: #83FFC1;
}

.themeTxtColour {
  color: #0f6e56; }

.caret {
  border-color: #FFFFFF transparent -moz-use-text-color; }

.widget-subfont-color {
  color: #0f6e56; }

.content .panel-content-relcats .panel-title, .subfont-color {
  color: #333;
  font-size: 16px; }

.video-item .item-caption, .article-widget-item .item-caption {
  background: none;
  color: #FFFFFF; }

.large-image-item .item-caption {
  background: url("/content/images/transpgrey75.png") repeat scroll 0 0 transparent; }

.large-image-item a:hover .item-caption {
  background: url("/content/images/transpgrey75.png") repeat scroll 0 0 transparent; }

.video-item a:hover .item-caption, .article-widget-item a:hover .item-caption {
  background: url("/content/images/transpIS50.png") repeat scroll 0 0 transparent;
  color: #FFFFFF; }

.article-item .item-caption a, .article-widget-item a {
  color: #FFFFFF; }

/*---ICONS-------*/
.icons {
  background-position: 0 -48px; }

.icon-product {
  background-position: -467px -48px; }

.icon-categories {
  background-position: -557px -48px; }

.icon-articles {
  background-position: -187px -48px; }

.icon-events {
  background-position: -277px -48px; }

.icon-useditems {
  background-position: 0 -48px; }

.icon-stars {
  background-position: -375px -48px; }

.icon-news {
  background-position: -650px -48px; }

.home .icn-facebook {
  background-position: -705px -50px; }

.home .icn-twitter {
  background-position: -735px -50px; }

.home .icn-gplus {
  background-position: -765px -50px; }

.home .icn-youtube {
  background-position: -795px -50px; }

.home .icn-linkedin {
  background-position: -825px -50px; }

.follow-link i {
  color: #6C6D6F; }

.btn-color {
  background-color: #E3FDEE !important; }

.btn-color:hover, .btn-color:focus, .btn-color:active {
  background-color: #83FFC1; }

.btn:hover, .btn-color:focus, .btn-color:active {
  background: #E3FDEE; }

.form-control:focus {
  box-shadow: none; }

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  background-color: #E3FDEE;
  color: #333333; }

.bg_true {
  background: url("/content/images/bg-topcontent-is.png") no-repeat scroll center top/100% auto transparent;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1; }

.bg_static {
  background: url("/content/images/bg-topcontent-is.png") no-repeat scroll center top/100% auto transparent;
  width: 100%; }

.search-panel {
  background: #434343; }

.subscribe-info ul {
  list-style-image: url("/content/images/info-bullet-is.png"); }

.prtAltBorder {
  /* Was #83FFC1 (light green) — invisible as a 1px border on white; use dark EA green for contrast. */
  border-color: #0f6e56 !important; }

.news-control-vertical li:before {
  content: "• ";
  color: #0f6e56;
  /* Dark EA green (was #83FFC1 light — illegible on white bullets) */ }


/*---Pagination---*/
.badge.active, .directory .search-panel {
  background-color: #83FFC1; }

.icon-color {
  color: #0f6e56; }

.btn-special {
  background-color: #83FFC1;
  background-image: linear-gradient(#83FFC1, #E3FDEE);
  border: 1px solid #83FFC1;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.11), 0 0 1px 1px rgba(255, 255, 255, 0.12) inset;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
  color: #333333 !important; }

.btn-special.active, .btn-special:active, .btn-special:hover, .btn-special:focus {
  background-color: #E3FDEE;
  background-image: linear-gradient(#E3FDEE, #83FFC1); }

.dirlist-color {
  color: #3f3f3f !important; }

.category a:hover,
.category a:hover .item-caption,
.category .panel-categories .dir-list-item a:hover {
  /* Was color:#0f6e56 — swap to opacity so category link hovers just lighten the base
     colour instead of jumping to dark green. `color: inherit` blocks Bootstrap's blue. */
  color: inherit;
  opacity: 0.75; }

.category .article-item a:hover,
.category a.item-title {
  color: #333;
  text-decoration: none; }

.category a.item-title:hover {
  /* Was color:#0f6e56. Same lighten-in-place convention as the block above. */
  color: inherit;
  opacity: 0.75; }

.loyalty {
  background: url("/content/images/is_ribbon.png") repeat scroll 0 0 transparent;
  color: #fff; }

.featured-cat-list, .products-count-tab, .subscribe-sm-obj.item-thumb {
  border: 1px solid #e0e1e3; }

.subscribe-modal-btn {
  color: #333 !important; }

.flex-control-paging li a {
  background: rgba(131, 255, 193,0.5) none repeat scroll 0 0 !important;
  box-shadow: 0 0 3px rgba(131, 255, 193,0.3) inset !important; }

.flex-direction-nav a, .flex-direction-nav a::before {
  color: rgba(131, 255, 193,0.5) !important; }

.flex-control-paging li a.flex-active, .flex-control-paging li a:hover {
  background: rgba(131, 255, 193,0.9) none repeat scroll 0 0 !important; }

.product-video .item-caption {
  bottom: 0 !important; }

#enquiry-modal .modal-header
{
  background-color: #E3FDEE; 
}

.modal-btn-container a {
  /* Was #83FFC1 — 1px light green on white was invisible; dark EA green reads. */
  border: 1px solid #0f6e56; }

.category-product-contact-supplier {
  background: #E3FDEE none repeat scroll 0 0; }

.prod-new {
  color: #0f6e56; }

#storefront-advertise {
  background-color: #83FFC1; 
}

#storefront-advertise .btn {
  background-color: #666;
  color: #fff; }

.lt-scroll:hover,
.gt-scroll:hover {
  background: #E3FDEE; }

.category #more-products .category-product-img,
#newsletter-latest-products #more-products .category-product-img {
    border-bottom-color: #E3FDEE;
    background: #E3FDEE;
}


.category .category-product span.view-more,
#newsletter-latest-products .category-product span.view-more {
    color: #333;
}