/* ▲ ▼  */

/* https://css-tricks.com/couple-takes-sticky-footer/ */
/* There is flexbox solution */

body {
  display: flex;
  flex-direction: column;
}
#content {
  flex: 1 0 auto;
}
footer#app-footer {
  flex-shrink: 0;
}

/* font size of the username */
#user-nav,
#user-nav .Dropdown__ToggleText {
  font-size: 18px;
}

/* signin area username top right hand corner stay it gray not blue */
.Dropdown__Toggle--header:hover,
.Dropdown__Toggle--header:focus {
  color: #2e353c;
}

/* https://stackoverflow.com/questions/712689/css-div-stretch-100-page-height */
/* ensure that background gray color extends down, 100vh not needed because there is a footer */
/* #content #main { */
/* #content { */
  /* height: 75vh; */
  /* height: 80vh; */
  /* background-color: #f0f0f0; */
/* } */


*:focus,
*:hover,
*:active {
	outline: none !important;
	-moz-outline: none !important;
	box-shadow: none !important;
}

/* stanford logo in the upper left */
.header-branding .logo-customized img {
  width: 60%;
  height: auto;
}
@media (min-width: 320px) and (max-width: 767px) {
  .header-branding .logo-customized img {
    width: 100vw;
    height: auto;
    padding-left: 10px;
  }
}


/* https://identity.stanford.edu/color.html */
/* https://www.rapidtables.com/convert/color/cmyk-to-rgb.html */
/* Cardinal red */
/* #A8003B */

/* Redwood */
/* #7C1E00 */

/* Dark black on landing page */
/* rgb(46,53,60) */
/* #2e353c */

.feature-region {
  background-image: linear-gradient(to right, #A8003B, #7C1E00 50%, #A8003B);
}

.header-nav li a:active {
  color: #A8003B;
}

.btn-link {
  color:rgb(91, 108, 121);
}

#search-form .search-box,
.nav-tabs>li>a {
  border-radius: 0;
}

.btn-info,
.btn-info:focus,
.btn-info:hover,
.btn-info[disabled],
.btn-info[disabled]:hover {
  background-color: #A8003B;
  border-color: #A8003B;
}

a,
.Reports a.cUhcF_bGBk,
.Reports button.cUhcF_bGBk {
/* .Reports a, */
/* .Reports button { */
  color: #A8003B;
}

a:hover,
.Reports a.cUhcF_bGBk:hover,
.Reports button.cUhcF_bGBk:hover {
/* .Reports a:hover, */
/* .Reports button:hover { */
  color: #7C1E00;
}

.ProductIcon__SmallCircle--course {
  background: #A8003B;
}

.spinner {
  color: #A8003B;
}


/* reports page */
.Reports a.cUhcF_bGBk,
.Reports button.cUhcF_bGBk {
  color: #A8003B;
}

.Reports a.cUhcF_bGBk:hover,
.Reports button.cUhcF_bGBk:hover {
  color: #7C1E00;
}

.Reports .eHiXd_bGBk,
.Reports button.eHiXd_bGBk,
.Reports button.eHiXd_bGBk[type="button"] {
  background-color: #A8003B;
  border-color: #A8003B;
}

.Reports .eHiXd_bGBk:hover,
.Reports button.eHiXd_bGBk:hover,
.Reports button.eHiXd_bGBk[type="button"]:hover,
.Reports .eHiXd_bGBk:active,
.Reports button.eHiXd_bGBk:active,
.Reports button.eHiXd_bGBk[type="button"]:active {
  background-color: #A8003B;
  border-color: #A8003B;
}

/* Student section */
/* Student section */
/* Student section */
.ProductIcon__LargeCircle--course {
  background: #A8003B;
}

/* make a href button looking thing cardinal reddish */
/* .DashboardPanel .eHiXd_bGBk, */
/* .DashboardPanel a.eHiXd_bGBk, */

#main .DashboardPanel .DashboardProduct__CourseButtonWrapper a {
  /* background-color: #A8003B; */
  /* border-color: #A8003B; */
  border-radius:0;
  background-color: transparent;
  border-color: transparent;
  text-decoration: underline;
  color: black;
  padding-left: 0;
  padding-right: 0;
  font-size: 16px;
}

