/*  header user name  */
.css-1efdoy6-view-link:-webkit-any(a), .css-1efdoy6-view-link:-webkit-any(button) {
    color: Black !important;
}

/*  header tabs  */
.css-1fahbk2-baseButton__content {
color: #000000 !important;
}

/*HEADER*/

:root {
  --main-bg-color: #FFFFFF;
  --UIowa-yellow: #FFCD00;
  --accent-color: #00558C;
  --grey: #666666;
  --greylight: #BBBCBC;

  --app-header-bg: var(--UIowa-yellow);
  --app-header-link: Black;

  --feature-bg: #f1f1f1;

  --btn-color: var(--grey);
  --btn-border-color: var(--grey);
  --btn-bg-color: var(--accent-color);
  
  --btn-hover-color: var(--accent-color);
  --btn-hover-border-color: var(--accent-color);
  --btn-hover-bg-color: var(--grey);

  --product-flag-bg: var(--accent-color);
  --product-flag-text: Black;

  --footer-bg-color: var(--grey);
}

/*Modify the header background for all catalog pages.*/
#app-header {
  padding: 0;
  height: 130px;
  background-color: var(--UIowa-yellow);
}

.StickyHeader {
  overflow: visible;
}

/* Modify the layout of the header contents*/
#app-header .container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px
}

/*Modify the account logo in the header*/
/*any header logo uploaded in a catalog will override this option*/
#app-header .logo a {
  background-image: url(https://s3.amazonaws.com/tr-learncanvas/code/catalog/logo-eduonline.png);
  background-size: 212px 29px;
  background-position: center center;
  background-repeat: no-repeat;
  margin-top: 20px;
  width: 212px;
  height: 53px;
}

.st0 {
    fill: #ffcd00;
}

#user-nav a {
  color: var(--app-header-link);
}

.header-branding h1 a {
    text-align: left;
    color: var(--grey);
}

/*HOME PAGE*/

.btn-info {
    color: var(--button-bg-color);
    background-color: var(--accent-color);
    border-color: var(--button-border-color);
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.btn-info:hover {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg-color);
    border-color: var(--btn-hover-border-color)
}

.btn-info:visited {
    color: var(--button-bg-color);
    background-color: var(--accent-color);
    border-color: var(--button-border-color);
}

.btn-info:active {
    color: var(--button-bg-color);
    background-color: var(--accent-color);
    border-color: var(--button-border-color);
}

/*Modify the home page feature area background*/
#home-page .feature-region {
  height: 300px;
  background-repeat: no-repeat;
  background: #000000;
}

/*Modify the layout for the contents of the feature area background*/
#home-page #feature div {
  max-width: 1000px;
  padding-top: 48px;
  margin: auto;
  color: #fff;
}

/*Modify the H3 text style in the feature area. Add actual text via JavaScript */
#home-page #feature h3 {
  text-align: center;
  font-size: 2.3em;
  margin-top: 1em;
  line-height: 1;
}

/*Modify the H4 text style in the feature area. Add actual text via JavaScript */
#home-page #feature h4 {
  text-align: center;
  font-size: 1.9em;
}

/* Modify the search box background color*/
#search-form.callout-region {
  background-color: #3e3e3e;
}

/*Modify the layout of the search box label*/ 
.search-form .search-label {
  line-height: 1.5;
  font-size: 26px;
  font-weight: 500;
  color: #000000;
}

/*To hide the search box label completely, use code below instead and remove /* */ around code*/
/*.search-form .search-label {
  display: none;
}
*/

/* Modify the layout of the search box*/
.search-form .search-box-wrapper {
  margin: 0 auto;
  display: block;
  width: 50%;
  padding: 0 0 0 0;
}

/* Modify the corners and size of the search box*/
.search-form .search-box {
  border-radius: 4px;
  height: 44px
}

/* Modify the layout of the search box submit icon*/
.search-form .search-submit {
color: #FFCD00
width: 30px;
height: 30px;
top: 8px;
}

/*Modify the layout for account logo on product tile. Add logo in managed accounts area.*/
.product-tile .product-account-image-wrapper {
  height: 30px;
  margin-bottom: 10px;
}

.btn-info {
  color: #black
  background: #FFCD00
  border-color: #666666
}

