/* 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 nav[class*="view-pagination"] > span {
  background-color: white;
  padding: 0.5em;
}

div#listings.container
  nav[class*="view-pagination"]
  span[class*="inlineBlock-pagination"]
  > ul
  > li {
  color: black !important;
}