#app-header {
    background-color: #1b305b;
    color: white;
}

#app-header {
    padding-bottom: 0px !important;
}

#accountDropdown {
    color: #FFFFFF;
}

.header-nav li a {
    color: #ffffff !important;
}

#home-page .feature-region {
    background: #FFCF00;
}

/* This helps you change the color of the header bar incase you want white links
#app-header {
    padding:4px 0 5px;
    background-color:#f0f0f0;
}
*/
#app-header h1 {
    margin:10px 0;
}

/* user-nav includes changes to the Login / User information link */
#user-nav {
    padding-top:25px;
}
#user-nav > a {
    display:inline-block;
    margin-bottom:0;
    font-weight:normal;
    text-align:center;
    vertical-align:middle;
    cursor:pointer;
    background-image:none;
    border:1px solid transparent;
    white-space:nowrap;
    padding:5px 10px;
    font-size:14px;
    line-height:1.428571429;
    border-radius:4px;
    -webkit-user-select:none;
    color:#ffffff;
}

#user-nav > a:hover {
    text-decoration:none;
    color:#ffffff;
}
/* Active Color of Login button once logged in */

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

/* 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:#ffffff;
}
#listings {
    color:#f0f0f0!important;
}
#topnavbar {
    color:#f0f0f0!important;
}
#page-links a:hover,
.btn-link:hover,
.btn-link {
    color:#ffffff;
}

#page-links .piped-list>li:after {
    content:"|";
    color:#a6dad5;
}
#page-links .piped-list>li:before {
    display:none;
    margin-right:0;
}
#search-form .search-label,
#search-form .search-box-wrapper {
    visibility: hidden;
}

#search-refine-button--refine {
    display: none;
}
// Define Tile Text, Links, and Public Image URLs
var defineTiles = function(){
    // Updated tiles with the correct direct Unsplash image URL for "October 11 PPD"
    var tiles = [
        ["October 11 PPD", "https://u46.catalog.instructure.com/browse/octppd", "https://images.unsplash.com/photo-1517817748496-6d7e4d090140?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDJ8fG1hY2Jvb2slMjBwcm98ZW58MHx8fHwxNjYzMjAyNzQ5&ixlib=rb-1.2.1&q=80&w=1080"],
        ["HR Interview Training Course", "https://u46.catalog.instructure.com/browse/all-courses/eta/human-resources/courses/human-resources-interview-training", "https://source.unsplash.com/TamMbr4okv4/"],
        ["ETA Professional Learning", "/browse/all-courses/eta", "https://source.unsplash.com/1zR3WNSTnvY/"],
        ["DUSA/DUEA/DUTU Professional Learning", "/browse/all-courses/dusa", "https://source.unsplash.com/vblGMzpFvmY/"]
    ];

    return tiles; // Return only the top 4 tiles
};

// Build the tiles and add them to the page
function addCustomElements(){
    if(window.location.pathname === "/"){
        var tiles = defineTiles();
        var tilesHTML = "";
        tiles.forEach(function(tile){
            var tileHTML = buildTileHTML(tile);
            tilesHTML += tileHTML;
        });
        // Add the Tile HTML to the Page
        $("#listings").append(tilesHTML);
    }
}

// Helper function for checking if an element has been rendered yet
function onElementRendered(selector, cb, _attempts) {
    var el = $(selector);
    _attempts = ++_attempts || 1;
    if (el.length) return cb(el);
    if (_attempts == 60) return;
    setTimeout(function () {
        onElementRendered(selector, cb, _attempts);
    }, 250);
};

::placeholder {
    color: #9f9f9f !important;
}

/*Hide Search Form*/

#search-form .search-label,
#search-form .search-box-wrapper {
    visibility: hidden;
}

#search-refine-button--refine {
    display: none;
}

::placeholder {
    color: #9f9f9f !important;
}

/*Front Page Tiles*/


.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto;
  padding: 10px;
  overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;
grid-gap: 1rem;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  grid-gap: 10px;
}

