@charset "utf-8";

/* CSS Document */

/*  Table of Contents 







01. FEATURE STYLES



	A. SEARCH BAR



	B. STICKY



	C. FORM LIST AND FORM VALIDATION



	D. FX REPLACE



    E. COUNTDOWN CLOCK



    F. TIMELINE







02. NAVIGATION STYLES



	A. OFF-CANVAS



	B. TOP BAR



    C. MAIN NAVIGATION BAR



    D. LEFT NAVIGATION BAR



	E. BREADCRUMBS, PAGENATION & PROGRESS INDICATOR







03. CONTAINER STYLES



    A. MAIN SECTION



    B. LEFT SECTION



	C. RIGHT SECTION



	D. FOOTER



	E. OVERLAP OVER CONTAINERS



	F. BLOCK GRIDS



	G. POSTS & TOOLS







04. CONTENT STYLES



	A. HEADERS, PARAGRAPHS, BODY



	B. LISTS



    C. TABS AND ACCORDION



    D. DROPDOWNS



    E. TABLES



    F. HYPERLINKS



    G. LABELS AND HIGHLIGHTS



	H. LINES AND DIVIDERS



	I. COLOURS



	J. FORMS AND VALIDATIONS



	K. V-CARDS







05. BUTTON STYLES



	A. SINGLE BUTTONS



	B. BUTTON GROUPS



	C. SPLIT BUTTONS



	D. DROPDOWN BUTTONS    







06. CALLOUTS AND PROMPT STYLES



	A. MODALS



	B. ALERTS AND FIELD SETS



	C. PANELS, DIVISIONS AND SPANS



	D. TOOL TIPS



	E. JOYRIDES



	F. PRICING TABLES







07. IMAGE AND MEDIA STYLES



	A. THUMBNAILS



	B. SLIDERS



	C. IFRAME



	D. BACKGROUND IMAGE







*/

/* DEEJAYS.COM */

/*







=============================================== 01. FEATURE STYLES =============================================== */







.header-wrapper {

  background-color: #00573d;

  padding: 0;

}

.header-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 999;

  height: 102px; /* set fixed height */

  padding: 0 1rem; /* remove vertical padding, keep horizontal */

  box-sizing: border-box;

  border-bottom: 2px solid #428a77;

}

.header-container .logo {

  flex: 0 1 auto;

}

.header-container .hamburger {

  flex: 0 0 auto;

}

.header-container img {

  max-width: 180px;

  height: auto;

}

/* Optional: Style the hamburger icon */

.header-container .hamburger i {

  font-size: 1.5rem;

  color: white;

  cursor: pointer;

}

/* Inside .main-nav, use wrapping flex for links and actions */

.header-container .main-nav {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 2rem;

  flex: 1 1 100%;

  min-width: 0;

  margin-top: 0.5em;

}

/* nav-links and nav-actions should wrap onto new lines if needed */

.header-container .nav-links {

  display: flex;

  flex-wrap: wrap;

  list-style: none;

  margin: 0;

  padding: 0;

  gap: 1.5rem;

}

.header-container .nav-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem;

  align-items: center;

  padding-left: 2em;

}

/* Extra horizontal padding inside the grid */

.header-container .grid-x {

  padding-left: 1.5em;

  padding-right: 1.5em;

}

.header-container .header_logo {

  max-width: 180px;

  height: auto;

  padding-right: 2em;

}

@media screen and (max-width: 1460px) {

  .header-container .main-nav {

    gap: 1rem;

  }

  .header-container .nav-links {

    gap: 1.5rem;

  }

  .header-container .nav-actions {

    gap: 0.5rem;

    padding-left: .750em;

  }

  .header-container .cart-link {

    font-size: .875em;

  }

  .header-container .header_logo {

    padding-right: 2em;

  }

}

@media screen and (max-width: 1402px) {

  .header-container .main-nav {

    gap: .5rem;

  }

  .header-container .nav-links {

    gap: 1rem;

  }

  .header-container .nav-actions {

    gap: 0.5rem;

  }

  .header-container .cart-link {

    font-size: .875em;

  }

  .header-container .header_logo {

    padding-right: 2em;

  }

  .header-container .main-nav .btn {

    font-size: .875rem;

  }

}

@media screen and (max-width: 1300px) {

  .header-container .main-nav .btn {

    font-size: .750rem;

  }

  .header-container .cart-link {

    font-size: .750em;

  }

}

@media screen and (max-width: 1288px) {

  .header-container .nav-links li a {

    font-size: .875rem;

  }

}

@media screen and (max-width: 1206px) {

  .header-container .header_logo {

    max-width: 175px;

  }

  .cart-text {

    display: none;

  }

}

@media screen and (max-width: 1115px) {

  .header-text {

    display: none;

  }

}

@media screen and (max-width: 1080px) {

  .header-container .nav-links li a {

    font-size: .750rem;

  }

  .header-container .main-nav .btn {

    font-size: .750rem;

  }

}

@media screen and (max-width: 1048px) {

  .header-container .main-nav {

    gap: .25rem;

  }

  .appointment-text {

    display: none;

  }

  .header-text {

    display: inline;

  }

}

.nav-links li {

  display: flex; /* ensures consistent layout of <a> inside <li> */

  align-items: center;

}

.nav-link-tab {

  cursor: default; /* Optional: avoids showing a pointer if it's not meant to be a link */

}

.nav-links a {

  display: inline-block;

  padding: 0.35rem 0.45rem;

  color: #fff;

  text-decoration: none;

  font-weight: 500;

  font-size: 0.875em;

  box-sizing: border-box;

  border-radius: 0;

  transition: background-color 0.2s ease, color 0.3s ease;

}

.nav-links a, .nav-links a:visited, .nav-links a:focus, .nav-links a:hover {

  text-decoration: none;

}

/* General nav item hover */

.nav-links a:hover:not(.nav-link-tab) {

  background-color: #d8e6e1;

  color: #428a77;

  border-radius: 0.625rem;

}

/* Dropdown (tab-style) hover: top only */

.nav-link-tab.active-hover {

  position: relative;

  z-index: 10000;

  background-color: #d8e6e1;

  color: #428a77;

  border-top-left-radius: 0.625rem;

  border-top-right-radius: 0.625rem;

  margin-bottom: -1px;

}

/* Extend tab visually down to bottom of header */

.nav-link-tab.active-hover::after {

  content: '';

  position: absolute;

  top: 100%; /* start at the bottom of the tab */

  left: 0;

  width: 100%;

  height: calc(102px - 100%); /* extend to bottom of header */

  background-color: #d8e6e1;

  border-bottom-left-radius: 0.625rem;

  border-bottom-right-radius: 0.625rem;

  z-index: -1; /* stays behind the tab content */

}

.nav-link-services {

  display: inline-block;

  padding: 0.35rem .35rem; /* same in all states */

  border-radius: 0; /* default: no radius */

  background-color: transparent; /* default: clear background */

  color: #fff; /* or your normal link color */

  text-decoration: none;

  box-sizing: border-box;

  transition: background-color 0.2s ease, color 0.2s ease;

  position: relative;

  z-index: 1; /* base layer */

}

/* Services tab (override general hover) */

.nav-link-services:hover, .nav-link-services.active-hover {

  background-color: #d8e6e1;

  color: #428a77;

  border-radius: 0.625rem 0.625rem 0 0; /* only rounded top */

  margin-bottom: -1px;

  z-index: 10000;

}

#services_dropdown {

  background-color: #d8e6e1 !important;

  border-top: 0 solid #fefefe;

  box-shadow:

    0 4px 8px rgba(0, 0, 0, 0.15), inset 0 8px 8px -8px #d8e6e1; /* pushes top shadow inward and hides it */

  z-index: 1000;

  position: relative;

}

/* === SERVICES DROPDOWN STYLING === */

#services_dropdown ul.no-bullet li {

  margin-bottom: 0.5rem; /* space between items */

}

#services_dropdown ul.no-bullet li a {

  color: #333333;

  text-decoration: none;

  transition: text-decoration 0.2s ease;

}

#services_dropdown ul.no-bullet li a:hover {

  text-decoration: underline;

}



.nav_icon_header {

font-size: 1.25em;	

color: 	#115740;

}





.numbered-square {

  display: inline-flex;

  justify-content: center;

  align-items: center;

  width: 1.8em;

  height: 1.8em;

  background-color: #115740; /* Macdonald's green */

  color: #fff;

  font-weight: bold;

  font-size: 1rem;

  border-radius: 0.25em;

  margin-right: 0.5em;

}

.reminder-box {

  display: flex;

  align-items: flex-start;

  background-color: #fff8ec; /* soft background that pairs well with #cb9731 */

  border-left: 5px solid #cb9731;

  padding: 1rem;

  border-radius: 0.5rem;

  margin-top: 2rem;

  margin-bottom: 1.5rem;

}

.reminder-icon {

  color: #cb9731;

  font-size: 1.5rem;

  margin-right: 0.75rem;

  margin-top: 0.15rem;

}

.reminder-text {

  margin: 0;

  color: #333;

}

.reminder-box .program-description {

  margin-top: 0;

  margin-bottom: 0;

  line-height: 1.3; /* Optional: tighten vertical space */

}

#shop_dropdown {

  box-shadow:

    0 4px 8px rgba(0, 0, 0, 0.15), inset 0 8px 8px -8px #d8e6e1; /* pushes top shadow inward and hides it */

}

/* === Shop Dropdown Enhancements === */

#shop_dropdown .cell {

  margin-bottom: 1rem;

}

.shop-list {

  margin-bottom: 1rem;

  display: flex;

  align-items: flex-start;

  gap: 1rem;

  background: #f1f5f4;

  padding: 1rem;

  border-radius: 0.75rem;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

  transition: transform 0.2s ease, box-shadow 0.2s ease;

  color: #333333;

  text-decoration: none;

  flex-direction: row;

  min-height: 100%;

}

.shop-list .shop-title-link {

  display: flex;

  align-items: center;

  gap: .5rem;

  font-weight: 700;

  margin-bottom: .25rem;

}

.shop-link {

  display: flex;

  align-items: flex-start;

  gap: 1rem;

  background: #fff;

  padding: 1rem;

  border-radius: 0.75rem;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

  transition: transform 0.2s ease, box-shadow 0.2s ease;

  color: #333333;

  text-decoration: none;

  flex-direction: row;

  min-height: 100%;

}

a.shop-link {

  color: inherit;

  text-decoration: none;

}

.shop-link:hover {

  transform: none;

  box-shadow: none;

} /* remove lift */

a.shop-link:hover {

  transform: translateY(-3px);

  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);

}

.shop-link .shop-title {

  font-weight: 600;

  font-size: 1.125rem;

  color: #333333;

}

/* Keep underline on normal links, but NOT on full-card links */

.dropdown-pane a:not(.shop-link):hover {

  text-decoration: underline;

}

/* And explicitly disable on card anchors */

a.shop-link, a.shop-link:link, a.shop-link:visited, a.shop-link:hover, a.shop-link:focus {

  text-decoration: none;

  display: flex; /* ensure block-level so no stray underlines */

}

.shop-icon {

  font-size: 1.5rem;

  color: #2f7361;

  flex-shrink: 0;

  margin-top: 0.25rem;

}



.shop-icon_large {

  font-size: 2.25rem;

  color: #2f7361;

  flex-shrink: 0;

  margin-top: 0.25rem;

}



/* wrapper just centers the inline child; Foundation's .text-center also does this */

.text-center { text-align: center; }





/* Banner: wider, block-level, and left-justified text */

.shop-instore-banner {

  margin: 1rem auto 1rem;               /* centers the block inside .text-center */

  padding: .7rem .95rem;

  background: #f1f5f4;

  border: 1px solid #d8e6e1;

  border-radius: 8px;

  color: #0f2e2a;



  display: block;                     /* block for predictable wrapping */

  max-width: min(100%, 56rem);        /* wider than before (was 44rem) */

  text-align: left;                   /* left-justify the text inside */

}



/* Grid ensures clean wrap; let the icon size itself */

.shop-instore-banner p {

  margin: 0;

  display: grid;

  grid-template-columns: auto 1fr;    /* icon column + flexible text column */

  align-items: center;

  column-gap: .6rem;

  line-height: 1.35;

  overflow-wrap: anywhere;

}



/* Larger shop icon */

.shop-instore-banner .fa-store {

  font-size: 1.5rem;                  /* was ~1rem */

  line-height: 1;                     /* avoid extra vertical space */

  color: #428a77;

}



/* Optional link styles if you use a link inside the banner */

.shop-instore-link {

  color: #115740;

  font-weight: 700;

  text-decoration: none;

  border-bottom: 1px dotted rgba(17,87,64,.35);

}

.shop-instore-link:hover,

.shop-instore-link:focus {

  color: #0d4737;

  border-bottom-color: transparent;

  outline: none;

}



/* Phones */

@media (max-width: 640px) {

  .shop-instore-banner {

    max-width: 100%;

    padding: .6rem .8rem;

  }

  .shop-instore-banner .fa-store {

    font-size: 1.35rem;               /* slightly smaller for very tight screens */

  }

}





.shop-text {

  display: flex;

  flex-direction: column;

}

.shop-title-link {

  text-decoration: none;

  color: #333;

  font-weight: 600;

  font-size: 1.125rem;

}

.shop-title-link:hover .shop-title {

  text-decoration: underline;

}

.shop-desc {

  font-size: 0.875rem;

  color: #666666;

  margin-top: 0.25rem;

}

.sub-links {

  list-style: none;

  margin: 0;

  padding: 0;

}

/* Add breathing room above the first sub-link list */

.shop-text > .sub-links {

  margin-top: 0.5rem; /* adjust to taste: 0.4–0.6rem usually feels right */

}

.sub-links li {

  margin-bottom: 0.3rem;

}

.sub-links li:first-child {

  margin-top: 0.25rem; /* fine-tune so it aligns visually */

}

.sub-links li a {

  font-size: 0.9375rem;

  color: #2f7361;

  text-decoration: none;

  display: inline-block;

}

.sub-links li a:hover {

  text-decoration: underline;

}

/* SHOP DROPDOWN */

.shop-heading {

  margin-bottom: .5rem;

}

.shop-hero {

  display: block;

  position: relative;

  border-radius: 16px;

  overflow: hidden;

}

.shop-hero-img {

  width: 100%;

  height: 220px;

  object-fit: cover;

  display: block;

}

.shop-hero-copy {

  position: absolute;

  color: #111;

  left: 12px;

  bottom: 12px;

  right: 12px;

  background: rgba(255, 255, 255, .9);

  padding: .75rem 1rem;

  border-radius: 12px;

}

.badge.deal {

  font-size: 0.9375rem;

  padding: .5rem 1rem;

  border-radius: 999px;

  background: #fce9e9;

  margin-top: .25rem;

  margin-bottom: .25rem;

  color: #A1262D;

  display: inline-block;

}

.cta-link {

  font-weight: 600;

  text-decoration: underline;

}

.shop-card {

  display: flex;

  gap: .75rem;

  align-items: flex-start;

  padding: .9rem;

  border-radius: 12px;

  background: #fff;

  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);

  transition: transform .1s ease, box-shadow .2s ease;

}

.shop-card:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);

}

.sub-label {

  display: block;

  font-size: 0.85em;

  color: #666;

  line-height: 1.2;

  margin-top: 2px;

}

.sub-links a {

  display: block;

  padding: 3px 0 2px;

  text-decoration: none;

  line-height: 1.25;

}

.view-all {

  font-weight: 600;

  margin-top: 0.5rem;

  padding-top: 0.5rem;

  border-top: 1px solid #eee; /* subtle divider for clarity */

  display: inline-block;

}

.shop-trust-row {

  margin-top: .75rem;

  padding-top: .75rem;

}

.shop-trust {

  gap: .5rem;

  font-weight: 600;

  color: #428a77;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  font-size: .875em;

}

.shop-trust .shop-title {

  display: block;

}



.shop-search {

padding-top: 1em;	

padding-bottom: 1em;	

}





/* Match email subscription sizing + rhythm */

.shop-search .input-group-field, .shop-search .input-group-button .button {

  height: 2.875rem; /* 46px */

  line-height: 2.875rem;

  font-size: 1rem;

  padding-top: 0;

  padding-bottom: 0;

  box-sizing: border-box;

}

/* Border radii to mirror #email_subscription */

.shop-search .input-group-field {

  border-top-left-radius: 0.5rem;

  border-bottom-left-radius: 0.5rem;

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

  padding-left: 1rem;

  border: 1px solid #ddd;

  border-right: 0; /* seamless join with button */

}

.shop-search .input-group-button .button {

  border-top-left-radius: 0;

  border-bottom-left-radius: 0;

  border-top-right-radius: 0.5rem;

  border-bottom-right-radius: 0.5rem;

  padding-left: 1rem;

  padding-right: 1rem;

  margin: 0; /* align to input height */

}

/* Optional: keep it right-aligned like you had */

.shop-search .input-group {

  max-width: 420px;

  margin-left: auto;

  box-shadow: 0 1px 4px rgba(0, 0, 0, .06); /* matches your card vibe */

  border-radius: 0.5rem; /* shadow follows rounded corners */

}

/* Focus ring consistent with the rest of your UI */

.shop-search .input-group-field:focus {

  outline: 3px solid #1f4f43;

  outline-offset: 2px;

}

/* Mobile: let it breathe full width */

@media (max-width: 640px) {

  .shop-search .input-group {

    max-width: 100%;

    margin: 0;

  }

}







/* --- Layer order: header (highest) > page suggestions > rest --- */



/* Header/nav above hero */

.site-header, .top-bar { position: relative; z-index: 15000; }

#shop_dropdown        { position: relative; z-index: 16000; } /* if you have a dropdown wrap */



/* Hero positioned but not elevated */

.shop-hero { position: relative; z-index: auto; }



/* Anchor dropdown to input wrapper */

.shop-search .shop-autocomplete { position: relative; }



/* ============ BASE STYLES (BOTH LISTS) ============ */

#shop-suggest-list--page,

#shop-suggest-list--nav {

  position: absolute;

  top: calc(100% + 6px);

  left: 0; right: 0;

  background: #fff;

  border: 1px solid #ddd;

  margin: 0; padding: 0; list-style: none;

  max-height: 280px; overflow: auto;

  box-shadow: 0 8px 20px rgba(0,0,0,.08);

  text-align: left;

  box-sizing: border-box;

}

#shop-suggest-list--page[hidden],

#shop-suggest-list--nav[hidden] { display: none; }



/* Visual hover + active state */

#shop-suggest-list--page .suggest-item:hover,

#shop-suggest-list--nav  .suggest-item:hover,

.suggest-item.is-active,

.suggest-item[aria-selected="true"] {

  background: #f1f5f4;          /* slightly stronger than #f6f6f8 */

}



/* Optional: tiny affordance */

#shop-suggest-list--page .suggest-item:hover .suggest-label,

#shop-suggest-list--nav  .suggest-item:hover .suggest-label {

  text-decoration: underline;

}







/* Shared item visuals */

.suggest-group { padding:8px 10px; font-size:12px; color:#666; border-top:1px solid #f1f1f1; }

.suggest-item  { padding:10px 12px; cursor:pointer; }

.suggest-item.is-active { background:#f6f6f8; }

.suggest-item .suggest-label mark { background:transparent; font-weight:600; text-decoration:underline; }



/* ============ Z-INDEX OVERRIDES ============ */

/* Page suggestions: over tiles, under header */

#shop-suggest-list--page { z-index: 10000; }



/* Nav suggestions: highest so they win in the header */

.site-header .shop-autocomplete { position: relative; z-index: 20000; }

#shop-suggest-list--nav { z-index: 21000; }



/* Avoid clipping up the chain */

.shop-hero,

.shop-hero .grid-container,

.shop-hero .grid-x,

.shop-hero .cell { overflow: visible; }



/* Keep feature tiles lower */

.shop-features { position: relative; z-index: 1; }



/* Nav layout/alignment helpers */

.site-header .shop-search { min-width: 280px; display:inline-block; text-align:left; }

.site-header .shop-autocomplete { width:100%; text-align:left; }

.site-header .input-group { display:flex; align-items:stretch; }

.site-header .input-group-field, .site-header .shop-search-field { width:100%; min-width:0; }







.suggest-group { padding:8px 10px; font-size:12px; color:#666; border-top:1px solid #f1f1f1; }

.suggest-item  { padding:10px 12px; cursor:pointer; }

.suggest-item.is-active { background:#f6f6f8; }

.suggest-item .suggest-label mark { background:transparent; font-weight:600; text-decoration:underline; }



/* Make the nav search grow instead of collapsing */

.site-header .shop-search { min-width: 280px; }       /* tweak as desired */

.site-header .shop-autocomplete { width: 100%; position: relative; z-index: 20000; }

.site-header .input-group { display: flex; align-items: stretch; }

.site-header .input-group-field,

.site-header .shop-search-field { width: 100%; min-width: 0; }



/* Nav/search alignment fixes */

.site-header .shop-search,

.top-bar .shop-search { display: inline-block; text-align: left; }



/* Anchor + content should be left-aligned even if parent has text-right */

.site-header .shop-autocomplete,

.top-bar .shop-autocomplete { position: relative; text-align: left; }



#shop-suggest-list--nav { text-align: left; }             /* UL */

#shop-suggest-list--nav .suggest-item { text-align: left; } /* LIs */





/* === Layer order (highest → lowest) ===

   300  : sticky header

   220  : search suggestions (within hero)

   210  : search input wrapper (within hero)

   200  : promotions hero

   100  : store tabs

*/



/* ---- Global: keep header highest ---- */

.site-header,

.top-bar,

header[role="banner"] {

  position: relative; /* or keep your sticky/fixed; just not 'static' */

  z-index: 300;}



/* ---- Promotions page: hero above tabs, suggestions above hero content ---- */

.main-content.page-promotions .shop-hero {

  position: relative;     /* creates a stacking context */

  z-index: 200;         /* < header (60000), > tabs/content */

}



/* Tabs can stay low */

.main-content.page-promotions .store-tabs {

  position: relative;

  z-index: 100;

}



/* Suggestions list anchored to input wrapper in hero */

.main-content.page-promotions .shop-hero .shop-autocomplete { position: relative; z-index: 210; }

.main-content.page-promotions #shop-suggest-list--page {

  position: absolute;

  top: calc(100% + 6px);

  left: 0; right: 0;

  z-index: 220;         /* within hero context, still < header */

  background: #fff;

  border: 1px solid #ddd;

  max-height: 280px; overflow: auto;

  margin: 0; padding: 0; list-style: none;

  box-shadow: 0 8px 20px rgba(0,0,0,.08);

}

.main-content.page-promotions #shop-suggest-list--page[hidden] { display: none; }



/* Make sure nothing clips the dropdown */

.main-content.page-promotions .shop-hero,

.main-content.page-promotions .shop-hero .grid-container,

.main-content.page-promotions .shop-hero .grid-x,

.main-content.page-promotions .shop-hero .cell { overflow: visible; }





/* If your header container clips overflow, allow dropdown to escape */

.top-bar, #shop_dropdown { overflow: visible; }  /* enable if needed */



/* Focus states */

/*a:focus { outline: 3px solid #222; outline-offset: 2px; border-radius: 6px; }*/

/* General button base */

.btn {

  padding: 0.5em 1em;

  border-radius: 5px;

  text-decoration: none;

  font-weight: 500;

  transition: background 0.3s ease, color 0.3s ease;

}

/* Remove underline on hover */

.btn:hover {

  text-decoration: none;

}

/* Pay Account Button */

.btn-pay {

  background: #d8e6e1;

  color: #115740;

}

.btn-pay:hover {

  background: #c0ccc7;

  color: #115740;

}

/* Book Virtual Doctor Appointment Button */

.btn-book {

  background: #428a77;

  color: #d8e6e1;

}

.btn-book:hover {

  background: #3c7c6b;

  color: #d8e6e1;

}

/* Prescription Refills Button */

.btn-refill {

  background: #cb9731;

  color: #f1f5f4;

}

.btn-refill:hover {

  background: #b6882c;

  color: #f1f5f4;

}

/* Cart link styling */

.cart-link {

  color: #f1f5f4;

  font-weight: 500;

  display: flex;

  align-items: center;

  text-decoration: none;

  transition: color 0.3s ease;

}

/* Cart icon spacing */

.cart-link i {

  margin-right: 0.25em;

}

/* More prominent hover color for the cart */

.cart-link:hover {

  color: #428a77;

  text-decoration: none;

}

.full-width-dropdown {

  position: fixed !important;

  top: 102px !important; /* ensure this matches the bottom of the header exactly */

  left: 0 !important;

  right: 0 !important;

  width: 100vw !important;

  max-width: 100vw !important;

  margin: 0 auto;

  padding: 1.5rem;

  box-sizing: border-box;

  z-index: 9999;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  background-color: #d8e6e1 !important;

  border-top: none !important;

}

/* -------------------- A. SEARCH BAR -------------------- */

table.gsc-search-box td.gsc-input {

  padding-top: 24px;

}

.button.search-button {

  width: 39px;

  height: 39px;

  background-size: 20px 20px;

  background-color: #f2f2f2;

  background-image: url("../img/search_icon.png");

  background-repeat: no-repeat;

  background-position: center center;

  padding-left: 0;

  padding-right: 0;

  border-radius: 0px;

  border: 0.063rem solid #cacaca;

  border-left: 0rem solid #cacaca;

}

.button.search-button:hover {

  background-color: #e8e6e6;

}

.button.clear-button {

  width: 39px;

  height: 39px;

  background-size: 20px 20px;

  background-color: #fefefe;

  background-image: url("../img/delete_icon.png");

  background-repeat: no-repeat;

  background-position: center center;

  padding-left: 0;

  padding-right: 0;

  border-radius: 0px;

  border: 0.063rem solid #cacaca;

  border-left: 0rem solid #cacaca;

}

.button.clear-button:hover {

  background-color: #e8e6e6;

}

.button.clear, .button.clear:hover, .button.clear:focus {

  cursor: pointer;

  color: #4968a9;

  padding-top: 0px;

}

.button.clear:hover, .button.clear:focus {

  color: #5275bd;

}

#clear-search-button {

  cursor: pointer;

  color: #4968a9;

  font-size: .750em;

}

#clear-search-button:hover, #clear-search-button:focus {

  text-decoration: underline;

}

/* -------------------- B. STICKY -------------------- */

.js-off-canvas-overlay {

  position: absolute;

  top: 0;

  left: 0;

  z-index: 11;

  width: 100%;

  height: 100%;

  transition: opacity 0.5s ease, visibility 0.5s ease;

  background: rgba(254, 254, 254, 0.25);

  opacity: 0;

  visibility: hidden;

  overflow: hidden;

}

.js-off-canvas-overlay.is-overlay-fixed {

  position: fixed;

}

[data-off-canvas] {

  opacity: 0;

  pointer-events: none;

}

.js-off-canvas-loaded [data-off-canvas] {

  opacity: 1;

  pointer-events: auto;

}

.sticky {

  z-index: 10;

}

/*.sticky.is-stuck {



    position: fixed;



    z-index: 101;



    width: 100%;



}*/

.search_stick {

  position: fixed;

  z-index: 10;

}

/* -------------------- C. FORM LIST AND FORM VALIDATION -------------------- */

#amount::-webkit-inner-spin-button, #amount::-webkit-outer-spin-button {

  -webkit-appearance: none;

  margin: 0;

}

#amount {

  -moz-appearance: textfield; /* For Firefox */

}

.amount-input {

  position: relative;

  display: inline-block;

  width: 100%;

  height: 2.4375rem;

}

.amount-input .currency-symbol {

  position: absolute;

  top: 50%; /* Always center vertically */

  left: 10px;

  transform: translateY(-50%);

  font-size: 1rem;

  color: #555;

  pointer-events: none;

}

.amount-input input {

  width: 100%;

  padding-left: 25px; /* Enough room for the $ symbol */

  box-sizing: border-box;

}

#paymentForm label[for="amount"] {

  display: block;

  font-weight: 600; /* Slightly bolder for emphasis */

  font-size: 0.95rem; /* Matches input size without overpowering */

  color: #333; /* Softer than pure black */

  margin-bottom: 0.25rem; /* Space before input */

}

#paymentForm label[for="amount"]::after {

  content: " *"; /* Indicates required field */

  color: #c00; /* Subtle red for required indicator */

  font-weight: normal;

}

.contact-us-section {

  padding: 2rem;

  background: #fefefe;

}

.contact-us-section .contact-us-section-left {

  padding-right: 2rem;

  border-bottom: 2px solid #e6e6e6;

  padding-bottom: 2rem;

  margin-bottom: 2rem;

}

@media print, screen and (min-width: 40em) {

  .contact-us-section .contact-us-section-left {

    border-right: 1px solid #e6e6e6;

    border-bottom: 0;

    padding-bottom: 0;

    margin-bottom: 0;

  }

}

.contact-us-section .contact-us-section-right {

  padding-left: 2rem;

}

@media print, screen and (min-width: 40em) {

  .contact-us-section .contact-us-section-right {

    border-left: 1px solid #e6e6e6;

  }

}

.contact-us-section .contact-us-header {

  margin-bottom: 2rem;

}

@media screen and (min-width: 40em) and (max-width: 74.9375em) {

  .contact-us-section .contact-us-header {

    font-size: 32px;

  }

}

.contact-us-section .responsive-embed {

  margin-bottom: 0;

  padding-bottom: 55%;

}

.contact-us-form input[type=text], .contact-us-form input[type=email], .contact-us-form textarea {

  margin-bottom: 1.5rem;

}

.contact-us-form-actions {

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-align-items: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-justify-content: space-between;

  -ms-flex-pack: justify;

  justify-content: space-between;

}

.contact-us-form-actions input[type=submit] {

  border-radius: 5000px;

  padding-left: 2rem;

  padding-right: 2rem;

}

.contact-us-form-actions .contact-us-file-button {

  background: transparent;

  color: #8a8a8a;

}

.contact-us-list {

  list-style-type: none;

  margin: 0;

}

.contact-us-list li a {

  color: #222222;

}

[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea {

  display: block;

  box-sizing: border-box;

  width: 100%;

  height: 2.4375rem;

  margin: 0 0 1rem;

  padding: 0.5rem;

  border: 1px solid #cacaca;

  border-radius: 0;

  background-color: #ffffff;

  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);

  font-family: inherit;

  font-size: 1rem;

  font-weight: normal;

  line-height: 1.5;

  color: #0a0a0a;

  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}

input:disabled, input[readonly], textarea:disabled, textarea[readonly], select:disabled {

  background-color: #d3d2d2;

  cursor: default;

  color: #1e1e1e;

}

[type='search'] {

  display: block;

  box-sizing: border-box;

  width: 100%;

  height: 2.4375rem;

  margin: 0 0 0;

  padding: 0rem;

  border: 0px solid #cacaca;

  border-right: 0px solid #cacaca;

  border-radius: 0;

  background-color: #ffffff;

  font-family: inherit;

  font-size: .875rem;

  font-weight: normal;

  line-height: 1.5;

  color: #0a0a0a;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  transition: none;

  /*box-shadow: inset 0 0 0 rgba(10, 10, 10, 0.1);*/

}

#searchBar-form {

  position: relative;

  overflow: hidden;

}

#searchBar-form-large {

  position: relative;

  overflow: hidden;

  width: 600px;

}

[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus, textarea:focus {

  outline: none;

  border: 1px solid #5b6771;

  background-color: #fefefe;

  box-shadow: 0 0 5px #cacaca;

  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;

}

[type='search']:focus {

  outline: none;

  border: 1px solid #cacaca;

  border-right: 0px solid #cacaca;

  background-color: #fefefe;

  box-shadow: 0 0 0 #cacaca;

  transition: none;

}

table [type='text'], table [type='text']:focus {

  box-shadow: inset 0 0 0 rgb(10 10 10 / 10%);

}

#search_engine {

  background-color: #000;

  border: 0px solid #fff;

}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

  color: #b6b6b6;

}

input::-moz-placeholder, textarea::-moz-placeholder {

  color: #b6b6b6;

}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {

  color: #b6b6b6;

}

input::placeholder, textarea::placeholder {

  color: #b6b6b6;

}

.is-invalid-input:not(:focus) {

  border-color: #d3414e;

  background-color: #f9ecea;

}

.is-invalid-input:not(:focus)::-webkit-input-placeholder {

  color: #d3414e;

}

.is-invalid-input:not(:focus)::-moz-placeholder {

  color: #d3414e;

}

.is-invalid-input:not(:focus):-ms-input-placeholder {

  color: #d3414e;

}

.is-invalid-input:not(:focus)::placeholder {

  color: #d3414e;

}

/* -------------------- D. FX REPLACE -------------------- */

.hierarchy-container {

  display: flex;

  flex-direction: column;

  gap: 1rem;

  padding: 1rem;

  position: relative; /* Establish stacking context for the triangle */

  max-width: 46.12em;

}

.arrow-label {

  text-align: left;

  font-weight: bold;

  font-size: 1rem;

  margin-left: 25.5%; /* Align with content area */

  color: #b2b6c1;

  text-transform: uppercase;

}

/* Main Gradient Triangle Container */

.gradient-triangle {

  position: absolute;

  top: 0; /* Start at the top of the Elimination level */

  left: 0;

  width: 25%; /* Triangle occupies 25% of the width */

  height: calc(100% - 0px); /* Ensure it aligns with content */

  z-index: 0; /* Place it behind content */

  display: flex;

  flex-direction: column;

  justify-content: stretch;

}

/* Individual Gradient Levels */

.gradient-level {

  width: 100%;

  flex-grow: 1;

  position: relative;

}

/* Apply Horizontal Gradients and Individual Clip Paths */

.gradient-elimination {

  background: linear-gradient(to left, #000054, #0268b5);

  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);

}

