.tui-core_auth-footer{display:flex;flex-flow:column;gap:var(--gap-2);margin-top:var(--gap-6);padding:var(--gap-6) var(--gap-8);color:var(--footer-text-color);background:var(--footer-bg-color)}.tui-core_auth-footer p{margin-bottom:var(--gap-2)}.tui-core_auth-footer p:last-child{margin-bottom:0}.tui-core_auth-footer a{color:inherit;text-decoration:underline}.tui-core_auth-footer__poweredBy{font-size:calc(var(--font-size-base) / 16 * 12)}.tui-core_auth-languageSelect__button{display:flex;align-items:center;padding:var(--gap-2);border-radius:var(--btn-radius);cursor:pointer;-webkit-user-select:none;user-select:none}.tui-core_auth-languageSelect__button:focus{outline:2px solid var(--color-state-focus);outline-offset:var(--focus-outline-offset);outline-color:currentColor}.tui-core_auth-loginLayout{display:flex;flex-direction:column;flex-grow:1}.tui-core_auth-loginLayout__panels{flex-grow:1}.tui-core_auth-loginLayout__panel-interface{display:flex;flex:auto;flex-flow:column;min-height:100%}.tui-core_auth-loginLayout__panel-graphic{position:fixed;top:0;right:0;bottom:0;display:none;width:50%;background-position:center;background-size:cover}.tui-core_auth-loginLayout__contentWrap{display:flex;flex:auto;flex-flow:column;align-items:center;justify-content:center;padding:var(--gap-8)}.tui-core_auth-loginLayout__main{width:100%;max-width:25rem}@media (min-width:992px){.tui-core_auth-loginLayout--hasBackground .tui-core_auth-loginLayout__panels{grid-template-columns:1fr 1fr}.tui-core_auth-loginLayout--hasBackground .tui-core_auth-loginLayout__panel-interface{width:50%}.tui-core_auth-loginLayout--hasBackground .tui-core_auth-loginLayout__panel-graphic{display:flex}}.tui-core_auth-loginNav{display:flex;align-items:center;justify-content:space-between;padding:var(--gap-8);color:var(--nav-text-color);background-color:var(--nav-bg-color)}.tui-core_auth-loginNav__image{height:1.75rem}.tui-core_auth-loginNav__lang{display:flex;align-items:center;justify-content:center;height:0}.tui-core_auth-loginForm__options{display:flex;flex-flow:row wrap;gap:var(--gap-2);align-items:baseline;justify-content:space-between}.tui-core_auth-loginForm__submitWrap{display:flex;flex-flow:column}.tui-core_auth-loginForm__content{display:flex;flex-flow:column;gap:var(--gap-6)}.tui-core_auth-loginForm__help{display:flex}.tui-core_auth-loginForm__heading{font-weight:var(--font-h3-weight);font-size:var(--font-h3-size);font-family:var(--font-h3-family);line-height:var(--font-h3-line-height);margin-bottom:var(--gap-4)}.tui-core_auth-stackChooser{display:flex;flex-direction:column;gap:var(--gap-2)}.tui-core_auth-stackChooser__option{font-weight:var(--font-h4-weight);font-size:var(--font-h4-size);font-family:var(--font-h4-family);line-height:var(--font-h4-line-height);display:flex;gap:var(--gap-4);align-items:center;justify-content:space-between;padding:0.625rem;color:unset;background:var(--color-neutral-1);border:var(--border-width-thin) solid var(--card-border-color);border-radius:var(--card-border-radius);-webkit-user-select:none;user-select:none}.tui-core_auth-stackChooser__option:hover,.tui-core_auth-stackChooser__option:active,.tui-core_auth-stackChooser__option:focus{color:unset;text-decoration:none}.tui-core_auth-stackChooser__option:focus{outline:2px solid var(--color-state-focus);outline-offset:var(--focus-outline-offset)}.tui-core_auth-stackChooser__label{display:flex;flex-direction:column;gap:var(--gap-2)}.tui-core_auth-login{display:flex;flex-flow:column;gap:var(--gap-6)}.tui-core_auth-login__separator{border:1px solid var(--color-neutral-5);border-width:1px 0 0 0}.tui-core_auth-login__errorInner{display:inline-flex;font-weight:var(--font-body-sm-weight);font-size:var(--font-body-sm-size);font-family:var(--font-body-sm-family);line-height:var(--font-body-sm-line-height);padding:var(--gap-3);color:var(--color-prompt-alert);background-color:var(--color-prompt-alert-bg);border-radius:8px}.tui-core_auth-login__title{margin:0}
/* ========================================
   Financial Education - Custom CSS (Minimal)
   Only rules that theme settings CANNOT handle.
   All colours, fonts, buttons, links, breadcrumbs,
   block headings, and login button styling are
   configured via theme settings JSON.
   ======================================== */

/* Google Fonts @import — needed for legacy pages
   (TUI loads via fonts/google-fonts setting) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

/* Font smoothing — no theme setting available */
h1, h2, h3, h4, h5, h6 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Navigation active state — TUI scoped, no setting for border-bottom-color */
.tui-theme_kineo-navItem__heading--selected,
.tui-theme_inspire-navItem__heading--selected,
.tui-primaryNavigation__link--selected {
  color: #004B87 !important;
  border-bottom-color: #CE0058 !important;
}

/* Catalog card titles — TUI scoped, needs !important */
.tui-catalogItemNarrow__title,
.tui-catalogItemNarrow__title a {
  color: #004B87 !important;
}

/* ========================================
   CPD PROGRESS MEDALLIONS
   ======================================== */