.DashboardPanel .DashboardProduct__CourseButtonWrapper a:focus,
.DashboardPanel .DashboardProduct__CourseButtonWrapper a:hover {
  background-color: transparent;
  border-color: transparent;
  text-decoration: underline;
  color: #2d353b;
}

/* .eHiXd_bGBk:focus::before, a.eHiXd_bGBk:focus::before { */
.DashboardPanel .DashboardProduct__CourseButtonWrapper .eHiXd_bGBk:focus::before,
.DashboardPanel .DashboardProduct__CourseButtonWrapper a.eHiXd_bGBk:focus::before {
  opacity:0;
}

.DashboardProduct__Title {
  font-size: 18px;
}

.DashboardProduct__Date {
  font-size: 14px;
}

.DashboardProduct__Teaser {
  font-size: 16px;

}

a.DashboardNavigation__Tab {
  margin-bottom:0;
  font-size: 20px;
  padding-left:0;
  padding-right:0.5em;
}

/* https://stackoverflow.com/questions/1734618/how-to-increase-the-gap-between-text-and-underlining-in-css */
a.DashboardNavigation__Tab.active {
  border-radius: 0;
  background-color:transparent;
  color: black;
  text-decoration:none;
  color: #A8003B;
  border-style:solid;
  border-width: 0px 0px 4px 0px;
}
a.DashboardNavigation__Tab:hover,
a.DashboardNavigation__Tab:focus {
  color: #A8003B;
  border-style:solid;
  border-width: 0px 0px 4px 0px;
}


.Icon__CircleWrap--info {
  background: #A8003B;
}

.Icon__NotificationContainer p a {
  font-size: 16px;
  color: black;
  text-decoration: underline;
}
.Icon__NotificationContainer p a:hover,
.Icon__NotificationContainer p a:focus {
  color: #2e353c;
}

/* front landing page */
/* ▼  */
/* front landing page */

/* https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient */
/* Footer styling */
#app-footer {
  /* background: #2e353c; */
  /* background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); */
  background: linear-gradient(to right, #2e353c 91%, #870014 91% 98%, #9ECBDD 98%);
  /* position: absolute; */
  bottom: 0;
  width: 100%;
}

#app-footer .container,
#app-footer .container a {
  color: white;
}

/* rgb(45,53,59) */
/* #2d353b */
.feature-region {
  background-image: linear-gradient(to right, #2d353b, #2d353b);
  min-height:5px;
}

/* https://www.w3schools.com/howto/howto_css_placeholder.asp */
.search-box::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black;
  opacity: 1; /* Firefox */
}
.search-box:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: black;
}
.search-box::-ms-input-placeholder { /* Microsoft Edge */
  color: black;
}

/* product tiles area linking to classes */
/* image border bottom */
.product-link .image-wrapper {
  border-bottom: 1px solid black;
}

.product-link .product-tile.course-tile {
  border: 1px solid black;
}

.product-link .product-description,
.product-link .product-footer {
  border-top: 1px solid black;
  color: black;
}

.product-link .product-account-image-wrapper {
  display:none;
}

.product-link .product-heading h3.product-title {
  padding-top:5px;
}

.product-link .product-description {
  font-size: 14px;
  text-overflow: ellipsis;
}

/* border bottom white to keep constant 5px border bottom */
.product-link .product-footer {
  position:relative;
  border-bottom: 5px solid white;
}

.product-link .product-footer .learn-more {
  float:left;
}
.product-link .product-footer .arrow-icon-customization-landing-page-right {
  /* float:right; */
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.product-link .product-tile .product-footer .learn-more:before {
  content: " ";
}

/* add hovering maroon border bottom and hover to the right arrow */
.product-link .product-footer:hover {
  position:relative;
  border-bottom: 5px solid #A8003B;
}
.product-link .product-footer:hover .arrow-icon-customization-landing-page-right {
  color: #A8003B;
  right: 7px;
}

/* front landing page */
/* ▲  */
/* front landing page */


/* course details page */
/* ▼  */
/* course details page */

.image-container .ProductIcon__Wrapper--gallery-show {
  bottom: -10px;
}

#product-page .product-account-logo {
  display:none;
}