.gradient-substitution {

  background: linear-gradient(to left, #003e06, #007e3c);

  clip-path: polygon(20% 0, 100% 0, 100% 100%, 40% 100%);

}

.gradient-engineering {

  background: linear-gradient(to left, #ef7600, #fbad47);

  clip-path: polygon(40% 0, 100% 0, 100% 100%, 60% 100%);

}

.gradient-administrative {

  background: linear-gradient(to left, #380a56, #9874b3);

  clip-path: polygon(60% 0, 100% 0, 100% 100%, 80% 100%);

}

.gradient-ppe {

  background: linear-gradient(to left, #a71328, #d53d4d);

  clip-path: polygon(80% 0, 100% 0, 100% 100%, 100% 100%);

}

/* Control Level Styling - Updated Colors */

.control-level {

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: flex-start;

  width: 75%; /* Content occupies the remaining width */

  margin-left: 25%; /* Align content levels to start where the gradient ends */

  max-width: 900px;

  min-height: 120px; /* Consistent height for all levels */

  padding: 1.25rem;

  border-radius: 8px;

  position: relative; /* Ensure proper layering */

  z-index: 1; /* Place content above the triangle */

}

.control-level h2 {

  margin: 0 0 0.5rem;

  font-size: 1.5rem;

  font-weight: bold;

  color: white; /* Improve contrast */

}

.control-level p {

  margin: 0;

  font-size: 1rem;

  color: white; /* Improve contrast */

}

.control-level .notes {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  font-size: 0.9rem;

  background-color: rgba(255, 255, 255, 0.3);

  padding: 0.5rem;

  border-radius: 8px;

  color: white; /* Improve contrast */

  margin-top: 1rem;

}

/* Updated Content Area Colors */

.control-level.elimination {

  background: linear-gradient(to right, #000054, #0268b5);

}

.control-level.substitution {

  background: linear-gradient(to right, #003e06, #007e3c);

}

.control-level.engineering {

  background: linear-gradient(to right, #ef7600, #fbad47);

}

.control-level.administrative {

  background: linear-gradient(to right, #380a56, #9874b3);

}

.control-level.ppe {

  background: linear-gradient(to right, #a71328, #d53d4d);

}

/* Vertical Flow Line */

.flow-line {

  position: absolute;

  top: 0;

  left: 25.175%; /* 🔹 Shift right to add space from the triangle */

  width: 4px;

  height: 100%;

  background-color: #b2b6c1; /* Updated color */

  z-index: 1; /* Ensure it stays above the triangle but below the content */

}

/* Arrowheads Styling */

.flow-line::before, .flow-line::after {

  content: "";

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  border-style: solid;

  border-width: 10px;

  border-color: transparent transparent transparent transparent;

}

/* Top Arrowhead - Pointing UP */

.flow-line::before {

  top: -8px; /* Shift slightly into white space */

  border-width: 0 8px 10px 8px; /* Triangle pointing UP */

  border-color: transparent transparent #b2b6c1 transparent; /* Updated color */

}

/* Bottom Arrowhead - Pointing DOWN */

.flow-line::after {

  bottom: -8px; /* Shift slightly into white space */

  border-width: 10px 8px 0 8px; /* Triangle pointing DOWN */

  border-color: #b2b6c1 transparent transparent transparent; /* Updated color */

}

.blinking {

  animation: blinkingText 1.2s infinite;

}

@keyframes blinkingText {

  0% {

    opacity: 1.0;

  }

  50% {

    opacity: 0.0;

  }

  100% {

    opacity: 1.0;

  }

}

#example-four {

  position: relative;

}

#example-four.on:after {

  content: "Cancel";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: white;

  text-decoration: underline;

}

/* -------------------- E. COUNTDOWN CLOCK -------------------- */

#clockdiv {

  font-family: bebas-neue-by-fontfabric, sans-serif;

  color: #fff;

  display: inline-block;

  font-weight: 100;

  text-align: center;

  font-size: 30px;

  width: 100%;

}

#clockdiv > div {

  padding: 3px;

  border-radius: 3px;

  background: transparent;

  display: inline-block;

}

#clockdiv div > span {

  padding: 3px;

  border-radius: 3px;

  background: transparent;

  display: inline-block;

  font-weight: 700;

}

.smalltext {

  padding-top: 5px;

  font-size: 16px;

}

/* -------------------- F. TIMELINE -------------------- */

.arrow-vertical {

  width: 2px; /* Width of the arrow line */

  min-height: 1600px; /* Adjust based on your layout */

  background-color: #646e71; /* Color of the arrow */

  position: absolute;

  left: -15px; /* Adjust to align with the left side of the flowchart */

  bottom: 50px; /* Adjust based on your layout */

}

.arrow-horizontal {

  width: 20px; /* Width of the horizontal line */

  height: 2px; /* Height of the arrow line */

  background-color: #646e71; /* Color of the arrow */

  position: absolute;

  left: -15px; /* Adjust to align with the left side of the flowchart */

  bottom: 50px; /* Adjust based on your layout */

}

.arrow-horizontal-end {

  width: 20px; /* Width of the horizontal line */

  height: 2px; /* Height of the arrow line */

  background-color: #646e71; /* Color of the arrow */

  position: absolute;

  left: -15px; /* Adjust to align with the left side of the flowchart */

  bottom: 1650px; /* Adjust based on your layout */

}

.arrow-horizontal-end::before {

  content: '';

  width: 0;

  height: 0;

  border-left: 10px solid transparent;

  border-right: 10px solid transparent;

  border-bottom: 10px solid #646e71; /* Color of the arrowhead */

  position: absolute;

  right: -15px; /* Adjust to position the arrowhead */

  top: -5px; /* Adjust to align with the horizontal line */

  transform: rotate(90deg); /* Rotate the arrowhead 90 degrees clockwise */

}

.vertical-text {

  position: absolute;

  left: 10px; /* Adjust this value to position text on the right side of the line */

  top: 83%;

  transform: translateY(-50%) rotate(90deg);

  transform-origin: 0 0;

  white-space: nowrap;

  color: #1e1e1e;

  font-size: 15px;

  text-transform: uppercase;

  font-weight: bold;

}

.arrow-vertical2 {

  width: 2px; /* Width of the arrow line */

  height: 1450px; /* Adjust based on your layout */

  background-color: #646e71; /* Color of the arrow */

  position: absolute;

  left: -15px; /* Adjust to align with the left side of the flowchart */

  bottom: 50px; /* Adjust based on your layout */

}

.arrow-horizontal2 {

  width: 20px; /* Width of the horizontal line */

  height: 2px; /* Height of the arrow line */

  background-color: #646e71; /* Color of the arrow */

  position: absolute;

  left: -15px; /* Adjust to align with the left side of the flowchart */

  bottom: 50px; /* Adjust based on your layout */

}

.arrow-horizontal-end2 {

  width: 20px; /* Width of the horizontal line */

  height: 2px; /* Height of the arrow line */

  background-color: #646e71; /* Color of the arrow */

  position: absolute;

  left: -15px; /* Adjust to align with the left side of the flowchart */

  bottom: 1650px; /* Adjust based on your layout */

}

.arrow-horizontal-end2::before {

  content: '';

  width: 0;

  height: 0;

  border-left: 10px solid transparent;

  border-right: 10px solid transparent;

  border-bottom: 10px solid #646e71; /* Color of the arrowhead */

  position: absolute;

  right: -15px; /* Adjust to position the arrowhead */

  top: -5px; /* Adjust to align with the horizontal line */

  transform: rotate(90deg); /* Rotate the arrowhead 90 degrees clockwise */

}

.vertical-text2 {

  position: absolute;

  left: 10px; /* Adjust this value to position text on the right side of the line */

  top: 83%;

  transform: translateY(-50%) rotate(90deg);

  transform-origin: 0 0;

  white-space: nowrap;

  color: #1e1e1e;

  font-size: 15px;

  text-transform: uppercase;

  font-weight: bold;

}

/*.arrow-horizontal-end::before {

  content: '';

  width: 0; 

  height: 0; 

  border-left: 10px solid transparent;

  border-right: 10px solid transparent;

  border-top: 10px solid #000; 

  position: absolute;

  left: -10px; 

  top: -5px; 

}*/

.timeline .timeline-item::after, .timeline .timeline-item::before {

  clear: both;

  content: '';

  display: block;

  width: 100%;

}

.timeline {

  margin: 30px auto;

  padding: 0 10px;

  position: relative;

  transition: all 0.25s ease-in;

  width: 100%;

}

.timeline::before {

  background: #ffffff;

  content: '';

  height: 100%;

  left: 50%;

  position: absolute;

  top: 0;

  width: 3px;

}

.timeline::after {

  clear: both;

  content: '';

  display: table;

  width: 100%;

}

.timeline a {

  color: #0455A4;

  font-weight: bold;

  transition: all 0.25s ease-in;

}

.timeline a:hover {

  box-shadow: 0 1px 0px 0px #1779ba;

  transition: all 0.25s ease-in;

}

.timeline .timeline-item {

  margin-bottom: 24px;

  position: relative;

}

.timeline .timeline-item .timeline-icon {

  background: #ffffff;

  border-radius: 50%;

  height: 50px;

  left: 50%;

  margin-left: -23px;

  overflow: hidden;

  position: absolute;

  top: 0;

  width: 50px;

}

.timeline .timeline-item .timeline-icon img, .timeline .timeline-item .timeline-icon svg {

  left: 6px;

  position: relative;

  top: 3px;

}

.timeline .timeline-item .timeline-icon svg {

  top: 14px;

}

.timeline .timeline-item .timeline-content {

  padding: 24px;

  transition: all 0.25s ease-in;

  width: 40%;

  background: #ffffff;

  margin-bottom: 1rem;

  border: 1px solid #C2C2C2;

  border-radius: 15px;

  color: #0a0a0a;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.timeline .timeline-item .timeline-content-minimal {

  padding: 12px;

  transition: all 0.25s ease-in;

  width: 40%;

  background: transparent;

  margin-bottom: 1rem;

  border: 0px solid #C2C2C2;

  border-radius: 0px;

  color: #0a0a0a;

  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.19);

}

.timeline .timeline-item .timeline-content p {

  color: #000000;

}

.timeline .timeline-item .timeline-content p {

  font-size: 14px;

  line-height: 1.4;

  margin-bottom: 0;

}

.timeline .timeline-item .timeline-content .timeline-content-date {

  font-size: 16px;

  font-weight: bold;

  margin-bottom: 0;

}

.timeline .timeline-item .timeline-content .timeline-content-month {

  font-size: 0.875rem;

  text-transform: uppercase;

  font-weight: 400;

}

.timeline .timeline-item .timeline-content.right {

  float: right;

  text-align: left;

}

@media screen and (max-width: 39.9375em) {

  .timeline {

    margin: 30px;

    padding: 0;

    width: 90%;

  }

  .timeline::before {

    left: 0;

  }

  .timeline .timeline-item .timeline-content {

    float: right;

    text-align: left;

    width: 90%;

  }

  .timeline .timeline-item .timeline-content::before, .timeline .timeline-item .timeline-content.right::before {

    border-left: 0;

    border-right: 7px solid #ffffff;

    left: 10%;

    margin-left: -6px;

  }

  .timeline .timeline-item .timeline-icon {

    left: 0;

  }

}

/* Content animation */

/* .timeline-icon--hidden, .timeline-content--hidden {



    visibility: hidden



  }*/

/*.timeline-icon--bounce-in {



    -webkit-animation: cd-bounce-1 0.6s;



    animation: cd-bounce-1 0.6s



  }*/

/*.timeline-content--bounce-in {



    -webkit-animation: cd-bounce-2 0.6s;



    animation: cd-bounce-2 0.6s



  }*/

/*.timeline-item:nth-child(even) .timeline-content--bounce-in {



    -webkit-animation-name: cd-bounce-2-inverse;



    animation-name: cd-bounce-2-inverse



  }*/

/*@-webkit-keyframes cd-bounce-1 {



  0% {



    opacity: 0;



    -webkit-transform: scale(0.5);



    transform: scale(0.5)



  }



  60% {



    opacity: 1;



    -webkit-transform: scale(1.2);



    transform: scale(1.2)



  }



  100% {



    -webkit-transform: scale(1);



    transform: scale(1)



  }



}*/

/*@keyframes cd-bounce-1 {



  0% {



    opacity: 0;



    -webkit-transform: scale(0.5);



    transform: scale(0.5)



  }



  60% {



    opacity: 1;



    -webkit-transform: scale(1.2);



    transform: scale(1.2)



  }



  100% {



    -webkit-transform: scale(1);



    transform: scale(1)



  }



}*/

/*@-webkit-keyframes cd-bounce-2 {



  0% {



    opacity: 0;



    -webkit-transform: translateX(-100px);



    transform: translateX(-100px)



  }



  60% {



    opacity: 1;



    -webkit-transform: translateX(20px);



    transform: translateX(20px)



  }



  100% {



    -webkit-transform: translateX(0);



    transform: translateX(0)



  }



}*/

/*@keyframes cd-bounce-2 {



  0% {



    opacity: 0;



    -webkit-transform: translateX(-100px);



    transform: translateX(-100px)



  }



  60% {



    opacity: 1;



    -webkit-transform: translateX(20px);



    transform: translateX(20px)



  }



  100% {



    -webkit-transform: translateX(0);



    transform: translateX(0)



  }



}*/

/*@-webkit-keyframes cd-bounce-2-inverse {



  0% {



    opacity: 0;



    -webkit-transform: translateX(100px);



    transform: translateX(100px)



  }



  60% {



    opacity: 1;



    -webkit-transform: translateX(-20px);



    transform: translateX(-20px)



  }



  100% {



    -webkit-transform: translateX(0);



    transform: translateX(0)



  }



}*/

/*@keyframes cd-bounce-2-inverse {



  0% {



    opacity: 0;



    -webkit-transform: translateX(100px);



    transform: translateX(100px)



  }



  60% {



    opacity: 1;



    -webkit-transform: translateX(-20px);



    transform: translateX(-20px)



  }



  100% {



    -webkit-transform: translateX(0);



    transform: translateX(0)



  }



}*/

/*







=============================================== 02. NAVIGATION STYLES ===============================================







*/

.nav_padding {

  padding-left: 3.438em;

}

.nav_dark {

  background-color: #373737;

}

/* -------------------- A. OFF-CANVAS -------------------- */

.off-canvas {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  z-index: 12;

  background: #343434;

  display: flex;

  flex-direction: column;

  overflow: hidden;

}

span.menu_icon {

  color: #231f20;

  font-size: 1.750em;

  font-family: "gotham", sans-serif;

  font-weight: 700;

  font-style: normal;

}

#menu_icon {

  color: #ffffff;

}

#menu_icon:hover {

  color: #C9C5C6;

}

/* -------------------- B. TOP BAR -------------------- */

.title-bar {

  background: #ffffff;

  color: #fefefe;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-pack: start;

  justify-content: flex-start;

  -ms-flex-align: left;

  align-items: left;

}

.title-bar .menu-icon {

  margin-left: 0.25rem;

  margin-right: 0.25rem;

}

.smallLogo {

  width: 250px;

}

.largeLogo {

  width: 275px;

}

/* Very Top Header Navigation */

.very_very_top_contents {

  padding: 0.625rem 0.625rem;

}

.very_very_top_contents_right {

  padding: 0.825rem 0.825rem;

}

.very_very_top_logo {

  padding-top: .75rem;

  padding-bottom: 0.625rem;

  padding-left: 1rem;

  padding-right: 0;

}

/* The top banner (fixed at top) */

.very_very_top {

  position: fixed;

  top: 0;

  width: 100%;

  height: 45px; /* Set exact height */

  z-index: 460;

  background: linear-gradient(to bottom, #ffffff, #eaeaea);

  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);

  padding: 0; /* Remove padding to keep exact height */

  /*overflow: hidden;*/ /* Optional: hides overflow if needed */

}

.top_header_bkg {

  width: 100%;

  border-bottom: 0px solid #ffffff;

  background-color: #eaeaea;

  background-image: url('../img/bkg_titlebar.png');

  background-repeat: no-repeat;

}

#navTop a {

  text-decoration: none;

  position: relative;

  cursor: pointer;

  color: #004080;

  font-weight: 700;

}

/* Tooltip bubble – no arrow, positioned closer to nav item */

#navTop a[data-tt]::after {

  content: attr(data-tt);

  position: absolute;

  top: 115%; /* Moved up – feels attached to nav item */

  left: 50%;

  transform: translateX(-50%) translateY(-6px); /* Slight upward animation */

  background-color: #222;

  color: #fff;

  padding: 10px 16px;

  border-radius: 6px;

  white-space: normal;

  font-size: 1.15rem;

  line-height: 1.4;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease, transform 0.3s ease;

  z-index: 10000;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);

  min-width: 175px;

  max-width: 245px;

  word-wrap: break-word;

}

/* Show tooltip on hover */

#navTop a[data-tt]:hover::after {

  opacity: 1;

  transform: translateX(-50%) translateY(0);

}

/* Responsive adjustment */

@media screen and (max-width: 768px) {

  #navTop a[data-tt]::after {

    max-width: 80vw;

    min-width: 175px;

  }

}

.offcanvas-top-bar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 1rem 1.5rem 1rem;

  margin-top: 0.5rem;

}

.offcanvas-logo {

  max-height: 40px;

  display: block;

}

.close-button {

  font-size: 3rem;

  background: none;

  border: none;

  cursor: pointer;

  color: #428a77;

  margin-right: 0.625rem; /* increased from 0.25rem for better spacing */

  padding: 1rem 0.5rem; /* reduced vertical padding for alignment */

  line-height: 1;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* Fallback; JS will overwrite this with the real height */

:root { --header-h: 102px; }



/* Ensure content always starts below the header */

#page.main-content {

  padding-top: var(--header-h);

  /* If you use in-page anchors, this prevents them from hiding under the header */

  scroll-padding-top: var(--header-h);

  margin-top: 0 !important; /* avoid margin-collapsing surprises */

}









/* Tokens just for the off-canvas nav */

.offcanvas-nav {

  --nav-gutter: 1rem;

  --nav-radius: 12px;

  --brand: #428a77;

  --ink-60: rgba(255,255,255,.64);

  --ink-80: rgba(255,255,255,.82);

  --ink-100: #fff;

  --hover-bg: rgba(255,255,255,.06);

  --active-bg: rgba(255,255,255,.12);

  --open-bg: rgba(255,255,255,.08);

  --hairline: rgba(255,255,255,.08);

  --stripe-w: 3px;

  --focus-ring: 0 0 0 3px rgba(66,138,119,.35);

}





/* Collapsible panels use height transition (JS sets exact heights) */

#navOffCanvas ul.nested {

  display: block;            /* must be block so we can measure height */

  overflow: hidden;

  height: 0;                 /* collapsed */

  transition: height 220ms ease;

}



/* Respect reduced motion */

@media (prefers-reduced-motion: reduce) {

  #navOffCanvas ul.nested { transition: none; }

}



/* Open state driven by JS adding .is-open on the parent <li> */

#navOffCanvas li.is-open > ul.nested { display: block !important; }



/* Just in case: ensure nothing clips the revealed submenu */

#navOffCanvas li { overflow: visible; }





#navOffCanvas {

  margin: 0;

  padding: 0;

  list-style: none;

}



#navOffCanvas li {

  margin: 0; /* tighter stack; space is created by borders/padding */

  border-bottom: 1px solid var(--hairline);

}



#navOffCanvas a {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: .75rem;

  width: 100%;

  padding: .875rem calc(var(--nav-gutter) + .25rem) .875rem var(--nav-gutter);

  color: var(--ink-60);

  text-decoration: none;

  line-height: 1.35;

  font-size: 1.0625rem; /* 17px for dense lists */

  position: relative;

  transition: background-color .18s ease, color .18s ease;

}



/* Left brand stripe (off by default) */

#navOffCanvas a::before {

  content: '';

  position: absolute;

  inset: 0 auto 0 0;

  width: 0;

  background: var(--brand);

  border-radius: 0 var(--nav-radius) var(--nav-radius) 0;

  transition: width .18s ease;

}



/* Hover/touch highlight */

#navOffCanvas a:hover { 

  color: var(--ink-80);

  background: var(--hover-bg);

}



/* Focus-visible for keyboard and a11y */

#navOffCanvas a:focus-visible {

  outline: none;

  box-shadow: var(--focus-ring);

  border-radius: var(--nav-radius);

  color: var(--ink-100);

  background: var(--hover-bg);

}



/* Active/current page (or server adds .is-active) */

#navOffCanvas li.is-active > a,

#navOffCanvas a[aria-current="page"] {

  color: var(--ink-100);

  font-weight: 700;

  background: var(--active-bg);

}

#navOffCanvas li.is-active > a::before,

#navOffCanvas a[aria-current="page"]::before {

  width: var(--stripe-w);

}



/* Parent rows (Services / Shop) while open */

#navOffCanvas li.is-open > a {

  color: var(--ink-100);

  background: var(--open-bg);

}



/* Nested menu */

#navOffCanvas .nested {

  list-style: none;

  margin: 0;

  padding: 0 0 .25rem 0;

  border-left: 1px solid var(--hairline);

}

#navOffCanvas .nested a {

  padding-left: calc(var(--nav-gutter) + .75rem);

  font-size: 1rem;

}



/* Plus icon: calm by default, brighter when hover/open */

.plus-icon {

  font-weight: 700;

  font-size: 1.25rem;

  line-height: 1;

  color: var(--ink-60);

  transition: transform .18s ease, color .18s ease, opacity .18s ease;

}

#navOffCanvas a:hover .plus-icon,

#navOffCanvas li.is-open > a .plus-icon {

  color: var(--ink-100);

}

.plus-icon[data-state="open"] { opacity: .9; }



/* Ensure all nav links are left-aligned even if a parent has .text-center */

#navOffCanvas a,

#navOffCanvas .nested a {

  text-align: left;

  white-space: normal; /* allow wrapping */

}



/* Parent rows (Services/Shop): don't use space-between */

#navOffCanvas > li > a {

  display: flex;

  align-items: center;

  justify-content: flex-start;   /* was space-between */

  gap: .75rem;

}



/* Push the + to the far right without affecting text alignment */

#navOffCanvas > li > a .plus-icon {

  margin-left: auto;             /* this creates the right-edge push */

  flex: 0 0 auto;

}







/* Persistent items: pill emphasis without stripe */

#navOffCanvas li.persistent > a {

  color: var(--ink-100);

  font-weight: 700;

  background: transparent;

  border: 1px solid var(--hairline);

  margin: .375rem var(--nav-gutter);

  border-radius: 999px;

  padding: .625rem .9rem;

}

#navOffCanvas li.persistent > a::before { display: none; }



#navOffCanvas li.is-open > ul.nested { display: block; }

#navOffCanvas > li > a[aria-controls] { cursor: pointer; }



#navOffCanvas ul.nested { display: none; }

#navOffCanvas li.is-open > ul.nested { display: block !important; }



/* Off-canvas current/persistent item — override Foundation blue */

#navOffCanvas .active > a,

#navOffCanvas .is-active > a,

#navOffCanvas .nested .active > a,

#navOffCanvas .nested .is-active > a,

#navOffCanvas a[aria-current="page"],

#navOffCanvas li.persistent > a {

  background: #428a77;   /* brand green */

  color: #fff;

  font-weight: 700;

}



/* Keep hover/focus from changing the color */

#navOffCanvas .active > a:hover,

#navOffCanvas .is-active > a:hover,

#navOffCanvas a[aria-current="page"]:hover,

#navOffCanvas li.persistent > a:hover,

#navOffCanvas .active > a:focus-visible,

#navOffCanvas .is-active > a:focus-visible {

  background: #428a77;

  color: #fff;

}



/* Make the +/– readable on green */

#navOffCanvas .active > a .plus-icon,

#navOffCanvas .is-active > a .plus-icon,

#navOffCanvas a[aria-current="page"] .plus-icon,

#navOffCanvas li.persistent > a .plus-icon {

  color: #fff;

}



#navOffCanvas ul.nested { display: none; }

#navOffCanvas li.is-open > ul.nested { display: block !important; }





/* Respect reduced motion */

@media (prefers-reduced-motion: reduce) {

  #navOffCanvas a, #navOffCanvas a::before, .plus-icon {

    transition: none !important;

  }

}



/* ---------------------------------------

 PHARMACY LOCATION Base structure

--------------------------------------- */

#pharmacyLocations li {

  margin-bottom: 0.75rem;

  position: relative;

}

#pharmacyLocations a {

  display: block;

  width: 100%;

  max-width: none;

  margin: 0;

  padding: 0.625rem 2rem;

  text-align: left;

  text-decoration: none;

  font-size: 1.25rem;

  line-height: 1.5;

  color: #ffffff;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  position: relative;

  opacity: 0.9;

  transition:

    color 0.2s ease-in-out, background-color 0.2s ease-in-out, transform 0.25s ease-in-out, opacity 0.25s ease-in-out;

}

#pharmacyLocations .is-accordion-submenu-parent > a::after {

  display: none !important;

}

/* ---------------------------------------

   Hover styles (collapsed only)

--------------------------------------- */

#pharmacyLocations li:not(.active):not(.is-active) > a:hover {

  background-color: #428a77;

  color: #ffffff;

  border-radius: 0.75rem 0 0 0;

  padding-left: 2rem;

}

#pharmacyLocations li:not(.active):not(.is-active) > a:hover::before {

  width: 0 !important;

}

/* Left bar on hover (only if needed elsewhere) */

#pharmacyLocations a::before {

  content: '';

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  width: 0;

  background-color: transparent;

  transition:

    width 0.25s ease-in-out, background-color 0.25s ease-in-out;

}

#pharmacyLocations a:hover::before {

  width: 4px;

  background-color: #428a77;

}

/* ---------------------------------------

   Active (expanded) styles

--------------------------------------- */

#pharmacyLocations li.active, #pharmacyLocations li.is-active {

  background-color: rgba(255, 255, 255, 0.04);

  border-radius: 0.75rem 0 0 0;

  overflow: hidden;

}

#pharmacyLocations li.active > a, #pharmacyLocations li.is-active > a {

  background-color: #428a77;

  color: #ffffff;

  font-weight: 700;

  opacity: 1;

  padding-left: 2rem;

}

#pharmacyLocations li.active::before, #pharmacyLocations li.is-active::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 4px;

  height: 100%;

  background-color: #428a77;

  border-radius: 0.75rem 0 0 0;

}

#pharmacyLocations li.active > a::before, #pharmacyLocations li.is-active > a::before {

  display: none !important;

}

/* Persistent override */

#pharmacyLocations li.persistent > a {

  background-color: transparent !important;

  font-weight: 700;

  color: #ffffff;

  opacity: 1;

}

#pharmacyLocations li.persistent > a::before {

  display: none;

}

/* ---------------------------------------

   Accordion header layout

--------------------------------------- */

#pharmacyLocations a .accordion-header-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

#pharmacyLocations a .title-text {

  font-weight: 600;

}

#pharmacyLocations a .nav-desc {

  display: block;

  font-size: 0.85rem;

  color: #d8e6e1;

  padding-top: 4px;

  padding-right: 10px;

  line-height: 1.4;

  opacity: 0.85;

  text-transform: uppercase;

}

/* Chevron arrow */

#pharmacyLocations .accordion-arrow {

  margin-left: auto;

  font-size: 1rem;

  color: rgba(255, 255, 255, 0.6);

  transition: transform 0.3s ease, color 0.2s ease;

}

#pharmacyLocations a:hover .accordion-arrow {

  color: #ffffff;

}

#pharmacyLocations li.active > a .accordion-arrow i, #pharmacyLocations li.is-active > a .accordion-arrow i, #pharmacyLocations li.persistent > a .accordion-arrow i {

  transform: rotate(180deg);

  color: #ffffff;

}

/* ---------------------------------------

   Accordion content panel

--------------------------------------- */

#pharmacyLocations .accordion-content {

  display: none;

  max-height: 0;

  opacity: 0;

  overflow: hidden;

  color: #ffffff;

  background-color: #115740;

  padding: 1rem 2.75rem;

  border-left: 4px solid #428a77;

  border: 0;

  transition: max-height 0.3s ease, opacity 0.3s ease;

}

#pharmacyLocations li.active .accordion-content, #pharmacyLocations li.is-active .accordion-content {

  max-height: 1000px;

  opacity: 1;

}

/* Typography inside .accordion-content */

#pharmacyLocations .accordion-content p {

  color: #ffffff;

  font-size: 0.875rem;

  line-height: 1.6;

  margin-bottom: 1rem;

}

#pharmacyLocations .accordion-content h3, #pharmacyLocations .accordion-content h4 {

  color: #ffffff;

  font-size: 1.125rem;

  margin-top: 1.5rem;

  margin-bottom: 0.5rem;

}

#pharmacyLocations .accordion-content address {

  font-style: normal;

  padding-left: 0;

  line-height: 1.5;

  margin-bottom: 2.000em;

}

/* List spacing for hours */

#pharmacyLocations .accordion-hours {

  list-style: none;

  padding-left: 0;

  margin: 0.5rem 0 2.000em;

}

#pharmacyLocations .accordion-hours li {

  margin-bottom: 0.25rem;

}

/* Links inside accordion-content */

#pharmacyLocations .accordion-content a {

  display: inline;

  font-size: 0.875rem;

  padding: 0;

  margin: 0;

  background: none;

  color: #aadbd0;

  text-decoration: underline;

  opacity: 1;

  font-weight: normal;

  transition: color 0.2s ease;

}

#pharmacyLocations .accordion-content a:hover {

  color: #ffffff;

  background: none;

}

#pharmacyLocations .accordion-content a::before, #pharmacyLocations .accordion-content a:hover::before {

  display: none !important;

  content: none !important;

}

/* ——————————————————————————————

   1. Make contact links behave like Map & Directions

   —————————————————————————————— */

#pharmacyLocations .accordion-content ul.no-bullet a {

  display: inline; /* inline link */

  padding: 0; /* no nav-style padding */

  background: none; /* remove any bg */

  color: #aadbd0; /* soft link color */

  text-decoration: underline;

  transition: color 0.2s ease;

}

#pharmacyLocations .accordion-content ul.no-bullet a:hover {

  color: #ffffff; /* on hover, white text */

  background: none !important;

  border-radius: 0 !important; /* no rounding */

  text-decoration: underline;

}

/* Ensure no little hover bar appears */

#pharmacyLocations .accordion-content ul.no-bullet a::before, #pharmacyLocations .accordion-content ul.no-bullet a:hover::before {

  display: none !important;

  content: none !important;

}

/* ——————————————————————————————

   2. Tighten spacing between contact items

   —————————————————————————————— */

#pharmacyLocations .accordion-content ul.no-bullet {

  margin: 0;

  padding-left: 0;

}

#pharmacyLocations .accordion-content ul.no-bullet li {

  margin-bottom: 0.25rem; /* same as .accordion-hours */

  line-height: 1.4;

}

/* 1) Reset everything nav-style on content links */

#pharmacyLocations .accordion-content a {

  display: inline !important;

  padding: 0 !important;

  margin: 0 !important;

  background: none !important;

  border: none !important;

  border-radius: 0 !important;

  transform: none !important;

  position: static !important;

}

/* 2) On hover, only change text color (no bg, no shift) */

#pharmacyLocations .accordion-content a:hover {

  background: none !important;

  color: #ffffff !important;

  text-decoration: underline !important;

  transform: none !important;

}

/* 3) Remove any leftover pseudo-elements */

#pharmacyLocations .accordion-content a::before, #pharmacyLocations .accordion-content a:hover::before {

  display: none !important;

  content: none !important;

}

/*──────────────────────────────────────────

  Fix contact-link hover & spacing in pharmacyLocations

──────────────────────────────────────────*/

/* 1) Target links inside the no-bullet contact list */

#pharmacyLocations .accordion-content ul.no-bullet li a {

  display: inline !important;

  background: none !important;

  border: none !important;

  border-radius: 0 !important;

  padding: 0 !important;

  margin: 0 !important;

  transition: color 0.2s ease !important;

}

/* 2) On hover, only change the text color */

#pharmacyLocations .accordion-content ul.no-bullet li a:hover {

  color: #ffffff !important;

  background: none !important;

  border: none !important;

  border-radius: 0 !important;

}

/* 3) Match hours-list spacing between contact items */

#pharmacyLocations .accordion-content ul.no-bullet li {

  margin-bottom: 0.25rem !important;

  line-height: 1.4; /* same as your hours list */

}

/* 1) Stretch both cells to the same height */

.grid-x.align-stretch {

  align-items: stretch;

}

/* 2) Make the map cell a column flex container */

.map-cell {

  display: flex;

  flex-direction: column;

}

/* 3) Let the map container grow to fill that cell */

#locationMap {

  flex: 1;

}

/* 4) Always force the image or iframe inside to cover 100% */

#locationMap img, #locationMap iframe {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: left center; /* keep center in view */

}

/* ================================

   FAQ ACCORDION (Light Theme)

   ================================ */

#faqAccordion > li {

  margin-bottom: 0.75rem;

  position: relative;

  background-color: #ffffff;

  border-radius: 0.5rem;

  overflow: hidden;

  border: 1px solid #e2e2e3;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  transition: box-shadow 0.2s ease;

}

#faqAccordion > li:hover {

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);

}

/* Accordion link */

#faqAccordion a {

  display: block;

  width: 100%;

  padding: 0.75rem 2rem;

  font-size: 1.125rem;

  color: #333333;

  text-decoration: none;

  background-color: #ffffff;

  transition:

    background-color 0.2s ease, color 0.2s ease;

}

/* Prevent default chevron */

#faqAccordion .is-accordion-submenu-parent > a::after {

  display: none !important;

}

/* Hover + Active State */

#faqAccordion li:not(.active):not(.is-active) > a:hover {

  background-color: #428a77;

  color: #f1f5f4;

}

#faqAccordion li.active > a, #faqAccordion li.is-active > a {

  background-color: #428a77;

  color: #f1f5f4;

  font-weight: 600;

}

/* Chevron */

#faqAccordion .accordion-arrow {

  margin-left: auto;

  font-size: 1rem;

  color: rgba(0, 0, 0, 0.5);

  transition: transform 0.3s ease, color 0.2s ease;

}

#faqAccordion a:hover .accordion-arrow {

  color: #ffffff;

}

#faqAccordion li.active > a .accordion-arrow i, #faqAccordion li.is-active > a .accordion-arrow i {

  transform: rotate(180deg);

  color: #ffffff;

}

/* Accordion header layout */

#faqAccordion a .accordion-header-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

#faqAccordion a .title-text {

  font-weight: 600;

  flex: 1;

}

/* Accordion content panel */

#faqAccordion .accordion-content {

  display: none;

  background-color: #ffffff;

  color: #212121;

  padding: 1rem 2rem;

  border-left: 4px solid #428a77;

  border-top: 0 solid #e2e2e3;

  border-right: 0 solid #e2e2e3;

  border-radius: 0 0 0.5rem 0.5rem;

}

#faqAccordion .accordion-content a {

  color: #428a77;

  text-decoration: underline;

  font-weight: normal;

  background: none;

  padding: 0;

  margin: 0;

  border: none;

  display: inline;

  font-size: 0.95rem;

  transition: color 0.2s ease;

}

#faqAccordion .accordion-content a:hover {

  color: #115740;

  text-decoration: underline;

  background: none;

}

#faqAccordion .accordion-content ul, #faqAccordion .accordion-content ol {

  padding-left: 1.5rem;

  margin: 1rem 0;

  font-size: 0.95rem;

  line-height: 1.6;

  color: #333333;

  list-style-type: disc;

}

#faqAccordion .accordion-content ul li a, #faqAccordion .accordion-content ol li a {

  color: #428a77 !important;

  text-decoration: underline !important;

  font-weight: normal !important;

  font-size: 0.95rem !important;

  line-height: 1.6 !important;

  background: none !important;

  padding: 0 !important;

  margin: 0 !important;

  border: none !important;

  display: inline !important;

  transition: color 0.2s ease !important;

}

#faqAccordion .accordion-content ul li a:hover, #faqAccordion .accordion-content ol li a:hover {

  color: #115740 !important;

  text-decoration: underline !important;

  background: none !important;

}

#faqAccordion .accordion-content ul li, #faqAccordion .accordion-content ol li {

  margin-bottom: 0.5rem;

}

/* Open state */

#faqAccordion li.active .accordion-content, #faqAccordion li.is-active .accordion-content {

  display: block;

}

/* Remove bottom border radius when content opens to prevent visual gaps */

#faqAccordion li.active, #faqAccordion li.is-active {

  border-bottom-right-radius: 0;

}

/* Match pharmacy accordion: solid border on open */

#faqAccordion li.active .accordion-content, #faqAccordion li.is-active .accordion-content {

  border-top: 1px solid #e2e2e3;

}

/* Inner text */

#faqAccordion .accordion-content p {

  margin-bottom: 1rem;

  font-size: 0.95rem;

  line-height: 1.6;

}

#faqAccordion .accordion-content a {

  color: #428a77;

  text-decoration: underline;

}

#faqAccordion .accordion-content a:hover {

  color: #115740;

}

.offcanvas-content {

  flex: 1 1 auto;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  min-height: 0; /* Important: allows scrolling child flex content */

}

.offcanvas-nav {

  flex-shrink: 0;

  padding: 2rem 1.5rem;

  text-align: center;

  /*width: 100%;*/

  /*max-width: 100%;*/

}

.offcanvas-buttons {

  flex-shrink: 0;

  padding: 1.5rem 2rem;

  display: flex;

  flex-direction: column;

  gap: 1rem;

}

