/* div that holds the catch phase on the front page */
div#feature.feature-region {
    background-color: #ffc425;
    background-image: none;
    color: #000000;
  }
  
  /* Makes tiles fill 100% of space */
  #listings > #catalogsList {
    width: 100%;
  }
  
  /* Defining the catchphase on the front page */
  #feature h1 span {
    font: 40px/1 "Garamond Pro thin";
  }
  
  /* Defining the catchphase on the front page */
  #feature h1 {
    font: 55px/1 "Garamond Pro";
  }
  
  /* Defines the div that holds the search input field */
  div.search-form-container {
    background-color: #492f24;
  }
  
  /* Helps define the "nav" element on the admin page that holds several of the navigation links for admins - color was blue */
  /* div#topnavbar {
        background-color: white;
        color: blue;
      } */
  
  div[class*="topNavBarItem__container"]::after {
    background: #ffc425;
  }
  
  div[class*="topNavBarItem__container"]
    span[class*="baseButton__childrenLayout"] {
    color: white;
  }
  
  div[class*="topNavBarItem__content"] {
    color: white;
  }
  
  div[data-header-separator] {
    border-color: #492f24;
  }
  
  div#topnavbar a div {
    color: white;
  }
  
  /* Helps define what happens when the mouse hovers over the "nav" element on the admin page that holds several of the navigation links for admins color was red*/
  div#topnavbar a:hover {
    color: white;
  }
  
  /* Helps define an active, clicked on, "nav" element on the admin page that holds several of the navigation links for admins*/
  div#topnavbar a:active {
    color: #492f24;
  }
  
  /* helps define the go for gold div on the end of the HTML body of every page */
  .uwyo-footer {
    text-align: center;
    width: 100%;
  }
  
  /* helps define the go for gold div on the end of the HTML body of every page */
  .uwyo-footer-image {
    max-width: 100%;
  }
  
  /* helps define the element that contains the header image and the WyoLearn Logo */
  header#app-header {
    background-color: #492f24;
  }
  
  /* helps define the elements that hold the username or login elements in the top right hand corner of the page*/
  /* .Dropdown__Toggle--header {
    background-color: #ffc425;
    border-radius: 15px;
  } */
  
  /* helps define the elements that hold the username or login elements in the top right hand corner of the page*/
  /* .Dropdown__ToggleText {
    color: #492f24;
  } */
  
  /* helps define the elements that hold the username or login elements in the top right hand corner of the page*/
  /* .Dropdown__Toggle--header:hover {
    background-color: #ffc425;
    border-radius: 15px;
  } */
  
  /* helps define the elements that hold the username or login elements in the top right hand corner of the page*/
  /* .Dropdown__ToggleText:hover {
    color: #492f24;
  } */
  
  /* helps define the elements that hold the username or login elements in the top right hand corner of the page*/
  /* .icon-right {
    color: #492f24;
  } */
  
  /* helps define the elements that hold the username or login elements in the top right hand corner of the page*/
  /* .icon-right:hover {
    color: #492f24;
  } */
  
  /* this defines the little arrow by the user name in the top right hand corner of the window*/
  /* .icon-right:focus {
    color: #ffc425;
  } */
  
  /* helps define the elements that hold the username or login elements in the top right hand corner of the page*/
  /* .Dropdown__Toggle--header:focus {
    background-color: #ffc425;
    border-radius: 15px;
  } */
  
  /* helps define the elements that hold the username or login elements in the top right hand corner of the page*/
  /* .Dropdown__ToggleText:focus {
    color: #ffc425;
  } */

  /* container for username and login link */
  #header-menu-container {
    background-color: #ffc425;
    padding: inherit;
  }
  
  /* login link */
  #header-menu-container a {
    color: #492f24;
  }
  
  /* username button */
  #header-menu-container button {
    color: #492f24;
  }

  /* cart button color changes */
  .cart-button button > span {
    background-color: #ffc425;
    color: #492f24;
  }
  
  /* on pages that show course listing cards this defines the icon next to the word "refine" and "categories" in the search bar */
  .search-refine-button__contents {
    color: #ffc425;
  }
  
  /* this helps define the icon that indicates a course is free */
  .jqflag {
    border-top: 79px solid #ffc425;
  }
  
  /* this helps define the icon that indicates a course is free. */
  .product-flag.product-flag-free {
    background-color: #ffc425;
    color: #492f24;
  }
  
  /* this is the text at the bottom of course/listings cards*/
  .learn-more {
    color: #492f24;
  }
  
  /* defines the box shadow the user sees when they hover over the catalog cards and course cards */
  .product-results .product-tile:hover {
    box-shadow: 0px 3px 5px 5px #333333;
  }
  
  /* defines the background and text  colors on the catalog listings and product listings pages*/
  div#main.product-results {
    background-color: rgba(24, 59, 97, 0.8);
    color: white;
  }
  
  /* defines the small circle icon with the book inside on all the course and catalog cards. */
  .ProductIcon__LargeCircle--course {
    background-color: #ffc425;
    color: #492f24;
  }
  
  /* defines the Icon on the student dashboard in the "completed" tab */
  .Icon__CircleWrap--info {
    background-color: #ffc425;
    color: #492f24;
  }
  
  /* student dashboard page defines the "inprogress" and "completed" tabs when they are not active */
  a.DashboardNavigation__Tab {
    color: #492f24;
  }
  
  /* student dashboard page defines the "inprogress" and "completed" tabs when they are active */
  a.DashboardNavigation__Tab.active {
    background-color: #492f24;
    color: #ffc425;
  }
  
  div#user-nav.pull-right {
    background-color: #ffc425;
    border-radius: 5px;
  }
  
  /* makes all text in the catchphrase container centered */
  #catchphrase {
    text-align: center;
  }
  
  /* this makes sure the catch phrase doesn't have any padding or margin */
  #catchphrase h1 h2 {
    padding: 0;
    margin: 0;
  }
  
  /* on the product page this makes the background of the feature element white */
  section#product-page #feature {
    background-color: white;
  }
  
  /* on the product page, this makes the background color of the div that holds the product blue and makes normal text white */
  section#product-page div.product-bg {
    background-color: rgba(24, 59, 97, 0.8);
    color: white;
  }
  
  /* makes the header text on the product page white so it can be seen on the blue background */
  section#product-page #feature h2.hero-head.h1 {
    color: white;
  }
  
  /* makes the text on the product page white on the blue background */
  section#product-page #feature p {
    color: white;
  }
  
  /* makes the button on the enroll page yellow with black text */
  section#product-page .btn {
    background-color: #ffc425;
    color: black;
  }
  
  /* defines the bottom part of the product page which is blue and has the yellow enroll button in it. */
  section#product-page footer {
    background-color: rgba(24, 59, 97, 0.8);
    color: white;
  }
  
  /* If a course is published but enrollment is not enabled then this notice will show up on the product page as pink text so this changes that pink text to a more readable white. */
  .ProductEnrollment__Notice {
    color: white;
  }
  
  /* defines the boarder and background color of the page users see when they are enrolling in a course */
  div#registration {
    border: solid 1px black;
    background-color: #492f24;
  }
  
  /* defines the background blue color of the page users see when they are enrolling in a course */
  div#main.registration-page {
    background-color: rgba(24, 59, 97, 0.8);
  }
  
  /*This is for programs to change the color of the text and links */
  .Product__AssociatedProducts {
    color: white;
  }
  
  span.Product__AssociatedProductsListSpan a {
    color: yellow;
  }
  
  div#listings.container div[class*="view-pagination"] > span {
    background-color: white;
    padding: .5em;
  }
  
  div#listings.container div[class*="view-pagination"] span[class*="inlineBlock-pagination"] span[class*="view--inlineBlock"] > span {
    color: black;
  }