#product-page .col-md-6 {
  padding-left:0;
}

#product-page .product-details #description {
  font-size: 16px;
}

#product-page .btn-lg.btn {
  border-radius:0;
  background-color: black;
}

#product-page .btn-info {
  border-color: black;
}

#product-page .btn-info:hover,
#product-page .btn-info:focus {
  background-color: #2e353c;
}

#product-page footer.callout-region {
  display:none;
}

#product-page .price-element {
  font-size:18px;
  font-weight:bold;
  margin-bottom: 30px;
}

#product-page .back-to-catalog a {
  font-size: 18px;
  text-decoration:none;
  color: black;
}
#product-page .back-to-catalog a:focus,
#product-page .back-to-catalog a:hover {
  text-decoration:none;
  color: #A8003B;
}

#product-page .back-to-catalog a:focus .arrow-icon-customization-details-page-right,
#product-page .back-to-catalog a:hover .arrow-icon-customization-details-page-right {
  color: #A8003B;
  padding-left:3px;
}

/* course details page */
/* ▲  */
/* course details page */



/* student dashboard */
/* ▼  */
/* student dashboard */

/* get rid of a boundaryline and some spacing */
.DashboardNavigation {
  border-bottom: none;
  padding-bottom: 0;
}

.DashboardNavigation .container {
  border-bottom:2px solid #e6e6e6;
  padding-left:0;
  padding-right:0;
}

/* items being flush on the left */
#app-header .container,
.DashboardPanel .container {
  padding-left:0;
  padding-right:0;
}

.DashboardPanel__ProductTypeTitle {
  font-size: 18px;
}

/* for some reason the logos show for the https://ilearn-catalog.stanford.edu/dashboard/in-progress page */
.DashboardProduct__AccountLogo {
  display:none;
}

.DashboardProduct__Course {
  border-top:3px solid #2d353b;
  margin-left:0;
  margin-right:0;
}

.DashboardProduct__Course div.col-sm-3.col-md-2 {
  padding-left:0;
}

.student-dashboard-status {
  font-size: 22px;
  font-weight: 500;
}

.container.south {
  margin-top: 40px;
  padding-bottom:15px;
  border-bottom:3px solid #2d353b;
}

/* pdf button */
/* https://stackoverflow.com/questions/1734618/how-to-increase-the-gap-between-text-and-underlining-in-css */
/* a#some-pdf-button { */
/*   width: auto; */
/*   float: right; */
/*   font-size: 20px; */
/*   border-radius: 0; */
/*   border:none; */
/*   background-color:black; */
/*   text-decoration:none; */
/*   color: white; */
/* } */
/* a#some-pdf-button:hover, */
/* a#some-pdf-button:focus { */
/*   background-color:#2e353c; */
/*   text-decoration:none; */
/* } */

.ProductIcon__Wrapper--dashboard {
  display:none;
}

/* image styling on student dashboard */
.DashboardProduct__ImageWrapper {
  background-color: transparent;
}

.DashboardProduct__ImageWrapper img {
  height:80%;
}

.DashboardProduct__ImageWrapper .DashboardProduct__ProgressWrapper {
  bottom:30px;
}

/* student dashboard */
/* ▲ */
/* student dashboard */


/* Product page */
/* ▼  */
/* Product page */

h3.pitch-page {
  border-bottom: 1px solid #000;
  padding-bottom: 5px;
  text-transform: uppercase;
}

.instructor-profile,
.instructor-container > div:first-of-type {
  display: flex;
  margin-bottom: 20px;
}

img.instructor {
  height: 120px;
  width: 120px;
}

.instructor-name {
  align-self: flex-end;
}

.instructor-name h4 {
  margin-left: 15px;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
}

.instructor-name p {
  margin-left: 15px;
  font-size: 10pt;
}

#product-page .instructor-info img.product-account-logo {
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: none;
  width: 50%;
}

/* Product page */
/* ▲  */
/* Product page */

.ProductEnrollment__Notice {
  color: #a8003b;
  font-weight: bold;
}