.offcanvas-btn {

  padding: 1rem;

  text-align: center;

  font-size: 1rem;

  font-weight: bold;

  border-radius: 8px;

  text-decoration: none;

  display: block;

  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;

}

.offcanvas-btn.pay {

  background-color: #DDEBE4;

  color: #115740;

}

.offcanvas-btn.doctor {

  background-color: #2B7A78;

  color: #fff;

}

.offcanvas-btn.refill {

  background-color: #D89D2B;

  color: #fff;

}

.offcanvas-btn.cart {

  background-color: #5A6BFF;

  color: #fff;

}

.offcanvas-btn.pay:hover {

  background-color: #c6ddd3; /* slightly darker mint */

  color: #1f1f1f;

}

.offcanvas-btn.doctor:hover {

  background-color: #22665f; /* slightly darker teal */

  color: #fff;

}

.offcanvas-btn.refill:hover {

  background-color: #bb8423; /* slightly darker mustard */

  color: #fff;

}

.offcanvas-btn.cart:hover {

  background-color: #3f57e0; /* slightly darker indigo */

  color: #fff;

}

#navOffCanvas a .nav-desc {

  display: block;

  font-size: 0.85rem;

  color: inherit; /* inherits hover/active color */

  padding-top: 4px;

  line-height: 1.4;

  font-weight: normal;

  opacity: 0.85;

}

.intro-kicker-home {

  font-size: 0.9rem;

  font-weight: 600;

  color: #428a77;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  margin-bottom: 0.5rem;

}

.service-card {

  display: none;

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.4s ease, transform 0.4s ease;

}

.service-card.visible {

  display: block;

  opacity: 1;

  transform: translateY(0);

}

.service-link {

  text-decoration: none;

  color: inherit;

  display: block;

  height: 100%;

}

.service-link:hover {

  text-decoration: none;

}

.service-card-inner {

  background-color: #D8E6E1;

  border-radius: 0.75rem;

  padding: 1.5rem;

  height: 100%;

  display: flex;

  align-items: flex-start;

  gap: 1rem;

  transition: box-shadow 0.25s ease, transform 0.25s ease;

}

.service-card-inner:hover {

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);

  transform: translateY(-4px);

}

.icon-col i {

  color: #115740;

  font-size: 4rem;

}

.content-col {

  padding-left: 0.5rem;

}

.show-more-btn {

  margin-top: 1rem;

}

#breaking-free-introduction .section-image-smaller {

  max-width: 100%;

  height: auto;

}

#breaking-free-introduction .intro-kicker {

  font-size: 0.9rem;

  font-weight: 600;

  color: #428a77;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  margin-bottom: 0.5rem;

}

#breaking-free-introduction .intro-title {

  font-size: 2.5rem;

  font-family: "gotham", sans-serif;

  font-weight: 900;

  color: #212121;

  margin-bottom: 0.75rem;

}

#breaking-free-introduction .intro-subtitle {

  font-size: 1.5em;

  margin-bottom: 1em;

  color: #333333;

  font-weight: 700;

}

#breaking-free-introduction .intro-description {

  font-size: 1.125em;

  line-height: 1.6;

  color: #333333;

  margin-bottom: 1.5rem;

}

#breaking-free-steps .card {

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  border-radius: 8px;

  padding: 1.75rem;

}

#breaking-free-steps .card:hover {

  transform: translateY(-4px);

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);

}

#breaking-free-steps .step-badge {

  font-size: 1.25rem;

  font-weight: 700;

  width: 3rem;

  height: 3rem;

  background-color: #428a77;

  color: #fff;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 1rem auto;

  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);

}

#breaking-free-steps h3 {

  font-size: 1.35rem;

  font-weight: 600;

  margin-bottom: 0.5rem;

  color: #222;

}

#breaking-free-steps p {

  font-size: 1.05rem;

  line-height: 1.6;

  color: #333333;

  margin-bottom: 0;

}

#breaking-free-steps .cell {

  margin-bottom: 2rem;

}

#leadership-introduction .section-image-smaller {

  max-width: 100%;

  height: auto;

}

#leadership-introduction .intro-kicker {

  font-size: 0.9rem;

  font-weight: 600;

  color: #d33f4d;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  margin-bottom: 0.5rem;

}

#leadership-introduction .intro-title {

  font-size: 2.5rem;

  font-family: "gotham", sans-serif;

  font-weight: 900;

  color: #222;

  margin-bottom: 0.75rem;

}

#leadership-introduction .intro-subtitle {

  font-size: 1.5em;

  margin-bottom: 1em;

  color: #333;

  font-weight: 700;

}

#leadership-introduction .intro-description {

  font-size: 1.125em;

  line-height: 1.6;

  color: #333;

  margin-bottom: 1.5rem;

}

#leadership-steps .card {

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  border-radius: 8px;

  padding: 1.75rem;

  border: 1px solid #C2C2C2;

}

#leadership-steps .card:hover {

  transform: translateY(-4px);

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);

}

#leadership-steps .step-badge {

  font-size: 1.25rem;

  font-weight: 700;

  width: 8rem;

  height: 8rem;

  background-color: #115740;

  color: #fff;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 1rem auto;

  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);

}

#leadership-steps h3 {

  font-size: 1.35rem;

  font-weight: 600;

  margin-bottom: 0.5rem;

  color: #222;

}

#leadership-steps p {

  font-size: 1.05rem;

  line-height: 1.6;

  color: #333;

  margin-bottom: 0;

}

#leadership-steps .cell {

  margin-bottom: 2rem;

}

#headversity-introduction .section-image-smaller {

  max-width: 100%;

  height: auto;

}

#headversity-introduction .intro-kicker {

  font-size: 0.9rem;

  font-weight: 600;

  color: #d33f4d;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  margin-bottom: 0.5rem;

}

#headversity-introduction .intro-title {

  font-size: 2.5rem;

  font-family: "gotham", sans-serif;

  font-weight: 900;

  color: #222;

  margin-bottom: 0.75rem;

}

#headversity-introduction .intro-subtitle {

  font-size: 1.5em;

  margin-bottom: 1em;

  color: #333;

  font-weight: 700;

}

#headversity-introduction .intro-description {

  font-size: 1.125em;

  line-height: 1.6;

  color: #333;

  margin-bottom: 1.5rem;

}

#headversity-steps .card {

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  border-radius: 8px;

  padding: 1.75rem;

}

#headversity-steps .card:hover {

  transform: translateY(-4px);

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);

}

#headversity-steps .step-badge {

  position: relative; /* ← This is missing */

  font-size: 2.25rem;

  font-weight: 700;

  width: 7rem;

  height: 7rem;

  background-color: #0a1b57;

  color: #fff;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 1rem auto;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

  padding: 0.25rem;

  line-height: 1;

}

#headversity-steps .step-badge span {

  display: inline-block;

  font-size: 2.25rem;

  line-height: 1;

}

#headversity-steps .step-badge:hover {

  transform: scale(1.1);

  transition: transform 0.25s ease-in-out;

}

#headversity-steps h3 {

  font-size: 1.35rem;

  font-weight: 600;

  margin-bottom: 0.5rem;

  color: #222;

}

#headversity-steps p {

  font-size: 1.05rem;

  line-height: 1.6;

  color: #333;

  margin-bottom: 0;

}

#headversity-steps .cell {

  margin-bottom: 2rem;

}

#headversity-introduction .section-divider, #headversity-steps .section-divider, #headversity-cert .section-divider, #headversity-solo .section-divider, #headversity-team .section-divider, #headversity-started .section-divider {

  background-color: #0a1b57;

}

/* Base divider style */

.section-divider {

  height: 4px;

  background-color: #428a77;

  border-radius: 2px;

  margin: 0.75rem 0 1.5rem 0;

}

/* Optional alignment */

.section-divider.align-left {

  margin-left: 0;

}

.section-divider.align-center {

  margin-left: auto;

  margin-right: auto;

}

/* Animate width on scroll (reusable version) */

.section-divider-animate {

  width: 60px;

  height: 4px;

  background-color: #428a77;

  animation: expandLine 0.6s ease-in-out forwards;

}

@keyframes expandLine {

  from {

    width: 0;

  }

  to {

    width: 60px;

  }

}

/* AOS adds this class on scroll */

.section-divider-animate.aos-animate {

  width: 80px;

}

h2.program-main-title[data-aos] {

  opacity: 0;

  transform: translateY(20px);

}

h2.program-main-title[data-aos].aos-animate {

  opacity: 1;

  transform: translateY(0);

  transition: opacity 0.6s ease, transform 0.6s ease;

}

.main-content {

  padding-top: 0;

}

#top_title_bar, .very_very_top {

  animation: fadeSlideDown 0.4s ease-in-out;

}

@keyframes fadeSlideDown {

  from {

    opacity: 0;

    transform: translateY(-10px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

/* General Section Styling */

.program-section {

  padding: 5em 1.5em;

}





/* Soft overlay background only on featured sections */

.program-section--featured.white-bg::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(255, 255, 255, 0.85); /* custom soft tone */

  z-index: 0;

  pointer-events: none;

  animation: fadeOverlay 1.2s ease-out forwards;

}

/* Overlay fade-in */

@keyframes fadeOverlay {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 0.92;

  }

}

/* Shared container for both image and icon */

.parallax-container {

  position: relative;

  overflow: hidden;

  text-align: center;

}

/* Reusable parallax effect */

.parallax-image {

  will-change: transform;

  transition: transform 0.2s ease-out;

}

/* Styling for icon when used instead of image */

.section-icon {

  font-size: 15rem; /* Adjust size as needed */

  color: #428a77; /* Macdonald’s green */

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100%; /* Optional: keeps it vertically centered */

  min-height: 100px; /* Ensures visual presence */

}

.light-bg {

  background: linear-gradient(to bottom, #d8e6e1 0%, #f1f5f4 100%);

}

.white-bg {

  background-color: #ffffff;

}

/* Image Styling */

.section-image {

  width: 100%;

  height: auto;

  border-radius: 0.5em;

  display: block;

  margin: 0 auto;

  padding: .875em;

}

/* Image Styling */

.section-image-smaller {

  width: 75%;

}

.section-image-smaller {

  max-width: 100%;

  height: auto;

  margin-top: 1rem;

  margin-bottom: .875rem;

}

.section-image-rounded-left {

  border-top-left-radius: 1.5rem;

  border-bottom-left-radius: 1.5rem;

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

  overflow: hidden;

  display: block;

  width: 100%;

  height: auto;

  padding: 0; /* optional: override .section-image padding if needed */

}

.section-image-rounded-right {

  border-top-left-radius: 0;

  border-bottom-left-radius: 0;

  border-top-right-radius: 1.5rem;

  border-bottom-right-radius: 1.5rem;

  overflow: hidden;

  display: block;

  width: 100%;

  height: auto;

  padding: 0; /* optional: override .section-image padding if needed */

}

.section-image-rounded-up {

  border-top-left-radius: 1.5rem;

  border-bottom-left-radius: 0;

  border-top-right-radius: 1.5rem;

  border-bottom-right-radius: 0;

  overflow: hidden;

  display: block;

  width: 100%;

  height: auto;

  padding: 0; /* optional: override .section-image padding if needed */

}

.section-image-rounded-all {

  border-top-left-radius: 1.5rem;

  border-bottom-left-radius: 1.5rem;

  border-top-right-radius: 1.5rem;

  border-bottom-right-radius: 1.5rem;

  overflow: hidden;

  display: block;

  width: 100%;

  height: auto;

  padding: 0; /* optional: override .section-image padding if needed */

}

/* Content Styling */

.program-content {

  text-align: left;

  color: #333333;

}

.program-main-title {

  font-size: 2.5em;

  margin-bottom: 0.3em;

  font-family: "gotham", sans-serif;

  font-weight: 900;

  font-style: normal;

  color: #212121;

}

.program-subtitle {

  font-size: 1.5em;

  margin-bottom: 1em;

  color: #333333;

}

.program-sub-subtitle {

  font-size: 1.25em;

  margin-bottom: 1em;

  color: #333333;

}

.program-description {

  font-size: 1.125em;

  margin-bottom: 1.5em;

  line-height: 1.6;

  color: #333333;

}

/* Feature List */

.program-features {

  list-style-type: disc;

  padding-left: 1.75em;

  margin-bottom: 1.5em;

  color: #333333;

}

.program-features li {

  font-size: 1.125em;

  margin-bottom: 1.25em;

  line-height: 1.25;

  color: #333333;

}

/* Only icon-based lists use .fa-ul */

.program-features.fa-ul {

  list-style: none;

  padding-left: 0;

  margin-left: 0;

}

.program-features.fa-ul li {

  position: relative;

  padding-left: 3em; /* Slight indent, icon will sit in this space */

  display: flex;

  align-items: left;

}

.program-features.fa-ul .fa-li {

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

}

.program-features.fa-ul .fa-li i {

  font-size: 1.75em; /* or 1.75em depending on design */

  display: block;

}

/* Modifier class for smaller green check icons */

.program-features--green.fa-ul li {

  padding-left: 2.5em;

}

.program-features--green .fa-li i {

  font-size: 1.25em;

  color: #428a77;

}

/* Modifier class for smaller green check icons */

.program-features--green-smaller.fa-ul li {

  padding-left: 2.5em;

}

.program-features--green-smaller .fa-li i {

  font-size: .350em;

  color: #428a77;

}

.call-to-action .fa-ul {

  padding-left: 0;

  margin-left: 0;

  list-style: none;

}

.call-to-action .fa-ul li {

  display: flex;

  align-items: flex-start;

  gap: 1rem;

  position: relative;

  line-height: 1.5;

}

.call-to-action .fa-ul li .fa-li {

  position: absolute;

  top: 0.45em;

  left: 0;

  flex-shrink: 0;

  margin-top: 0.2rem;

}

.call-to-action .fa-ul li .fa-li i {

  font-size: 2.75rem;

}

/* Buttons */

.program-buttons {

  display: flex;

  flex-wrap: wrap;

  gap: 1em;

  padding-top: 1em;

}

button.show-more-btn {

  display: inline-block;

  padding: 0.75em 1.5em;

  background-color: #cb9731;

  color: #f1f5f4;

  border: none;

  border-radius: 2em;

  text-decoration: none;

  font-weight: 500;

  transition: transform 0.25s ease, box-shadow 0.25s ease;

  cursor: pointer;

}

/* PRIMARY BUTTON */

.program-cta {

  display: inline-block;

  padding: 0.75em 1.5em;

  background-color: #cb9731;

  color: #f1f5f4;

  border: none;

  border-radius: 2em;

  text-decoration: none;

  font-weight: 500;

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.program-cta:hover, .program-cta:focus {

  background-color: #b6882c;

  color: #fff;

  text-decoration: none;

  transform: scale(1.06); /* slightly enlarge */

  /*box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);*/

}



/* ---------- TRUST LIST ---------- */

.trust-list {

  list-style: none;

  padding: 0;

  margin: 1.5rem 0 0 0;

  display: flex;

  flex-wrap: wrap;

}



.trust-list li {

  display: flex;

  align-items: baseline;

  font-family: "gotham", sans-serif;

  font-size: 0.95rem;

  font-weight: 600;

  color: #333;

}



.trust-list li i {

  font-size: 1.2rem;

  color: #428a77;

  margin-right: 0.5rem;

  position: relative;

  top: 0.12em;

}



.trust-list li:not(:last-child)::after {

  content: "•";

  display: inline-block;

  margin: 0 1rem;

  color: #999;

  font-weight: 400;

  position: relative;

  top: 0.05em;

}



/* Smaller text for compact trust list */

.trust-list.small li {

  font-size: 0.85rem;

}



/* Top spacing utility */

.trust_more_space_top {

  margin-top: 2rem;

}



/* Responsive adjustments */

@media (max-width: 768px) {

  .trust-list {

    flex-direction: column;

    gap: 0.75rem;

  }



  .trust-list li:not(:last-child)::after {

    content: none; /* remove bullet separators on stacked layout */

  }

}



.product-specs {

  width: 100%;

  border-collapse: collapse;

  margin: 1.5rem 0;

  font-family: "gotham", sans-serif;

  font-size: 0.9rem;

  line-height: 1.4;

}



.product-specs th,

.product-specs td {

  border: 1px solid #e2e2e2;

  padding: 0.75rem 1rem;

  text-align: left;

}



.product-specs thead th {

  background: #f8f8f8;

  font-weight: 600;

  color: #333;

}



.product-specs tbody td {

  color: #555;

}



/* Responsive: stack ONLY on Foundation small (0–639px) */

@media (max-width: 639px) {

  .product-specs thead {

    display: none;

  }



  .product-specs, 

  .product-specs tbody, 

  .product-specs tr, 

  .product-specs td {

    display: block;

    width: 100%;

  }



  .product-specs tr {

    margin-bottom: 1rem;

    border: 1px solid #e2e2e2;

    border-radius: 6px;

    overflow: hidden;

  }



  .product-specs td {

    padding: 0.5rem 0.75rem;

    border: none;

    border-bottom: 1px solid #eee;

    position: relative;

  }



  .product-specs td:last-child {

    border-bottom: none;

  }



  .product-specs td::before {

    content: attr(data-label);

    display: block;

    font-weight: 600;

    color: #333;

    margin-bottom: 0.25rem;

  }

}



.smooth-scroll-link:hover, .smooth-scroll-link:active, .smooth-scroll-link:focus, .smooth-scroll-link:visited {

  color: #fff;

  text-decoration: none;

}

/* SECONDARY BUTTON */

.program-cta.secondary {

  background: #428a77;

}

.program-cta.secondary:hover {

  background: #346d5e;

  /*transform: translateY(-2px);*/

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);

}

.program-cta.secondary:active, .program-cta.secondary:visited {

  color: #fff;

  text-decoration: none;

}

/* --- Scoped styles for #get-started section only --- */

#get-started .fa-ul.program-features li {

  margin-bottom: 1.5rem;

}

#get-started .icon_grey {

  color: #5a5a5a;

  font-size: 1.8rem;

}

/* Responsive Text Alignment */

@media (max-width: 768px) {

  .program-content {

    text-align: left;

  }

}

.program-section {

  transition: background-color 0.5s ease-in-out;

}











/* ========== Responsive Video Container ========== */

.responsive-embed {

  position: relative;

  height: 0;

  margin-bottom: 1rem;

  padding-bottom: 56.25%; /* 16:9 ratio */

  overflow: hidden;

  max-width: 100%;

}

.responsive-embed iframe, .responsive-embed object, .responsive-embed embed {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

/* ========== Video Thumbnail Wrapper ========== */

.brbc-video-wrapper {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  cursor: pointer;

  overflow: hidden;

  border-radius: 0.5em;

}

/* ========== Thumbnail Image ========== */

.video-thumb-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.3s ease;

}

.brbc-video-wrapper:hover .video-thumb-img {

  transform: scale(1.02);

}

.brbc-video-fade-wrapper {

  transition: opacity 0.3s ease;

}

.brbc-video-fade-out {

  opacity: 0;

}

/* ========== Play Button Overlay ========== */

.play-button-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  pointer-events: none;

}

/* Centering wrapper for the button */

.button-center-wrapper {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

/* ========== YouTube Red Play Button ========== */

.youtube-play-button {

  width: 90px;

  height: 64px;

  background: #d33f4d;

  border-radius: 12px;

  position: relative;

  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);

  cursor: pointer;

  transition: transform 0.2s ease;

  animation: pulse 2s infinite;

}

/* White Triangle Icon */

.youtube-play-button::before {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 0;

  height: 0;

  border-top: 14px solid transparent;

  border-bottom: 14px solid transparent;

  border-left: 24px solid white;

}

/* Pulse Animation */

@keyframes pulse {

  0% {

    transform: scale(1);

  }

  50% {

    transform: scale(1.1);

  }

  100% {

    transform: scale(1);

  }

}

/* Enhanced checklist under CTA */

.enhanced-checklist .fa-li i {

  color: #0073e6;

}

.enhanced-checklist li {

  margin-bottom: 0.5rem;

}

.smallLogo2 {

  width: 125px;

}

.largeLogo2 {

  width: 175px;

}

.menu .menu-text {

  /*padding: 1.188rem .75rem;*/

  font-weight: bold;

  line-height: 1;

  font-family: "gotham", sans-serif;

  font-size: 13px;

  color: #363636;

}

.header-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.5rem 1rem;

  background-color: #00573d;

}

/* Logo: stays left */

.header-left {

  flex: 0 1 auto;

}

/* Hamburger: stays right */

.header-right {

  flex: 0 0 auto;

}

/* Logo scaling on small screens */

.header_logo {

  max-width: 180px;

  height: auto;

}

.footer_logo {

  max-width: 280px;

  margin-bottom: 1rem;

}

/* Hide nav on small screens, show only on large */

.header-nav {

  display: none;

}

@media screen and (min-width: 64em) {

  .header-nav {

    display: block;

  }

}

.title-bar {

  width: 100%;

  z-index: 10;

  /*transition: height .25s ease;*/

  /*height: 8.024em;*/

  border-bottom: 4px solid #428a77;

  background-color: #115740;

  /*background-image: url('../img/bkg_titlebar.png');*/

  /*background-repeat: no-repeat;*/

}

.title-bar .title-bar-right, .title-bar .title-bar-left {}

.title-bar-right {

  /*min-width: 50%;*/

}

.title-bar-left ul {}

.title-bar .dropdown.menu li {

  float: left;

}

/*.title-bar .dropdown.menu .is-dropdown-submenu {



  border: none;



  background-color: #ffffff;



}*/

/* The title bar, also fixed, just below the top banner */

#top_title_bar {

  position: fixed;

  top: 0; /* distance from top of screen */

  width: 100%;

  z-index: 450;

  /*background: #ffffff;*/

  transition: top 0.2s ease-in-out;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* optional depth */

}

/* Set header height and vertical spacing */

#top_title_bar {

  min-height: 4.8125em; /* ~77px */

  padding-top: 1em;

  padding-bottom: 1em;

}

/* Allow wrapping in the header grid */

#top_title_bar .grid-x.align-middle {

  flex-wrap: wrap;

}

/* Logo: fixed width, does not shrink */

#top_title_bar .main_title_logo {

  flex: 0 0 auto;

}

#root {

  margin-top: 3em;

}

.top-bar, .top-bar ul {

  background-color: #115740;

}

.top-bar {

  border-style: solid;

  border-width: 0px 0px 0px 0px;

  min-height: 3.313em;

  border-top: 0px solid #6f9fc8;

  border-bottom: 2px solid #428a77;

}

ul.on_top {

  z-index: 1000 !important;

}

div.left_padding {

  padding-left: 5.313em;

}

li.google_translate_list {

  min-width: 31.25em;

}

/*"""""""" (MAIN) Items""""""""*/

.dropdown.menu > li.is-dropdown-submenu-parent > a::after {

  display: block;

  width: 0;

  height: 0;

  border: inset 6px;

  content: '';

  border-bottom-width: 0;

  border-top-style: solid;

  border-color: #6C7378 transparent transparent;

  right: 5px;

  left: auto;

  margin-top: -3px;

}

/* ========== Desktop Top Nav Styling (Large screens only) ========== */

#navTop {

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: .250rem;

  padding: 1rem .250rem;

  /*background-color: #f8f9fa;*/ /* Optional: adjust to match site palette */

}

#navTop li {

  list-style: none;

}

/* Main Nav Links */

#navTop a {

  position: relative;

  display: block;

  color: #1d2023;

  font-family: "gotham", sans-serif;

  font-weight: 700;

  font-style: normal;

  font-size: 1.2em;

  text-decoration: none;

  line-height: 1.3em;

  white-space: normal;

  word-break: break-word;

  transition: color 0.3s ease;

}

/* Subtext Styling */

#navTop div.subtext {

  font-size: 0.85em;

  font-weight: 500;

  color: #555555;

  margin-top: 0.2rem;

  transition: color 0.3s ease;

  margin-left: 2.85rem;

}

/* Hover Animation (Underline Reveal) */

/*#navTop a::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: -4px;

  height: 2px;

  width: 0%;

  background-color: #d23f4d;

  transition: width 0.3s ease;

}*/

#navTop a:hover {

  color: #5379BD;

}

/* Change subtext color when parent <a> is hovered */

#navTop a:hover .subtext {

  color: #5379BD;

}

#navTop li.active > a .subtext {

  color: #d23f4d;

}

#navTop a:hover::after {

  width: 100%;

}

/* Active State */

#navTop li.active > a {

  color: #d23f4d;

  font-weight: bold;

  border-bottom: 3px solid #d23f4d;

  background: transparent;

}

/* Ensure active links also change color on hover */

#navTop li.active > a:hover, #navTop li.active > a:hover .subtext {

  color: #5379BD;

  /*border-bottom: 2px solid #5379BD;*/

}

#navTop a i {

  margin-right: 0.35rem;

  color: #666f7e;

  transition: color 0.3s ease;

  font-size: 1.5em;

}

#navTop a:hover i, #navTop li.active > a:hover i {

  color: #5379BD;

}

#navTop li.active > a i {

  color: #d23f4d;

}

/*"""""""" (SUB) Container""""""""*/

#navTop .is-dropdown-submenu {

  padding: 0.625em 0.625em;

  background-color: #050b0e;

  /*background-image:url("img/bkg_content.jpg");*/

  border-width: 1px;

  border-style: none;

  border-color: #ffffff;

  min-width: 285px;

}

#navTop ul li {

  padding: 0.625em 0px;

  /*background-color:rgba(0, 0, 0, 0.2);*/

  border-bottom: 0.063em solid rgba(255, 255, 255, 0.1);

}

#navTop ul li:last-child {

  border-bottom: 0px solid rgba(255, 255, 255, 0.1);

}

/*"""""""" (SUB) Items""""""""*/

#navTop div a, #navTop ul a {

  padding: 0.125em 0.625em 0.125em 0.313em;

  margin: 0.313em 0.313em;

  background-color: transparent;

  font-size: 0.875em;

  list-style-position: inside;

  list-style-type: circle;

}

/*"""""""" (SUB) Hover State""""""""*/

#navTop div a:hover {

  text-decoration: underline;

}

/*"""""""" Individual Titles""""""""*/

#navTop .navToptitle {

  cursor: default;

  padding: 0.188em 0px 0.188em 0.750em;

  background-color: #262626;

  color: #FFFFFF;

  font-family: "gotham", sans-serif;

  font-size: 0.688em;

  font-weight: bold;

}

/*"""""""" Individual Horizontal Dividers""""""""*/

#navTop .navTopdividerx {

  border-top-width: 1px;

  margin: 16px 0;

  border-color: #3d444a;

}

/*"""""""" Individual Vertical Dividers""""""""*/

#navTop .navTopdividery {

  border-left-width: 1px;

  height: 15px;

  margin: 4px 2px 0px;

  border-color: #333333;

}

/*"""""""" Custom Rule""""""""*/

ul#navTop ul {

  background-color: #F1F1F1;

  border-width: 1px;

  border-style: solid;

  border-color: #666666;

}

/*"""""""" Custom Rule""""""""*/

ul#navTop ul a {

  /*padding: 2px 10px 2px 5px;*/

  /*background-color: #F1F1F1;*/

}

/*[END of Very Top Header Navigation]*/

.icon_width {

  padding-right: 0.375em;

}

.icon_width_left {

  padding-left: 0.375em;

}

.icon_width_more {

  padding-right: 0.563em;

}

.logo_header {

  padding-left: 1.625em;

}

.button-group {

  margin-bottom: 0rem;

}

/* -------------------- C. MAIN NAVIGATION BAR -------------------- */

.navigation_bar_background {

  margin-top: 0;

  /*height: 3.313em;*/

  padding: 0.313em;

  padding-bottom: 0;

  padding-left: 1.5em;

  /*padding-top: 0.688em;*/

  position: relative;

  background-image: url('../img/bkg_navbar.jpg');

  background-repeat: no-repeat;

  border-style: solid;

  border-width: 0px 0px 0px 0px;

  border-top: 0px solid #ffffff;

  border-bottom: 0px solid #ffffff;

  background-color: #18343f;

}

.navigation_bar_background_course {

  margin-top: 0;

  /*height: 3.313em;*/

  padding: 0.313em;

  padding-bottom: 0;

  /*padding-left: 1.5em;*/

  /*padding-top: 0.688em;*/

  position: relative;

  /*background-image: url('../img/bkg_navbar.jpg');*/

  background-color: #1e1e1e;

  background-repeat: no-repeat;

  border-style: solid;

  border-width: 0px 0px 0px 0px;

  border-top: 0px solid #ffffff;

  border-bottom: 0px solid #ffffff;

}

/* -------------------- D. LEFT NAVIGATION BAR -------------------- */

.grey_inside_nav {

  background-color: #373737;

  padding-bottom: 1.125em;

}

.dark_grey_inside_nav {

  background-color: #313131;

  /*padding-bottom: .750em;	*/

  border-width: 0 0 1px 0;

  border-style: solid;

  border-color: #313131;

}

/*.inside_nav {







border-width: 0px 0px thin 0px;



	border-color: #ffffff;



    background-color: #373737;



}*/

.left_bar_top {

  padding-top: 2.750em;

  padding-left: 0;

  padding-bottom: 0.500em;

}

.nav_left_bar {

  padding-left: 2.250em;

  color: #5B6771;

}

.left_bar_info .user-name {

  padding-top: 1.250em;

  padding-left: 1.150em;

  margin-bottom: 0;

  /*font-family: prenton, sans-serif;*/

}

.left_bar_info .user-title {

  margin-bottom: 1.250em;

  padding-left: 1.500em;

  margin-top: -.375em;

  padding-bottom: 0;

  color: #BBBBBB;

  font-size: 0.750em;

}

/* -------------------- E. BREADCRUMBS, PAGENATION & PROGRESS INDICATOR -------------------- */

.pagination a, .pagination button {

  display: block;

  padding: 0.1875rem 0.625rem;

  border-radius: 0;

  background: #f5f5f5;

  color: #333333;

}

.pagination .current {

  padding: 0.1875rem 0.625rem;

  background: #5576ba;

  color: #fefefe;

  cursor: default;

}

.pagination a:hover, .pagination button:hover {

  background: #e0edf7;

  text-decoration: none;

}

.progress-indicator {

  list-style: none;

  width: 100%;

  margin: 0 auto;

  padding: 0;

  display: table;

  table-layout: fixed;

}

.progress-indicator > li {

  position: relative;

  display: table-cell;

  text-align: center;

  font-size: 1.5em;

}

.progress-indicator > li span {

  position: absolute;

  color: #a9a8a8;

  -webkit-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  transform: translateX(-50%);

  font-weight: 600;

  font-size: 0.750rem;

  letter-spacing: 0.05px;

  text-transform: uppercase;

}

.progress-indicator > li::before {

  content: attr(data-step);

  display: block;

  margin: 0 auto;

  background: #cacaca;

  width: 1.5em;

  height: 1.5em;

  text-align: center;

  margin-bottom: 0.25em;

  line-height: 1.5em;

  border-radius: 100%;

  position: relative;

  z-index: 1;

  font-weight: bold;

  font-family: "gotham", sans-serif;

  color: #979595;

}

.progress-indicator > li::after {

  content: '';

  position: absolute;

  display: block;

  background: #cacaca;

  width: 100%;

  height: 0.15em;

  top: 50%;

  -webkit-transform: translateY(-100%);

  -ms-transform: translateY(-100%);

  transform: translateY(-100%);

  left: 50%;

  margin-left: 1.5em\9;

  z-index: 0;

}

.progress-indicator > li:last-child:after {

  display: none;

}

.progress-indicator > li.is-complete {

  color: #5b6771;

}

.progress-indicator > li.is-complete::before, .progress-indicator > li.is-complete::after {

  color: #fefefe;

  background: #5b6771;

}

.progress-indicator > li.is-complete span {

  color: #5b6771;

}

.progress-indicator > li.is-current {

  color: #bf3b4b;

}

.progress-indicator > li.is-current::before {

  color: #fefefe;

  background: #bf3b4b;

}

.progress-indicator > li.is-current span {

  color: #bf3b4b;

}

/*







=============================================== 03. CONTAINER STYLES ===============================================







*/

.grid-container {

  padding-right: 0.625rem;

  padding-left: 0.625rem;

  max-width: 80rem;

  margin: 0 auto;

}

.wider_row {

  max-width: 103.313rem;

  padding-top: 0em;

}

.narrow_row {

  max-width: 100rem;

  padding-top: 0em;

}

.medium_row {

  max-width: 105rem;

  padding-top: 0em;

}

.page_background {

  background: #ffffff;

  background-repeat: no-repeat;

}

.content_background_white {

  background: #ffffff;

  background-repeat: no-repeat;

}

.page_background_blue {

  background: #18343e;

}

.page_background_dark_grey {

  background: #4B545B;

}

.page_background_dark_grey2 {

  background-image: url("../img/bkg_titlebar.png");

  background-repeat: repeat-x;

  background-position: center bottom;

  border-bottom: 0px solid #202427;

}

.navigation_container {

  border-top: 1px solid #18343e;

  border-bottom: 2px solid #ffffff;

}

.page_background_dark {

  background: #0e2149;

  background-image: url("../img/hero_image4.jpg");

  background-repeat: no-repeat;

  background-position: left bottom;

  padding-top: 2rem;

  padding-bottom: 1.5rem;

  border-top: 16px solid #8995c9;

  border-bottom: 16px solid #8995c9;

}

.page_background_dark_portal {

  background: #0e2149;

  background-image: url("../img/hero_image_portal.jpg");

  background-repeat: no-repeat;

  background-position: left bottom;

  padding-top: 2rem;

  padding-bottom: 1.5rem;

  border-top: 16px solid #8995c9;

  border-bottom: 16px solid #8995c9;

}

.page_background_dark_portal2 {

  background: #0e2149;

  background-image: url("../img/hero_image_portal_inside.jpg");

  background-repeat: no-repeat;

  background-position: left bottom;

  padding-top: 2rem;

  padding-bottom: 1.5rem;

  border-top: 16px solid #8995c9;

  border-bottom: 16px solid #8995c9;

}

.page_background_light {

  background: #f1f5f4;

  background-repeat: no-repeat;

}

.page_background_graphic {

  padding-top: 1.85em;

  padding-bottom: 1.85em;

  padding-left: 0.625em;

  padding-right: 0.625em;

  background-image: url("../img/bkg_page_home.png");

  background-repeat: repeat-x;

  background-color: #ffffff;

  border-top: 0px solid #ffffff;

}

.page_background_graphic2 {

  padding: 3.125em 0.625em;

  /*background-image: url("../img/bkg_page_home.png");*/

  /*background-repeat: repeat-x;*/

  background-color: #fafafa;

}

.page_background_graphic3 {

  padding: 3.438em 0.625em;

  background-image: url("../img/bkg_page_home3.jpg");

  background-repeat: repeat-x;

  background-color: #ced0d4;

}

.page_background_graphic_content {

  padding: 3.125em 0.625em;

  background-image: url("../img/bkg_page_home_content.png");

  background-repeat: repeat-x repeat-y;

  background-color: #ffffff;

}

.page_background_inside {

  background-image: url("../img/bkg_page_home3.png");

  background-repeat: repeat-x;

  background-color: #ffffff;

}

.page_background_roc {

  background-image: url("../img/bkg_roc.png");

  background-repeat: repeat-x;

  background-color: #ffffff;

}

.no_padding {

  padding: 0px;

}

.negative_padding {

  margin-top: -1.125em;

  /*padding-top: -15px;*/

  padding-bottom: 0.625em;

}

/* Padding for the text and hyperlinks at the very bottom to match*/

ul.small_text_footer li.more_padding_top {

  padding-top: 1.000em;

}

/* -------------------- A. MAIN SECTION -------------------- */