.cpdmedallions {
  background-color: #0077C8 !important;
  padding: 1.5rem 0.5rem !important;
  border-radius: 10px !important;
  overflow-x: auto !important;
}

/* Force all categories onto one row */
.cpdmedallions .row {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  margin: 0 !important;
  min-width: min-content !important;
}

.cpdmedallions .row > div {
  flex: 1 1 0 !important;
  max-width: none !important;
  width: auto !important;
  min-width: 80px !important;
  padding: 0 2px !important;
}

/* Scale medallions down and collapse the extra layout space */
.cpdmedallion {
  border-color: #ffffff !important;
  background-color: #0077C8 !important;
  transform: scale(0.75);
  margin: -12px auto -8px !important;
}

.cpdmedallion svg {
  stroke: #ffffff !important;
}

.cpdmedallions .cpdcategory {
  color: #ffffff !important;
  font-size: 1em !important;
  line-height: 1.2 !important;
}

.cpdmedallion span.level {
  background-color: #CE0058 !important;
}

.cpdmedallion span.level.compliant {
  background-color: #48BDA1 !important;
}

/* Responsive: scale down further on small screens */
@media (max-width: 768px) {
  .cpdmedallion {
    transform: scale(0.6);
    margin: -18px auto -14px !important;
  }
  .cpdmedallions .row > div {
    min-width: 65px !important;
  }
  .cpdmedallions .cpdcategory {
    font-size: 0.8em !important;
  }
}

@media (max-width: 480px) {
  .cpdmedallion {
    transform: scale(0.5);
    margin: -22px auto -18px !important;
  }
  .cpdmedallions .row > div {
    min-width: 55px !important;
  }
  .cpdmedallions .cpdcategory {
    font-size: 0.7em !important;
  }
}

/* ============================================
   LOGIN PAGE
   ============================================ */

/* Login nav logo sizing — no theme setting for dimensions */
.tui-core_auth-loginNav__logo {
  display: block;
  text-align: center;
  margin: 2rem auto;
}

.tui-core_auth-loginNav__logo img {
  max-width: 250px;
  height: auto;
}

/* Welcome text replacement via ::before/::after — no theme setting */
.tui-core_auth-login__title {
  position: relative !important;
  visibility: hidden !important;
  margin-bottom: 1.5rem !important;
  min-height: 70px;
}

.tui-core_auth-login__title::before {
  content: "Welcome to Financial Education";
  visibility: visible !important;
  display: block;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: #004B87;
  margin-bottom: 0.5rem;
}

.tui-core_auth-login__title::after {
  content: "Sign in to access your training";
  visibility: visible !important;
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: #666666;
}

/* Login form option links — no specific setting for these */
.tui-core_auth-loginForm__options a {
  color: #004B87 !important;
}

.tui-core_auth-loginForm__options a:hover {
  color: #CE0058 !important;
}

/* Login layout — remove graphic panel, centre form */
.tui-core_auth-loginLayout__panel-graphic {
  display: none !important;
  width: 0 !important;
  flex: 0 0 0 !important;
}

.tui-core_auth-loginLayout__panels {
  display: block !important;
  width: 100% !important;
}

.tui-core_auth-loginLayout__panel-interface {
  width: 100% !important;
  max-width: 100% !important;
}

.tui-core_auth-loginLayout__main {
  max-width: 450px;
  margin: 0 auto;
}
/*===================================================================
CPD Tiles format improvements
================================================================*/
.format-tiles .course-content ul.tiles .tile.phototile 
{
    padding: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 175px;
}
.format-tiles .course-content ul.tiles .tile.phototile .photo-tile-text h3
 {
    background-color: transparent !important;
    color: #004B87;
    position: relative;
    font-weight: 600;
    width: 100%;
}
/* ==============================================
   TILE TITLE FIX
   All tiles remain 175px tall. The title area
   expands to fit text with a white background
   so it never overlaps the image below.
   The image area shrinks proportionally.
   ============================================== */

/* Keep tile at fixed size, clip overflow.
   Shift background image to bottom so it shows
   below the (variable-height) title area. */
.tile.phototile {
  height: 220px !important;
  max-height: 220px !important;
  overflow: hidden !important;
  background-position: 50% 100% !important;
}


/* Make the link fill the tile height as a flex column */
.tile.phototile > a {
  display: flex !important;
  flex-direction: column !important;
  height:  220px !important;
}

/* The inner wrapper div — flex column so title and image stack */
.tile.phototile > a > div {
  display: flex !important;
  flex-direction: column !important;
  height:  220px !important;
  position: relative !important;
}

/* Title span: switch from absolute to relative positioning
   so it takes natural height in the flex flow.
   White background ensures text is always legible
   and never visually overlaps the image. */
.tile.phototile .photo-tile-text {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  padding: 8px 7px 6px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  background-color: #ffffff !important;
  z-index: 1 !important;
}

/* Image spacer div: fills remaining space below the title */
.tile.phototile .tile-text {
  flex: 1 1 auto !important;
  margin-top: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
.format-tiles .course-content ul.tiles .tile.phototile  {
    background-color: transparent !important;
}

/* login page changes*/
.tui-core_auth-footer {
background: #004B87;
color: white;
}

.tui-core_auth-login {
background-color: white;
padding-right: 25px;
    padding-left: 25px;
    padding-top: 25px;
    padding-bottom: 25px;
}

/*=========================================================================
PDF close X was primary color FIX, rertain admin quick access menu color
=======================================================================
[class^=tfont-var-], [class*=" tfont-var-"] {
color: white;
}

.totaraNav_prim--side .popover-region .flex-icon {
color: #004B87;
}
*/


/* image tiles */
#section-0 > div.content > div > div > div > p > img {
width: 100%;
}