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

  #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: #3C1053;
}

  /* - 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: #3C1053;
  }

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

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

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

  #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;
  }

#page-links .piped-list>li:before {
    display:none;
    margin-right:0;
}

  #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;
  }
  
  /* Purple underline when hover over listings */
  .product-results .product-tile:hover {
      box-shadow: inset 0px -5px 0px #3C1053;
  }
  
  /* end hover effect on course listings */
  
  /* Change enrollment button on listing description page */
  span.css-1biq480-baseButton__content {
      background-color: #3C1053;
  }

  /* Hide the Drop Course option from the student dashboard */
/*.col-xs-2.col-sm-1 {
    display: none;
}*/
/* Style for the Need Help? tab */
#helpTab {
    position: fixed;
    right: 0;
    bottom: 20%;
    width: 150px;
    height: 50px;
    background-color: #3C1053; /* Matches your main color */
    color: #ffffff;
    text-align: center;
    line-height: 50px;
    font-family: Arial, sans-serif;
    cursor: pointer;
    border-radius: 10px 0 0 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999; /* Ensures it's always on top */
}

/* Optional hover effect for the Need Help? tab */
#helpTab:hover {
    background-color: #543d72; /* Slightly lighter shade on hover */
}