/* -------------------- B. LEFT SECTION -------------------- */

/* -------------------- C. RIGHT SECTION -------------------- */

/* -------------------- D. FOOTER -------------------- */

.black_footer {

  background-color: #333333;

  padding: 2.5rem 0;

}

#engadget-footer-sitemap-container #engadget-footer-sitemap {

  max-width: 100.000rem;

  margin-right: auto;

  margin-left: auto;

  color: #e6e6e6;

  padding: 3.75rem 0;

}

div.footer_area {

  color: #807f7f;

  font-size: 75%;

}

/* Vertical Footer */

.padding_footer {

  padding-right: 0.625rem;

  padding-left: 0.625rem;

}

#engadget-footer-sitemap-container {

  max-width: 100%;

  width: 100%;

  margin: 0 auto;

  margin-top: 0;

  background-color: #377492;

}

#engadget-footer-sitemap-container #engadget-footer-sitemap {

  max-width: 100.000rem;

  margin-right: auto;

  margin-left: auto;

  color: #e6e6e6;

  padding: 3.75rem 0;

}

#engadget-footer-sitemap-container #engadget-footer-sitemap::before, #engadget-footer-sitemap-container #engadget-footer-sitemap::after {

  display: table;

  content: ' ';

  -webkit-flex-basis: 0;

  -ms-flex-preferred-size: 0;

  flex-basis: 0;

  -webkit-order: 1;

  -ms-flex-order: 1;

  order: 1;

}

#engadget-footer-sitemap-container #engadget-footer-sitemap::after {

  clear: both;

}

#engadget-footer-sitemap-container #engadget-footer-sitemap a {

  color: #e6e6e6 !important;

}

#engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column {

  float: left;

  width: 50%;

  padding-right: 0.625rem;

  padding-left: 0.625rem;

}

@media print, screen and (min-width: 40em) {

  #engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column {

    padding-right: 0.9375rem;

    padding-left: 0.9375rem;

  }

}

#engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column:nth-of-type(1n) {

  clear: none;

}

#engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column:nth-of-type(2n+1) {

  clear: both;

}

#engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column:last-child {

  float: left;

}

@media print, screen and (min-width: 64em) {

  #engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column {

    float: left;

    width: 25%;

    padding-right: 0.625rem;

    padding-left: 0.625rem;

  }

}

@media print, screen and (min-width: 64em) and (min-width: 40em) {

  #engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column {

    padding-right: 0.9375rem;

    padding-left: 0.9375rem;

  }

}

@media print, screen and (min-width: 64em) {

  #engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column:nth-of-type(1n) {

    clear: none;

  }

  #engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column:nth-of-type(4n+1) {

    clear: both;

  }

  #engadget-footer-sitemap-container #engadget-footer-sitemap .links > .link-column:last-child {

    float: left;

  }

}

#engadget-footer-sitemap-container #engadget-footer-sitemap .links .link-column:not(:last-child) {

  border-right: 1px solid #4181a3;

}

#engadget-footer-social-container {

  max-width: 100%;

  width: 100%;

  margin: 0 auto;

  margin-top: 0;

  background-color: #e1eef8;

}

#engadget-footer-social-container #engadget-footer-social {

  max-width: 100.000rem;

  margin-right: auto;

  margin-left: auto;

  color: #e6e6e6;

  padding: 3.75rem 0;

}

#engadget-footer-social-container #engadget-footer-social::before, #engadget-footer-social-container #engadget-footer-social::after {

  display: table;

  content: ' ';

  -webkit-flex-basis: 0;

  -ms-flex-preferred-size: 0;

  flex-basis: 0;

  -webkit-order: 1;

  -ms-flex-order: 1;

  order: 1;

}

#engadget-footer-social-container #engadget-footer-social::after {

  clear: both;

}

#engadget-footer-social-container #engadget-footer-social a {

  color: #e6e6e6 !important;

}

#engadget-footer-social-container #engadget-footer-social .footer-left {

  width: 100%;

  float: left;

  padding-right: 0.625rem;

  padding-left: 0.625rem;

}

@media print, screen and (min-width: 40em) {

  #engadget-footer-social-container #engadget-footer-social .footer-left {

    padding-right: 0.9375rem;

    padding-left: 0.9375rem;

  }

}

#engadget-footer-social-container #engadget-footer-social .footer-left:last-child:not(:first-child) {

  float: right;

}

@media print, screen and (min-width: 40em) {

  #engadget-footer-social-container #engadget-footer-social .footer-left {

    width: 50%;

    float: left;

    padding-right: 0.625rem;

    padding-left: 0.625rem;

  }

}

@media print, screen and (min-width: 40em) and (min-width: 40em) {

  #engadget-footer-social-container #engadget-footer-social .footer-left {

    padding-right: 0.9375rem;

    padding-left: 0.9375rem;

  }

}

@media print, screen and (min-width: 40em) {

  #engadget-footer-social-container #engadget-footer-social .footer-left:last-child:not(:first-child) {

    float: right;

  }

}

@media print, screen and (min-width: 64em) {

  #engadget-footer-social-container #engadget-footer-social .footer-left {

    width: 41.66667%;

    float: left;

    padding-right: 0.625rem;

    padding-left: 0.625rem;

  }

}

@media print, screen and (min-width: 64em) and (min-width: 40em) {

  #engadget-footer-social-container #engadget-footer-social .footer-left {

    padding-right: 0.9375rem;

    padding-left: 0.9375rem;

  }

}

@media print, screen and (min-width: 64em) {

  #engadget-footer-social-container #engadget-footer-social .footer-left:last-child:not(:first-child) {

    float: right;

  }

}

#engadget-footer-social-container #engadget-footer-social .footer-left .input-group-field {

  background: #fefefe;

}

#engadget-footer-social-container #engadget-footer-social .footer-right {

  text-align: right;

  width: 100%;

  float: left;

  padding-right: 0.625rem;

  padding-left: 0.625rem;

}

@media print, screen and (min-width: 40em) {

  #engadget-footer-social-container #engadget-footer-social .footer-right {

    padding-right: 0.9375rem;

    padding-left: 0.9375rem;

  }

}

#engadget-footer-social-container #engadget-footer-social .footer-right:last-child:not(:first-child) {

  float: right;

}

@media print, screen and (min-width: 40em) {

  #engadget-footer-social-container #engadget-footer-social .footer-right {

    width: 50%;

    float: right;

    padding-right: 0.625rem;

    padding-left: 0.625rem;

  }

}

@media print, screen and (min-width: 40em) and (min-width: 40em) {

  #engadget-footer-social-container #engadget-footer-social .footer-right {

    padding-right: 0.9375rem;

    padding-left: 0.9375rem;

  }

}

@media print, screen and (min-width: 40em) {

  #engadget-footer-social-container #engadget-footer-social .footer-right:last-child:not(:first-child) {

    float: right;

  }

}

#engadget-footer-social-container #engadget-footer-social .fa {

  padding: 0 0 0 0.6rem;

}

#engadget-footer-social-container #engadget-footer-social h2 {

  color: #fefefe;

}

#engadget-footer-social-container #engadget-footer-social p {

  font-size: 0.8rem;

  margin-bottom: 0;

}

#engadget-footer-contact-details-container {

  max-width: 100%;

  width: 100%;

  margin: 0 auto;

  margin-top: 0;

  background-color: #fefefe;

}

#engadget-footer-contact-details-container #engadget-footer-contact-details {

  max-width: 100.000rem;

  margin-right: auto;

  margin-left: auto;

  color: #8a8a8a;

  font-size: 0.8rem;

  padding: 1.25rem 0;

}

#engadget-footer-contact-details-container #engadget-footer-contact-details::before, #engadget-footer-contact-details-container #engadget-footer-contact-details::after {

  display: table;

  content: ' ';

  -webkit-flex-basis: 0;

  -ms-flex-preferred-size: 0;

  flex-basis: 0;

  -webkit-order: 1;

  -ms-flex-order: 1;

  order: 1;

}

#engadget-footer-contact-details-container #engadget-footer-contact-details::after {

  clear: both;

}

#engadget-footer-contact-details-container #engadget-footer-contact-details a {

  color: #8a8a8a !important;

}

#engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left {

  width: 100%;

  float: left;

  padding-right: 0.625rem;

  padding-left: 0.625rem;

  text-align: center;

  font-size: 0.9rem;

}

@media print, screen and (min-width: 40em) {

  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left {

    padding-right: 0.9375rem;

    padding-left: 0.9375rem;

  }

}

#engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left:last-child:not(:first-child) {

  float: right;

}

#engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left li {

  display: block;

}

@media print, screen and (min-width: 40em) {

  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left {

    width: 50%;

    float: left;

    padding-right: 0.625rem;

    padding-left: 0.625rem;

    text-align: left;

  }

}

@media print, screen and (min-width: 40em) and (min-width: 40em) {

  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left {

    padding-right: 0.9375rem;

    padding-left: 0.9375rem;

  }

}

@media print, screen and (min-width: 40em) {

  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left:last-child:not(:first-child) {

    float: right;

  }

}

@media print, screen and (min-width: 64em) {

  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left {

    width: 66.66667%;

    float: left;

    padding-right: 0.625rem;

    padding-left: 0.625rem;

  }

}

@media print, screen and (min-width: 64em) and (min-width: 40em) {

  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left {

    padding-right: 0.9375rem;

    padding-left: 0.9375rem;

  }

}

@media print, screen and (min-width: 64em) {

  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left:last-child:not(:first-child) {

    float: right;

  }

  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left ul {

    margin-bottom: 0;

  }

  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left li {

    display: inline-block;

  }

}

#engadget-footer-contact-details-container #engadget-footer-contact-details .footer-left .fa {

  padding: 0 0.4rem;

}

#engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right {

  font-size: 0.9rem;

}

@media screen and (max-width: 39.9375em) {

  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right {

    display: none !important;

  }

}

@media print, screen and (min-width: 40em) {

  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right {

    width: 50%;

    float: left;

    padding-right: 0.625rem;

    padding-left: 0.625rem;

  }

}

@media print, screen and (min-width: 40em) and (min-width: 40em) {

  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right {

    padding-right: 0.9375rem;

    padding-left: 0.9375rem;

  }

}

@media print, screen and (min-width: 40em) {

  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right:last-child:not(:first-child) {

    float: right;

  }

}

@media print, screen and (min-width: 64em) {

  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right {

    width: 33.33333%;

    float: left;

    padding-right: 0.625rem;

    padding-left: 0.625rem;

    text-align: right;

  }

}

@media print, screen and (min-width: 64em) and (min-width: 40em) {

  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right {

    padding-right: 0.9375rem;

    padding-left: 0.9375rem;

  }

}

@media print, screen and (min-width: 64em) {

  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right:last-child:not(:first-child) {

    float: right;

  }

  #engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right ul {

    padding-top: 1.6rem;

  }

}

#engadget-footer-contact-details-container #engadget-footer-contact-details .footer-right .fab {

  padding: 0 0.4rem;

}

/* -------------------- E. OVERLAP OVER CONTAINERS -------------------- */

/* Normal state */

.hover-image {

  padding-bottom: .625em;

}

/* Hover state */

.hover-link:hover .hover-image {

  /* Change the image source on hover */

  content: url('../img/hard_hat_enews_hover_icon.png');

}

/* Position the sidebar at the bottom of the viewport */

#mySidenav {

  position: absolute;

  bottom: 112px;

  right: 0;

  width: 50px; /* Start with a small width */

  transition: width 0.3s, right 0.3s; /* Transition the width and right position on hover */

}

/* Style the links inside the sidenav */

#mySidenav a {

  display: flex; /* Display as flex container */

  align-items: center; /* Center content vertically */

  text-decoration: none;

  font-size: 18px;

  color: #828c95;

  font-weight: 700;

  border-radius: 0 5px 5px 0;

  overflow: hidden;

  height: 55px;

  transform: translateX(0); /* Initially translateX(0) */

  transition: transform 0.3s; /* Add transition for sliding effect */

}

#mySidenav a:hover {

  width: 255px; /* Expand the width on hover */

  transform: translateX(-100%); /* Slide the content in on hover */

}

#mySidenav a img {

  width: 43px; /* Set the correct width of the icon */

  height: auto; /* Maintain aspect ratio */

  margin-right: 10px; /* Add some space between the icon and text */

  margin-left: 10px;

}

/* The link: px from the bottom with a background */

#about {

  background: linear-gradient(to bottom, #2c3134, #202426);

}

div.overlap {

  position: absolute;

  left: 100px;

  right: 0px;

  top: 0px;

  margin-left: auto;

  margin-right: auto;

  z-index: 99 !important;

}

div.overlap2 {

  position: absolute;

  top: -25px;

  z-index: 99 !important;

}

div.overlap3 {

  position: absolute;

  bottom: -75px;

  right: -75px;

  z-index: 99 !important;

}

/* -------------------- F. BLOCK GRID -------------------- */

/* -------------------- G. POSTS & TOOLS -------------------- */

div.contact {

  color: #000000;

  font-size: 1.1em;

  font-weight: bold;

}

div.contact a {

  /*color: #000000;*/

  font-size: 1.1em;

  font-weight: bold;

}

.post_details .user-name a {

  font-weight: bold;

  color: #1E1E1E;

  font-size: 0.875em;

}

.post_details .user-title {

  font-size: 0.750em;

}

/*.post_details {



background-color: #f0f0f7;	



}*/

div.post_description {

  font-family: "gotham", sans-serif;

  color: #4D565C;

  font-size: .875em;

}

div.post {

  font-family: "gotham", sans-serif;

  color: #4D565C;

  font-size: .875em;

  padding-top: 1em;

  padding-bottom: 1em;

  border-bottom: 0px solid #F0F0F7;

}

div.post_withline {

  font-family: "gotham", sans-serif;

  color: #4D565C;

  font-size: .875em;

  padding-top: 1em;

  padding-bottom: 1em;

  border-bottom: 1px solid #F0F0F7;

}

div.paperwork {

  font-family: "gotham", sans-serif;

  color: #4D565C;

  font-size: 1em;

  padding-top: 1em;

  padding-bottom: 1em;

  border-bottom: 2px solid #F0F0F7;

}

div.paperwork_closeout {

  font-family: "gotham", sans-serif;

  background-color: #F0F0F7;

  color: #4D565C;

  font-size: 1.125em;

  padding-top: 2em;

  padding-bottom: 1em;

  border-bottom: 2px solid #F0F0F7;

}

div.post_main, span.post_main {

  font-family: "gotham", sans-serif;

  color: #6d7c88;

  font-size: 0.750em;

  font-weight: normal;

  min-height: 3em;

}

div.post_main_dark, span.post_main_dark {

  font-family: "gotham", sans-serif;

  color: #000000;

  font-size: 0.875em;

  font-weight: bold;

  /*padding-top: 1em;*/

}

div.post_main_underneath, span.post_main_underneath {

  font-family: "gotham", sans-serif;

  color: #6d7c88;

  font-size: 0.813em;

  font-weight: normal;

  padding-top: 0;

}

div.post_main_white {

  font-family: "gotham", sans-serif;

  color: #C9C5C6;

  font-size: 0.750em;

  /*padding-top: 1em;*/

}

div.post_main_white_larger {

  font-family: "gotham", sans-serif;

  color: #C9C5C6;

  font-size: 1em;

  /*padding-top: 1em;*/

}

div.post_main_light {

  font-family: "gotham", sans-serif;

  color: #C9C5C6;

  font-size: 0.813em;

  font-weight: 400;

  padding-top: 0.750em;

}

div.poster_info {

  font-family: "gotham", sans-serif;

  color: #808495;

  font-size: .750em;

}

span.post_info {

  font-weight: bold;

  font-size: .900em;

}

.not_read {

  font-weight: bold;

  font-size: 100%;

}

a.company {

  text-decoration: none;

  font-size: .900em;

  color: #4D565C;

  padding: 0px;

  display: inline;

}

a.company:hover {

  /*text-decoration: underline;*/

  color: #0455A4;

}

a.contact {

  text-decoration: none;

  font-size: .900em;

  padding: 0px;

  display: inline;

}

a.contact:hover {

  text-decoration: underline;

  color: #0455A4;

}

/*a.contact:visited {



  text-decoration: none;



  font-size: .900em;



  padding: 0px;



  display: inline;



}*/

div.post_main {

  font-family: "gotham", sans-serif;

  color: #4D565C;

  font-size: .875em;

  /*padding-top: 1em;*/

}

div.post_time {

  font-family: "gotham", sans-serif;

  color: #808495;

  font-size: .875em;

  padding-top: 0em;

}

div.poster_info {

  font-family: "gotham", sans-serif;

  color: #808495;

  font-size: .750em;

}

span.post_info {

  font-weight: bold;

  font-size: .900em;

}

.not_read {

  font-weight: bold;

  font-size: 100%;

}

a.poster:link {

  text-decoration: none;

  color: #4D565C;

  padding: 0px;

  display: inline;

}

a.poster:hover {

  text-decoration: underline;

}

a.poster:visited {

  text-decoration: none;

  color: #4D565C;

  padding: 0px;

  display: inline;

}

a.post:link {

  text-decoration: none;

  padding: 0px;

  display: inline;

  font-size: 120%;

}

a.post:hover {

  text-decoration: underline;

}

a.post:visited {

  text-decoration: none;

  padding: 0px;

  display: inline;

  font-size: 120%;

}

a.last_post:link {

  text-decoration: none;

  /*color: #404040;*/

  padding: 0px;

  display: inline;

  /*font-weight: bold;*/

}

a.last_post:hover {

  text-decoration: underline;

}

a.last_post:visited {

  text-decoration: none;

  /*color: #404040;*/

  padding: 0px;

  display: inline;

  /*font-weight: bold;*/

}

a.user_tools:link {

  text-decoration: none;

  color: #4D565C;

  padding: 0px;

  display: inline;

}

a.user_tools:hover {

  text-decoration: underline;

}

a.user_tools:visited {

  text-decoration: none;

  color: #4D565C;

  padding: 0px;

  display: inline;

}

a.post_link:link {

  text-decoration: none;

  padding: 0px;

  display: inline;

}

a.post_link:hover {

  text-decoration: underline;

}

a.post_link:visited {

  text-decoration: none;

  padding: 0px;

  display: inline;

}

a.post_tools:link {

  text-decoration: none;

  padding: 0px;

  display: inline;

  color: #4D565C;

  font-size: .875em;

}

a.post_tools:hover {

  text-decoration: underline;

}

a.post_tools:visited {

  text-decoration: none;

  padding: 0px;

  display: inline;

  color: #4D565C;

  font-size: .875em;

}

.active_tool {

  font-weight: bold;

}

a.post_small:link {

  font-size: .750em;

  text-decoration: none;

  padding: 0px;

  display: inline;

}

a.post_small:hover {

  text-decoration: underline;

}

a.post_small:visited {

  font-size: .750em;

  text-decoration: none;

  padding: 0px;

  display: inline;

}

.poster-description {

  color: #8a8a8a;

  font-size: 0.9em;

  line-height: 1.25em;

}

.avatar-image {

  width: 3.125rem;

  height: 3.125rem;

  border-radius: 50%;

  border: 0 solid #cacaca;

  margin-right: 0.9375rem;

}

.avatar-image2 {

  width: 3.125rem;

  height: 3.125rem;

  border-radius: 50%;

  border: 0 solid #cacaca;

  margin-right: 0.9375rem;

}

.avatar-image3 {

  width: 3.125rem;

  height: 3.125rem;

  border-radius: 50%;

  border: 0 solid #cacaca;

  /*margin-right: 0.9375rem;*/

}

.avatar-image4 {

  width: 3.750rem;

}

.avatar-image-small {

  width: 1.75rem;

  height: 1.75rem;

  border-radius: 50%;

  border: 0.0625rem solid #cacaca;

}

.avatar-image-large {

  width: 3.65rem;

  height: 3.65rem;

  border-radius: 50%;

  border: 0.0625rem solid #cacaca;

}

.photo_thumbnail {

  height: 4.688rem;

  object-fit: contain;

}

.image_standard {

  max-height: 17.188rem;

  object-fit: contain;

}

#user_avatar_header {

  background-image: url('../img/tcp_photo/tcp_photo_notuploaded.jpg');

  background-repeat: no-repeat;

  width: 6rem;

  height: 6rem;

  background-size: cover;

  background-position: top center;

  border-radius: 50%;

  margin: auto;

}

#profile_image {

  background-image: url('../img/tcp_photo/tcp_photo_notuploaded.jpg');

  background-repeat: no-repeat;

  width: 9.375rem;

  height: 12.5rem;

  background-size: cover;

  background-position: top center;

  margin: auto;

}

.thumb_image {

  background-image: url('../img/photo/tcp_photo_notuploaded.jpg');

  background-repeat: no-repeat;

  width: 4.688rem;

  height: 4.688rem;

  background-size: cover;

  background-position: top center;

  margin: auto;

  border: solid 4px #fefefe;

  box-shadow: 0 0 0 1px rgb(10 10 10 / 20%);

}

.thumb_image_larger {

  background-image: url('../img/photo/tcp_photo_notuploaded.jpg');

  background-repeat: no-repeat;

  width: 100%;

  height: 14.5rem;

  background-size: cover;

  background-position: center center;

  margin: auto;

  border: solid 4px #fefefe;

  box-shadow: 0 0 0 1px rgb(10 10 10 / 20%);

}

.publication_image_larger {

  background-image: url('../img/magazine/publication_notuploaded.jpg');

  background-repeat: no-repeat;

  width: 100%;

  height: 37.500em;

  background-size: cover;

  background-position: center center;

  margin: auto;

  border: solid 4px #fefefe;

  box-shadow: 0 0 0 1px rgb(10 10 10 / 20%);

}

.logo_thumb {

  height: 3.000em;

  object-fit: contain;

}

.logo_thumb_larger {

  height: 4.250em;

  object-fit: contain;

}

#card_image {

  background-image: url('../img/tcp_photo/tcp_photo_notuploaded.jpg');

  background-repeat: no-repeat;

  width: 12.5rem;

  height: 15.625rem;

  background-size: cover;

  background-position: top center;

  margin: auto;

  border: solid 4px #fefefe;

  box-shadow: 0 0 0 1px rgb(10 10 10 / 20%);

}

#avatar_image {

  background-image: url('../img/tcp_photo/tcp_photo_notuploaded.jpg');

  background-repeat: no-repeat;

  width: 9.375rem;

  height: 12.5rem;

  background-size: cover;

  background-position: top center;

  margin: auto;

}

#user_thumbnail {

  background-image: url('../img/tcp_photo/tcp_photo_notuploaded.jpg');

  background-repeat: no-repeat;

  width: 3.500rem;

  height: 3.500rem;

  background-size: cover;

  background-position: top center;

  margin: auto;

}

#user_avatar_instructor1 {

  background-image: url('../img/avatars/instructor_sample.jpg');

  background-repeat: no-repeat;

  width: 6rem;

  height: 6rem;

  background-size: cover;

  background-position: top center;

  border-radius: 50%;

  margin: auto;

}

#user_avatar_tcpsupport {

  background-image: url('../img/avatars/tcp_support.png');

  background-repeat: no-repeat;

  width: 6rem;

  height: 6rem;

  background-size: cover;

  background-position: top center;

  border-radius: 50%;

  margin: auto;

}

#instructor_photo_small {

  background-image: url('../img/avatars/instructor_sample.jpg');

  background-repeat: no-repeat;

  width: 9.5rem;

  height: 11.5rem;

  background-size: cover;

  background-position: top center;

  /*    border-radius: 50%;*/

  margin: auto;

}

#tcp_photo_small {

  /* background-image: url('../img/tcp_photo/tcp_photo_sample.jpg');*/

  background-repeat: no-repeat;

  width: 9.5rem;

  height: 11.5rem;

  background-size: cover;

  background-position: top center;

  /*    border-radius: 50%;*/

  margin: auto;

}

.container_logo {

  width: 3.438em;

  height: 3.438em;

  display: table-cell;

  vertical-align: middle;

}

/* Resize images */

.container_logo img {

  width: 100%;

  height: auto;

}

.avatar_inpost {

  width: 6rem;

  height: 6rem;

  border-radius: 50%;

  border: 0 solid #cacaca;

}

.avatar_transition {

  -webkit-transition: width .35s; /* Safari */

  transition: width .35s;

}

.container-avatar {

  padding-right: 0.5rem;

}

.dropdown-pane {

  position: absolute;

  z-index: 10;

  width: 90%;

  max-width: 31.250rem;

  padding: 1rem;

  visibility: hidden;

  display: none;

  border: 0px solid #cacaca;

  border-top: .500rem solid #fefefe;

  border-radius: 0;

  background-color: #fefefe;

  font-size: 1rem;

  box-shadow: 3px 3px 18px #cacaca;

}

.dropdown-pane.is-open {

  visibility: visible;

  display: block;

}

.dropdown-pane.tab_pane {

  min-width: 90%;

  max-width: 100%;

  border-top: 0.250rem solid #0D0D0D;

  background-color: #F2F2F3;

  border: 1px solid #707070;

}

.dropdown-pane.tab_pane2 {

  min-width: 96%;

  border-top: 0.250rem solid #0D0D0D;

  /*background-image: url(../img/bkg_page_home3.png);*/

  /*background-repeat: repeat-x;*/

  background-color: #eaeaea;

  border: 1px solid #707070;

}

.nav_tab_container {

  /*min-height: 300px;*/

  max-height: 715px;

  overflow-y: scroll;

}

.nav_tab_container::-webkit-scrollbar {

  width: 8px;

}

/* Track */

.nav_tab_container::-webkit-scrollbar-track {

  background: #F0F0F7;

}

/* Handle */

.nav_tab_container::-webkit-scrollbar-thumb {

  background: #a5a4a4;

}

/* Handle on hover */

.nav_tab_container::-webkit-scrollbar-thumb:hover {

  background: #555;

}

/* Profile Card with Action Icons */

.card_container {

  display: flex;

  flex-flow: row wrap;

}

.card-wrap {

  flex: 0 0 25%;

  display: flex;

  padding: 10px; /* gutter width */

}

.card_container3 {

  display: flex;

  flex-flow: row wrap;

}

.card-wrap3 {

  flex: 0 0 33.33333%;

  display: flex;

  padding: 10px; /* gutter width */

}

.card-wrap2 {

  flex: 0 0 50%;

  display: flex;

  padding: 10px; /* gutter width */

}

.card {

  display: -ms-flexbox;

  display: flex;

  -ms-flex-direction: column;

  flex-direction: column;

  -ms-flex-positive: 1;

  flex-grow: 1;

  margin-bottom: 1rem;

  border: 1px solid #C2C2C2;

  border-radius: 0;

  background: #ffffff;

  overflow: hidden;

  color: #0a0a0a;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;

}

.card_content p {

  padding-top: 0.375em;

  color: rgba(255, 255, 255, 0.8);

  font-size: 1em;

  padding-left: .875em;

  padding-right: .875em;

  font-weight: 500;

}

.card_content h2, .card_content h3, .card_content h4, .card_content h5 {

  font-family: "gotham", sans-serif;

  color: #ffffff;

  margin-bottom: 0;

  padding-left: 0.5em;

  padding-right: 0.5em;

}

