/* At some point, Instructure seemed to force link underlines throughout. 
   That breaks some of our navigation elements and clutters the screen.
   Let's reset that here and then specific elements can override as needed.   */
   a { text-decoration:none; }

   /*Working as of 05/09/2016*/
   /* New listing layout */
   .new-layout p {
	   line-height: 1.25;
   }
   
   .new-layout .course-information a {
	   color: rgb(229,62,48);
   }
   
   .read-more {
	   font-family: 'proxima nova bold', arial, sans-serif;
	   cursor: pointer;
   }
   
   .more-text{
	   display: none;
   }
   
   .new-layout .jqFlag { display: none; }
   
   .new-layout .hero-head.h1 {
	   font-family: "proxima nova bold", arial, sans-serif;
	   font-size: 25px;
	   text-transform: uppercase;
   }
   
   .new-layout .hero-region p {
	   font-family: "proxima nova thin", arial, sans-serif;
	   font-size: 19px;
   }
   
   .new-layout .product-bg {
	   padding-top: 50px;
	   padding-bottom: 50px;
   }
   
   .new-layout .product-image .btn.btn-info.btn-lg {
	   background-color: rgba(255,255,255,.30);
	   border-radius: 0;
	   font-family: "proxima nova bold", arial, sans-serif;
	   font-size: 25px;
	   border: 1px solid rgb(255,255,255);
	   line-height: 50px;
	   padding: 0;
	   height: 50px;
	   width: 200px;
   }
   
   .new-layout .product-image input.btn.btn-info.btn-lg {
	   font-size: 18px;
   }
   
   .new-layout.dk .product-image .btn.btn-info.btn-lg {
	   color: rgb(88,89,91);
	   background-color: rgba(255,255,255,.60);
   }
   
   a.btn.btn-info.btn-lg.btn-action {
	 color: rgb(255,255,255);
   }
   
   .ProductEnrollment__Notice {
	   font-size: 14px;
	   color: rgb(70,70,70);
   }
   
   #product-page footer .h2 { font-style: normal; }
   
   .new-layout footer.callout-region .btn.btn-info.btn-lg.btn-action {
	   background: transparent;
	   border-radius: 0;
	   font-family: "proxima nova bold", arial, sans-serif;
	   font-size: 19px;
	   border: 1px solid;
	   line-height: 40px;
	   padding: 0;
	   height: 40px;
	   width: 145px;
   }
   
   .new-layout .product-image .btn.btn-info.btn-lg {
	   position: absolute;
	   margin: auto;
	   position: absolute;
	   top: 0; left: 0; bottom: 0; right: 0;
   }
   
   .new-layout footer.callout-region {
	   background-color: rgb(109,110,113);
	   color: rgb(0,0,0);
	   padding: 50px 0;
   }
   
   .new-layout footer.callout-region h3 {
	   font-family: "proxima nova bold", arial, sans-serif;
	   font-size: 25px;
	   text-transform: uppercase;
   }
   
   .new-layout .main-column h3,
   .new-layout .side-column h3 {
	   font-family: "proxima nova bold", arial, sans-serif;
	   font-size: 21px;
	   text-transform: uppercase;
	   color: rgb(70,70,70);
	   border-bottom: 1px solid;
	   padding-bottom: 10px;
	   margin-bottom: 20px;
	   margin-top: 21px;
   }
   
   .new-layout .instructor {
	   height: 120px;
	   width: 120px;
   }
   
   .new-layout .instructor-info {
	   border-bottom: solid 1px;
	   padding-bottom: 25px;
	   margin-bottom: 0px;
   }
   
   .new-layout .instructor-container > div:first-of-type {
	   display: flex;
	   margin-bottom: 20px;
   }
   
   .new-layout .instructor-name { align-self: flex-end; }
   
   .new-layout .instructor-name h4 {
	   font-family: "proxima nova bold", arial, sans-serif;
	   font-size: 16px;
	   text-transform: uppercase;
	   color: rgb(70,70,70);
	   margin-bottom: 0;
	   margin-left: 15px;
   }
   
   .new-layout .instructor-name p {
	   font-family: "proxima nova light", arial, sans-serif;
	   font-size: 12px;
	   text-transform: none;
	   display: block;
	   margin: 0;
	   margin-left: 15px;
   }
   
   .new-layout img.product-account-logo, img.product-account-logo {
	   max-height: 90px;
   }
   
   .new-layout .detail-blocks {
	   display: flex;
	   flex-wrap: wrap;
	   justify-content: flex-start;
	   margin-top: 35px;
   }
   
   .new-layout .detail-blocks div {
	   margin-right: 10px;
	   margin-bottom: 10px;
	   padding: 35px 10px 0;
	   height: 95px;
	   width: 130px;
	   text-align: center;
	   background-color: rgb(230,231,232);
	   background-image: url(http://pub-images.canvasnetwork.com/background_course-details.gif);
	   background-repeat: no-repeat;
	   background-position: -35px 0;
   }
   
   .new-layout .detail-blocks div.detail-duration { background-position: -235px 0; }
   .new-layout .detail-blocks div.detail-commitment { background-position: -440px 0; }
   .new-layout .detail-blocks div.detail-requirement { background-position: -35px -105px; }
   .new-layout .detail-blocks div.detail-type { background-position: -235px -105px; }
   .new-layout .detail-blocks div.detail-credential { background-position: -440px -105px; }
   
   .new-layout .detail-blocks h5 {
	   font-family: "proxima nova bold", arial, sans-serif;
	   font-size: 13px;
	   text-transform: uppercase;
	   margin: 0;
	   color: rgb(70,70,70);
   }
   
   .new-layout .detail-blocks p {
	   font-family: "proxima nova light", arial, sans-serif;
	   font-size: 14px;
   }
   
   .new-layout .product-account-logo {
		   display: block;
		   margin: 16px auto;
   }
   
   .new-layout .additional-logos img {
		  max-width: 150px;
   }
   
   @media screen and (max-width: 991px) {
	   .new-layout .product-bg {
		   padding-top: 25px;
		   padding-bottom: 40px;
	   }
   
	   .new-layout .detail-blocks {
		   max-width: 420px;
		   margin: auto;
	   }
   }
   
   @media screen and (max-width: 990px) {
	   .new-layout .instructor-info > div:first-child { justify-content: flex-start; }
	   .new-layout .instructor { margin-right: 20px; }
   }
   
   @media screen and (max-width: 614px) {
	   .new-layout .detail-blocks {
		   width: 340px;
		   margin: auto;
	   }
   
	   .new-layout .detail-blocks div {
		   width: 140px;
		   background-position: -30px 0;
	   }
   
	   .new-layout .detail-blocks div.detail-duration { background-position: -230px 0; }
	   .new-layout .detail-blocks div.detail-commitment { background-position: -435px 0; }
	   .new-layout .detail-blocks div.detail-requirement { background-position: -30px -105px; }
	   .new-layout .detail-blocks div.detail-type { background-position: -230px -105px; }
	   .new-layout .detail-blocks div.detail-credential { background-position: -435px -105px; }
   }
   /* Working Code as of 4/14/2016 */
   
   /* This helps you change the color of the header bar in case you want white links
   #app-header {
	   padding:4px 0 5px;
	   background-color:#FF8200;
   }
   */
   #app-header h1 {
	   margin:10px 0;
   }
   
   /* user-nav includes changes to the Login / User information link */
   #header-menu-container {
	   /*padding-top:25px; */ /* moved this to the header-menu after recent div name changes to user-nav */
   }
   
   .registration-logo img {
	   max-height:120px!important;
   }
   
   #header-menu {
		 padding-top:25px;
   }
   
   #header-menu-container a {
	   display:inline-block;
	   margin-bottom:0;
	   font-weight:bold;
	   text-align:center;
	   vertical-align:middle;
	   cursor:pointer;
	   background-image:none;
	   border:1px solid transparent;
	   white-space:nowrap;
	   padding:5px 5px;
	   font-size:17px;  /* MR: this was 20px   */
	   line-height:1.428571429;
	   border-radius:4px;
	   -webkit-user-select:none;
	   color:#4d4d4d;
	   text-decoration: none;
   }
   
   #header-menu-container a:hover {
	   text-decoration:none;
	   color:#4d4d4d;
   }
   
   #header-menu-container button, #header-menu-container ul {
	   font-size:17px;
	   font-weight:bold;
		   vertical-align: middle;
		   text-decoration: none;
   }
   
   #header-menu-container .oit-help-link, #header-menu-container a[title="Log in to UT Canvas Catalog"] {
	   color: rgb(7, 112, 163);
   }
   
   #header-menu-container a.oit-help-link:hover, #header-menu-container a[title="Log in to UT Canvas Catalog"]:hover {
	   color: #054F72;
   }
   
   span[aria-label="User Menu"] a {
	   text-decoration: none!important;
	   width: 100%;
	   height: 100%;
   } 
   
   span[aria-label="User Menu"] > span {
	   background-color: whitesmoke;
   }
   
   span[aria-label="User Menu"] > span > ul li {
	   padding: 5px!important;
	   border-top: none!important;
   }
   
   span[aria-label="User Menu"] > span > ul li:hover {
	   background-color:#dfdfdf;
   }
   
   /* The Categories menu on the catalog home; this is still getting overridden because somewhere globally 'a' is set to underline...*/
   #search-refine-categories > ul > li > a {
	   text-decoration: none!important;
   }
   
   /* 
   On the checkout page, Instructure in early 2024 for some reason changed how the purchased item card functions. They removed the ability for the entire card to be clickable, which we can't really do anything about here. But they also added a "Course" text and icon indicator to the card, and these look like links. So, let's get rid of them here.
   */
   #checkout > div > span > span > span > div:nth-child(2) > span > span > div > span > span:nth-child(2) > span > span > span:first {
	   visibility: hidden!important;
	   display: none!important;
   }
   
   .Dropdown__ToggleTextWrapper {
	   display:inline;
   }
   
   @media screen and (min-width: 768px) {
	   .Dropdown__Menu:before, .Dropdown__Menu:after {
		   left: inherit;
		   right: 75%;
	   }
   }
   
   .Dropdown__Menu:before, .Dropdown__Menu:after {
	   left: inherit;
	   right: 75%;
   }
   
   /* Drop the upper-right nav menu font size a bit more on mobile */
   @media screen and (max-width: 812px) {
	   #header-menu-container button, #header-menu-container > ul {
		   font-size:14px;
		   font-weight:bold;
	   }
	   #header-menu-container a {
		   font-size:14px;
		   font-weight:bold;
	   }
   }
   
   
   /* Active Color of Login button once logged in */
   .header-nav li a {
	   color:#4d4d4d;
   }
   
   /* Page Links refers to the custom links */
   #page-links {
	   display:inline-block;
   }
   #page-links a {
	   display:inline-block;
	   padding:5px 10px;
	   font-size:14px;
	   color:#4d4d4d;
   }
   #page-links a:hover,
   .btn-link:hover,
   .btn-link {
	   color:#4d4d4d;
   }
   
   /* Carousel CSS */
   .carousel-inner .item img {
	   width: 100%;
   }
   
   .feature-region {
	   background-image: none;
   }
   
   .content-box-desc {
	   list-style: none;
	   background-color: #F0F0F0;
	   padding: 16px;
	   border-radius: 3px;
	   border-left: 6px solid #ff8200;
   }
   
   .content-box-desc li {
	   padding: 16px 20px;
	   margin-left: 30px;
   }
   
   .content-box-desc li:not(:last-child) {
	   border-bottom: 1px solid #d6d7d6;
   }
   
   li.completion-time::before {
	   /*content: '\23F1';
	   font-size: 1.7rem;	*/
	   content: ' '; 
	   background:url('https://oithost.utk.edu/canvas-catalog/icons/icon-globe-clock.png') no-repeat;
	   background-size: 30px 30px;
	   background-repeat: no-repeat;
	   height:30px;
	   width:30px;
	   position:absolute;
	   margin-left: -40px;
   }
   
   li.audience::before {
	   /*content: '\1F465';
	   font-size: 1.7rem;*/
	   content: ' '; 
	   background:url('https://oithost.utk.edu/canvas-catalog/icons/icon-globe-audience.png') no-repeat;
	   background-size: 30px 30px;
	   background-repeat: no-repeat;
	   height:30px;
	   width:30px;
	   position:absolute;
	   margin-left: -40px;
   }
   
   li.credits::before {
	   /*content: '\1F396';
	   font-size: 1.7rem;*/
	   content: ' '; 
	   background:url('https://oithost.utk.edu/canvas-catalog/icons/icon-globe-certificate.png') no-repeat;
	   background-size: 30px 30px;
	   background-repeat: no-repeat;
	   height:30px;
	   width:30px;
	   position:absolute;
	   margin-left: -40px;
   }
   
   li.offered-by::before {
	   /*content: '\1F3EB';
	   font-size: 1.7rem;*/
	   content: ' '; 
	   background:url('https://oithost.utk.edu/canvas-catalog/icons/icon-globe-building.png') no-repeat;
	   background-size: 30px 30px;
	   background-repeat: no-repeat;
	   height:30px;
	   width:30px;
	   position:absolute;
	   margin-left: -40px;
   }
   
   #description h1 {
	   font-weight:bold;
   }
   #feature #temp-announcement {
	   margin: 20px auto;
	   width: 80%;
	   font-size: 1rem;
   }

   .alert-ut {
	font-size:1.2rem;
	padding: 0;
	background: #E8E8E8;
    box-sizing: border-box;
    display: flex;
    min-width: 12rem;
    border-style: solid;
    border-radius: 0.25rem;
    border-color: #ff8200;
	border-width: 2px;
   }

  .alert-ut-left {
	background:#ff8200;
	color: #ffffff;
	box-sizing: border-box;
    flex: 0 0 0.75rem;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
	font-size: 2rem;
	text-align: center;
  }

  .alert-ut-right {
	padding: 20px;
	box-sizing: border-box;
    flex: 1 1 0%;
    min-width: 0.0625rem;
    font-size: 1.2rem;
  }

  .alert-ut a, .alert-ut button {
	width: 80%;
    max-width: 700px;
    margin: 0 auto!important;
  }
  
  .css-1qldk8-baseButton__content {
	border-color: #ff8200!important;
	background: #fefefe!important;
	border-left:5px solid #ff8200!important;
	color:#4b4b4b!important;
	font-size: 1.2rem!important;
  }

  a:hover > .css-1qldk8-baseButton__content, button:hover > .css-1qldk8-baseButton__content {
	background: #E9F5F9!important;
  }

  /* On the listing page, bump the font size of the description text. */
  #product-page #description * {
    font-size: 1.2rem!important;
  }