/* - variables- */
  :root {
    --main-color: #007030;
  }

  #user-nav > a {
      color:#343434;
  }

  #user-nav {
    padding-top: 25px;
  }

  #page-links {
    display: inline-block;
  }

  button#accountDropdown {
    padding: 5px 10px 5px 0;
  }

  /* - button/icon background - */
  .btn-info, .Icon__CircleWrap--info, .product-flag.product-flag-free, .ProductIcon__LargeCircle--course, .ProductIcon__SmallCircle--course {
    background: var(--main-color);
  }

  .search-refine-button__contents {
  color: #343434;
  }

  #app-header {
  background-color: #fff;
  }

  ul.nav {
  color: #343434;
  }

  span.Dropdown__ToggleIcon--header.icon-right {
  color: #343434;
  }

  span.Dropdown__ToggleText {
  color: #343434;
  }

  /* Create Listing button object */
button.btn.btn-info {
    background-color: #007030;
}

  /* - button :hover - */
  .btn-info:hover, .btn-info:focus, .ProductIcon__LargeCircle--course:focus {
    background: var(--main-color);
    filter: brightness(85%);
  }
  .product-results .product-tile:hover {
    box-shadow: inset 0px -5px 0px var(--main-color);
  }

  /* - feature-search - */
  .feature-region {
    background-image: inherit;
  }

  #search-form .search-form-container {
    background-color: #007030;
  }

  /* - Refine text color - */
  .search-refine-button__text {
      color: #343434;
  }

  /* - Refine dropdown toggle color - */
  .icon.search-refine-button__icon.icon-circle-down {
      color: #343434;
  }

  /* - Refine dropdown toggle circle color - */
  .icon.search-refine-button__icon.icon-circle-up {
      color: #343434;
  }

  #page-links a {
      display:inline-block;
      padding: 5px 10px 5px 0;
      font-size:14px;
      color:#343434;
  }

  #page-links .piped-list>li:after {
      content:"|";
      color:#343434;
  }

  #user-nav {
    padding-top: 25px;
  }

  #page-links {
    display: inline-block;
  }

  button#accountDropdown {
    padding: 5px 10px 5px 0;
  }

 /* Carousel CSS */
 .carousel-inner .item img {
     width: 100%;
 }

 .feature-region {
 	background-image: none;
 }

 .product-tile .product-footer {
  color: #343434;
}

/* Hover effect on course listings */
.product-link:hover {
  transform: scale(1.05);
  color: #2E1A47
  }
  
  .product-link {
  transition: transform 0.5s ease;
  transform: none;
  color: #000000;
  }
  
  /* green underline when hover over listings */
  .product-results .product-tile:hover {
      box-shadow: inset 0px -5px 0px #007030;
  }
  
  /* end hover effect on course listings */
  
  /* Change enrollment button on listing description page */
  span.css-1biq480-baseButton__content {
      background-color: #007030;
  }

  /* Hide the Drop Course option from the student dashboard */
/*.col-xs-2.col-sm-1 {
    display: none;
}*/

  /* Hide the refine option from the Catalog page */
.search-refine-button__text {
    display: none;
}

  /* Hide the refine button option from the Catalog page */
button#search-refine-button--refine {
    display: none;
}

  /* Hide the self-paced from the enrollment page */
 /* span.css-a0y5mv-text {
    display: none;
} */

  /* Hide the self-paced from the student dashboard page */
  p.DashboardProduct__DateWrapper {
    display: none;
} 
  /* - variables- */
  :root {
    --main-color: #007030;
  }

  #user-nav > a {
      color:#343434;
  }

  #user-nav {
    padding-top: 25px;
  }

  #page-links {
    display: inline-block;
  }

  button#accountDropdown {
    padding: 5px 10px 5px 0;
  }

  /* - button/icon background - */
  .btn-info, .Icon__CircleWrap--info, .product-flag.product-flag-free, .ProductIcon__LargeCircle--course, .ProductIcon__SmallCircle--course {
    background: var(--main-color);
  }

  .search-refine-button__contents {
  color: #343434;
  }

  #app-header {
  background-color: #fff;
  }

  ul.nav {
  color: #343434;
  }

  span.Dropdown__ToggleIcon--header.icon-right {
  color: #343434;
  }

  span.Dropdown__ToggleText {
  color: #343434;
  }

  /* Create Listing button object */