.card_red {

  /*background: #8d3042;*/

  border-top: 0.75em solid #782a39;

  background-image: linear-gradient(#782a39, #8d3042);

  padding-bottom: 0.125em;

}

.card_red2 {

  background: #d3414e;

  border-top: 0.75em solid #d3414e;

  padding-bottom: 0.125em;

}

.card_blue {

  /*background: #8d3042;*/

  border-top: 0.75em solid #033b72;

  background-image: linear-gradient(#033b72, #0455A4);

  padding-bottom: 0.125em;

}

.card_orange {

  /*background: #d6560b;*/

  border-top: 0.75em solid #a74106;

  background-image: linear-gradient(#a74106, #d6560b);

  padding-bottom: 0.125em;

}

.card_orange2 {

  background: #ed7d31;

  border-top: 0.75em solid #ed7d31;

  padding-bottom: 0.125em;

}

.card_green {

  /*background: #3b590e;*/

  border-top: 0.75em solid #2d440b;

  background-image: linear-gradient(#2d440b, #3b590e);

  padding-bottom: 0.125em;

}

.card_green2 {

  background: #539633;

  border-top: 0.75em solid #539633;

  padding-bottom: 0.125em;

}

.card_links {

  padding-top: 1em;

}

.callout.card_callout {

  background-color: #202427;

  color: #ffffff;

  font-size: 1.5em;

  font-weight: 700;

  font-family: "gotham", sans-serif;

}

/* Sub-sub menu links */

.card_links .sub_sub_menu a {

  line-height: 1;

}

/* Primary list item container */

.card_links ul.link_card li {

  display: flex;

  align-items: center;

  background-color: rgba(0, 0, 0, 0.1);

  padding: 0.5em;

  margin-bottom: 0.3125em;

}

/* Nested link_card2 items */

.card_links > ul > li > ul.link_card2 > li {

  display: block;

  background-color: rgba(0, 0, 0, 0.1);

  padding: 0;

  margin-bottom: 0.25em;

}

/* Sub-sub menu structure */

.card_links ul.link_card2 ul {

  position: relative;

  display: block;

  width: 100%;

  left: 0;

  padding: 0 0 0.25em 0.25em;

  margin-top: 0;

}

/* Sub-sub menu items */

.card_links ul.link_card2 ul li {

  display: block;

  background-color: transparent;

  padding: 0;

}

/* Optional: accessibility focus style (currently commented out) */

/*

#navOffCanvas a:focus {

    outline: 2px solid #ffffff;

    outline-offset: 2px;

}

*/

.left_nav_card_links .fa-li {

  padding-top: .5em;

}

.left_nav_card_links .number-overlay {

  padding-top: 0.375em;

}

.fa-li {

  position: relative;

  flex-shrink: 0; /* Prevents the icon from shrinking */

}

.number-overlay {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #000000;

  font-size: 1.1em;

  font-family: "gotham", sans-serif;

  font-weight: 700;

  font-style: normal;

  /*padding-left: 1em;*/

  /*padding-right: 0.875em;*/

}

.number-overlay-white {

  color: #ffffff;

}

a.white_list {

  color: rgba(255, 255, 255, 0.7); /* Ensures link color is white */

  font-size: 0.9375em;

  font-weight: 500;

  margin-left: 0.5em; /* Adjust spacing between icon and text */

}

a.white_list:hover {

  color: #ffffff; /* Ensures link color is white */

  text-decoration: none;

}

a.white_list:active {

  color: #ffffff; /* Ensures link color is white */

  text-decoration: none;

  background-color: transparent;

}

a.white_list2 {

  color: rgba(255, 255, 255, 0.7); /* Ensures link color is white */

  font-size: .875em;

  line-height: 1.6;

  font-weight: normal;

  /*padding-right: 2.625em;*/

}

a.white_list2:hover {

  color: #ffffff; /* Ensures link color is white */

  text-decoration: none;

}

a.white_list2:active {

  color: #ffffff; /* Ensures link color is white */

  text-decoration: none;

  background-color: transparent;

  font-weight: bold;

}

.rollover_hover:hover {

  box-shadow: 0 4px 8px 0 rgba(20, 104, 160, 0.3), 0 6px 20px 0 rgba(20, 104, 160, 0.3);

  transform: scale(1.03); /* Adjust the scale value as needed */

  opacity: 1; /* Fully visible */

}

.no_shadows {

  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);

}

div.card1_title {

  background-color: #234A59;

  padding: 1rem;

  color: #ffffff;

  font-weight: bold;

}

div.card2_title {

  background-color: #234A59;

  padding: 1rem;

  color: #ffffff;

  font-weight: bold;

}

.card_minimal {

  display: -ms-flexbox;

  display: flex;

  -ms-flex-direction: column;

  flex-direction: column;

  -ms-flex-positive: 1;

  flex-grow: 1;

  margin-bottom: 1rem;

  border: 0px solid #C2C2C2;

  border-radius: 0;

  background: #ffffff;

  overflow: hidden;

  color: #0a0a0a;

  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);

}

.card_bkg {

  background-image: url("../img/BCCSA_SWOOSHES_light_grey.png");

  background-repeat: no-repeat;

  background-color: #ffffff;

}

.featured_bkg {

  background-image: url("../img/bccsa_swooshes_lightcolour.jpg");

  background-repeat: no-repeat;

  background-color: #ffffff;

}

.text_bkg {

  background-image: url("../img/bccsa_swooshes_lightgrey2.jpg");

  background-repeat: no-repeat;

  background-color: #ffffff;

}

.photo_bkg_featured {

  background-image: url("../img/bccsa_swooshes_featured_image.png");

  background-repeat: no-repeat;

  background-color: transparent;

}

.tab_image {

  float: left;

  /*width: 19.375em;*/

  width: 100%;

  height: 9.375em;

  border-radius: 10px;

  object-fit: contain;

  object-position: 50% 50%;

  padding-bottom: .875em;

}

/*.tab_image:hover {



transform: scale(1.1);



}*/

.tab_header_title {

  padding-left: .750em;

  padding-top: 1.5em;

}

.tab_image2 {

  float: left;

  /*width: 19.375em;*/

  width: 100%;

  height: 12.500em;

  border-radius: 10px;

  object-fit: cover;

  object-position: 50% 50%;

  padding-bottom: .875em;

}

.tab_image_portrait {

  /*float: left;*/

  /*width: 19.375em;*/

  /*width: 100%;*/

  object-fit: cover;

  object-position: 50% 50%;

  height: 12.500em;

}

.logo_height {

  height: 3.125em;

}

.tab_image_background {

  background-position: left;

  /*width: 19.375em;*/

  width: 100%;

  height: 4.438em;

  border-radius: 10px 10px 0px 0px;

  background-image: url("../img/bccsa_swooshes_lightgrey2.jpg");

  background-repeat: no-repeat;

  background-color: #ffffff;

  padding-bottom: 1em;

}

.title_image_background {

  float: left;

  /*width: 19.375em;*/

  width: 100%;

  padding-top: 1em;

  height: 6.55em;

  border-radius: 0px 0px 0px 0px;

  /*background-image: url("../img/bccsa_swooshes_lightcolour.jpg");*/

  /*background-repeat: no-repeat;*/

  background-color: #54656f;

  background-image: linear-gradient(#54656f, #2d383e);

  /*background-color: #ffffff;*/

  padding-bottom: 0px;

}

.program_image_thumbnail {

  padding-left: .750em;

  padding-top: .875em;

  height: 5.438em;

  object-fit: cover;

  object-position: 50% 50%;

}

.program_image_hero_thumbnail {

  padding-left: .750em;

  padding-top: .875em;

  height: 11.563em;

}

.program_image_page {

  /*padding-left: .750em;*/

  /*padding-top: .875em;*/

  height: 5.438em;

  object-fit: cover;

  object-position: 50% 50%;

}

.program_image_certification {

  height: 7.813em;

}

.title_padding {

  padding-left: .625em;

  padding-top: .625em;

  padding-bottom: .325em;

}

.post_image_thumbnail {

  width: 28em;

}

.post_image_thumbnail_smaller {

  width: 16em;

}

.image_caption {

  /*padding-top: 1em;*/

  font-size: 0.875em;

  font-style: italic;

}

.container_image {

  /*float: left;*/

  width: 100%;

  height: 460px;

  object-fit: cover;

  object-position: 0% 50%;

}

.featured_container {

  background-color: #115740;

}

.featured_container iframe {

  border-radius: 0.5rem;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);

}

/* Bottom right text */

.featured_bottom_right {

  position: absolute;

  bottom: 0px;

  right: 0px;

  background-color: transparent;

  width: 50%;

  padding: 1.5em;

  font-size: 0.875em;

}

/* Bottom left text */

.featured_bottom_left {

  position: absolute;

  bottom: 8px;

  left: 16px;

}

/* full overlay */

.featured_overlay {

  width: 50%;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.white_border_top {

  border-top: .500rem solid #ffffff;

}

.card-section-title {

  -ms-flex: 1 0 auto;

  flex: 1 0 auto;

  padding: 1rem;

  padding: 0px 1rem 1rem 1rem;

  vertical-align: top;

}

.cell_minimum_height {

  min-height: 7.000em;

  vertical-align: top;

}

.card-section-title ul li, .card-section-title ol li {

  margin-bottom: 1rem;

}

.card-section-title li > ol {

  margin-top: 0.75rem;

}

.card-section-title-no-bottom-space {

  -ms-flex: 1 0 auto;

  flex: 1 0 auto;

  padding: 1rem;

  padding: 0px 1rem 0px 1rem;

}

.app-store-button {

  display: block;

  padding: 1rem;

  background-color: #f9fafb;

  border: 1px solid #e2e2e3;

  border-radius: 0.75rem;

  text-align: center;

  transition: box-shadow 0.2s ease, transform 0.2s ease;

}

.app-store-button:hover {

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  transform: translateY(-2px);

}

.app-store-button img {

  max-width: 100%;

  height: auto;

}

/* Apple-specific button with black background */

.app-store-button-apple {

  display: block;

  padding: 1rem;

  background-color: #000000;

  border: 1px solid #000000;

  border-radius: 0.75rem;

  text-align: center;

  transition: box-shadow 0.2s ease, transform 0.2s ease;

}

.app-store-button-apple:hover {

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

  transform: translateY(-2px);

}

.app-store-button-apple img {

  max-width: 100%;

  height: auto;

  filter: brightness(1.2); /* optional: improves logo contrast on black */

}

.card-minimum-height {

  min-height: 1em;

  vertical-align: top;

}

.card-minimum-height-larger {

  min-height: 6.875em;

}

.card-minimum-height-smaller {

  min-height: 2.5em;

}

.card-section-bottom {

  -ms-flex: 1 0 auto;

  flex: 1 0 auto;

  padding: 1rem;

  padding: 0px 1rem 1rem 1rem;

  min-height: 4.5em;

  vertical-align: bottom;

}

.card-section-bottom-smaller {

  -ms-flex: 1 0 auto;

  flex: 1 0 auto;

  padding: 1rem;

  padding: 0px 1rem 1rem 1rem;

  min-height: 1.5em;

  vertical-align: bottom;

}

/* When a tab card is hovered */

.tab_card_full a:hover {

  text-decoration: none;

  color: #1a73e8;

}

.tab_links_underline a:hover {

  text-decoration: underline;

  /*background-color: #d5e2fb;*/

}

.tab_card {

  padding: 1.0em;

}

.tab_card p {

  font-size: 0.938em;

}

.card-section-title-no-bottom-space a h5 {

  color: #1e1e1e;

}

.card-section-title-no-bottom-space a:hover h5 {

  color: #0455A4;

}

.tab_card_full a:hover h5 {

  color: #1a73e8;

}

.card-section-title h5 a {

  color: #000000;

}

ul.card_unordered li {

  font-size: 0.938em;

  margin-bottom: 0.625em;

  margin-left: 0.500em;

}

/* Indented in Resources folder description, maybe other managers or areas */

.text_bkg ul li, .text_bkg ol li {

  margin-left: 1em;

}

/* Indented in short description of Resources, maybe other managers or areas */

.gateway-table td ul li, .gateway-table td ol li {

  margin-left: .650em;

}

ul.indented li, ol.indented li {

  margin-left: 1em;

  color: #1e1e1e;

}

ul.indented_more li, ol.indented_more li {

  margin-left: 1.5em;

}

ul.indented_alot_more li, ol.indented_alot_more li {

  margin-left: 2.25em;

}

ol.space_top_bottom, ul.space_top_bottom {

  margin-top: 0.875em;

  margin-bottom: 0.875em;

}

ul.more_space_between li, ol.more_space_between li {

  margin-bottom: 1.5em;

}

ul.little_space_between li, ol.little_space_between li {

  margin-bottom: .750em;

}

ul.very_little_space_between li, ol.very_little_space_between li {

  margin-bottom: .500em;

}

ul.no_space_between li, ol.no_space_between li {

  margin-bottom: 0;

}

.menu.vertical.nested > li:first-child {

  margin-top: .500em; /* Adjust this value as needed */

}

ol > li::marker {

  font-weight: bold;

}

.dropdown-pane.dropdown-pane_dark {

  position: absolute;

  /*z-index: 1;*/

  width: 100%;

  border-top: .500rem solid #1e1e1e;

  background-color: #1e1e1e;

}

.dropdown-pane.arrow-top {

  margin-top: 80px;

}

.dropdown-pane.arrow-top:after {

  content: " ";

  position: absolute;

  right: 13px;

  top: -14px;

  border-top: none;

  border-right: 10px solid transparent;

  border-left: 10px solid transparent;

  border-bottom: 10px solid #fefefe;

  /*box-shadow: 5px 5px 18px #cacaca;*/

}

.dropdown-pane-smaller {

  width: 150px;

}

a.main_dropdown:link {

  text-decoration: none;

  color: #363636;

  font-weight: bold;

  display: inline;

  font-size: .875em;

}

a.main_dropdown:hover {

  text-decoration: none;

  color: #4968A9;

}

a.main_dropdown:visited {

  text-decoration: none;

  color: #4D565C;

  display: inline;

  font-size: .875em;

}

/*







=============================================== 04. CONTENT STYLES ===============================================







*/

.bold {

  font-weight: bold;

}

.bold_more {

  font-weight: 900;

}

.medium_bold {

  color: #000000;

}

.italics {

  font-style: italic;

}

.uppercase_text {

  text-transform: uppercase;

}

.transparent {

  opacity: 0.0;

  filter: alpha(opacity=0); /* For IE8 and earlier */

}

.larger_text {

  font-size: 2em;

}

.larger_text2 {

  font-size: 1.25em;

  outline: none; /* Removes the focus outline if it's present */

}

/* -------------------- A. HEADERS, PARAGRAPHS, BODY -------------------- */

body {

  margin-top: 0;

  padding: 0;

  background: #ffffff;

  font-family: "gotham", sans-serif;

  font-weight: normal;

  line-height: 1.5;

  color: #1e1e1e;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  overflow-x: hidden;

  /*background-image: url("../img/bg.jpg");*/

  /*background-repeat: no-repeat;*/

}







html, body {

  overflow-x: hidden;

}

@media screen and (max-width: 63.9375em) { /* Up to medium (Foundation's breakpoint) */

  .off-canvas.position-left {

    width: 100vw; /* full screen width */

    transform: translateX(-100vw); /* hide it off screen initially */

  }

  .off-canvas.position-left.is-open {

    transform: translateX(0); /* bring it into view */

  }

}

.js-off-canvas-overlay.is-visible {

  opacity: 1;

  visibility: visible;

}

.off-canvas-content {

  padding-top: 102px; /* exactly matches your header height */

}

p {

  font-family: "gotham", sans-serif;

  color: #1e1e1e;

  font-size: 1.000em;

}

p.subdued {

  font-size: 0.875em;

  color: #8a8a8a;

}

p.subhead::first-letter {

  font-family: 'Times New Roman', serif;

  font-size: 200%;

  color: #667079;

  line-height: 0;

}

.lead_dark {

  font-family: "gotham", sans-serif;

  font-size: 1.15em;

  line-height: 1.6;

  color: #000000;

  font-weight: 500;

  margin-bottom: 1em;

}

.lead_dark_larger {

  font-family: "gotham", sans-serif;

  font-size: 1.25em;

  line-height: 1.6;

  color: #000000;

  font-weight: 600;

  margin-bottom: 1em;

}

.lead {

  font-family: "gotham", sans-serif;

  font-size: 1.25em;

  line-height: 1.6;

  color: #ffffff;

  font-weight: 700;

  margin-bottom: 1em;

}

.lead a {

  font-family: "gotham", sans-serif;

  color: #c9c0bf;

  text-decoration: none;

  font-weight: 500;

}

.lead a:hover {

  font-family: "gotham", sans-serif;

  color: #ffffff;

  text-decoration: underline;

}

h1 {

  font-family: "gotham", sans-serif;

  font-weight: 900;

  color: #212121;

  /* line-height: 1.125em; */

}

h2, h3, h4, h5, h6 {

  font-family: "gotham", sans-serif;

  font-style: normal;

  font-weight: 900;

  color: #212121;

  line-height: 1.375em;

  padding-bottom: .250em;

}

h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h4 small, .h4 small, h5 small, .h5 small, h6 small, .h6 small {

  line-height: 0;

  color: #212121;

}

h1.alternate, h2.alternate, h3.alternate, h4.alternate, h5.alternate, h6.alternate {

  font-family: "gotham", sans-serif;

  font-weight: 700;

  font-style: normal;

  padding-bottom: 0.375em;

}

h1.hero, h2.hero, h3.hero, h4.hero, h5.hero, h6.hero {

  font-family: "gotham", sans-serif;

  font-weight: 900;

  font-style: normal;

  color: #d8e6e1;

  padding-bottom: 0.375em;

}

.hero_text {

  color: #d8e6e1;

  font-size: 1.125em;

  line-height: 1.6;

}

.hero_button {

  background: #cb9731;

  color: #f1f5f4;

}

.hero_button:hover {

  background: #b58029;

  color: #f1f5f4;

}

.hero-image-rounded {

  /*border-top: 14px solid #115740;*/ /* Top green border */

  /*border-bottom: 14px solid #115740;*/ /* Bottom green border */

  border-right: none; /* Optional: avoid right border */

  border-left: none;

  border-top-right-radius: 1.5rem;

  border-bottom-right-radius: 1.5rem;

  border-top-left-radius: 0;

  border-bottom-left-radius: 0;

  overflow: hidden;

  display: block;

  width: 100%;

  height: auto;

}

p.alternate {

  font-family: "gotham", sans-serif;

  font-weight: 400;

  font-style: normal;

}

h1.white_text, h2.white_text, h3.white_text, h4.white_text, h5.white_text, h6.white_text, p.white_text, span.white_text {

  color: #ffffff;

}

ul.white_text {

  color: #ffffff;

}

ul.white_text li a {

  font-family: "gotham", sans-serif;

  color: #c9c0bf;

  text-decoration: none;

  font-weight: 500;

}

ul.white_text li a:hover {

  font-family: "gotham", sans-serif;

  color: #ffffff;

  text-decoration: underline;

}

h1.grey_text, h2.grey_text, h3.grey_text, h4.grey_text, h5.grey_text, h6.grey_text, p.grey_text, div.grey_text {

  color: #5b6771;

}

h1.dark_grey_text, h2.dark_grey_text, h3.dark_grey_text, h4.dark_grey_text, h5.dark_grey_text, h6.dark_grey_text, p.dark_grey_text {

  color: #828990;

}

h1.light_grey_text, h2.light_grey_text, h3.light_grey_text, h4.light_grey_text, h5.light_grey_text, h6.light_grey_text, p.light_grey_text {

  color: rgba(255, 255, 255, 0.7);

}

h1.blue_text, h2.blue_text, h3.blue_text, h4.blue_text, h5.blue_text, h6.blue_text, p.blue_text {

  color: #6e81a9;

}

h1.condensed, h2.condensed, h3.condensed, h4.condensed, h5.condensed, h6.condensed, p.condensed {

  color: #ffffff;

  font-family: "gotham", sans-serif;

  font-weight: 700;

  font-style: normal;

}

h1.no_bold, h2.no_bold, h3.no_bold, h4.no_bold, h5.no_bold, h6.no_bold, p.no_bold {

  font-weight: 400;

}

h1.highlight, h2.highlight, h3.highlight, h4.highlight, h5.highlight, h6.highlight, p.highlight {

  font-weight: 900;

  color: #000000;

  padding-top: 0em;

  padding-bottom: 0em;

}

p.small_text_no_padding {

  font-size: 85.0%;

  padding: 0px;

}

p.small_text_footer {

  font-size: 85.0%;

}

p.card_description_listing, div.card_description_listing {

  font-size: 0.813em;

  color: #6d7c88;

}

ul.small_text_footer li {

  font-size: 0.813em;

}

ul.small_text_footer li.larger_text {

  font-size: 1.000em;

}

p.small_text_footer2 {

  font-size: 0.813em;

}

p.smallest_text {

  font-size: 85.0%;

}

h1.less_space, h2.less_space, h3.less_space, h4.less_space, h5.less_space, h6.less_space {

  margin-bottom: 0em;

  line-height: 0.650em;

}

p.less_space {

  margin-bottom: .750em;

  line-height: 1.45em;

}

h1.medium_space, h2.medium_space, h3.medium_space, h4.medium_space, h5.medium_space, h6.medium_space, p.medium_space {

  margin-bottom: 0em;

  line-height: 1.125em;

}

h1.lesser_space, h2.lesser_space, h3.lesser_space, h4.lesser_space, h5.lesser_space, h6.lesser_space, p.lesser_space {

  margin-bottom: 0em;

  line-height: 0.150em;

}

h1.more_space, h2.more_space, h3.more_space, h4.more_space, h5.more_space, h6.more_space {

  padding-bottom: 0.500em;

}

h1.more_space_top, h2.more_space_top, h3.more_space_top, h4.more_space_top, h5.more_space_top, h6.more_space_top, p.more_space_top {

  padding-top: 0.750em;

}

h1.more_space_top_little, h2.more_space_top_little, h3.more_space_top_little, h4.more_space_top_little, h5.more_space_top_little, h6.more_space_top_little, p.more_space_top_little {

  padding-top: 0.250em;

}

h1.more_space_top_medium, h2.more_space_top_medium, h3.more_space_top_medium, h4.more_space_top_medium, h5.more_space_top_medium, h6.more_space_top_medium, p.more_space_top_medium {

  padding-top: 0.475em;

}

div.more_space_top_medium {

  padding-top: 0.475em;

}

h1.more_space_top_little_bottom_none, h2.more_space_top_little_bottom_none, h3.more_space_top_little_bottom_none, h4.more_space_top_little_bottom_none, h5.more_space_top_little_bottom_none, h6.more_space_top_little_bottom_none, p.more_space_top_little_bottom_none {

  padding-top: 0.250em;

  padding-bottom: 0em;

}

h1.footer, h2.footer, h3.footer, h4.footer, h5.footer, h6.footer, p.footer {

  font-family: "gotham", sans-serif;

  font-weight: bold;

  font-size: 85%; /* text-transform: uppercase; */

}

blockquote, blockquote p {

  font-family: "gotham", sans-serif;

  font-size: 1.125em;

  font-style: normal;

  /*width: 500px;*/

  /*margin: 0.25em 0;*/

  /*padding: 0.35em 40px;*/

  line-height: 1.55;

  position: relative;

  color: #ffffff;

  border-left: 0px solid #cacaca;

}

blockquote.post, blockquote.post p {

  color: #8a8a8a;

  font-size: .938em;

  font-family: "gotham", sans-serif;

  font-weight: normal;

  margin: 0.25em 0;

  padding: 0.35em 12px;

  line-height: 1.55;

  position: relative;

}

/*blockquote {



  margin: 1.5rem 0 .5rem;



  padding: 0 1rem 0 1rem;



  border-left: 0px solid #c6c7c9;



}*/

blockquote:before {

  display: block;

  padding-left: .625em;

  content: "\201C";

  font-size: 5.000em;

  position: absolute;

  left: -.875em;

  top: -.395em;

  color: #ffffff;

}

blockquote cite {

  color: #ffffff;

  font-family: "gotham", sans-serif;

  font-size: .750em;

  display: block;

  margin-top: 1em;

  margin-bottom: 2.75em;

  font-style: normal;

}

blockquote cite:before {

  content: "\2014 \2009";

}

cite2 {

  display: block;

  font-size: 1.000rem;

  color: #384656;

  padding-left: 0.625em;

  padding-top: 0.625em;

  font-style: italic;

}

/* -------------------- B. LISTS -------------------- */

.no-bullet-on-small-medium {

  list-style-type: none;

}

@media screen and (min-width: 64em) {

  /* 64em is Foundation's default breakpoint for 'large' */

  .no-bullet-on-small-medium {

    list-style-type: disc; /* Restore bullets on large and above */

  }

}

ul.indented ul {

  list-style-type: circle;

}

article ul li {

  margin-left: 0.938em;

}

#filter a {

  color: #1e1e1e;

}

#filter .filteractive:hover {

  color: #1e1e1e;

  font-weight: bold;

}

.content_area li {

  margin-left: 0.938em;

}

ul.content_area_breadcrumb li {

  margin-left: -2.0em;

}

ul.content_area_breadcrumb2 li {

  margin-left: 0;

}

ul.small_ul {

  font-size: 85%;

  font-weight: normal;

  color: #e2e1e1;

  line-height: 150%;

}

ul.small_ul2 {

  padding-top: .750em;

  font-size: 90%;

  font-weight: normal;

  line-height: 150%;

}

ul.more_space_top_list, ol.more_space_top_list {

  padding-top: .750em;

}

ul.callout_details li {

  font-size: 0.875em;

  font-weight: normal;

  color: #1e1e1e;

}

.stat {

  font-size: 1.250rem;

  line-height: 1;

  font-weight: bold;

  padding-top: .200em;

  padding-bottom: .500em;

  color: #1e1e1e;

}





.breadcrumbs-wrap {

padding-top: .875em;

}



.breadcrumbs li {

  float: left;

  font-size: 0.875rem;

  color: #333333;

  cursor: default;

  text-transform: none;

}

/*#menu-outer {



	height: 84px;



	background: url(images/bar-bg.jpg) repeat-x;







}*/

.table_horizontal_list {

  display: table; /* Allow the centering to work */

  margin: 0 auto;

}

ul#horizontal-list {

  list-style: none;

}

ul#horizontal-list li {

  display: inline;

  padding: .75rem 1rem;

  font-size: 0.875rem;

}

/* -------------------- C. TABS AND ACCORDIONS -------------------- */

/*.submenu-toggle {

  position: absolute;

  top: 0.25em;

  right: 0;

  cursor: pointer;

  width: 30px;

  height: 30px;

  border-color: rgba(255, 255, 255, 0.5);

}*/

/*.submenu-toggle::after {

  display: block;

  width: 0;

  height: 0;

  border: inset 5px;

  content: '';

  border-bottom-width: 0;

  border-top-style: solid;

  border-color: rgba(255, 255, 255, 0.5) transparent transparent;

  top: 0;

  bottom: 0;

  margin: auto;

}*/

/* Add this CSS rule to change the cursor for links with href="#" */

.card_links .vertical.menu a[href="#"] {

  cursor: text;

}

.faq_title {

  font-size: 1.125rem;

  line-height: 1.5rem;

  color: #202124;

  /*font-weight: bold;*/

  padding-right: 1.75em;

}

.faq_title:hover, .faq_title:focus {

  background-color: #d33f4d;

  color: #ffffff;

  text-decoration: none;

}

/* ---------- TABS ---------- */

.tabs {

  margin: 0;

  padding: 0;

  border: none;

  background: transparent;

  list-style-type: none;

  display: flex;

  gap: 0.25rem;

  flex-wrap: wrap; /* allow wrapping on smaller screens */

}



.tabs-title {

  margin: 0;

}



.tabs-title > a {

  display: block;

  font-family: "gotham", sans-serif;

  font-weight: 700;

  font-style: normal;

  font-size: 0.875rem;

  line-height: 1.4;

  padding: 0.6em 1.25em;

  border-radius: 0.4em 0.4em 0 0;

  background: #f1f5f4;

  color: #135784;

  text-decoration: none;

  transition: all 0.2s ease;

}



.tabs-title > a:hover {

  background: #b2d2b3;

  color: #000000;

  text-decoration: none;

}



.tabs-title > a:focus,

.tabs-title > a[aria-selected='true'] {

  background: #428a77;

  color: #ffffff;

}



.tabs-content {

  border: 1px solid #f1f5f4;

  border-left: 6px solid #428a77;

  border-radius: 0 0 0.4em 0.4em;

  background: #ffffff;

  padding: 1.25rem;

}



.tabs-panel {

  display: none;

}



.tabs-panel.is-active {

  display: block;

}



/* Responsive adjustments */

@media (max-width: 768px) {

  .tabs {

    flex-direction: column;

    gap: 0;

  }



  .tabs-title > a {

    border-radius: 0.4em;

    margin-bottom: 0.25rem;

  }



  .tabs-content {

    border-radius: 0.4em;

    border-top: 6px solid #3ca56a; /* move green bar to top for mobile */

    border-right: 1px solid #d0d0d0;

  }

}





/* -------------------- D. DROPDOWNS -------------------- */

/* -------------------- E. TABLES -------------------- */

/* Clinic Supplies Table Style */

.clinic-supply-table {

  border-collapse: collapse;

  width: 100%;

  border: 1px solid #e2e2e3;

  font-size: 0.95rem;

}

.clinic-supply-table th {

  background-color: #f9fafb; /* Header background */

  border: 1px solid #e2e2e3;

  padding: 0.75rem;

  text-align: left;

  font-weight: 600;

}

.clinic-supply-table td {

  border: 1px solid #e2e2e3;

  padding: 0.75rem;

}

.clinic-supply-table tbody tr:nth-child(even) {

  background-color: #f9fafb; /* Grey striped rows */

}

.clinic-supply-table tbody tr:nth-child(odd) {

  background-color: #ffffff; /* White rows */

}

.risk-matrix {

  width: 100%;

  border-collapse: collapse;

  text-align: center;

}

.risk-matrix th, .risk-matrix td {

  border: 1px solid black;

  padding: 15px;

  font-weight: bold;

  text-align: center;

}

.risk-matrix thead th {

  background-color: #f2f2f2;

}

.risk-matrix tfoot th {

  background-color: #f2f2f2;

  font-size: 16px;

  text-align: center;

}

.risk-matrix td.text-field {

  font-weight: normal;

  font-size: .875em;

}

.risk-matrix td.insignificant-risk {

  background-color: #b4e580;

  font-family: "gotham", sans-serif;

  font-size: 1.25em;

}

.risk-matrix td.very-low-risk {

  background-color: #92d050; /* Light Green */

  font-family: "gotham", sans-serif;

  font-size: 1.25em;

}

.risk-matrix td.low-risk {

  background-color: green;

  color: white;

  font-family: "gotham", sans-serif;

  font-size: 1.25em;

}

.risk-matrix td.low-risk-alternate {

  background-color: #6f7833;

  color: white;

  font-family: "gotham", sans-serif;

  font-size: 1.25em;

}

.risk-matrix td.medium-risk {

  background-color: #ffc000;

  font-family: "gotham", sans-serif;

  font-size: 1.25em;

}

.risk-matrix td.medium-risk-alternate {

  background-color: #e8a24d;

  font-family: "gotham", sans-serif;

  font-size: 1.25em;

}

.risk-matrix td.high-risk {

  background-color: #ed7d31;

  color: white;

  font-family: "gotham", sans-serif;

  font-size: 1.25em;

}

.risk-matrix td.high-risk-alternate {

  background-color: red;

  color: white;

  font-family: "gotham", sans-serif;

  font-size: 1.25em;

}

.risk-matrix td.very-high-risk {

  background-color: #FF4500;

  color: white;

  font-family: "gotham", sans-serif;

  font-size: 1.25em;

}

.risk-matrix td.extreme-risk {

  background-color: #FF0000;

  color: white;

  font-family: "gotham", sans-serif;

  font-size: 1.25em;

}

.risk-matrix th.white-cell {

  background-color: white;

}

.risk-matrix div.table-subtitle {

  font-weight: normal;

  font-size: .875em;

}

.more_space_little .risk_table {

  margin-top: 1.5em;

  margin-bottom: 1.5em;

}

.risk_table table {

  width: 100%;

  border-collapse: collapse;

}

.risk_table th, .risk_table td {

  border: 1px solid black;

  text-align: center;

  padding: 8px;

}

.risk_table th {

  background-color: #f2f2f2;

}

.risk_table .extreme-risk, .extreme-risk-title {

  background-color: #FF0000;

  color: white;

  text-transform: uppercase;

}

.risk_table .very-high-risk, .very-high-risk-title {

  background-color: #FF4500;

  color: white;

  text-transform: uppercase;

}

.risk_table .critical-risk, .critical-risk-title {

  background-color: #FF0000;

  color: white;

  text-transform: uppercase;

}

.risk_table .high-risk, .high-risk-title {

  background-color: #ed7d31;

  color: white;

  text-transform: uppercase;

}

.risk_table .medium-risk, .medium-risk-title {

  background-color: #ffc000;

  text-transform: uppercase;

}

.risk_table .low-risk, .low-risk-title {

  background-color: green;

  color: white;

  text-transform: uppercase;

}

.risk_table .negligible-risk, .negligible-risk-title {

  background-color: #92d050;

  text-transform: uppercase;

}

.risk-title-padding {

  padding-left: .875em;

  padding-right: .875em;

}

/*.dataTables_wrapper .dataTables_paginate .paginate_button:hover {

    color: #0455A4 !important;

    background-color: #f5f5f5;

}*/

.tablesorter-default .header, .tablesorter-default .tablesorter-header {

  background-image: url("../css/tablesorter/images/black-unsorted.gif");

  background-position: 90% 45%;

  background-repeat: no-repeat;

  cursor: pointer;

}

.tablesorter-default thead .headerSortUp, .tablesorter-default thead .tablesorter-headerAsc, .tablesorter-default thead .tablesorter-headerSortUp {

  background-image: url(../css/tablesorter/images/black-asc.gif);

  background-position: 90% 45%;

  border-bottom: #838282 4px solid;

}

.tablesorter-default thead .headerSortDown, .tablesorter-default thead .tablesorter-headerDesc, .tablesorter-default thead .tablesorter-headerSortDown {

  background-image: url(../css/tablesorter/images/black-desc.gif);

  background-position: 90% 45%;

  border-bottom: #838282 4px solid

}

.tablesorter-default thead .sorter-false {

  background-image: none;

  cursor: default;

}

/*table.hover tbody tr:hover {



  background-color: #FFF3D9;



}*/

table.form-table {

  width: 100%;

}

table.gateway-table {

  width: 100%;

  /*table-layout: fixed;*/

  /*overflow-wrap: break-word;*/

}

.gateway-table.unstriped tbody {

  background-color: transparent;

}

.gateway-table th {

  background-color: #4c565f;

}

.gateway-table th a {

  color: #a4bce7;

}

.gateway-table th a:hover, .gateway-table th a:focus {

  color: #ffffff;

}

.gateway-table tfoot {

  background-color: #ffffff;

}

.gateway-table tfoot td {

  padding-top: 1rem;

  color: #7e7e7e;

}

.gateway-table th [type='checkbox'], .gateway-table td [type='checkbox'] {

  margin-top: 1rem;

}

/*.gateway-table th.more_space_top {



  padding-top: 2.000em;



}*/

.gateway-table th {

  border: 1px solid #737f8e;

  color: #ffffff;

}

.gateway-table th.minwidth {

  min-width: 150px;

}

.gateway-table tr, .gateway-table td {

  border: 1px solid #e0e0e0;

}

.gateway-table tbody th, .gateway-table tbody td {

  padding: 0.875rem 0.625rem 0.750rem 0.750rem;

}

.gateway-table tr.grey_cell {

  background-color: #f7f7f7;

  border-bottom: 0.375em solid #f1f1f3;

}

.gateway-table tr.grey_cell_border_top {

  background-color: #f7f7f7;

  border-top: 0.375em solid #f1f1f3;

}

#UserTable td {

  vertical-align: top;

}

#UserTable2 td {

  vertical-align: top;

}

.gateway-table th [type='checkbox'], .gateway-table td [type='checkbox'] {

  margin-top: 1rem;

}

.course_space {

  color: green;

}

.gateway-table2 th, .gateway-table2 td {

  vertical-align: top;

}

.gateway-table2 th.grey, .gateway-table2 td.grey, .gateway-table td.grey {

  background-color: #f9f9f9;

}

.gateway-table2 th {

  padding-top: 0.875rem;

}

.gateway-table3 th, .gateway-table3 td {

  vertical-align: top;

  background-color: #F0F0F7;

  border-bottom: 1px solid #ffffff;

}

.gateway-table3 th.grey, .gateway-table3 td.grey {

  background-color: #f1f1f1;

}

.gateway-table3 th {

  padding-top: 0.875rem;

}

.gateway-table4 th, .gateway-table4 td {

  vertical-align: top;

  background-color: #F0F0F7;

  border-bottom: 1px solid #ffffff;

  font-size: 0.813rem;

}

.gateway-table4 th.grey, .gateway-table4 td.grey {

  background-color: #f1f1f1;

}

.gateway-table4 th {

  padding-top: 0.750rem;

}

.cell_description {

  color: #808495;

}

.responsive-card-table {

  border-collapse: collapse;

}

.responsive-card-table.unstriped tbody {

  background-color: transparent;

}

.responsive-card-table th {

  background-color: #373737;

}

.responsive-card-table th {

  border: 1px solid #535252;

  color: #ffffff;

}

.responsive-card-table tr, .responsive-card-table td {

  border: 1px solid #F1F1F3;

}

/*.responsive-card-table tbody th, table tbody td {



  padding: 0.875rem 0.625rem 0.750rem 0.750rem;



}*/

.responsive-card-table td.status_pending {

  background-color: #8E24AA;

  color: #ffffff;

  text-transform: uppercase;

}

.responsive-card-table td.status_approved {

  background-color: #539633;

  color: #ffffff;

  text-transform: uppercase;

}

.responsive-card-table td.status_completed {

  background-color: #539633;

  color: #ffffff;

  text-transform: uppercase;

}

.responsive-card-table td.status_overdue {

  background-color: #d3414e;

  color: #ffffff;

  text-transform: uppercase;

}

.responsive-card-table td.status_active2day {

  background-color: #2196f3;

  color: #ffffff;

  text-transform: uppercase;

}

.responsive-card-table td.status_active1day {

  background-color: #D5962A;

  color: #ffffff;

  text-transform: uppercase;

}

.responsive-card-table td.status_inactive_course {

  background-color: #fcff31;

  color: #ffffff;

  text-transform: uppercase;

}

@media screen and (max-width: 845px) {

  .responsive-card-table {}

  .responsive-card-table thead tr {

    position: absolute;

    top: -9999em;

    left: -9999em;

  }

  .responsive-card-table tr {

    border: 1px solid #F1F1F3;

    display: block;

  }

  .responsive-card-table tr + tr {

    margin-top: 1.5rem;

  }

  .responsive-card-table td {

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-justify-content: flex-start;

    -ms-flex-pack: start;

    justify-content: flex-start;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    border-bottom: 1px solid #f0f0f7;

    border-top: 1px solid #f0f0f7;

    border-right: 1px solid #f0f0f7;

    border-left: 1px solid #f0f0f7;

    padding-left: 50%;

    position: relative;

  }

  .responsive-card-table td:before {

    content: attr(data-label);

    display: inline-block;

    font-weight: bold;

    line-height: 1.5;

    margin-left: -100%;

    width: 100%;

    position: relative;

    z-index: 1;

    color: #373737;

    word-wrap: break-word;

  }

  .responsive-card-table td:after {

    content: '';

    position: absolute;

    /*background: #e6e6e6;*/

    width: 25%;

    height: 95%;

    left: 1px;

    top: 1px;

    z-index: 0;

  }

}

.gateway table {

  background: #ffffff;

  margin-bottom: 1.25rem;

  border-left: solid 0 #dddddd;

  border-right: solid 0 #dddddd;

  border-bottom: solid 1px #dddddd;

  border-top: solid 0 #dddddd;

  table-layout: auto;

}

.gateway table thead, .gateway table tfoot {

  background: #373737;

}

.gateway table thead tr th, .gateway table thead tr td, .gateway table tfoot tr th, .gateway table tfoot tr td {

  padding: 0.750rem 0 0.750rem 0.750rem;

  font-size: 0.750rem;

  font-family: "gotham", sans-serif;

  font-weight: 700;

  font-style: normal;

  color: #ffffff;

  text-align: left;

}

.gateway td.smaller {

  font-size: 0.75rem;

}

.gateway table tr th, .gateway table tr td {

  padding: 0.750rem 0 0.750rem 0.750rem;

  font-size: 0.750rem;

  text-align: left;

  color: #384656;

}

.gateway table ul li {

  font-size: 0.750rem;

}

a.tables {

  font-family: "gotham", sans-serif;

}

a.tables:visited {

  font-family: "gotham", sans-serif;

}

a.tables:hover {

  font-family: "gotham", sans-serif;

}

.bccsa_grey_tabletitle {

  background: #646e71;

  color: #ffffff;

  font-weight: bold;

}

.bccsa_black_tabletitle {

  background: #373737;

  color: #ffffff;

  font-weight: bold;

}

.gateway td.white {

  background: #ffffff;

  text-align: center;

}

.gateway th.white {

  background: #ffffff;

  text-align: center;

}

.gateway th.small_text {

  font-size: 75%;

  font-weight: normal;

}

/* -------------------- F. HYPERLINKS -------------------- */

.social-icons a {

  font-family: "gotham", sans-serif;

  color: #ffffff;

}

.social-icons a:hover {

  color: #aadbd0;

  text-decoration: none;

}

.social-icons a i {

  transition: transform 0.2s ease;

}

.social-icons a:hover i {

  transform: scale(1.2);

}

a.face {

  font-family: "gotham", sans-serif;

  color: #ffffff;

}

a.face:hover {

  color: #aadbd0;

  text-decoration: none;

}

a.guide_titles {

  color: #ffffff;

  font-family: "gotham", sans-serif;

  font-weight: 500;

}

a.guide_titles:hover {

  color: #C9C5C6;

  text-decoration: none;

}

a.face2 {

  font-family: "gotham", sans-serif;

  color: #1878f1;

}

a.face2:hover {

  color: #1161c6;

  text-decoration: none;

}

a.twit {

  font-family: "gotham", sans-serif;

  color: #737c84;

}

a.twit:hover {

  color: #595e62;

  text-decoration: none;

}

a.twit2 {

  font-family: "gotham", sans-serif;

  color: #2aa4ef;

}

a.twit2:hover {

  color: #2182be;

  text-decoration: none;

}

a.yout {

  font-family: "gotham", sans-serif;

  color: #737c84;

}

a.yout:hover {

  color: #595e62;

  text-decoration: none;

}

a.linkedn {

  font-family: "gotham", sans-serif;

  color: #737c84;

}

a.linkedn:hover {

  color: #595e62;

  text-decoration: none;

}

a.mail {

  font-family: "gotham", sans-serif;

  color: #e47b35;

}

a.mail:hover {

  color: #c1672b;

  text-decoration: none;

}

a.title {

  color: #000000;

  font-family: "gotham", sans-serif;

}

a.title:hover {

  color: #0455A4;

  text-decoration: none;

}

a.title_alternate {

  color: #000000;

  font-family: "gotham", sans-serif;

}

a.title_alternate:hover {

  color: #0455A4;

  text-decoration: none;

}

.breadcrumbs a {

  color: #4968a9;

}

a {

  font-family: "gotham", sans-serif;

  font-size: 1.000em;

  color: #0455A4;

  text-decoration: none;

}

a:visited {

  text-decoration: none;

}

a:hover {

  color: #4968a9;

  text-decoration: underline;

}

a.regular {

  color: #4968a9;

}

a.regular:visited {

  text-decoration: none;

}

a.regular:hover {

  color: #4968a9;

}

a.bold {

  font-weight: bold;

}

a.faq:active {

  text-decoration: none;

  font-weight: bold;

  color: #384656;

}