.item1 {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
  text-align: center;
}
.item2 {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
  text-align: center;
}
.item3 {
  grid-column: 1 / span 1;
  grid-row: 3 / span 1;
  text-align: center;
}
.item4 {
  grid-column: 2 / span 1;
  grid-row: 1 / span 4;
}
.item5 {
  grid-column: 3;
  grid-row: 1 / span 4;
}
.item6 {
  grid-column: 2 / span 2;
  grid-row: 5;
}
.item7 {
  grid-column: 2 / span 2;
  grid-row: 6;
}
.item8 {
  grid-column: 1 / span 1;
  grid-row: 4 / span 1;
  text-align: center;
}
.item9 {
  grid-column: 1 / span 1;
  grid-row: 5 / span 1;
  text-align: center;
}
p.clockimage {
	content: url(https://u46.instructure.com/files/4575688/download?download_frd=1);
    width: 50px;
    max-width: 75%;
    margin: 0 auto;
}
p.synchronous {
	content: url(https://u46.instructure.com/files/7471609/download?download_frd=1);
    width: 50px;
    max-width: 75%;
    margin: 0 auto;
}
p.notrequired{
	content: url(https://u46.instructure.com/files/4606107/download?download_frd=1);
    width: 50px;
    max-width: 75%;
    margin: 0 auto;
}
p.asynchronous{
	content: url(https://u46.instructure.com/files/4606208/download?download_frd=1);
    width: 50px;
    max-width: 75%;
    margin: 0 auto;
}
p.checkmark{
	content: url(https://u46.instructure.com/files/4575690/download?download_frd=1);
    width: 50px;
    max-width: 75%;
    margin: 0 auto;
}
p.ppd{
	content: url(https://u46.instructure.com/files/4649047/download?download_frd=1);
    width: 50px;
    max-width: 75%;
    margin: 0 auto;
}
p.dcd{
	content: url(https://u46.instructure.com/files/4649045/download?download_frd=1);
    width: 50px;
    max-width: 75%;
    margin: 0 auto;
}
p.calendar{
	content: url(https://u46.instructure.com/files/4652252/download?download_frd=1);
    width: 50px;
    max-width: 75%;
    margin: 0 auto;
}
p.zoom3{
	content: url(https://u46.instructure.com/files/4652251/download?download_frd=1);
    width: 50px;
    max-width: 75%;
    margin: 0 auto;
}
p.calendar2{
	content: url(https://u46.instructure.com/files/4660571/download?download_frd=1);
    width: 50px;
    max-width: 75%;
    margin: 0 auto;
}
p.inperson{
	content: url(https://u46.instructure.com/files/6353455/download?download_frd=1);
    width: 50px;
    max-width: 75%;
    margin: 0 auto;
}
p.parapalooza{
	content: url(https://u46.instructure.com/files/11838387/download?download_frd=1);
    width: 150px;
    max-width: 75%;
    margin: 0 auto;
}
p.map2{
	content: url(https://u46.instructure.com/files/4781180/download?download_frd=1);
    width: 50px;
    max-width: 75%;
    margin: 0 auto;
}
p.hybrid{
	content: url(https://u46.instructure.com/files/5240256/download?download_frd=1);
    width: 50px;
    max-width: 75%;
    margin: 0 auto;
}
p.keynote{
	content: url(https://u46.instructure.com/files/6067116/download?download_frd=1);
    width: 50px;
    max-width: 75%;
    margin: 0 auto;
}
p.SIP{
	content: url(https://u46.instructure.com/files/5909660/download?download_frd=1);
    width: 50px;
    max-width: 75%;
    margin: 0 auto;
}
p.summer{
	content: url(https://u46.instructure.com/files/6211132/download?download_frd=1);
    width: 50px;
    max-width: 75%;
    margin: 0 auto;
}
p.u46rising{
	content: url(https://u46.instructure.com/files/6343716/download?download_frd=1);
    width: 100px;
    max-width: 75%;
    margin: 0 auto;
}
p.NTO2021{
	content: url(https://u46.instructure.com/files/6352512/download?download_frd=1);
    width: 75px;
    max-width: 75%;
    margin: 0 auto;
}
p.meeting{
	content: url(https://u46.instructure.com/files/7711567/download?download_frd=1);
    width: 50px;
    max-width: 75%;
    margin: 0 auto;
}
p.allthree{
	content: url(https://u46.instructure.com/files/9210005/download?download_frd=1);
    width: 50px;
    max-width: 75%;
    margin: 0 auto;
}
.DashboardNavigation__TranscriptButton {
display: none;
}

.DashboardProduct__DateWrapper {
display: none;
}
.product-dates {
display: none;
}

.product-credits {
display: none;
}

.product-value {
display: none;
}
.div.text-center.RegistrationHeader_DateInfo {
display: none;
}
.div.row  {
display: none;
}

#topnavbar > div > div > nav > div > ul > li > a {
  color: white !important;
}
/* Hide all <strong> tags within p elements under the specific class 'hero-head' */
.hero-head + p strong {
    display: none;
}

/* === U46 New Home Layout + Rotating Hero (additive; no overrides of your classes) === */

/* section heading */
.u46-section-title {
  margin: 10px 0 8px;
  font-size: clamp(18px, 2.4vw, 24px);
  color: #1b305b;
  font-weight: 700;
}

/* featured grid */
.u46-featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 12px 0 28px;
}
.u46-card {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  min-height: 180px;
  background: #f5f7fb;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
  color: inherit;
}
.u46-card:focus-visible { outline: 3px solid #ffcf00; outline-offset: 2px; }
.u46-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.12); }
.u46-card__media { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(1.05); transform: scale(1.02); }
.u46-card__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.10) 60%, rgba(0,0,0,0) 100%); }
.u46-card__content { position: absolute; left: 14px; right: 14px; bottom: 14px; color: #fff; }
.u46-card__eyebrow { display:inline-block; font-size:12px; letter-spacing:.04em; text-transform:uppercase; padding:6px 10px; border-radius:999px; background:rgba(27,48,91,.85); margin-bottom:8px; }
.u46-card__title { margin:0; font-size:18px; line-height:1.25; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.u46-card--noimg .u46-card__media { display: none; }
.u46-card--noimg { background: #1b305b; color: #fff; }

/* rotating hero */
.u46-hero--carousel {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin: 20px 0 28px;
  height: clamp(220px, 30vw, 380px);
  background: #1b305b;
  color: #fff;
}
.u46-hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity .5s ease;
  display: grid; place-items: end start;
}
.u46-hero__slide[aria-hidden="false"] { opacity: 1; }
.u46-hero__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.10) 60%, rgba(0,0,0,0) 100%); }
.u46-hero__content { position: relative; z-index: 1; padding: 18px 20px 22px; }
.u46-hero__eyebrow { display:inline-block; font-size:12px; letter-spacing:.04em; text-transform:uppercase; padding:6px 10px; border-radius:999px; background:rgba(27,48,91,.85); margin-bottom:8px; }
.u46-hero__title { margin:0 0 10px; font-size: clamp(20px, 3.2vw, 36px); line-height:1.15; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.u46-hero__cta { display:inline-block; padding:10px 16px; border-radius:10px; background:#ffcf00; color:#1b305b!important; font-weight:600; text-decoration:none; }

.u46-hero__nav { position:absolute; inset:0; display:flex; justify-content:space-between; align-items:center; pointer-events:none; }
.u46-hero__btn { pointer-events:auto; appearance:none; border:0; border-radius:999px; width:40px; height:40px; margin:0 8px; background: rgba(0,0,0,.35); color:#fff; font-size:18px; line-height:40px; text-align:center; cursor:pointer; }
.u46-hero__btn:focus-visible { outline: 3px solid #ffcf00; outline-offset: 2px; }

.u46-hero__dots { position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:8px; }
.u46-hero__dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.5); border:0; cursor:pointer; }
.u46-hero__dot[aria-current="true"] { background:#ffcf00; }
/* === U46 layout polish === */

/* Page wrapper for margins / max-width */
.u46-page-wrap {
  max-width: 1200px;         /* adjust if you want wider/narrower */
  margin: 20px auto 28px;    /* top/side/bottom spacing */
  padding: 0 16px;           /* side gutters, matches cards nicely */
}

/* Top brand bars */
.u46-brandbar {
  background: #1b305b;       /* U-46 blue */
  color: #fff;
  font-size: 14px;
}
.u46-brandbar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.u46-brandbar a {
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
}
.u46-brandbar a:hover,
.u46-brandbar a:focus { text-decoration: underline; }

.u46-accentbar {
  height: 6px;
  background: #FFCF00;       /* U-46 yellow */
}

/* Hide a generic "Listings" heading if present */
.u46-hide { display: none !important; }

/* Keep your existing hero + grid styles (from earlier step) */
/* === U46 Footer Button Bar (additive) === */
.u46-footerbar {
  background: #1b305b;           /* U-46 blue */
  color: #fff;
  margin-top: 28px;
}
.u46-footerbar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;       /* center the buttons */
}

/* Buttons */
.u46-btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  border: 2px solid #ffffff;
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  background: transparent;
}
.u46-btn:hover,
.u46-btn:focus-visible {
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  outline: none;
}

/* Optional “primary” button style (use on the most important link if desired) */
.u46-btn--primary {
  background: #ffcf00;           /* U-46 yellow */
  color: #1b305b !important;
  border-color: #ffcf00;
}
.u46-btn--primary:hover,
.u46-btn--primary:focus-visible {
  background: #ffd633;
}

/* Thin yellow accent under the footer bar */
.u46-accentbar-footer {
  height: 6px;
  background: #ffcf00;
}