button.btn.btn-info {
    background-color: #007030;
}

  /* - button :hover - */
  .btn-info:hover, .btn-info:focus, .ProductIcon__LargeCircle--course:focus {
    background: var(--main-color);
    filter: brightness(85%);
  }
  .product-results .product-tile:hover {
    box-shadow: inset 0px -5px 0px var(--main-color);
  }

  /* - feature-search - */
  .feature-region {
    background-image: inherit;
  }

  #search-form .search-form-container {
    background-color: #007030;
  }

  /* - Refine text color - */
  .search-refine-button__text {
      color: #343434;
  }

  /* - Refine dropdown toggle color - */
  .icon.search-refine-button__icon.icon-circle-down {
      color: #343434;
  }

  /* - Refine dropdown toggle circle color - */
  .icon.search-refine-button__icon.icon-circle-up {
      color: #343434;
  }

  #page-links a {
      display:inline-block;
      padding: 5px 10px 5px 0;
      font-size:14px;
      color:#343434;
  }

  #page-links .piped-list>li:after {
      content:"|";
      color:#343434;
  }

  #user-nav {
    padding-top: 25px;
  }

  #page-links {
    display: inline-block;
  }

  button#accountDropdown {
    padding: 5px 10px 5px 0;
  }

 /* Carousel CSS */
 .carousel-inner .item img {
     width: 100%;
 }

 .feature-region {
 	background-image: none;
 }

 .product-tile .product-footer {
  color: #343434;
}

/* Hover effect on course listings */
.product-link:hover {
  transform: scale(1.05);
  color: #2E1A47
  }
  
  .product-link {
  transition: transform 0.5s ease;
  transform: none;
  color: #000000;
  }
  
  /* green underline when hover over listings */
  .product-results .product-tile:hover {
      box-shadow: inset 0px -5px 0px #007030;
  }
  
  /* end hover effect on course listings */
  
  /* Change enrollment button on listing description page */
  span.css-1biq480-baseButton__content {
      background-color: #007030;
  }

  /* Hide the Drop Course option from the student dashboard */
/*.col-xs-2.col-sm-1 {
    display: none;
}*/

  /* Hide the refine option from the Catalog page */
.search-refine-button__text {
    display: none;
}

  /* Hide the refine button option from the Catalog page */
button#search-refine-button--refine {
    display: none;
}

  /* Hide the self-paced from the enrollment page */
span.css-a0y5mv-text {
    display: none;
}

  /* Hide the self-paced from the student dashboard page */
p.DashboardProduct__DateWrapper {
    display: none;
}

/* Header container layout */ 

#header-menu { 

  display: flex; 

  justify-content: space-between; 

  align-items: center; 

  flex-wrap: wrap; 

  padding: 10px 0; 

  gap: 20px; 

} 

/* Page links section */ 

#page-links .piped-list { 

  list-style: none; 

  display: flex; 

  gap: 20px; 

  margin: 0; 

  padding: 0; 

} 

/* All links: page links + login */ 

#page-links .piped-list li a, 

#header-menu-container a { 

  color: #104735; 

  font-weight: 600; 

  text-decoration: none; 

  font-size: 1em; 

  padding: 6px 10px; 

  border-radius: 4px; 

  transition: background-color 0.3s ease, text-decoration 0.3s ease; 

} 

/* Hover effect */ 

#page-links .piped-list li a:hover, 

#header-menu-container a:hover { 

  background-color: #FEE11A; 

  text-decoration: underline; 

} 

/* Login container spacing */ 

#header-menu-container { 

  display: flex; 

  align-items: center; 

} 

/* Optional: cart button styling */ 

#cart .cart-button { 

  font-size: 1em; 

  color: #104735; 

  background-color: transparent; 

  border: none; 

  cursor: pointer; 

} 
/* Storefront banner styling */
div#feature {
  height: 250px;
  background-image: url("https://raw.githubusercontent.com/jj-nnes/Canvas-Catalog/main/Catalog%20Banner%20(1250%20x%20250%20px)%20(1).svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f0f0f0; /* fallback color */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(63,69,81,0.16);
  margin-top: 1.6em;
  margin-bottom: 0.9em;
}

/* Accessibility text */
div#feature::after {
  content: "Professional Edge Trainings — develop cutting edge skills essential for the modern job market";
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Pairs with JS to create a style a banner just below the search area */

#banner {

//width: 80%;

//margin: 0 auto;

text-align: center;

color: black;

background-color: #FEE11A; 

 

   & p {

            font-size: 1.25em;

            font-weight:600;

    }

}

/* End custom banner styling */