a.faq[tabindex]:focus {

  text-decoration: none;

  font-weight: bold;

  color: #384656;

  outline: none;

}

a.faq_selected {

  text-decoration: none;

  font-weight: bold;

  color: #384656;

}

a.header_links {

  font-size: 1.1em;

  font-family: "gotham", sans-serif;

  font-weight: bold;

  color: #4c565f;

}

a.header_links:hover {

  text-decoration: none;

  color: #5379BD;

}

.user_name_header_padding {

  padding-top: 1.50em;

}

a.user_name_header {

  font-size: .875em;

  font-weight: bold;

  color: #4A5259;

}

a.user_name_header:hover {

  text-decoration: none;

  color: #5E6871;

}

/*a.user_name_header:visited {







    font-weight: bold;







    color: #f26722;







}*/

a.highlight_link:link {

  font-weight: normal;

  color: #f26722;

}

a.highlight_link:hover {

  text-decoration: underline;

  font-weight: normal;

  color: #f26722;

}

a.highlight_link:visited {

  font-weight: normal;

  color: #f26722;

}

.cert-badge {

  max-width: 150px;

  height: auto;

  margin: 1em 0;

}

.footer-links {

  font-size: 0.85rem; /* Smaller text */

  line-height: 1.4;

  color: #ccc; /* Optional base text color */

}

.footer-links a {

  color: #8bc34a;

  text-decoration: none;

  transition: color 0.2s ease;

}

.footer-links a:hover {

  color: #ffffff;

  text-decoration: none;

}

a.top_header_links:link {

  color: #C9C5C6;

  font-size: 0.813em;

  font-weight: 500;

  text-decoration: none;

}

a.top_header_links:hover {

  color: #FFFFFF;

  font-size: 0.813em;

  font-weight: 500;

  text-decoration: underline;

}

a.top_header_links:visited {

  color: #C9C5C6;

  font-size: 0.813em;

  font-weight: 500;

  text-decoration: none;

}

a.small_links:link {

  font-size: 80.0%;

  text-decoration: none;

}

a.small_links:hover {

  text-decoration: underline;

}

a.small_links:visited {

  font-size: 80.0%;

  text-decoration: none;

}

a.small:link {

  font-size: 85.0%;

  text-decoration: none;

}

a.small:hover {

  font-size: 85.0%;

  text-decoration: none;

  color: #eeebeb;

}

a.small:visited {

  font-size: 85.0%;

  text-decoration: none;

}

a.small2:link {

  font-size: .750em;

  text-decoration: none;

  font-weight: normal;

}

a.small2:hover {

  font-size: .750em;

  text-decoration: none;

  color: #eeebeb;

  font-weight: normal;

}

a.small2:visited {

  font-size: .750em;

  text-decoration: none;

  font-weight: normal;

}

a.small3 {

  font-size: .750em;

  text-decoration: none;

  font-weight: normal;

}

a.small3:hover {

  font-size: .750em;

  text-decoration: underline;

  font-weight: normal;

}

a.small_header_tool:link {

  font-size: .688em;

  text-decoration: none;

  font-weight: normal;

}

a.small_header_tool:hover {

  font-size: .688em;

  text-decoration: none;

  color: #667079;

  font-weight: normal;

}

a.small_header_tool:visited {

  font-size: .688em;

  text-decoration: none;

  font-weight: normal;

}

a.footer_link:link {

  font-family: arial, sans-serif;

  font-weight: bold;

  color: #4d4d4d;

}

a.footer_link:hover {

  text-decoration: underline;

  font-family: arial, sans-serif;

  font-weight: bold;

  color: #4d4d4d;

}

a.footer_link:visited {

  font-family: arial, sans-serif;

  font-weight: bold;

  color: #4d4d4d;

}

a.light_blue {

  color: #5178bc;

}

a.light_blue:hover {

  color: #ffffff;

  text-decoration: none;

}

a.light_green {

  color: #aadbd0;

  text-decoration: none;

}

a.light_green:hover {

  color: #ffffff;

}

a.grey_link {

  color: #667079;

}

a.grey_link:hover {

  color: #484F55;

  text-decoration: underline;

}

/*a.light_blue:visited {



  color: #5178bc;



}*/

a.light_blue_lighter {

  color: #6399f7;

}

a.light_blue_lighter:hover {

  color: #ffffff;

  text-decoration: none;

}

a.white {

  color: #ffffff;

}

a.white:hover {

  color: #eeebeb;

}

a.blue_link:link {

  color: #6f9fc8;

}

a.blue_link:hover {

  color: #587fa0;

}

a.blue_link:visited {

  color: #6f9fc8;

}

/* -------------------- G. LABELS AND HIGHLIGHTS -------------------- */

.label {

  display: inline-block;

  padding: 0.33333rem 0.5rem;

  border-radius: 0;

  font-size: 0.65rem;

  line-height: 1;

  white-space: nowrap;

  cursor: default;

  background: #579dc0;

  color: #fefefe;

}

.label.secondary {

  background: #e4e8ea;

  color: #5b6771;

  font-weight: normal;

  border: 0px solid #caced5;

  /*text-transform: uppercase;*/

  letter-spacing: .5px;

}

.label.approved {

  background: #539633;

  color: #ffffff;

  font-weight: bold;

  border: 1px solid #539633;

  /*text-transform: uppercase;*/

  letter-spacing: .5px;

}

.label.todo {

  background: #8e24aa;

  color: #ffffff;

  font-weight: bold;

  border: 1px solid #8e24aa;

  /*text-transform: uppercase;*/

  letter-spacing: .5px;

}

.label.new {

  background: #d3414e;

  color: #ffffff;

  font-weight: bold;

  border: 1px solid #d3414e;

  /*text-transform: uppercase;*/

  letter-spacing: .5px;

}

.label.active2day {

  background: #2196f3;

  color: #ffffff;

  font-weight: bold;

  border: 1px solid #2196f3;

  /*text-transform: uppercase;*/

  letter-spacing: .5px;

}

.label.active1day {

  background: #d5962a;

  color: #ffffff;

  font-weight: bold;

  border: 1px solid #d5962a;

  /*text-transform: uppercase;*/

  letter-spacing: .5px;

}

.label.change {

  background: #fff3d9;

  color: #d3414e;

  font-weight: 500;

  border: 0px solid #fff3d9;

  /*text-transform: uppercase;*/

  letter-spacing: .5px;

  /*margin-bottom: 0.425em;*/

}

.label.change_slider {

  background: #e43b3f;

  color: #ffffff;

  font-weight: 500;

  border: 0px solid #e43b3f;

  text-transform: uppercase;

  letter-spacing: .5px;

  margin-right: 1em;

  padding: 0.5rem 0.75rem 0.5rem;

  box-shadow: 5px 5px #000000;

}

.label.received_pending {

  background: #fee624;

  color: #000000;

  font-weight: bold;

  border: 1px solid #fee624;

  /*text-transform: uppercase;*/

  letter-spacing: .5px;

}

.label.cancelled {

  background: #969ba4;

  color: #ffffff;

  font-weight: bold;

  border: 1px solid #969ba4;

  /*text-transform: uppercase;*/

  letter-spacing: .5px;

}

.label.basic {

  display: inline-block;

  padding: 0rem 0rem;

  border-radius: 0;

  font-size: 0.65rem;

  line-height: 1;

  white-space: nowrap;

  cursor: default;

  background: transparent;

  color: #7e7e7e;

  margin-left: .45rem;

}

.label.basic_red {

  display: inline-block;

  padding: 0rem 0rem;

  border-radius: 0;

  font-size: 0.65rem;

  line-height: 1;

  white-space: nowrap;

  cursor: default;

  background: transparent;

  color: #cc4438;

  margin-left: .45rem;

}

.label.category1 {

  background: #5576ba;

  color: #fefefe;

}

.label.category2 {

  background: #cc4438;

  color: #fefefe;

}

.label.category3 {

  background: #ffae00;

  color: #0a0a0a;

}

.label.category4 {

  background: #7e7e7e;

  color: #fefefe;

}

.input-group-label {

  padding: 0 1rem;

  border: 0px solid #cacaca;

  border-right-width: 0px;

  border-right-style: solid;

  border-right-color: rgb(202, 202, 202);

  background: transparent;

  color: #959595;

  text-align: center;

  white-space: nowrap;

  display: -ms-flexbox;

  display: flex;

  -ms-flex: 0 0 auto;

  flex: 0 0 auto;

  -ms-flex-align: center;

  align-items: center;

}

.input-group {

  display: -ms-flexbox;

  display: flex;

  width: 100%;

  margin-bottom: 0;

  -ms-flex-align: stretch;

  align-items: stretch;

}

/* -------------------- H. LINES AND DIVIDERS -------------------- */

.type-sidelines {

  display: block;

  text-align: center;

  overflow: hidden;

  white-space: nowrap;

}

.type-sidelines span {

  display: inline-block;

  position: relative;

  padding-left: 0.5em;

  padding-right: 0.5em;

}

.type-sidelines span:before, .type-sidelines span:after {

  content: '';

  position: absolute;

  height: 100%;

  width: 9999px;

  top: 50%;

  border-top-style: solid;

  border-top-width: 1px;

}

.type-sidelines span:before {

  right: 100%;

}

.type-sidelines span:after {

  left: 100%;

}

.double {

  display: block;

  text-align: center;

  overflow: hidden;

  white-space: nowrap;

}

.double span {

  display: inline-block;

  position: relative;

  padding-left: 0.5em;

  padding-right: 0.5em;

}

.double span:before, .double span:after {

  content: '';

  position: absolute;

  height: 100%;

  width: 9999px;

  top: 50%;

  border-top-style: solid;

  border-top-width: 1px;

  border-bottom-style: solid;

  border-bottom-width: 1px;

  height: 0.5em;

  margin-top: -0.25em;

}

.double span:before {

  right: 100%;

}

.double span:after {

  left: 100%;

}

.custom {

  display: block;

  text-align: center;

  overflow: hidden;

  white-space: nowrap;

}

.custom span {

  display: inline-block;

  position: relative;

  padding-left: 20px;

  padding-right: 20px;

}

.custom span:before, .custom span:after {

  content: '';

  position: absolute;

  height: 100%;

  width: 100%;

  top: 50%;

  border-top-style: dotted;

  border-top-width: 4px;

  border-top-color: #000000;

  margin-top: -2px;

}

.custom span:before {

  right: 100%;

}

.custom span:after {

  left: 100%;

}

.custom-2 {

  display: block;

  text-align: center;

  overflow: hidden;

  white-space: nowrap;

}

.custom-2 span {

  display: inline-block;

  position: relative;

  padding-left: 0.5em;

  padding-right: 0.5em;

}

.custom-2 span:before, .custom-2 span:after {

  content: '';

  position: absolute;

  height: 100%;

  width: 9999px;

  top: 50%;

  border-top-style: solid;

  border-top-width: 6px;

  border-top-color: #e6e6e6;

  margin-top: -2px;

}

.custom-2 span:before {

  right: 100%;

}

.custom-2 span:after {

  left: 100%;

}

hr {

  clear: both;

  max-width: 100%;

  height: 0;

  margin: 1.25rem auto;

  border-top: 0;

  border-right: 0;

  border-bottom: 1px solid #e1e1e1;

  border-left: 0;

}

hr.separator {

  clear: both;

  max-width: 100%;

  height: 0;

  margin: 1.25rem auto;

  border-top: 0;

  border-right: 0;

  border-bottom: 1px solid #f0f0f7;

  border-left: 0;

}

hr.for_headers {

  margin-top: 0;

  margin-bottom: 1.25rem;

  margin-left: auto;

  margin-right: auto;

  border-bottom: 1px dotted #e1e1e1;

}

hr.for_posts {

  margin-top: .75rem;

  margin-bottom: .75rem;

  margin-left: auto;

  margin-right: auto;

  border-bottom: 1px solid #e1e1e1;

}

hr.black_footer {

  display: block;

  height: 1px;

  border: 0;

  border-top: 1px solid #464461;

  margin: 1em 0;

  padding: 0;

}

hr.black_footer2 {

  display: block;

  height: 2px;

  border: 0;

  border-top: 2px solid #464461;

  margin: 1em 0;

  padding: 0;

}

hr.dotted {

  border-top: 1px dotted #999999;

  color: #fff;

  background-color: transparent;

  height: 1px;

  width: 100%;

  padding: 0px;

  margin-top: 4px;

}

hr.grey {

  display: block;

  height: 1px;

  border: 0;

  border-top: 1px solid #cccccc;

  margin: 1em 0;

  padding: 5px;

}

hr.grey_thick {

  display: block;

  height: 2px;

  border: 0;

  border-top: 8px solid #646f7c;

  margin: 1em 0;

  padding: 0px;

}

hr.orange_thick {

  display: block;

  height: 2px;

  border: 0;

  border-top: 25px solid #ed7d31;

  margin: 1em 0;

  padding: 2px;

}

.icon_orange {

  color: #ed7d31;

}

.icon_purple {

  color: #8e24aa;

}

hr.light_grey_thick {

  display: block;

  height: 2px;

  border: 0;

  border-top: 25px solid #a5a5a5;

  margin: 1em 0;

  padding: 2px;

}

.icon_lightgrey {

  color: #636E7C;

}

hr.yellow_thick {

  display: block;

  height: 2px;

  border: 0;

  border-top: 25px solid #ffc000;

  margin: 1em 0;

  padding: 2px;

}

.icon_yellow {

  color: #cb9731;

}

.icon_header_size {

  font-size: 1.75em;

}

hr.blue_thick {

  display: block;

  height: 2px;

  border: 0;

  border-top: 25px solid #5a9bd5;

  margin: 1em 0;

  padding: 2px;

}

hr.blue {

  display: block;

  height: 1px;

  border: 0;

  border-top: 1px solid #1779ba;

  ;

  margin: 1em 0;

  padding: 5px;

}

.icon_blue {

  color: #1779ba;

}

.icon_darkblue {

  color: #244c5c;

}

.icon_black {

  color: #000000;

}

.icon_dark_grey {

  color: #4c565f;

}

hr.white {

  display: block;

  height: 1px;

  border: 0;

  border-top: 1px solid #ffffff;

  margin: 1em 0;

  padding: 0;

}

hr.white2 {

  display: block;

  height: 1px;

  border: 0;

  border-top: 1px solid #e6e8ec;

  margin: .850em 0 1.5em;

  padding: 0;

}

hr.white_thin {

  display: block;

  height: 1px;

  border: 0;

  border-top: 1px solid #ffffff;

  margin: 0em 0;

  padding: 0;

}

hr.white_smaller {

  display: block;

  height: .5px;

  border: 0;

  border-top: .5px solid #ffffff;

  margin: .5em 0;

  padding: 0;

}

hr.footer_line {

  display: block;

  height: 1px;

  border: 0;

  border-top: 1px solid #121418;

  margin: 1em 0;

  padding: 0;

}

div.no_space_top {

  padding: 0;

}

div.more_space_bottom {

  margin-bottom: 2.000em;

}

div.more_space_bottom_little {

  margin-bottom: 1.000em;

}

div.no_margin_left ul li {

  margin-left: 0;

  margin-bottom: 0.625rem;

}

li.more_space_top_little {

  margin-top: 0.625rem;

}

div.margin_left ul li {

  margin-left: 1.125rem;

  /*margin-bottom: 0.625rem;*/

}

div.more_space_top, span.more_space_top {

  margin-top: 2.000em;

}

div.more_space_top_little, span.more_space_top_little {

  margin-top: 1.125em;

}

div.more_space_top_verylittle, span.more_space_top_verylittle {

  margin-top: .500em;

}

div.more_space_top_mediumlittle, span.more_space_medium_little {

  margin-top: 1.500em;

}

div.more_space_top_helpdiv {

  margin-top: -.750em;

}

div.field_titles, span.field_titles {

  font-weight: bold;

  text-transform: uppercase;

}

div.padding_div {

  padding: .750em 1.000em;

}

div.padding_div_verytop {

  padding-bottom: 1.125em;

}

i.more_padding_bottom {

  padding-top: .250em;

  padding-bottom: .375em;

}



.title-area-bottom {

padding-bottom: .875em;	

}





div.padding_div_more {

  padding: 2em 3em;

}

div.padding_div_for_headers {

  padding-top: 1.250em;

  padding-left: .750em;

  padding-right: .750em;

  padding-bottom: .750em;

}

div.padding_div_for_notes {

  padding-left: .875em;

  padding-right: .875em;

  padding-top: .750em;

  padding-bottom: .750em;

}

.vertical_line {

  border-right: 1px solid #EBEBF2;

}

div.vertical_line_left {

  border-left: 1px solid #d0d0d0;

}

.hidden {

  display: none;

}

div.modal_bkg {

  /*background: #780006;*/

  background-image: url("../img/modal_background.png");

  background-repeat: repeat-x;

  background-color: #ffffff;

  background-position: left top;

}

div.modal_bkg_search {

  /*background: #780006;*/

  background-image: url("../img/modal_background_grey.png");

  background-repeat: repeat-x;

  background-color: #f5f5f5;

  background-position: left top;

}

/* -------------------- I. COLOURS -------------------- */

.event1_label {

  background-color: #d3414e;

  font-weight: normal;

  padding-left: 1.000em;

  padding-right: 1.000em;

  padding-top: .375em;

  padding-bottom: .375em;

  color: #ffffff;

}

.event2_label {

  background-color: #646f7c;

  font-weight: normal;

  padding-left: 1.000em;

  padding-right: 1.000em;

  padding-top: .375em;

  padding-bottom: .375em;

  color: #ffffff;

}

.event3_label {

  background-color: #539633;

  font-weight: normal;

  padding-left: 1.000em;

  padding-right: 1.000em;

  padding-top: .375em;

  padding-bottom: .375em;

  color: #ffffff;

}

.event4_label {

  background-color: #015f5f;

  font-weight: normal;

  padding-left: 1.000em;

  padding-right: 1.000em;

  padding-top: .375em;

  padding-bottom: .375em;

  color: #ffffff;

}

.event5_label {

  background-color: #c9c5c6;

  font-weight: normal;

  padding-left: 1.000em;

  padding-right: 1.000em;

  padding-top: .375em;

  padding-bottom: .375em;

  color: #2f2e2e;

}

.course_1day {

  background-color: #d5962a;

  font-weight: normal;

  padding-left: 1.000em;

  padding-right: 1.000em;

  padding-top: .375em;

  padding-bottom: .375em;

  color: #ffffff;

}

.course_2day {

  background-color: #2196f3;

  font-weight: normal;

  padding-left: 1.000em;

  padding-right: 1.000em;

  padding-top: .375em;

  padding-bottom: .375em;

  color: #ffffff;

}

.course_cancelled {

  background-color: #caced5;

  font-weight: normal;

  padding-left: 1.000em;

  padding-right: 1.000em;

  padding-top: .375em;

  padding-bottom: .375em;

  color: #667079;

}

.course_completed {

  background-color: #539633;

  font-weight: normal;

  padding-left: 1.000em;

  padding-right: 1.000em;

  padding-top: .375em;

  padding-bottom: .375em;

  color: #ffffff;

}

.course_requested {

  background-color: #8E24AA;

  font-weight: normal;

  padding-left: 1.000em;

  padding-right: 1.000em;

  padding-top: .375em;

  padding-bottom: .375em;

  color: #ffffff;

}

.white_text {

  color: #ffffff;

}

.grey_text_footer {

  color: #737c84;

}

#email_subscription .input-group-field, #email_subscription .input-group-button input.button {

  height: 2.875rem; /* or 46px */

  line-height: 2.875rem;

  font-size: 1rem;

  padding-top: 0;

  padding-bottom: 0;

  box-sizing: border-box;

}

/* Already have border-radius defined here, no change */

#email_subscription .input-group-field {

  border-top-left-radius: 0.5rem;

  border-bottom-left-radius: 0.5rem;

  border-top-right-radius: 0;

  border-bottom-right-radius: 0;

  padding-left: 1rem;

}

#email_subscription .input-group-button input.button {

  border-top-left-radius: 0;

  border-bottom-left-radius: 0;

  border-top-right-radius: 0.5rem;

  border-bottom-right-radius: 0.5rem;

  padding-left: 1rem;

  padding-right: 1rem;

}

.green_text_footer {

  color: #f1f5f4;

  font-size: 0.9375em;

  line-height: 1.6;

  margin-bottom: 1.25rem;

}

.grey_text_alt {

  color: #a3a7aa;

}

.grey_text_header {

  color: #737c84;

}

.blue {

  color: #5576ba;

}

.grey_footer {

  background-color: #121418;

}

.blue_footer {

  background-color: #045d7b;

  border-top: solid 4px #035773;

}

.white_area {

  background-color: #ffffff;

}

.grey {

  color: #7e7e7e;

}

.bkg_colour_inside {

  background-color: #ffffff;

}

.bkg_red {

  /*background-color: #0455a4;*/

  background-image: linear-gradient(#d3414e, #a2323d);

}

.bkg_leftcol_grey {

  background-color: #2e3b40;

  /*background-image: linear-gradient(#265061, #224756);*/

}

#qm1 div#leftcol_grey, #qm1 ul#leftcol_grey {

  background-color: #273337;

}

.bkg_blue {

  /*background-color: #0455a4;*/

  background-image: linear-gradient(#0455a4, #024a8f);

}

.bkg_blue_dark {

  /*background-color: #0455a4;*/

  background-image: linear-gradient(#03294D, #021C36);

}

.bkg_grey_darkest {

  /*background-color: #0455a4;*/

  background-image: linear-gradient(#1d2023, #000000);

}

.bkg_green_darkest {

  background-color: #115740;

}

.bkg_green2 {

  background-color: #428a77;

}

.bkg_mobile_area {

  /*background-color: #0455a4;*/

  background-image: linear-gradient(#ffffff, #c8c9cc);

}

.bkg_grey_building_resiliency {

  /*background-color: #0455a4;*/

  background-image: linear-gradient(#40546c, #25303e);

}

.bkg_grey_dark {

  /*background-color: #0455a4;*/

  background-image: url("../img/BCCSA_SWOOSHES_light_grey.png");

  background-repeat: no-repeat;

  background-color: #ffffff;

  /*background-image: linear-gradient(#dadcdf, #ffffff);*/

  border-bottom: solid 1px #ffffff;

}

.bkg_swoosh_title {

  /*background-color: #0455a4;*/

  /*background-image: url("../img/bccsa_swooshes_lightgrey_title.jpg");*/

  /*background-repeat: no-repeat;*/

  background-color: #ffffff;

  background-image: linear-gradient(#ffffff, #f9f9f9);

}

.bkg_retro {

  background-color: #1e180a;

}

.light_grey {

  color: #f5f5f5;

}

.mid_grey {

  color: #e6e5e5;

}

.icon_red {

  color: #d3414e;

}

.icon_grey {

  color: #667079;

}

.icon_grey_light {

  color: #caced5;

}

.icon_grey_dark {

  color: #3f4c53;

}

.bkg_grey {

  background-color: #2d2d2d;

}

.bkg_lightest_grey {

  background-color: #e6e6e6;

}

.icon_green {

  color: #539633;

}

.icon_padding {

  padding-right: .375em;

}

.icon_padding_more {

  padding-right: .500em;

}

.icon_padding_left {

  padding-left: .750em;

}

.green {

  color: #539633;

}

.light_green_text {

  color: #d8e6e1;

}

.dark_green {

  color: #115740;

}

.icon_white {

  color: #ffffff;

}

.orange {

  color: #ba6109;

}

.orange2 {

  color: #ffad03;

}

.bccsa_red {

  color: #d33f4d;

}

.bccsa_grey {

  background: #646e71;

  color: #ffffff;

  font-weight: bold;

  padding-top: 0.625em;

  padding-bottom: 0.625em;

  padding-left: 2.500em;

  padding-right: 0em;

}

.yellow {

  color: #ffbb00;

}

.yellow_darker {

  color: #efcc69;

}

.red {

  color: #cc4438;

}

/* -------------------- J. FORMS AND VALIDATIONS -------------------- */

#rx-refill-form fieldset {

  padding: 1.5rem;

  background-color: #f9fafb;

  border: 1px solid #e2e2e3;

  border-radius: 0.75rem;

  margin-bottom: 1.5rem;

}

#rx-refill-form fieldset legend {

  color: #27303c;

  background-color: #ffffff;

  padding: 0.5rem 1rem;

  font-weight: 600;

  font-size: 1rem;

  border-radius: 0.375rem;

  border: 1px solid #e2e2e3;

  display: inline-block;

  margin-left: -0.5rem;

}

#rx-refill-form .form-subtext {

  font-size: 0.875rem;

  color: #666;

  margin-top: -0.5rem;

  margin-bottom: 0.75rem;

}

#rx-refill-form input[type="date"] {

  cursor: pointer;

}

#rx-refill-form .spinner {

  display: inline-block;

  width: 1rem;

  height: 1rem;

  border: 2px solid #fff;

  border-top: 2px solid transparent;

  border-radius: 50%;

  animation: spin 0.7s linear infinite;

  vertical-align: middle;

  margin-right: 0.5rem;

}

#rx-refill-form .hidden {

  display: none;

}

#rx-refill-form .remove-prescription {

  color: #b00;

  font-size: 0.75rem;

  background: none;

  border: none;

  margin-top: 0.25rem;

  margin-left: auto;

  display: block;

  text-align: right;

  cursor: pointer;

}

@keyframes spin {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}

/* Scoped styling for contact form */

.contact-form {

  padding: 1rem 0;

}

.contact-form label {

  font-size: 0.875em;

  font-weight: bold;

  color: #1d2023;

}

.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {

  border-color: #0066cc;

  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);

  outline: none;

}

.contact-form .form-error {

  font-size: 0.9rem;

  color: #cc0000;

  margin-top: 0.25rem;

  display: block;

}

/* Highlight fields with errors */

.contact-form input.error, .contact-form textarea.error, .contact-form select.error {

  border-color: #cc0000 !important;

  background-color: #fff6f6;

}

#constant_1 .ctct-form-embed .ctct-form-defaults .ctct-form-header {

  /*font: "proxima-nova", sans-serif;*/

  font-family: "gotham", sans-serif;

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;

  font-size: 1.25em;

  font-weight: 700;

  margin: 0 0 12px;

}

#constant_1 .ctct-form-embed .ctct-form-custom .ctct-form-label {

  display: block;

  margin-bottom: 12px;

  line-height: 1;

  font-weight: 700;

  text-align: left;

  font-family: "gotham", sans-serif;

  font-size: .875em;

}

#constant_1 .ctct-form-embed.form_0 .ctct-form-custom .ctct-form-button {

  background-color: #035eb7;

  border: 1px solid #035eb7;

  color: #ffffff;

  font-family: "gotham", sans-serif;

  font-weight: 900;

  transition: background-color 0.25s ease-out, color 0.25s ease-out;

}

#constant_1 .ctct-form-embed.form_0 .ctct-form-custom .ctct-form-button:hover {

  background-color: #0078c1;

}

#constant_1 .ctct-form-embed.form_0 .ctct-form-defaults {

  background-color: #ffffff;

  width: 100%;

}

#constant_1 .ctct-form-embed .ctct-form-defaults {

  color: #323232;

  background-color: #fff;

  border-radius: 5px;

  padding: 0px;

  font-family: "gotham", sans-serif;

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;

}

#constant_1 .ctct-form-embed.form_0 .ctct-form-defaults .ctct-form-text, .ctct-form-embed.form_0 .ctct-form-custom .ctct-form-label, .ctct-form-embed.form_0 .ctct-form-custom .ctct-form-listname, .ctct-form-embed.form_0 .ctct-form-custom .ctct-form-lists-legend, .ctct-form-embed.form_0 .ctct-form-custom .ctct-form-date-slash, .ctct-form-embed.form_0 .ctct-form-defaults .ctct-gdpr-text, .ctct-form-embed.form_0 .ctct-form-defaults .ctct-gdpr-text .ctct-form-footer-link, .ctct-form-embed.form_0 .ctct-form-defaults .ctct-gdpr-text .ctct-form-footer-privacy-link {

  color: #1e1e1e;

  font-family: "gotham", sans-serif;

}

/* CONTACT FORM 2 */

#constant_2 .ctct-form-embed.form_1 .ctct-form-defaults .ctct-form-header {

  /*font: "proxima-nova", sans-serif;*/

  font-family: "gotham", sans-serif;

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;

  font-size: 1.25em;

  font-weight: 700;

  margin: 0 0 12px;

}

#constant_2 .ctct-form-embed.form_1 .ctct-form-custom .ctct-form-button {

  background-color: #035eb7;

  border: 1px solid #035eb7;

  color: #ffffff;

  font-weight: 900;

  transition: background-color 0.25s ease-out, color 0.25s ease-out;

}

#constant_2 .ctct-form-embed.form_1 .ctct-form-custom .ctct-form-button:hover {

  background-color: #0078c1;

}

#constant_2 .ctct-form-embed.form_1 .ctct-form-custom .ctct-form-label {

  display: block;

  margin-bottom: 12px;

  line-height: 1;

  font-weight: 700;

  text-align: left;

  font-family: "gotham", sans-serif;

  font-size: .875em;

}

#constant_2 .ctct-form-embed.form_1 .ctct-form-custom .ctct-form-button {

  background-color: #035eb7;

  border: 1px solid #035eb7;

  color: #ffffff;

}

#constant_2 .ctct-form-embed.form_1 .ctct-form-defaults {

  background-color: #ffffff;

  width: 100%;

}

#constant_2 .ctct-form-embed.form_1 .ctct-form-defaults {

  color: #323232;

  background-color: #fff;

  border-radius: 5px;

  padding: 0px;

  font-family: "gotham", sans-serif;

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;

}

#constant_2 .ctct-form-embed.form_1 .ctct-form-defaults .ctct-form-text, .ctct-form-embed.form_1 .ctct-form-custom .ctct-form-label, .ctct-form-embed.form_1 .ctct-form-custom .ctct-form-listname, .ctct-form-embed.form_1 .ctct-form-custom .ctct-form-lists-legend, .ctct-form-embed.form_1 .ctct-form-custom .ctct-form-date-slash, .ctct-form-embed.form_1 .ctct-form-defaults .ctct-gdpr-text, .ctct-form-embed.form_1 .ctct-form-defaults .ctct-gdpr-text .ctct-form-footer-link, .ctct-form-embed.form_1 .ctct-form-defaults .ctct-gdpr-text .ctct-form-footer-privacy-link {

  color: #1e1e1e;

  font-family: "gotham", sans-serif;

}

select {

  font-family: "gotham", sans-serif;

}

select {

  height: 2.4375rem;

  margin: 0 0 1rem;

  padding: 0.5rem;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  border: 1px solid #cacaca;

  border-radius: 0;

  background-color: #fefefe;

  font-family: inherit;

  font-size: 0.875rem;

  font-weight: normal;

  line-height: 1.5;

  color: #0a0a0a;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>");

  background-origin: content-box;

  background-position: right -1rem center;

  background-repeat: no-repeat;

  background-size: 9px 6px;

  padding-right: 1.5rem;

  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;

}

input:checked ~ .switch-paddle {

  background: #539633;

}

.switch-paddle {

  background: #cbcbd1;

}

.wufoo input.text, .wufoo textarea.textarea, .wufoo input.file {

  font-family: "gotham", sans-serif;

}

.wufoo input.text, .wufoo textarea.textarea, .wufoo input.file, .wufoo select.select {

  font-style: normal;

  font-weight: 400;

  color: #333333;

  font-size: 100%;

}

.simple-subscription-form {

  width: 100%;

  padding: 2rem;

  border-radius: 0;

}

/* -------------------- K. V-CARDS -------------------- */

/* Resources */

.product-card {

  background-color: #ffffff;

  border: 1px solid #e6e6e6;

  padding: 1rem;

  margin-bottom: 1.5rem;

}

.product-card2 {

  background-color: #1779ba;

  border-top: 1px solid #222222;

  padding: 1rem;

  margin-bottom: 1.5rem;

}

.product-card2 .product-card-title a {

  color: #ffffff;

  font-size: 0.9rem;

  font-weight: 600;

  line-height: 1.45rem;

  margin-top: 1rem;

  margin-bottom: 0;

}

.product-card-thumbnail {

  display: block;

  position: relative;

}

.product-card-title {

  font-size: 1.0rem;

  font-weight: 600;

  line-height: 1.25rem;

  margin-top: 1rem;

  margin-bottom: 0;

}

.product-card-desc {

  color: #828990;

  display: block;

  font-size: 0.85rem;

}

.product-card-price {

  color: #222222;

  display: inline-block;

  font-size: 0.85rem;

  font-weight: 400;

  font-style: normal;

  margin-top: 0.8rem;

}

.product-card-price2 {

  color: #222222;

  display: inline-block;

  font-size: 0.85rem;

  font-weight: 400;

  font-style: normal;

  margin-top: 0rem;

}

.product-card-sale {

  color: #cacaca;

  display: inline-block;

  font-size: 0.85rem;

  margin-left: 0.3rem;

  text-decoration: line-through;

}

.product-card-colors {

  display: block;

  margin-top: 0.8rem;

}

.product-card-color-option {

  display: inline-block;

  height: 25px;

  width: 25px;

}



/* === Product CTA Buttons === */

:root {

  /* match your existing palette */

  --prod-green-bg: #d8e6e1;   /* book */

  --prod-green-bg-hover: #3c7c6b;

  --prod-green-fg: #428a77;



  --prod-gold-bg:  #cb9731;   /* refill */

  --prod-gold-bg-hover: #b6882c;

  --prod-gold-fg:  #f1f5f4;



  --prod-radius: 8px;

  --prod-focus:  #115740;

}



.btn-product {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: .5rem;

  padding: .6em 1em;

  border-radius: var(--prod-radius);

  font-weight: 600;

  line-height: 1.1;

  text-decoration: none;

  border: 0;

  cursor: pointer;

  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .05s ease;

  -webkit-tap-highlight-color: transparent;

}



.btn-product.expanded { width: 100%; }



/* View Details (green) */

.btn-product--view {

  background: #ffffff;

  color: var(--prod-green-fg);

  border-top: solid 1px var(--prod-green-bg);

  border-bottom: solid 1px var(--prod-green-bg);	

}

.btn-product--view:hover,

.btn-product--view:focus-visible {

  background: var(--prod-green-bg);

  color: var(--prod-green-fg);

  text-decoration: none;

}



/* Add to Cart (gold) */

.btn-product--add {

  background: var(--prod-gold-bg);

  color: var(--prod-gold-fg);

}

.btn-product--add:hover,

.btn-product--add:focus-visible {

  background: var(--prod-gold-bg-hover);

  color: var(--prod-gold-fg);

  text-decoration: none;	

}



/* Focus ring (accessibility) */

.btn-product:focus-visible {

  outline: 0;

  box-shadow: 0 0 0 3px color-mix(in srgb, var(--prod-focus) 60%, transparent);

}



/* Active press */

.btn-product:active { transform: translateY(1px); }



/* Disabled state */

.btn-product[disabled],

.btn-product.is-disabled {

  opacity: .55;

  cursor: not-allowed;

  pointer-events: none;

}



/* Optional tiny icon alignment */

.btn-product .icon { display:inline-block; line-height:0; }







.product-meta {

  font-family: "gotham", sans-serif;

  font-size: 0.85rem; /* smaller than body text */

  font-weight: 500;

  color: #666; /* subtle gray */

  margin: 0.5rem 0 1rem 0;

}



.product-meta::first-letter {

  text-transform: uppercase;

}



.product-meta span {

  color: #3ca56a; /* optional: highlight certain parts in green */

  font-weight: 600;

}



/* For responsiveness */

@media (max-width: 640px) {

  .product-meta {

    font-size: 0.8rem;

  }

}