.btn-link:hover, .btn-link:active, .btn-link:visited, .btn-link:focus, .btn-link {
    color: Black;
}

.product-flag-free {
    background-color: var(--product-flag-bg);
    color: var(--product-flag-text);
}

.jqFlag {
    position: absolute;
    width: 0px;
    height: 0px;
    background: transparent;
    border-top: 79px solid var(--product-flag-bg);
    border-right: 79px solid transparent;
}

..ProductIcon__Wrapper--gallery-index {
  background: var(--product-flag-bg);
}

/*LISTING PAGE*/

-links a, .btn-link:hover, .btn-link:active, .btn-link:visited, .btn-link:focus, .btn-link {
    color: Black;
}

.btn-info {
    color: var(--btn-color);
    background-color: var(--btn-bg-color);
    border-color: var(--btn-border-color);
    -webkit-transition-duration: 0.25s; /* Safari */
    transition-duration: 0.25s;
}

.btn-info:hover {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg-color);
    border-color: var(--btn-hover-border-color)
}

.product-flag-free {
    background-color: var(--product-flag-bg);
    color: var(--product-flag-text);
}

.jqFlag {
    position: absolute;
    width: 0px;
    height: 0px;
    background: transparent;
    border-top: 79px solid var(--product-flag-bg);
    border-right: 79px solid transparent;
}

.ProductIcon__LargeCircle--course {
  background: var(--product-flag-bg);
}

button[type="submit"] {
    color: var(--btn-color);
    background-color: var(--btn-bg-color);
    border-color: var(--btn-border-color);
    -webkit-transition-duration: 0.25s; /* Safari */
    transition-duration: 0.25s;
}

button[type="submit"]:hover {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg-color);
    border-color: var(--btn-hover-bg-color)
}

/*Format the listing page feature area background*/
#product-page #feature {
    background: #000000;
    padding-top: 5px
}

/*Format the background inside the feature area*/
.product-bg {
  background-color: var(--feature-bg);
}

/*Format the account logo under feature area; same logo on Home Page*/
.product-tile .product-account-logo {
  height: 20px;
  margin-bottom: 10px;
  margin-top: 10px;
}

/*To hide the account logo on listing page, use code below instead and remove /* /*around code/*
/*.product-tile .product-account-logo {
  display: none;
}
*/

/*Format the full course or program description area*/
#main {
  color: #000000;
  min-height: 150px;
}

/* Modify the listing page footer background*/
.callout-region {
  background-color: #000000;
}

/*Format the listing page footer text layout*/
#product-page footer .h2 {
  font-style: normal;
  margin: 15px 0;
  color: #efefef;
  font-size: 25px;
}

/*FOOTER*/

/*Format the footer for all catalog pages*/
#app-footer {
  background-color: #ffffff;
  padding-top: 30px;

/*To change the size of the first row of footer links, add to above code*/  
font-size: 14px;
}
/*

/*Format the second row of copyright information*/
.small {
  font-size: 12px;
  color: ##8e99a0;
}


/*MEDIA FORMATTING rules for responsive devices. This coding is optional but helpful for tablets and mobile devices.*/

/*Media for header*/

@media (max-width: 768px) {
  #app-header .header-nav {
    background: #000000;
  }
}

/*Media for feature region*/

@media (max-width: 1200px) {
  #home-page #feature div {
    max-width: 800px;
 }
}
 
@media (max-width: 768px) {
  #home-page #feature {
    height: 200px;
    text-align: center;
    padding: 0 2em;
  }
  .ProductIcon_Wrapper--gallery-show {
    display: none;
  }
}

.alert-top {
  margin-bottom: 0;
}

@media only screen and (max-width: 768px) {
    .ProductIcon__LargeCircle--course {
        display: none;
    }
}

.header-links {
    display: none;
  }

@media only screen and (min-width: 800) {
    .header-links {
        display: ;
    }
}
@media only screen and (max-width: 450px) {
    .UI-brand-bar-college {
        display: none;
    }
}

@media (min-width: 240px) {
  #app-footer {
    font-size: calc( 1.5vw + 4px );
  }
}

@media (min-width: 720px) {
  #app-footer {
    font-size: 16px;
  }
}