/* ---- Layout: thumbs left on large, bottom on smaller ---- */

.pd-media {

  display: grid;

  grid-template-columns: 1fr;

  grid-template-areas:

    "main"

    "thumbs";

  gap: 0.75rem;

}



/* Large screens: left rail for thumbs */

@media (min-width: 1024px) {

  .pd-media {

    grid-template-columns: 96px 1fr;

    grid-template-areas: "thumbs main";

    align-items: start;

  }

}



/* Thumbs rail / strip */

.pd-thumbs {

  grid-area: thumbs;

  display: grid;

  gap: 0.5rem;

  grid-auto-rows: min-content;

  grid-template-columns: repeat(4, 1fr); /* bottom strip on small */

}



@media (min-width: 640px) and (max-width: 1023.98px) {

  .pd-thumbs { grid-template-columns: repeat(6, 1fr); }

}



/* Vertical rail on large + scroll */

@media (min-width: 1024px) {

  .pd-thumbs {

    grid-template-columns: 1fr;

    max-height: 480px;

    overflow: auto;

    padding-right: 2px; /* avoid scrollbar overlay */

  }

  .pd-thumbs::-webkit-scrollbar { width: 6px; }

  .pd-thumbs::-webkit-scrollbar-thumb { background: #d7d7d7; border-radius: 6px; }

}



/* Thumb buttons/images */

.thumb-btn {

  display: block;

  padding: 0;

  border: 2px solid transparent;

  border-radius: 8px;

  background: transparent;

  cursor: pointer;

  line-height: 0;

  transition: border-color .15s ease, transform .15s ease;

}



.thumb-btn:hover { transform: translateY(-1px); }



.thumb-btn.is-active {

  border-color: #3ca56a; /* brand green */

}



.thumb-img {

  display: block;

  width: 100%;

  height: 100%;

  aspect-ratio: 1 / 1;

  object-fit: cover;

  border-radius: 6px;

}



/* Main image area */

.pd-main {

  grid-area: main;

  position: relative;

  border-radius: 12px;

  overflow: hidden;

}



.product-card__image {

  width: 100%;

  height: 100%;

  object-fit: contain; /* preserve photography integrity */

  background: #fff;

}



/* Polished zoom button */

.pd-zoom-btn {

  position: absolute;

  right: 0.5rem;

  bottom: 0.5rem;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 50px;

  height: 50px;

  border: none;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.95); /* soft white */

  color: #333; /* neutral icon color */

  font-size: 1.1rem;

  cursor: pointer;

  box-shadow: 0 2px 8px rgba(0,0,0,0.15);

  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;

}



.pd-zoom-btn:hover {

  background: #fff;

  transform: scale(1.05);

  box-shadow: 0 3px 12px rgba(0,0,0,0.25);

}



.pd-zoom-btn i {

  pointer-events: none; /* ensures clicking the icon triggers button */

}



/* Zoom + subtle pan (desktop only) */

@media (hover:hover) and (pointer:fine) {

  .pd-main {

    overflow: hidden; /* ensures zoomed image doesn't overflow the container */

  }



  .pd-main img {

    transition: transform 0.35s ease;

    cursor: pointer;

    will-change: transform;

  }



  .pd-main:hover img {

    transform: scale(1.05); /* bigger zoom for clarity */

  }

}



/* ---- Lightbox dialog ---- */

#pd-lightbox {

  border: none;

  padding: 0;

  width: 100%;

  max-width: none;

  max-height: none;

  background: transparent;

}



#pd-lightbox::backdrop {

  background: rgba(0,0,0,0.8);

}



#pd-lightbox img {

  display: block;

  max-width: 92vw;

  max-height: 86vh;

  margin: 7vh auto;

  border-radius: 10px;

  background: #fff;

}



/* Lightbox controls */

.lb-close {

  position: fixed;

  top: 16px; right: 16px;

  z-index: 2;

  font-size: 2rem;

  border: none;

  background: rgba(0,0,0,.6);

  color: #fff;

  width: 44px; height: 44px;

  line-height: 44px;

  border-radius: 999px;

  cursor: pointer;

}



.lb-nav {

  position: fixed;

  top: 50%;

  transform: translateY(-50%);

  z-index: 2;

  font-size: 2rem;

  border: none;

  background: rgba(0,0,0,.6);

  color: #fff;

  width: 48px; height: 64px;

  border-radius: 8px;

  cursor: pointer;

}



.lb-prev { left: 16px; }

.lb-next { right: 16px; }



.lb-close:hover, .lb-nav:hover { background: rgba(0,0,0,.75); }













.post_reply .user-name {

  margin-top: .375em;

  margin-bottom: 0;

  /*font-family: prenton, sans-serif;*/

}

.post_reply .user-title {

  margin-bottom: 0;

  margin-top: -.375em;

  padding-bottom: 0;

  color: #43425D;

  font-size: 0.813em;

}

/* User Dropdown Header */

.user_dashboard_header .user-name {

  margin-top: .250em;

  margin-bottom: 0;

  /*font-family: prenton, sans-serif;*/

}

.user_dashboard_header .user-title {

  margin-bottom: 0;

  margin-top: -.375em;

  padding-bottom: 0;

  color: #43425D;

  font-size: 0.813em;

}

.notifications_dashboard_header .dropdown-name {

  margin-top: .250em;

  margin-bottom: 0;

  color: #262424;

  /*font-family: prenton, sans-serif;*/

}

.notifications_container {

  min-height: 300px;

  max-height: 650px;

  overflow-y: scroll;

}

.notifications_container::-webkit-scrollbar {

  width: 8px;

}

/* Track */

.notifications_container::-webkit-scrollbar-track {

  background: #F0F0F7;

}

/* Handle */

.notifications_container::-webkit-scrollbar-thumb {

  background: #a5a4a4;

}

/* Handle on hover */

.notifications_container::-webkit-scrollbar-thumb:hover {

  background: #555;

}

.user_dashboard_header {

  padding-bottom: 1.250em;

}

.notifications_dashboard_header {

  padding-bottom: .625em;

}

.user_dashboard_contents {

  /*padding-top: 1.000em;*/

  border-top: dotted 1px #cacaca;

  margin-bottom: 1.000em;

  /*padding: 0.875rem 1.125rem;	*/

}

.notification_dashboard_contents {

  /*padding-top: 1.000em;*/

  border-top: dotted 1px #cacaca;

  margin-bottom: 1.000em;

  /*padding: 0.875rem 1.125rem;	*/

}

.notification_course_contents {

  padding-top: 1.000em;

  border-bottom: dotted 0px #cacaca;

  margin-bottom: 1.000em;

  padding-bottom: 1.000em;

  /*padding: 0.875rem 1.125rem;*/

}

.user_dashboard_contents .link-title {

  font-size: 0.875em;

}

.user_course_contents .link-title {

  font-size: 0.875em;

}

.notification_dashboard_contents .notification-title {

  font-size: 0.875em;

}

.notification_course_contents .notification-title {

  font-size: 0.875em;

}

.notification_dashboard_contents .notification-title a.user {

  font-weight: bold;

  color: #1E1E1E;

}

.notification_course_contents .notification-title a.user {

  font-weight: bold;

  color: #1E1E1E;

}

.notification_dashboard_contents .notification-title a.noun {

  color: #1E1E1E;

}

.notification_course_contents .notification-title a.noun {

  color: #1E1E1E;

}

#notificationsTable a.noun {

  color: #1E1E1E;

}

.notification_dashboard_contents .notification-title a.subject {

  font-weight: bold;

}

.notification_course_contents .notification-title a.subject {

  font-weight: bold;

}

.notification_course_contents .notification-title a.more {

  font-size: 0.875em;

}

ul li a.edit {

  font-size: 0.875em;

}

.content_area_white ul li.smaller, .pricing-table ul li.smaller {

  font-size: 0.875em;

}

.small_div3 a.edit {

  font-size: 0.875em;

}

.user_dashboard_contents .link-description {

  margin-bottom: 0;

  color: #43425D;

  margin-top: -.375em;

  padding-bottom: 0;

  font-size: 0.813em;

}

.notification_dashboard_contents .notification-description {

  margin-bottom: 0;

  color: #808495;

  /*margin-top: -.250em;*/

  padding-bottom: 0;

  font-size: 0.750em;

}

.notification_course_contents .notification-description {

  margin-bottom: 0;

  padding-bottom: 1.000em;

  color: #808495;

  /*margin-top: -.250em;*/

  font-size: 0.750em;

}

.notification_course_contents .notification-description_larger {

  margin-bottom: 0;

  padding-bottom: 1.000em;

  color: #808495;

  /*margin-top: -.250em;*/

  font-size: 1.000em;

}

.notification_dashboard_contents .notification-description a {

  color: #808495;

}

.notification_course_contents .notification-description a {

  color: #808495;

}

.user_dashboard_contents li {

  background: #f7f7f7;

}

.notification_dashboard_contents li {

  background: #f7f7f7;

}

.notification_course_contents li {

  background: #ffffff;

}

.profile-card-action-icons {

  background-color: transparent;

  font-weight: 400;

  margin-bottom: 1.6rem;

  /*border-radius: 0.125rem;*/

}

.profile-card-action-icons .card-section {

  background-color: inherit;

  padding: 0.5rem 0 0;

}

.profile-card-action-icons .card-section .profile-card-header, .profile-card-action-icons .card-section .profile-card-about {

  /*border-bottom: 0.0625rem solid #cacaca;*/

  /*padding: 0.7rem 1rem;*/

}

.profile-card-action-icons .card-section .profile-card-header {

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-align-items: flex-start;

  -ms-flex-align: start;

  align-items: flex-start;

}

.profile-card-action-icons .card-section .profile-card-header .profile-card-avatar {

  margin-right: 0.5rem;

}

.profile-card-action-icons .card-section .profile-card-header .profile-card-avatar .avatar-image {

  border-radius: 50%;

  width: 3.75rem;

  height: 3.75rem;

}

.profile-card-action-icons .card-section .profile-card-header .profile-card-author {

  -webkit-flex: 1 0 0;

  -ms-flex: 1 0 0px;

  flex: 1 0 0;

  margin-top: 0.3rem;

  padding-bottom: 0;

}

.profile-card-action-icons .card-section .profile-card-header .profile-card-author .author-title, .profile-card-action-icons .card-section .profile-card-header .profile-card-author .author-description {

  margin-bottom: 0;

}

.profile-card-action-icons .card-section .profile-card-header .profile-card-author .author-title {

  color: #828990;

  padding-top: 0.375em;

  padding-bottom: 0;

}

.profile-card-action-icons .card-section .profile-card-header .profile-card-author .author-description {

  color: #828990;

  font-size: 0.813em;

}

.profile-card-action-icons .card-section .profile-card-about .about-title {

  text-transform: uppercase;

}

.profile-card-action-icons .card-section .profile-card-about .separator-left {

  text-align: left;

}

.profile-card-action-icons .card-section .profile-card-about .separator-left::before, .profile-card-action-icons .card-section .profile-card-about .separator-left::after {

  display: table;

  content: ' ';

  -webkit-flex-basis: 0;

  -ms-flex-preferred-size: 0;

  flex-basis: 0;

  -webkit-order: 1;

  -ms-flex-order: 1;

  order: 1;

}

.profile-card-action-icons .card-section .profile-card-about .separator-left::after {

  clear: both;

}

.profile-card-action-icons .card-section .profile-card-about .separator-left::after {

  position: relative;

  width: 3rem;

  border-bottom: 0.125rem solid #1779ba;

  margin: 0.3rem auto 0;

  margin-left: 0;

}

.profile-card-action-icons .card-section .profile-card-about .about-content {

  margin-bottom: 0;

}

.profile-card-action-icons .card-section .profile-card-about .about-skills {

  margin-top: 0.6rem;

}

.profile-card-action-icons .card-section .profile-card-about .about-skills ul.arrow {

  list-style-type: none;

  padding-left: 0;

  margin-left: 0;

  margin-bottom: 0;

}

.profile-card-action-icons .card-section .profile-card-about .about-skills ul.arrow li:before {

  content: '\f006';

  font-family: 'FontAwesome';

  float: left;

  color: #1779ba;

  margin-right: 0.5rem;

}

.profile-card-action-icons .card-section .profile-card-action {

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

}

.profile-card-action-icons .card-section .profile-card-action .action-area {

  width: 20%;

  border-right: 0.0625rem solid #cacaca;

  text-align: center;

  padding-top: 0.4rem;

  padding-bottom: 0.4rem;

}

.profile-card-action-icons .card-section .profile-card-action .action-area:last-of-type {

  border-right: none;

}

.profile-card-action-icons .card-section .profile-card-action .action-area .action-anchor.has-tip {

  border-bottom: none;

  cursor: pointer;

}

.profile-card-action-icons .card-section .profile-card-action .action-area .action-anchor .fa {

  color: #1779ba;

}

/* END Profile Card with Action Icons */

.card-user-profile {

  position: relative;

  z-index: 0;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-flex-direction: column;

  -ms-flex-direction: column;

  flex-direction: column;

  margin-bottom: 1rem;

  border: 1px solid rgba(216, 216, 216, 1);

  border-radius: 1;

  background: #f2f2f2;

  box-shadow: none;

  overflow: hidden;

  color: #0a0a0a;

  padding-bottom: 1.125rem;

}

.card-user-profile > :last-child {

  margin-bottom: 0;

}

.card-user-profile:hover .card-user-profile-img {

  opacity: 1;

}

.card-user-profile-content {

  position: relative;

}

.card-user-profile-content::before {

  position: absolute;

  content: '';

  top: -3.4375rem;

  left: -1.875rem;

  width: 0;

  height: 0;

  border-style: solid;

  border-width: 3.4375rem 0 0 31.25rem;

  z-index: 0;

  border-color: transparent transparent transparent #fefefe;

}

.card-user-profile-actions {

  -webkit-flex: 0 1 auto;

  -ms-flex: 0 1 auto;

  flex: 0 1 auto;

  padding: 1rem;

  background: #e6e6e6;

  background: #fefefe;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

}

.card-user-profile-actions > :last-child {

  margin-bottom: 0;

}

.card-user-profile-img {

  max-width: 100%;

  opacity: 0.85;

  transition: all 0.25s ease;

}

.card-user-profile-avatar {

  position: absolute;

  bottom: 100%;

  left: 1rem;

  z-index: 2;

  max-width: 5.625rem;

}

.card-user-profile-avatar img {

  border-radius: 50%;

  box-shadow: 0 0 15px rgba(10, 10, 10, 0.3);

}

.card-user-profile-name {

  margin-top: 1.125em;

  margin-bottom: 1.125em;

  font-weight: bold;

  font-size: 1.25rem;

  text-transform: uppercase;

}

.card-user-profile-button {

  margin-bottom: 0;

  -webkit-flex: 1 0 0;

  -ms-flex: 1 0 0px;

  flex: 1 0 0;

}

.card-user-profile-button + .card-user-profile-button {

  margin-left: 1rem;

}

.card-user-profile-info {

  font-size: 0.875rem;

  letter-spacing: 1px;

  opacity: 0.8;

}

/*







=============================================== 05. BUTTON STYLES ===============================================







*/

/* -------------------- A. SINGLE BUTTONS -------------------- */

button.radius, .button.radius {

  border-radius: 3px;

}

button.round, .button.round {

  border-radius: 1000px;

}

.button.primary {

  background-color: #046ed5;

  color: #ffffff;

}

.button.primary:hover, .button.primary:focus {

  background-color: #003b6d;

  color: #fefefe;

}

.button.transparent_button {

  background-color: transparent;

  color: #ffffff;

}

.button.transparent_button:hover, .button.transparent_button:focus {

  background-color: transparent;

  color: #2b5c6f;

}

.button.secondary {

  background-color: #cb9731;

  color: #ffffff;

}

.button.secondary:hover, .button.secondary:focus {

  background-color: #b6882c;

  color: #ffffff;

}

.button.secondary2 {

  background-color: #3a4148;

  color: #ffffff;

}

.button.secondary2:hover, .button.secondary2:focus {

  background-color: #4c565f;

  color: #fefefe;

}

.button.secondary3 {

  background: linear-gradient(rgba(230, 230, 230, 0.2), transparent);

  color: #000000;

  border: 0px solid transparent;

}

.button.secondary3:hover, .button.secondary3:focus {

  background-color: rgba(250, 250, 250, 0.7); /* Here, 0.7 is the opacity value (between 0 and 1) */

  color: #3a424e;

}

.button.secondary4 {

  background-color: rgba(241, 241, 241, 0.8);

  color: #000000;

  border: 0px solid transparent;

  border-left: 0px solid #e6e3e3;

}

.button.secondary4:hover, .button.secondary4:focus {

  background-color: rgba(241, 241, 241, 0.7); /* Here, 0.7 is the opacity value (between 0 and 1) */

  color: #3a424e;

}

.button.secondary5 {

  background-color: rgba(250, 250, 250, 0.8);

  color: #000000;

  border: 0px solid transparent;

  border-left: 0px solid #3a4148;

  padding: 0.7rem 0.673rem;

}

.button.secondary5:hover, .button.secondary5:focus {

  background-color: rgba(250, 250, 250, 0.7); /* Here, 0.7 is the opacity value (between 0 and 1) */

  color: #3a424e;

}

.button.accept {

  background-color: #539633;

  color: #ffffff;

}

.button.accept:hover, .button.accept:focus {

  background-color: #61B13B;

  color: #fefefe;

}

.button.decline {

  background-color: #d3414e;

  color: #ffffff;

}

.button.decline:hover, .button.decline:focus {

  background-color: #F44E5D;

  color: #fefefe;

}

.button.cancel {

  background-color: #e1e1e1;

  color: #7e7e7e;

  border: 0px solid #01573e;

}

.button.cancel:hover, .button.cancel:focus {

  background-color: #c8c7c7;

  color: #7e7e7e;

}

.button.highlight {

  background-color: #214251;

  color: #ffffff;

  font-family: "gotham", sans-serif;

  font-weight: 700;

  border-radius: .625em;

  font-size: 1.125em;

  animation: pulseAnimation 2s infinite; /* Add this line */

}

.button.highlight:hover, .button.highlight:focus {

  background-color: #0455A4;

  color: #DADCDF;

  animation: none; /* Stop the animation when the button is hovered over or focused */

}

/* Define the keyframes for the pulsing animation */

@keyframes pulseAnimation {

  0%, 100% {

    background-color: #214251;

    color: #ffffff;

  }

  50% {

    background-color: #0455A4;

    color: #DADCDF;

  }

}

.button.highlight_alternate {

  padding-left: 1.875em;

  padding-right: 1.875em;

  background-color: #234A59;

  color: #ffffff;

  font-family: "gotham", sans-serif;

  font-weight: 600;

  line-height: 1.1em;

  font-size: 1.125em;

}

.button.highlight_alternate:hover, .button.highlight_alternate:focus {

  background-color: #2b5c6f;

  color: #DADCDF;

}

.button.highlight_alternate2 {

  padding-left: 1.875em;

  padding-right: 1.875em;

  background-color: #035eb7;

  color: #ffffff;

  font-family: "gotham", sans-serif;

  /*font-weight: 600;*/

  line-height: 1.1em;

  /*font-size: 1.125em;*/

}

.button.highlight_alternate2:hover, .button.highlight_alternate2:focus {

  background-color: #046ed5;

  color: #fefefe;

}

.minimum_height_button {

  min-height: 1.125em;

}

.button.tag {

  font-family: "gotham", sans-serif;

  vertical-align: center;

  margin: 0 0 1rem 0;

  padding: 0.85em .85em;

  -webkit-appearance: none;

  border: 0px solid #ccced0;

  border-radius: 0;

  transition: background-color 0.25s ease-out, color 0.25s ease-out;

  font-size: 0.938em;

  font-weight: 700;

  line-height: 1.45;

  text-align: left;

  cursor: pointer;

  background-color: #f3f5f9;

  color: #5379BD;

}

.button.tag:hover, .button.tag:focus {

  background-color: #fafafa;

  color: #0455A4;

}

.button.tag:hover {

  scale: 1.025;

}

.button.tag:focus {

  color: #4A5259;

}

a.tag_sublink {

  color: #5379BD;

  font-size: 0.813em;

  font-weight: 500;

}

a.tag_sublink:hover, a.tag_sublink:focus {

  font-size: 0.813em;

  font-weight: 500;

}

.bkg_tag_container {

  margin-top: -1em;

  background-color: #fafafa;

  padding-bottom: .150em;

}

.toggle-icon {

  color: #cacaca;

}

.long-dash {

  font-weight: bold;

  letter-spacing: -3px;

}

.button.tag_highlight {

  font-family: "gotham", sans-serif;

  vertical-align: center;

  margin: 0 0 1rem 0;

  padding: 0.85em .85em;

  -webkit-appearance: none;

  border: 0px solid #ccced0;

  transition: background-color 0.25s ease-out, color 0.25s ease-out;

  font-size: 0.875em;

  font-weight: 500;

  line-height: 1.45;

  text-align: left;

  cursor: pointer;

  background-color: #234A59;

  color: #ffffff;

  border-radius: 0;

}

.button.tag_highlight:hover, .button.tag_highlight:focus {

  background-color: #2b5c6f;

  color: #DADCDF;

  /*font-weight: 700;*/

}

.button.tag_highlight:hover {

  scale: 1.025;

}

.media-object-section:first-child {

  padding-right: 0.500rem;

}

.media-object-section {

  -ms-flex: 0 1 auto;

  flex: 0 1 auto;

}

.media-object {

  margin-bottom: 0;

}

@media screen and (max-width: 39.9375em) {

  .media-object.stack-for-small .media-object-section {

    padding: 0;

    padding-bottom: 1rem;

    -ms-flex-preferred-size: 100%;

    flex-basis: 100%;

    max-width: 100%;

  }

  .media-object.stack-for-small .media-object-section img {

    width: 100%;

  }

}

.grid-padding-x_small > .cell {

  padding-right: 0.188rem;

  padding-left: 0.188rem;

}

.button.course_nav {

  background-color: #1e1e1e;

  ;

  color: #ffffff;

  font-weight: bold;

}

.button.course_nav:hover, .button.course_nav:focus {

  background-color: #135784;

  color: #fefefe;

}

.button.course_nav.dropdown::after {

  display: block;

  width: 0;

  height: 0;

  border: inset 0.4em;

  content: '';

  border-bottom-width: 0;

  border-top-style: solid;

  border-color: #fefefe transparent transparent;

  position: relative;

  top: 0.4em;

  display: inline-block;

  float: right;

  margin-left: 1em;

  margin-right: 1em;

}

.button.muted {

  background-color: #f2f2f2;

  color: #212529;

  font-size: .875em;

  border: 1px solid #dee2e6;

  line-height: 1.5;

}

.button.muted:hover, .button.muted:focus {

  background-color: #dfdfdf;

  color: #212529;

}

.button.muted_thin {

  background-color: #f2f2f2;

  color: #212529;

  font-size: .875em;

  border: 1px solid #dee2e6;

  line-height: .5;

}

.button.muted_thin:hover, .button.muted_thin:focus {

  background-color: #dfdfdf;

  color: #212529;

}

.button.muted_large {

  background-color: #f2f2f2;

  color: #212529;

  border: 1px solid #dee2e6;

}

.button.muted_large:hover, .button.muted_large:focus {

  background-color: #dfdfdf;

  color: #212529;

}

.button.success {

  background-color: #539633;

  color: #fefefe;

}

.button.success:hover, .button.success:focus {

  background-color: #3c7c31;

  color: #fefefe;

}

.button.alert {

  background-color: #f26722;

  color: #fefefe;

}

.button.alert:hover, .button.alert:focus {

  background-color: #d4591c;

  color: #fefefe;

}

.simple-subscription-form .button {

  margin-bottom: 0;

  border-radius: 0 0 0 0;

}

.button.hollow.secondary:hover, .button.hollow.secondary:focus {

  border-color: #54656f;

  color: #ffffff;

  background-color: #539633;

}

.button.hollow.secondary:hover span, .button.hollow.secondary:focus span {

  color: #D1D1D1;

}

.button.hollow.secondary {

  border: 1px solid #ffffff;

  border-top-color: rgb(255, 255, 255);

  border-right-color: rgb(255, 255, 255);

  border-bottom-color: rgb(255, 255, 255);

  border-left-color: rgb(255, 255, 255);

  color: #ffffff;

  background-color: transparent;

  text-align: left;

}

.bkg_main_nav_cell {

  background-color: #f3f5f9;

  border: 3px solid #ffffff;

}

.button.main_nav:hover, .button.main_nav:focus {

  border-color: #2b5c6f;

  color: #c4d8df;

  background-color: #2b5c6f;

}

.button.main_nav:hover span, .button.main_nav:focus span {

  color: #d1d1d1;

}

.button.main_nav {

  border: 1px solid #ffffff;

  color: #ffffff;

  background-color: #234a59;

  text-align: center;

  border-radius: 8px;

  line-height: 1.35em;

  font-size: 1.063em;

}

span.button_span_lighter {

  font-size: 0.813em;

  color: #d1d1d1;

  font-weight: normal;

  line-height: 2em;

}

/* Header Alert button */

.button-badge {

  background-color: transparent;

  text-decoration: none;

  padding: .5rem 1rem;

  position: relative;

  display: inline-block;

  border-radius: .2rem;

  transition: all ease 0.4s;

}

/*.button-badge:hover {







      border: 1px solid #7e7e7e;







        border-top-color: rgb(126, 126, 126);







        border-right-color: rgb(126, 126, 126);







        border-bottom-color: rgb(126, 126, 126);







        border-left-color: rgb(126, 126, 126);	







}*/

.badge {

  background-color: transparent;

  margin-left: 1.5em;

  font-size: .625em;

  padding-left: .195em;

  font-weight: normal;

  min-width: 2.1em;

  /*margin-top: -2em;*/

}

.badge.left_notification {

  background: #d3414e;

  color: #ffffff;

}

.badge.content_notification {

  background: #e4e8ea;

  color: #5b6771;

  margin-left: .750em;

  font-weight: bold;

}

/* -------------------- B. BUTTON GROUPS -------------------- */

/* -------------------- C. SPLIT BUTTONS -------------------- */

/* -------------------- D. DROPDOWN BUTTONS -------------------- */

.dropdown.button, button.dropdown {

  position: relative;

  padding-right: 0rem;

}

.f-dropdown {

  position: absolute;

  left: -9999px;

  list-style: none;

  margin-left: 0;

  width: 100%;

  max-height: none;

  height: auto;

  background: white;

  border: solid 1px #dfe1e4;

  font-size: 0.750rem;

  z-index: 99;

  margin-top: 2px;

  max-width: 200px;

}

.f-dropdown.drop-right {

  position: absolute;

  left: -9999px;

  list-style: none;

  width: 100%;

  max-height: none;

  height: auto;

  background: white;

  border: solid 1px #dfe1e4;

  font-size: 0.750rem;

  z-index: 99;

  margin-top: 0;

  margin-left: 2px;

  max-width: 200px;

}

.f-dropdown.drop-left {

  position: absolute;

  left: -9999px;

  list-style: none;

  width: 100%;

  max-height: none;

  height: auto;

  background: white;

  border: solid 1px #dfe1e4;

  font-size: 0.750rem;

  z-index: 99;

  margin-top: 0;

  margin-left: -2px;

  max-width: 200px;

}

/*







=============================================== 06. CALLOUTS AND PROMPT STYLES ===============================================







*/

.callout.primary {

  background-color: #f2f2f2;

  color: #333333;

  border: 1px solid rgba(216, 216, 216, 1);

}

.callout.medium {

  padding-top: 2.250rem;

  padding-right: 1.75rem;

  padding-bottom: 2.250rem;

  padding-left: 1.75rem;

}

.callout.information {

  background-color: #54656f;

  background-image: linear-gradient(#54656f, #2d383e);

  border: .375em solid #2d383e;

}

.callout.information p {

  color: #ffffff;

  /*font-weight: 500;*/

}

.callout.information p a, .callout.information ul.menu li a {

  color: #8EB2F3;

  /*font-weight: 500;*/

  text-decoration: none;

}

.callout.information p a:hover, .callout.information ul.menu li a:hover {

  color: #ffffff;

  /*font-weight: 500;*/

  text-decoration: none;

}

.callout.information ul.menu li a {

  padding-top: .375em;

  padding-left: 0px;

  padding-right: 1.750em;

}

.middle_container {

  margin: auto;

  width: 85%;

}

.media_border {

  border: 10px solid #ffffff;

  border-radius: 0;

  background: #ffffff;

  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);

}

.callout.success {

  background-color: #dde9d8;

  color: #0a0a0a;

}

.callout.warning {

  background-color: #efefef;

  background-image: linear-gradient(#efefef, #ffffff);

  color: #1e1e1e;

  font-size: .938em;

  line-height: 1.6;

}

.callout.alert {

  background-color: #f7e4e1;

  background-image: linear-gradient(#f7e4e1, #ffffff);

  /*color: #ffad03;*/

  border: 1px solid #ffffff;

  border-top: 10px solid #d3414e;

  padding: 1.25em;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.callout.alert p {

  color: #000000;

  font-weight: 500;

}

.callout.alert p a, .callout.alert ul.menu li a {

  color: #DADCDF;

  font-weight: 500;

  text-decoration: none;

}

.callout.alert p a:hover, .callout.alert ul.menu li a:hover {

  color: #ffffff;

  font-weight: 500;

  text-decoration: none;

}

.callout.alert ul.menu li a {

  padding-top: .375em;

  padding-left: 0px;

  padding-right: 1.750em;

}

.callout.alert h4, .callout.alert h2 {

  color: #EFEFEF;

  font-weight: 700;

}

.callout.alert .close-button {

  position: absolute;

  color: #555555;

  cursor: pointer;

}

.callout.alert .close-button:hover {

  position: absolute;

  color: #FFFFFF;

  cursor: pointer;

}

.callout.transparent_background2 {

  background-color: transparent;

  border: 0px solid rgba(236, 238, 241, 1);

  padding-top: 0em;

  padding-bottom: 0em;

  padding-left: 0em;

  padding-right: 0em;

}

.callout.transparent_background3 {

  background-color: transparent;

  border: 0px solid rgba(236, 238, 241, 1);

}

.callout.transparent_background {

  background-color: transparent;

  border: 0px solid rgba(236, 238, 241, 1);

  padding-top: 0em;

  padding-bottom: 0em;

  padding-left: 3.625em;

  padding-right: 3.625em;

}

.callout.transparent_background4 {

  background-color: transparent;

  border: 0px solid rgba(236, 238, 241, 1);

  padding-top: 2.5em;

  padding-bottom: 2.5em;

  padding-left: 1.75em;

  padding-right: 1.75em;

}

.callout.transparent_background5 {

  background-color: transparent;

  border: 0px solid rgba(236, 238, 241, 1);

  padding-top: .750em;

  padding-bottom: 2.00em;

  padding-left: 2.00em;

  padding-right: 2.00em;

}

.callout.transparent_background6 {

  background-color: transparent;

  border: 0px solid rgba(236, 238, 241, 1);

  padding-top: 1em;

  padding-bottom: 0;

  padding-left: 1em;

  padding-right: 1em;

}

.callout.slide_out {

  color: #333333;

  padding-top: 25px;

  border-bottom: 0px solid #ffffff;

  background-color: #eaeaea;

  /*background-image: url('../img/bkg_slide_out.png');*/

  /*background-repeat: no-repeat;*/

}

.callout.primary_solid {

  background-color: #F0F0F7;

  color: #373737;

  border: 1px solid rgba(202, 206, 213, 1);

  border-style: solid;

  padding-top: 1.5em;

  padding-left: 1.5em;

  padding-right: 1.5em;

  padding-bottom: 1.5em;

  margin-top: .875em;

  margin-bottom: .875em;

}

.callout.post_reply {

  background-color: #F0F0F7;

  color: #373737;

  border: 0px solid rgba(202, 206, 213, 1);

  border-style: solid;

  padding-top: 1.5em;

  padding-left: 1.5em;

  padding-right: 1.5em;

  padding-bottom: 1.5em;

  margin-top: .875em;

  margin-bottom: .875em;

}

.callout.roc_background {

  background-color: #F0F0F7;

  background-image: url('../img/bkg_roc2.png');

  background-repeat: no-repeat;

  color: #373737;

  border: 1px solid rgba(202, 206, 213, 1);

  border-style: solid;

  padding-top: 1.5em;

  padding-left: 1.5em;

  padding-right: 1.5em;

  padding-bottom: 1.5em;

  margin-top: .875em;

  margin-bottom: .875em;

}

.callout.roc_background_white_border {

  background-color: #F0F0F7;

  background-image: url('../img/bkg_roc3.png');

  background-repeat: no-repeat;

  color: #373737;

  border: 1px solid rgba(255, 255, 255, 1);

  border-style: solid;

  padding-top: 1.5em;

  padding-left: 1.5em;

  padding-right: 1.5em;

  padding-bottom: 1.5em;

  margin-top: .875em;

  margin-bottom: .875em;

}

.callout.post_reply_user {

  background-color: #e3e3ec;

  color: #373737;

  border: 0px solid rgba(202, 206, 213, 1);

  border-style: solid;

  padding-top: 1.5em;

  padding-left: 1.5em;

  padding-right: 1.5em;

  padding-bottom: 1.5em;

  margin-top: .875em;

  margin-bottom: .875em;

}

.callout.post_container {

  background-color: #ffffff;

  border: 1px solid rgba(225, 225, 225, 1);

  padding-top: 2.625em;

  padding-left: 1.500em;

  padding-right: 1.500em;

  padding-bottom: 2.625em;

  border-radius: 0;

}

.post_container li {

  color: #1e1e1e;

}

.callout.poster_in_post {

  background-color: #f5f5f5;

  color: #4d4d4d;

  border: 1px solid rgba(225, 225, 225, 1);

}

.callout.benefits {

  background-color: #ECE1DE;

  color: #202124;

  border: 0px solid rgba(225, 225, 225, 1);

}

.bkg_highlighted {

  background-image: url('../img/bkg_content_callout.png');

  background-repeat: no-repeat;

  background-position: left bottom;

}

.bkg_highlighted_light {

  background-image: url('../img/bkg_content_callout_light.png');

  background-repeat: no-repeat;

  background-position: left bottom;

}

.bkg_highlighted_content {

  background-image: url('../img/bkg_content_callout_lighter.png');

  background-repeat: no-repeat;

  background-position: left bottom;

}

.bkg_leftcol {}

.callout_max {

  max-width: 45.000em;

}

.leftbar_max {

  max-width: 25%;

}

.callout.testimonial {

  background-color: transparent;

  color: #ffffff;

  border: 0px solid rgba(236, 238, 241, 1);

  padding-top: 0em;

  padding-bottom: 0em;

  padding-left: 3.625em;

  padding-right: 3.625em;

}

.callout.secondary {

  background-color: #ffffff;

  border: 0px solid rgba(225, 225, 225, 1);

  margin-top: 0.625em;

  margin-bottom: 0em;

  padding-top: 2.625em;

  padding-left: 2.625em;

  padding-right: 2.625em;

  padding-bottom: 2.625em;

  border-radius: 0;

}

.callout.secondary2 {

  background-color: #ffffff;

  border: 1px solid rgba(225, 225, 225, 1);

  padding-top: 2.625em;

  padding-left: 2.625em;

  padding-right: 2.625em;

  padding-bottom: 2.625em;

  border-radius: 0;

}

.callout.grey_callout {

  background-color: #e1e1e1;

  border: 1px solid rgba(225, 225, 225, 1);

  margin-top: 2.699em;

  margin-bottom: 0em;

  padding-top: 2.625em;

  padding-left: 2.625em;

  padding-right: 2.625em;

  padding-bottom: 2.625em;

  border-radius: 0;

  color: #0a0a0a;

}

.callout.white_callout {

  background-color: #ffffff;

  border: 0px solid rgba(0, 0, 0, 1);

  margin-top: 0em;

  margin-bottom: 0em;

  padding-top: 0.500em;

  padding-left: 0.500em;

  padding-right: 0.500em;

  padding-bottom: 0.500em;

  border-radius: 0;

  color: #43425D;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.card_radius {

  border-radius: 45px;

}

.callout {

  position: relative;

  margin: 0 0 0 0;

  padding: .750rem;

  border: 0px solid rgba(10, 10, 10, 0.25);

  border-radius: 0;

  background-color: white;

  color: #0a0a0a;

}

.callout_header {

  position: relative;

  margin: 0 0 0 0;

  padding: 1rem;

  border: 0px solid rgba(10, 10, 10, 0.25);

  border-radius: 0;

  background-color: #1c1918;

  color: #0a0a0a;

}

.callout.page_leftbar {

  background-color: #f2f2f2;

  color: #333333;

  border: 0px solid rgba(216, 216, 216, 1);

}

/* -------------------- A. MODALS -------------------- */







.reveal-modal-bg {

  z-index: 99 !important;

}

.reveal {

  z-index: 1006;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  display: none;

  padding: 2.5rem;

  border: 1px solid #fe1e1e1;

  border-radius: 0;

  background-color: #ffffff;

  position: relative;

  top: 250px;

  margin-right: auto;

  margin-left: auto;

  overflow-y: auto;

}

.reveal-overlay {

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 1005;

  display: none;

  background-color: rgba(10, 10, 10, 0.85);

  overflow-y: scroll;

}

/* -------------------- B. ALERTS AND FIELD SETS -------------------- */

fieldset {

  border: 1px solid #DDDDDD;

  background: #ffffff;

  padding: 1.25rem;

  margin: 1.125rem 0;

}

fieldset.grey {

  border: 1px solid #a6a6a6;

  background: #F2F2F3;

  padding: 1.5rem;

  border-width: 1px 1px 1px 1px;

  margin: 1.125rem 0;

}

fieldset legend {

  font-weight: bold;

  background: #ffffff;

  color: #27303c;

  padding-top: 0.625rem;

  padding-bottom: 0.625rem;

  padding-left: 1rem;

  padding-right: 1rem;

  margin: 0;

  margin-left: -0.1875rem;

}

fieldset legend.colour {

  font-size: .875em;

  font-weight: bold;

  background: #01233F;

  color: #ffffff;

  padding-top: 0.625rem;

  padding-bottom: 0.625rem;

  padding-left: 1rem;

  padding-right: 1rem;

  margin: 0;

  margin-left: -0.1875rem;

}

.long_checkboxes [type='file'], .long_checkboxes [type='checkbox'], .long_checkboxes [type='radio'] {

  margin-top: 0;

  margin-bottom: 0;

  margin-left: 0;

  margin-right: 1;

}

.long_checkboxes label {

  display: block;

  padding-right: 10px;

  padding-left: 22px;

  text-indent: -22px;

  line-height: 1.5;

}

.long_checkboxes input {

  vertical-align: top;

}

.long_checkboxes label span {

  vertical-align: top;

  cursor: text;

}

.long_checkboxes input[type=checkbox] + span {

  font-weight: normal;

}

.long_checkboxes input[type=checkbox]:checked + span {

  font-weight: bold;

  color: #333;

}

.long_checkboxes_larger label {

  display: block;

  padding-right: 10px;

  padding-left: 22px;

  text-indent: -22px;

  line-height: 1.5;

}

.long_checkboxes_larger input {

  vertical-align: top;

}

.long_checkboxes_larger label span {

  vertical-align: top;

  cursor: text;

  font-size: 1.125em;

}

.long_checkboxes_larger input[type=checkbox] + span {

  font-weight: normal;

}

.long_checkboxes_larger input[type=checkbox]:checked + span {

  font-weight: bold;

}

.checkboxFormatted {

  display: inline-block;

  vertical-align: top;

  padding-left: 25px;

  position: relative;

  font-size: .875em;

  font-weight: normal;

  width: 100%;

  cursor: text;

}

.checkboxFormatted input {

  position: absolute;

  left: 0;

  top: .438em;

}

/* -------------------- C. PANELS, DIVISIONS AND SPANS -------------------- */

#staffGrid {

  margin-left: -0.75rem;

  margin-right: -0.75rem;

}

.staff-card {

  padding: 0.75rem;

}

.staff-card {

  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

  background: #ffffff;

  transition: transform 0.2s ease;

}

.staff-card:hover {

  transform: translateY(-4px);

}

.staff-card-inner {

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.staff-card-inner:hover {

  transform: translateY(-4px);

  /*box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);*/

}

.staff-image {

  width: 100%;

  height: 240px;

  object-fit: cover;

}

.staff-border {

  height: 5px;

  background-color: #428a77;

}

.staff-info {

  background-color: #f1f5f4;

  padding: 1rem;

  text-align: left;

}

.staff-title {

  font-size: 1.2rem;

  font-weight: bold;

  margin: 0;

}

.staff-position {

  font-size: 1rem;

  margin-bottom: 0.5rem;

  color: #444;

}

/* Toggle button */

.about-toggle {

  cursor: pointer;

  color: #007850;

  font-weight: 600;

  margin-top: 0.5rem;

  font-size: 0.95rem;

  text-decoration: none;

}

.about-toggle:hover {

  color: #115740;

}

.about-toggle .arrow {

  margin-left: 0.5rem;

  font-weight: bold;

}

/* Collapsible bio section (animated) */

.staff-description {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.6s ease, padding 0.5s ease;

  font-size: 0.95rem;

  margin-top: 0.5rem;

  padding-top: 0; /* No padding when collapsed */

}

.staff-description.active {

  max-height: 800px; /* large enough for long bios */

  padding-top: 0.5rem;

}

/* Grid gutters same as staff */

#hhcProducts {

  margin-left: -0.75rem;

  margin-right: -0.75rem;

}

.product-card {

  padding: 0.75rem;

}

.product-card {

  border-radius: 12px;

  overflow: hidden;

  background: #fff;

  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);

  transition: transform .2s ease;

}

.product-card:hover {

  transform: translateY(-4px);

}

.product-card__image-wrap {

  /* Uniform display window */

  aspect-ratio: 4 / 3; /* consistent across grid */

  background: #fff; /* or a subtle gray */

  display: flex; /* center whatever we get */

  align-items: center;

  justify-content: center;

  padding: .5rem; /* a little breathing room */

  position: relative; /* keeps your badges positioned */

  overflow: hidden; /* just in case */

}

.product-card__image {

  width: 100%;

  height: 100%;

  object-fit: contain; /* show the whole product */

  object-position: center;

  /* don’t use image-rendering: pixelated here; it’ll look blocky */

}

/* Position the container once */

/*.online-store .product-card__image-wrap { position: relative; }*/

.online-store .badges {

  position: absolute;

  top: .5rem;

  left: .5rem;

  display: flex;

  align-items: center;

  gap: .4rem;

  flex-wrap: wrap;

  z-index: 2;

}

/* 1) Badges inside the container = flow side-by-side */

.online-store .badges .badge {

  position: static; /* critical: not absolute */

}

/* 2) Fallback: a single badge without the container stays absolute */

.online-store .product-card__image-wrap > .badge {

  position: absolute;

  top: .5rem;

  left: .5rem;

}

/* Optional: narrow screens stack vertically */

@media (max-width: 420px) {

  .online-store .badges {

    flex-direction: column;

    align-items: flex-start;

    gap: .35rem;

  }

}

.product-card__border {

  height: 5px;

  background-color: #428a77;

}

.online-store .badge {

  position: absolute;

  top: .5rem;

  left: .5rem;

  font-size: .75rem;

  font-weight: 600;

  padding: .25rem .5rem;

  border-radius: 999px;

  background: #115740;

  color: #fff;

}

.online-store .badge--promo {

  background: #c62828;

}

.online-store .badge--new {

  background: #2e7d32;

}

.online-store .badge--bestseller {

  background: #6a1b9a;

}

.product-card__info {

  background: #f1f5f4;

  padding: 1rem;

}

.product-card__title {

  font-size: 1.1rem;

  font-weight: 700;

  margin: 0 0 .25rem;

  color: #0f2e2a;

}


.product-grid .product-card__desc,
.product-list .product-card__desc,
.category-grid .product-card__desc {
  margin: 0 0 .5rem;
  color: #334;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}






.product-card__meta {

  display: flex;

  gap: .75rem;

  align-items: baseline;

  flex-wrap: wrap;

}

.price__now {

  font-weight: 800;

  color: #428a77;

}

.price__was {

  margin-left: .35rem;

  color: #333333;

  text-decoration: line-through;

}



.price__save { 

  font-weight: 700; 

  margin-left: .35rem; 

  color: #c62828; /* matches your promo badge palette */

  font-size: .95em;

}



.price-savings {

  margin-left: .35rem;

  font-weight: 700;

  color: #c62828; /* matches your promo badge color family */

  white-space: nowrap;

}





.stock {

  font-size: .85rem;

  color: #555;

}

.stock--in {

  color: #2e7d32;

}

.stock--low {

  color: #c47f00;

}



.stock--out {

  color: #c62828; /* red tone for out of stock */

  font-weight: 600; /* make it stand out more */

}



.stock--pickup {

  color: #004d99;

}

.product-card__link {

  display: block;

  color: inherit;

  text-decoration: none;

}

.product-card__link:focus {

  outline: 2px solid #115740;

  outline-offset: 4px;

  border-radius: 12px;

}

/* Remove underline from the whole card link */

.product-card__link {

  text-decoration: none;

  color: inherit;

}

/* On hover/focus, still no underline on everything */

.product-card__link:hover, .product-card__link:focus {

  text-decoration: none;

}

/* Optional: underline only the product title on hover/focus */

.product-card__link:hover .product-card__title, .product-card__link:focus .product-card__title {

  text-decoration: underline;

}

.product-card__cta {

  padding: .75rem;

  background: #fff;

  border-top: 1px solid #e6eceb;

}

.product-card__cta .button {

  margin: 0;

  text-decoration: none;

}

.product-card__cta .button:hover, .product-card__cta .button:focus {

  text-decoration: none;

}





.pd-cta-row {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem 1rem;            /* row/column gap */

  align-items: center;

  justify-content: flex-start;  /* or space-between if you prefer edges */

  margin-top: 1rem;

}



/* Base button */

.btn-cta {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  font-family: "gotham", sans-serif;

  font-weight: 600;

  font-size: 0.95rem;

  text-decoration: none;

  border-radius: 6px;

  padding: 0.55rem 0.9rem;

  line-height: 1;

  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;

}



/* Outline green (stronger) */

.btn-cta--secondary {

  border: 2px solid #428a77;

  color: #428a77;

  background: transparent;

}

.btn-cta--secondary:hover {

  background: #428a77;

  color: #fff;

  transform: translateY(-1px);

  text-decoration: none;	

}



/* Quiet text-style button */

.btn-cta--link {

  border: 0;

  color: #135784;

  background: transparent;

  padding-left: 0;

  padding-right: 0;

  text-decoration: none;

  text-underline-offset: 2px;

}

.btn-cta--link:hover {

  text-decoration: none;

  color: #428a77;

}





/* Responsive: stack on narrow screens */

@media (max-width: 640px) {

  .pd-cta-row {

    flex-direction: column;

    align-items: stretch; /* full width buttons */

  }

  .btn-cta {

    justify-content: center;

  }

}







.shipping-returns-box {

  /*background: rgba(255, 255, 255, 0.85);*/

border: 0px solid #f1f5f4;

border-radius: 8px;

  padding: 1.25rem;

margin-top: 1.25rem;	

margin-bottom: 1.25rem;	

  /*box-shadow: 0 2px 6px rgba(0,0,0,0.04);*/

}



.section-title {

  font-family: "gotham", sans-serif;

  font-size: 1rem;

  font-weight: 700;

  margin-bottom: 0.75rem;

  color: #333;

}



.shipping-info-list {

  list-style: none;

  padding: 0;

  margin: 0;

}



.shipping-info-list li {

  display: flex;

  align-items: flex-start;

  gap: 0.5rem;

  margin-bottom: 0.75rem;

  font-size: 0.9rem;

  line-height: 1.4;

  color: #555;

}



.shipping-info-list li i {

  flex-shrink: 0;

  font-size: 1.1rem;

  color: #428a77; /* brand green */

  margin-top: 0.15rem;

}



.shipping-info-list li span {

  display: inline; /* ensures inline flow for text + links */

}



.shipping-info-list a {

  color: #135784;

  font-weight: inherit;

  text-decoration: underline;

  text-underline-offset: 2px;

  transition: color 0.2s ease;

}



.shipping-info-list a:hover {

  color: #0f4568;

  text-decoration: none;

}















.view-all-inline {

  color: #007850; /* your default link color */

  text-decoration: none;

  font-weight: 600; /* optional for emphasis */

  transition: color 0.2s ease;

}

.view-all-inline:hover, .view-all-inline:focus {

  color: #004d38; /* darker shade on hover/focus */

  text-decoration: none; /* ensure no underline */

}

div.content_area {

  padding-top: 0em;

  padding-right: 1.875em;

  padding-bottom: 1.563em;

  padding-left: 1.875em;

}

div.content_area_inside {

  margin-top: 0;

  padding-top: 1.563em;

  padding-right: 1.563em;

  padding-bottom: 1.563em;

  padding-left: 1.563em;

  background-color: #ffffff;

}

div.max_area_constrained {

  max-width: 45.313em;

}

div.nav_area {

  padding-top: .875em;

  padding-right: 0px;

  padding-left: 1.75em;

  background-color: #202427;

}

div.more_padding_left {

  padding-left: 1rem;

}

div.more_padding_left_more {

  padding-left: 5rem;

}

div.padding_left_little {

  padding-left: .375rem;

}

div.more_padding_right {

  padding-right: 1.75rem;

}

div.alot_more_padding {

  padding: 1.750em;

}

div.even_more_padding_left {

  padding-left: 1.50rem;

}

span.main_content_notification {

  color: #D3414E;

  margin-left: .563em;

  font-size: .938em;

}

span.green_notification {

  color: #539633;

  font-weight: bold;

  font-size: 1.125em;

  margin-right: .625em;

}

.highlight_text {

  background-image: url('../img/highlighter_yellow.png');

  background-repeat: no-repeat;

  background-position: center;

}

span.sub_heading {

  font-size: 0.750em;

  font-family: "gotham", sans-serif;

  color: #818285;

  font-weight: 500;

  line-height: 0.750em;

}

div.main_title {

  /*padding-left: 1rem;*/

  color: #C9C5C6;

  font-size: 2em;

  /*font-family: "proxima-nova-extra-condensed", sans-serif;*/

  font-weight: 800;

  /*font-style: normal;*/

  padding: 0 0;

}

.main_title_logo {

  padding-right: 2.5rem;

}

div.main_title_logo a {

  color: #C9C5C6;

}

div.main_title_logo a:hover {

  color: #ffffff;

  text-decoration: none;

}

img.header_logo {

  max-height: 2.8125em;

  height: auto;

  width: auto;

  max-width: 100%;

}

div.main_title a {

  color: #C9C5C6;

  font-size: 2em;

  font-family: "gotham", sans-serif;

  font-weight: 800;

  font-style: normal;

  padding: 0 0;

}

div.main_title a:hover {

  color: #ffffff;

  text-decoration: none;

}

div.main_subtitle {

  /*padding-left: 1rem;*/

  /*padding-top: 0.375rem;*/

  color: #C9C5C6;

  font-weight: bold;

  font-size: .875em;

}

span.alias {

  font-size: 1em;

  font-family: "gotham", sans-serif;

  color: #202426;

  font-weight: 500;

}

span.modal_title {

  color: #231f20;

  position: absolute;

  top: .375em;

  left: .875em;

  font-weight: bold;

  font-size: 1em;

}

div.modal_title_background {

  background-color: #234A59;

  padding-left: 25px;

}

div.modal_title_background_darker {

  background-color: #01233F;

  padding-left: 25px;

}

div.sub_heading2 {

  font-size: 1em;

  font-family: "gotham", sans-serif;

  text-transform: uppercase;

  color: #A88751;

  font-weight: 500;

  line-height: 1.25em;

  margin-bottom: 1em;

}

div.sub_heading_larger {

  font-size: 1em;

  font-family: "gotham", sans-serif;

  text-transform: uppercase;

  color: #A88751;

  font-weight: 700;

  line-height: 1.5em;

  margin-bottom: 1em;

}

div.sub_heading3 {

  font-size: 0.75em;

  font-family: "gotham", sans-serif;

  text-transform: uppercase;

  color: #D0A45D;

  font-weight: 500;

  padding-top: .938em;

}

div.featured_heading {

  font-size: .938em;

  font-family: "gotham", sans-serif;

  color: #FA6980;

  font-weight: 600;

  line-height: 1.125em;

  padding-top: .063em;

  padding-bottom: .063em;

}

div.featured_sub_heading {

  font-size: 0.750em;

  font-family: "gotham", sans-serif;

  color: #ffffff;

  font-weight: 500;

  padding-top: 1.000em;

}

/* Center divs at small; left or right on medium and large */

.leftdiv, .centerdiv, .rightdiv {

  text-align: center;

}

@media only screen and (min-width: 641px) {

  .leftdiv {

    text-align: left;

  }

  .rightdiv {

    text-align: right;

  }

}

div.large_div {

  font-size: 1.375em;

}

div.large_div2 {

  padding-top: .625em;

  padding-bottom: .375em;

  font-size: 1.125em;

}

div.description2 {

  padding-bottom: .625em;

}

div.small_text {

  font-size: 0.750em;

  padding: 5px;

  line-height: 1.6;

}

div.small_div, span.small_div {

  font-size: 0.875em;

}

div.small_div2 {

  color: #737376;

  font-size: 0.875em;

}

div.small_div3, span.small_div3 {

  padding-top: 0.500em;

  font-size: 0.875em;

}

div.small_div4 {

  font-size: 0.750em;

  font-weight: normal;

}

div.small_div5 {

  font-size: 0.750em;

  font-weight: normal;

  line-height: 1.1;

}

span.icon_span {

  font-size: 0.813em;

  color: #9DA8B1;

  font-weight: normal;

}

span.button_span {

  font-size: 0.813em;

  color: #9DA8B1;

  font-weight: normal;

  line-height: 2em;

}

span.button_span_darker {

  font-size: 0.813em;

  color: #848e96;

  font-weight: normal;

  line-height: 2em;

}

span.new_span {

  font-size: 0.813em;

  color: #E43B3F;

  font-weight: normal;

  padding-left: 0.625em;

}

div.new_span {

  font-size: 0.813em;

  color: #E43B3F;

  font-weight: normal;

  padding-left: 0;

}

span.new_span_dark {

  font-size: 0.813em;

  color: #4c565f;

  font-weight: bold;

  padding-left: 0.625em;

  font-style: italic;

}

span.new_span_slider {

  font-size: 0.813em;

  color: #ffad03;

  font-weight: normal;

  padding-left: 0.500em;

}

sup.slider_sup {

  top: -0.25em;

}

span.icon_span_darker {

  font-size: 0.813em;

  color: #7f878e;

  font-weight: normal;

}

span.icon_span_lighter {

  font-size: 0.813em;

  color: #C1C1C1;

  font-weight: normal;

}

span.price_small {

  font-size: 0.625em;

  color: #1c1918;

  font-weight: normal;

}

.more_space_top {

  margin-top: 1.063em;

}

.little_space_top {

  margin-top: 0.875em;

}

.content_title_header {

  color: #ffffff;

  font-weight: bold;

  background-color: #01233F;

  padding: .625em 1.125em .625em 1.125em;

  /*border-bottom: .313em solid #01325a;*/

}

.content_title_header_table {

  color: #ffffff;

  font-weight: bold;

  background-color: #D3414E;

  padding: .625em 0 .313em 0.625em;

  border-bottom: .313em solid #8E2E37;

}

.content_subtitle_header {

  color: #ffffff;

  font-weight: bold;

  font-size: 0.875em;

  background-color: #373737;

  padding: .625em 0 .313em 1.313em;

}

.content_area_white {

  color: #373737;

  font-weight: normal;

  font-size: .875em;

  background-color: #FFFFFF;

  padding-top: 0;

  padding-bottom: .313em;

  padding-left: .313em;

  padding-right: .313em;

}

.content_area_white_table {

  color: #373737;

  font-weight: normal;

  font-size: 0.938em;

  background-color: transparent;

  padding-top: 0;

  padding-bottom: 0;

  padding-left: 0;

  padding-right: 0;

}

.content_area_white ul li {

  /*padding-top: 1.000em;*/

  padding-bottom: .313em;

}

.content_area_white a {

  /*padding-top: 1.000em;*/

  font-size: 0.938em;

}

.content_area_white ul li.divider_space {

  padding-top: 1.000em;

  padding-bottom: .313em;

}

.content_area_white ul li.divider_space_little {

  padding-top: .625em;

}

/* -------------------- D. TOOL TIPS -------------------- */

.has-tip {

  border-bottom: dotted 1px #CCCCCC;

  cursor: text;

  font-weight: normal;

  color: #333333;

}

.has-tip:hover, .has-tip:focus {

  border-bottom: dotted 1px #CCCCCC;

  color: #333333;

}

.tooltip {

  display: none;

  position: absolute;

  z-index: 1006;

  font-weight: normal;

  font-size: 0.750rem;

  line-height: 1.3;

  padding: 0.75rem;

  max-width: 200px;

  left: 50%;

  width: 100%;

  color: #FFFFFF;

  background: #0a0a0a;

}

span.tooltip_text {

  font-size: 0.875em;

  color: #4968a9;

  font-weight: normal;

  text-decoration: none;

  padding-left: 1.875em;

}

/* -------------------- E. JOYRIDES -------------------- */

/* -------------------- F. PRICING TABLES -------------------- */

/* .pricing-table .bullet-item {







	







min-height: 160px;







	







} */

.pricing-table {

  background-color: #fefefe;

  border: solid 0px #cacaca;

  width: 100%;

  text-align: left;

  list-style-type: none;

  padding: 0;

}

.pricing-table2 {

  background-color: #ffffff;

  border: solid 0px #cacaca;

  width: 100%;

  text-align: left;

  list-style-type: none;

  padding: 0;

}

.pricing-table li {

  border-bottom: dotted 1px #cacaca;

  padding: 0.875rem 1.125rem;

}

.pricing-table2 li {

  border-bottom: dotted 1px #cacaca;

  padding: 0.875rem 0rem;

}

.pricing-table li:last-child {

  border-bottom: 0;

}

.pricing-table2 li:last-child {

  border-bottom: 0;

}

.pricing-table .title {

  background-color: #0a0a0a;

  color: #fefefe;

  border-bottom: 0;

}

.pricing-table .price {

  background-color: #e6e6e6;

  font-size: 2rem;

  border-bottom: 0;

}

.pricing-table2 .price {

  background-color: #e6e6e6;

  font-size: 2rem;

  border-bottom: 0;

}

.pricing-table .description {

  color: #8a8a8a;

  font-size: 80%;

}

.pricing-table2 .description {

  color: #8a8a8a;

  font-size: 80%;

}

.pricing-table :last-child {

  margin-bottom: 0;

}

.pricing-table2 :last-child {

  margin-bottom: 0;

}

.pricing-table .button {

  color: #fefefe;

}

.pricing-table2 .button {

  color: #fefefe;

}

/*







=============================================== 07. IMAGE AND MEDIA STYLES ===============================================







*/

.img-swap {

  cursor: pointer;

  padding-bottom: 0.625em;

}

/* -------------------- A. THUMBNAILS -------------------- */

.product_thumbnail {

  display: block;

  overflow: hidden;

  height: 3.125em;

}

.product_thumbnail img {

  display: block;

  height: 100%;

}

.product_thumbnail img.portrait {

  width: 100%;

  height: auto;

}

.tcp_photo_thumbnail {

  position: relative;

  width: 40px;

  height: 40px;

  overflow: hidden;

}

.tcp_photo_thumbnail img {

  position: absolute;

  left: 50%;

  top: 50%;

  height: 100%;

  width: auto;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}

.tcp_photo_thumbnail img.portrait {

  width: 100%;

  height: auto;

}

.user_photo_thumbnail {

  position: relative;

  width: 40px;

  height: 40px;

  overflow: hidden;

}

.user_photo_thumbnail img {

  position: absolute;

  left: 50%;

  top: 50%;

  height: 100%;

  width: auto;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}

.user_photo_thumbnail img.portrait {

  width: 100%;

  height: auto;

}

.user_photo_larger {

  position: relative;

  width: 65px;

  height: 65px;

  overflow: hidden;

}

.user_photo_larger img {

  position: absolute;

  left: 50%;

  top: 50%;

  height: 100%;

  width: auto;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}

.user_photo_larger img.portrait {

  width: 100%;

  height: auto;

}

.photo_width {

  max-width: 100px;

}

.photo_width_small {

  max-width: 6.250em;

}

.photo_width_medium {

  max-width: 15.625em;

}

.photo_width_large {

  max-width: 28.125em;

}

.image_max_height {

  max-height: 9.125em;

  /* min-height: 9.125em; */

  display: block;

  margin: auto;

}

/* -------------------- B. SLIDERS -------------------- */

.orbit-container {

  /*vertical-align: bottom;*/

  border: 10px solid #ffffff;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

ul.orbit-container li {

  display: inline-block;

}

.orbit-container_testimonial {

  /*vertical-align: bottom;*/

  border: 0px solid #ffffff;

  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.19);

  background-color: #d3414e;

  background-image: linear-gradient(#d3414e, #942f38);

  padding-top: .750em;

  padding-left: 3.000em;

  padding-right: 3.000em;

  padding-bottom: 2.500em;

  margin: 1.500em auto;

  margin-bottom: 2.500em;

  text-align: center;

  color: #fff;

}

ul.orbit-container_testimonial li {

  display: inline-block;

}

.orbit-bullets {

  /*position: relative;*/

  margin-top: 0.75rem;

  margin-bottom: 0.75rem;

  text-align: center;

}

.orbit-bullets button {

  width: .5rem;

  height: .5rem;

  margin: 0.1rem;

  border-radius: 50%;

  background-color: #ffffff;

}

.orbit-bullets button:hover {

  background-color: #999999;

}

.orbit-bullets button.is-active {

  background-color: #E43B3F;

}

/* Slide animation */

.offset-header {

  font-family: bebas-neue-by-fontfabric, sans-serif;

  font-style: normal;

  font-weight: 700;

  color: #ffffff;

  line-height: 1em;

  /*letter-spacing: -0.02em;*/

  max-width: 100%;

}

span.offset-header {

  display: block;

  overflow: hidden;

}

span.offset-header > span {

  animation-name: slideUp;

  animation-duration: 1.5s;

  animation-timing-function: ease-in;

  display: block;

}

.offset-header-odd > span {

  text-align: center;

  animation-delay: 0s;

  animation-fill-mode: forwards;

  margin: 0 .375em;

}

.offset-header-even > span {

  text-align: center;

  animation-delay: 100ms;

  animation-fill-mode: both;

  color: #fefefe;

  font-size: .438em;

  font-family: "gotham", sans-serif;

  font-weight: 500;

  font-style: normal;

  margin: 0 .625em;

  line-height: 1em;

  padding-bottom: .625em;

}

@keyframes slideUp {

  0%, 50% {

    transform: translateX(100%);

    opacity: 0;

  }

  60%, 100% {

    transform: translateX(0);

    opacity: 1;

  }

}

/* Callout animation */

.offset-header-callout {

  font-family: "gotham", sans-serif;

  font-style: normal;

  font-weight: 700;

  color: #ffffff;

  line-height: 1.25em;

  /*letter-spacing: -0.02em;*/

  max-width: 100%;

}

span.offset-header-callout {

  display: block;

  overflow: hidden;

}

span.offset-header-callout > span {

  animation-name: slideUp;

  animation-duration: 2s;

  animation-timing-function: ease-in;

  display: block;

}

.offset-header-callout-odd > span {

  text-align: left;

  animation-delay: 0s;

  animation-fill-mode: forwards;

  margin: 0 0;

}

.offset-header-callout-even > span {

  text-align: center;

  animation-delay: 150ms;

  animation-fill-mode: both;

  color: #fefefe;

  font-size: .438em;

  font-family: "gotham", sans-serif;

  font-weight: 500;

  font-style: normal;

  margin: 0 .625em;

}

@keyframes slideUp {

  0%, 50% {

    transform: translateX(100%);

    opacity: 0;

  }

  60%, 100% {

    transform: translateX(0);

    opacity: 1;

  }

}

/*orbit-wrapper {



	



}*/

.orbit-caption {

  position: absolute; /*it was absolute... but would shrink on 2nd to last slide */

  bottom: 0;

  width: 100%;

  /*margin-bottom: 0;*/

  /*padding-left: 2rem;*/

  /*padding-right: 2rem;*/

  padding-top: 1rem;

  padding-left: 1rem;

  padding-right: 1rem;

  padding-bottom: 2rem;

  /*background-color: rgba(18, 21, 23, 0.8);*/

  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75));

  color: #fefefe;

  text-align: left;

  border-top: solid 1px #666666;

  /*min-height: 4.75em;*/

  /*font-size: 2.25em;*/

  /*font-family: bebas-neue-by-fontfabric, sans-serif;*/

  /*font-weight: 700;*/

  /*font-style: normal;*/

}

/*.orbit-caption span, .orbit-caption div {



    color: #fefefe;



	text-align: left;



	font-size: .625em;



	padding-top: 0px;



	padding-bottom: 0px;



	line-height: 1em;



	font-family: proxima-nova, sans-serif;



font-weight: 500;



font-style: normal;



}*/

/*.orbit-container .orbit-slides-container > * .orbit-caption {



  background-color: #0D0D0D;



  color: #FFFFFF;



  width: 100%;



  font-size: 0.875rem;



}*/

.orbit-previous, .orbit-next {

  position: absolute;

  top: 50%;

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

  z-index: 1;

  padding: 1rem;

  color: #fefefe;

  cursor: pointer;

}

.orbit-previous:hover, .orbit-next:hover {

  background-color: rgba(0, 0, 0, 0.7);

}

div.slide1_bkg {

  background-color: #ffffff;

  background-image: url('../img/bkg_slide1.jpg');

  background-repeat: repeat-x;

  height: 295px;

  width: 1334px;

  border-top: solid 4px #ffffff;

}

div.slide2_bkg {

  background-color: #ffffff;

  background-image: url('../img/bkg_slide2.jpg');

  background-repeat: repeat-x;

  height: 295px;

  width: 1334px;

  border-top: solid 4px #ffffff;

}

div.slide3_bkg {

  background-color: #ffffff;

  background-image: url('../img/bkg_slide3.jpg');

  background-repeat: repeat-x;

  height: 295px;

  width: 1334px;

  border-top: solid 4px #ffffff;

}

div.slide4_bkg {

  background-color: #ffffff;

  background-image: url('../img/bkg_slide4.jpg');

  background-repeat: repeat-x;

  height: 295px;

  width: 1334px;

  border-top: solid 4px #ffffff;

}

div.slide5_bkg {

  background-color: #ffffff;

  background-image: url('../img/bkg_slide5.jpg');

  background-repeat: repeat-x;

  height: 295px;

  width: 1334px;

  border-top: solid 4px #ffffff;

}

div.slide6_bkg {

  background-color: #ffffff;

  background-image: url('../img/bkg_slide6.jpg');

  background-repeat: repeat-x;

  height: 295px;

  width: 1334px;

  border-top: solid 4px #ffffff;

}

.panel_slider_large {

  width: 38%;

  float: left;

  background-image: url('../img/bkg_slider_panel.jpg');

  -ms-transform: rotate(-2deg); /* IE 9 */

  -webkit-transform: rotate(-2deg); /* Chrome, Safari, Opera */

  transform: rotate(-2deg);

  margin-left: 0.938em;

  margin-top: 1.250em;

}

.panel_slider_medium {

  width: 65%;

  float: left;

  background-image: url('../img/bkg_slider_panel.jpg');

  -ms-transform: rotate(-2deg); /* IE 9 */

  -webkit-transform: rotate(-2deg); /* Chrome, Safari, Opera */

  transform: rotate(-2deg);

  margin-left: 0.938em;

  margin-top: 1.875em;

}

.panel_slider_small {

  width: 100%;

  height: 100%;

  float: left;

  background-color: #ededed;

  margin-left: 0em;

  margin-top: 0em;

  border-width: 0px;

  border-bottom: 1px solid #d0d0d0;

}

/* -------------------- C. IFRAME -------------------- */

iframe {

  overflow: hidden;

}

/* -------------------- D. BACKGROUND IMAGE -------------------- */

img.bg {

  /* Set rules to fill background */

  min-height: 100%;

  min-width: 1024px;

  /* Set up proportionate scaling */

  width: 100%;

  height: auto;

  /* Set up positioning */

  position: fixed;

  top: 0;

  left: 0;

}

@media screen and (max-width: 1024px) { /* Specific to this particular image */

  img.bg {

    left: 50%;

    margin-left: -512px; /* 50% */

  }

}

img.bg_inside {

  /* Set rules to fill background */

  min-height: 100%;

  min-width: 1024px;

  /* Set up proportionate scaling */

  width: 100%;

  height: auto;

  /* Set up positioning */

  position: fixed;

  top: 0;

  left: 0;

}

.video_border {

  border: 0.375em dotted #09152f;

}

.stopfade {

  opacity: .95;

}

.strikeout {

  //font-size: 4em;

  line-height: 1em;

  position: relative;

}

.strikeout::after {

  border-bottom: 0.125em solid red;

  content: "";

  left: 0;

  margin-top: calc(0.125em / 2 * -1);

  position: absolute;

  right: 0;

  top: 50%;

}



/* ===== FINAL LAYERING FIXES (append at end) ===== */



/* 1) Treat your actual header wrapper as the topmost layer */

.header-wrapper { z-index: 60000; }  /* above everything */



/* If you prefer to keep using .site-header rules elsewhere, alias it: */

.header-wrapper.site-header, .site-header { z-index: 60000; }



/* 2) Keep the full-width shop dropdown just under the header */

.full-width-dropdown { z-index: 59000 !important; }  /* you already set fixed + top:102px */



/* 3) Promotions page: make sure hero (and its suggestions) sit over the tabs */

.main-content.page-promotions .shop-hero { position: relative; z-index: 200; }

.main-content.page-promotions .store-tabs { position: relative; z-index: 100; }



/* Suggestions inside hero must float above the next section */

.main-content.page-promotions .shop-hero .shop-autocomplete { position: relative; z-index: 4100; }

.main-content.page-promotions #shop-suggest-list--page {

  position: absolute;

  top: calc(100% + 6px);

  left: 0; right: 0;

  z-index: 4200 !important; /* override lower earlier value */

}



/* Don’t let containers clip the dropdown */

.main-content.page-promotions .shop-hero,

.main-content.page-promotions .shop-hero .grid-container,

.main-content.page-promotions .shop-hero .grid-x,

.main-content.page-promotions .shop-hero .cell { overflow: visible; }



/* Off-canvas submenu visibility: simple & reliable */

#navOffCanvas ul.nested {

  display: none !important;      /* collapse by default */

  height: auto !important;       /* undo any height=0 animation styles */

  overflow: visible !important;  /* ensure content isn't clipped */

}



#navOffCanvas li.is-open > ul.nested {

  display: block !important;     /* show when parent has .is-open */

}



/* Just in case a parent was clipping children */

#navOffCanvas li { overflow: visible !important; }