/* Shared accents for the theme and custom Guru views. */
:root {
  --rad101-blue: #194cc4;
  --rad101-green: #249d40;
  --rad101-green-on-blue: #4dca6b;
  --color-primary: var(--rad101-green);
  --color-secondary: var(--rad101-blue);
  --body-link-color: var(--rad101-green);
  --body-link-hover-color: var(--rad101-green);
  --hightlight_bg: var(--rad101-blue);
  --purple: var(--rad101-green);
}

html,
.t4-copyright {
  background-color: var(--rad101-blue);
}

.subbutton.btn-primary {
  background-color: var(--rad101-blue) !important;
  border-color: var(--rad101-blue) !important;
}

/* Guru login uses a legacy UIkit button with a separate blue border. */
.com_guru .uk-button-primary,
.com_guru .wk-button-primary {
  border-color: var(--rad101-green) !important;
}

/* Separate text on blue from the established green button backgrounds. */
#t4-header .t4-navbar .navbar-nav > li.active > a,
#t4-header .t4-navbar .navbar-nav > li > a:hover,
#t4-header .t4-navbar .navbar-nav > li > a:focus,
.layout-home .law-link,
.layout-home .features-list li::before {
  color: var(--rad101-green-on-blue) !important;
  text-shadow: 0 1px 2px rgba(0, 25, 65, 0.8);
}

/* This is a stroked SVG: filling it closes the external-link outline. */
.law-link .external-link-icon {
  fill: none;
  stroke: currentColor;
  text-shadow: none;
  filter: none;
}

/* Keep the current page identifiable in desktop and mobile navigation. */
#t4-header .t4-navbar .nav-item.active > .nav-link .menu-item-title,
#t4-header .t4-navbar .nav-link[aria-current="page"] .menu-item-title,
.t4-offcanvas .nav-item.active > .nav-link .menu-item-title,
.t4-offcanvas .nav-link[aria-current="page"] .menu-item-title {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

/* Mobile header: the header's green button (Dashboard, or Buy Now for
   guests) sits beside the menu toggle; its other links are in the menu. */
@media (max-width: 767.98px) {
  #t4-header .t4-logo-wrap,
  #t4-header .t4-logo-wrap .navbar-brand {
    width: auto;
    min-width: 0;
    padding-right: 0;
  }

  #t4-header .t4-navbar {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
  }

  #t4-header .t4-mobile-actions .navbar,
  #t4-header .t4-mobile-actions .nav-item {
    padding: 0;
  }

  #t4-header .t4-mobile-actions .nav-link:not(.btn-primary) {
    display: none;
  }

  #t4-header .t4-navbar .t4-mobile-actions .navbar-nav > li > a.btn-primary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    color: #fff !important;
    font-weight: 600;
    text-shadow: none;
    white-space: nowrap;
  }

  /* Like the desktop button, not the main menu's current-page link. */
  #t4-header .t4-navbar .t4-mobile-actions .nav-item > .btn-primary .menu-item-title {
    text-decoration-line: none;
  }

  #t4-header .t4-offcanvas-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: 0 0 0 12px;
    float: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    line-height: 1;
  }

  #t4-header .t4-offcanvas-toggle i {
    font-size: 20px;
  }
}

/* Off-canvas menu: logo and close button, full-width links, account actions. */
.t4-offcanvas .t4-off-canvas-header {
  height: auto;
  padding: 16px 20px;
  border-bottom: 1px solid #eef0f5;
  background-color: #fff;
}

/* The SVG logo has no intrinsic size, so give it a height. */
.t4-offcanvas .t4-off-canvas-header a img {
  width: auto;
  height: 44px;
  max-height: none;
}

.t4-offcanvas .t4-off-canvas-header .close {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: #f1f3f8;
  opacity: 1;
}

.t4-offcanvas .t4-off-canvas-header .close span {
  width: 40px;
  height: 40px;
  color: #343744;
  font-size: 28px;
  line-height: 38px;
}

.t4-offcanvas .t4-off-canvas-body {
  padding: 12px 0;
}

.t4-offcanvas .t4-off-canvas-body .t4-module {
  margin-bottom: 0;
}

.t4-offcanvas .t4-off-canvas-body .t4-module .module-inner {
  padding: 0 12px;
}

.t4-offcanvas .t4-off-canvas-body .navbar .nav-link {
  display: block;
  padding: 14px 12px;
  border-radius: 8px;
  color: #1d2233;
  font-size: 1.0625rem;
  font-weight: 600;
  text-transform: none;
}

.t4-offcanvas .t4-off-canvas-body .navbar .nav-link:hover,
.t4-offcanvas .t4-off-canvas-body .navbar .nav-link:focus {
  background-color: #f5f7fb;
  color: var(--rad101-blue);
}

/* The theme stylesheet forces the active link green with !important. */
.t4-offcanvas .t4-off-canvas-body .navbar .nav-item.active > .nav-link {
  background-color: rgba(25, 76, 196, 0.08);
  color: var(--rad101-blue) !important;
}

.t4-off-canvas-account {
  padding: 16px 20px 24px;
  border-top: 1px solid #eef0f5;
}

.t4-off-canvas-account .navbar {
  padding: 0;
}

/* The header lists the green button last; here it leads. */
.t4-off-canvas-account .navbar-nav {
  flex-direction: column-reverse;
  gap: 10px;
  width: 100%;
}

.t4-off-canvas-account .nav-item {
  padding: 0;
}

.t4-off-canvas-account .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid #d5d9e4;
  border-radius: 8px;
  color: #343744;
  font-weight: 600;
}

.t4-off-canvas-account .nav-link:hover,
.t4-off-canvas-account .nav-link:focus {
  border-color: var(--rad101-blue);
  color: var(--rad101-blue);
}

.t4-off-canvas-account .nav-link.btn-primary,
.t4-off-canvas-account .nav-link.btn-primary:hover,
.t4-off-canvas-account .nav-link.btn-primary:focus {
  border-color: var(--rad101-green);
  background-color: var(--rad101-green);
  color: #fff;
}

/* Course cart: make quantity and assignment the primary purchase decision. */
.guru-table-cart {
  width: 100%;
  min-width: 1080px;
  table-layout: fixed;
}

.guru-table-cart .guru-cart-course-column {
  width: 31%;
}

.guru-table-cart .guru-cart-promo-column {
  width: 44%;
}

.guru-table-cart .guru-cart-unit-column {
  width: 12%;
}

.guru-table-cart .guru-cart-total-column {
  width: 13%;
}

.guru-table-cart .guru-cart-quantity {
  min-width: 0;
}

.guru-purchase-controls {
  display: grid;
  grid-template-columns: 92px 370px;
  align-items: center;
  gap: 14px;
}

.guru-quantity-control {
  display: block;
  margin: 0;
  line-height: 1;
}

.guru-quantity-control input[type="number"] {
  width: 92px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #c8ccd8;
  border-radius: 6px;
  background: #fff;
  font-size: 1rem;
  font-weight: 600;
}

.guru-assignment-details {
  display: grid;
  grid-auto-rows: auto;
  justify-content: start;
  justify-items: start;
  gap: 2px;
  width: 370px;
}

.guru-assignment-details[hidden] {
  display: none;
}

.guru-self-assignment {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  color: #343744;
  font-size: 0.9rem;
  line-height: 1.35;
  cursor: pointer;
  white-space: nowrap;
}

.guru-self-assignment input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  opacity: 1;
}

/* A promo code from a course purchase locks "apply to my account" on. */
.guru-self-assignment:has(input:disabled) {
  cursor: default;
}

.guru-self-required {
  display: block;
  margin: 0;
  color: var(--rad101-green);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.guru-table-cart .guru_cart_amount,
.guru-table-cart .guru_cart_amount_discount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Keep promo entry and the order summary on matching label/control rows. */
#guru_cart .guru-cart-items {
  margin-bottom: 24px;
}

#guru_cart .guru-cart-promo,
#guru_cart .guru-cart-totals {
  display: grid;
  gap: 8px;
}

/* Legacy panel clearfixes must not create empty grid rows. */
#guru_cart .guru-cart-totals::before,
#guru_cart .guru-cart-totals::after {
  display: none;
}

#guru_cart .guru-cart-promo > label {
  margin: 0;
}

#guru_cart .guru-cart-summary .guru_cart_total.uk-text-bold {
  height: 44px;
  line-height: 44px;
  margin-top: 0;
}

.guru-cart-promo .guru-promo-controls {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100% !important;
}

.guru-cart-promo .guru-promo-input {
  flex: 1 1 auto;
  height: 44px;
  margin: 0 !important;
  width: auto !important;
  min-width: 0;
}

.guru-cart-promo .guru-promo-recalculate {
  flex: 0 0 auto;
  height: 44px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 42px !important;
  margin: 0 !important;
}

/* Phones: show each cart line as a labelled card instead of a wide table.
   768px matches Guru's hidden-phone breakpoint. */
@media (max-width: 768px) {
  .com_guru #guru-component #guru_cart #adminForm > .guru-cart-items {
    padding: 4px 18px;
    border: 1px solid #e3e6ee;
    border-radius: 8px;
    background: #fff;
  }

  #guru_cart .guru-table-cart,
  #guru_cart .guru-table-cart tbody,
  #guru_cart .guru-table-cart tr {
    display: block;
    width: 100%;
    min-width: 0;
    background: none;
  }

  #guru_cart .guru-table-cart colgroup,
  #guru_cart .guru-table-cart thead {
    display: none;
  }

  #guru-component #guru_cart .guru-table-cart td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid #eef0f5;
    border-bottom: 0;
  }

  #guru-component #guru_cart .guru-table-cart td.g_cell_1 {
    border-top: 0;
    font-weight: 600;
  }

  #guru-component #guru_cart .guru-table-cart td[data-label]::before {
    content: attr(data-label);
    color: #5b6070;
  }

  #guru-component #guru_cart .guru-table-cart td ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Quantity sits beside its label; the account option spans the card. */
  #guru-component #guru_cart .guru-table-cart td.guru-cart-quantity {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 12px;
  }

  #guru_cart .guru-cart-quantity .guru-purchase-controls {
    display: contents;
  }

  #guru_cart .guru-cart-quantity .guru-assignment-details {
    grid-column: 1 / -1;
    width: auto;
  }

  #guru_cart .guru-self-assignment,
  #guru_cart .guru-self-required {
    white-space: normal;
  }

  #guru-component #guru_cart .guru-table-cart td.g_cell_4,
  #guru-component #guru_cart .guru-table-cart td.g_cell_4::before {
    color: inherit;
    font-weight: 600;
  }

  /* Totals and payment method get cards matching the cart line. */
  .com_guru #guru-component #guru_cart .guru-cart-summary .guru-cart-totals,
  #guru-component #guru_cart #g_myCart_payment .guru-plugin-filter {
    padding: 4px 18px;
    border: 1px solid #e3e6ee;
    border-radius: 8px;
    background: #fff;
  }

  #guru_cart .guru-cart-summary .guru-cart-totals {
    gap: 0;
  }

  #guru-component #guru_cart .guru-cart-items,
  #guru-component #guru_cart .guru-cart-summary > div {
    margin-bottom: 16px;
  }

  #guru_cart .guru-cart-totals .guru_cart_discount,
  #guru_cart .guru-cart-summary .guru-cart-totals .guru_cart_total.uk-text-bold {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: auto;
    margin: 0;
    padding: 14px 0;
    border-radius: 0;
    background: none;
    line-height: inherit;
  }

  #guru_cart .guru-cart-summary .guru-cart-totals .guru_cart_total.uk-text-bold {
    border-top: 1px solid #eef0f5;
  }

  #guru-component #guru_cart #g_myCart_payment .guru-plugin-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* The summary grid's column margin already spaces this card. */
    margin: 0 !important;
    padding: 12px 18px;
  }

  #guru_cart #g_myCart_payment .guru-plugin-filter #processor {
    margin: 0;
  }

  #guru_cart .guru-checkout-action {
    margin-top: 16px;
  }

  #guru_cart .guru-checkout-action .uk-button {
    width: 100%;
  }
}

/* Card payment form (Authorize.Net plugin), after checkout. */
.rad101-card-payment {
  max-width: 560px;
  margin: 8px auto 40px;
  padding: 28px;
  border: 1px solid #e3e7ef;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(34, 43, 82, 0.07);
}

.rad101-card-form {
  display: grid;
  gap: 18px;
  margin: 0;
}

.rad101-card-header h2 {
  margin: 0 0 6px;
  color: #173f5f;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

.rad101-card-secure {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #52606d;
  font-size: 14px;
}

.rad101-card-secure svg {
  flex: 0 0 auto;
  color: var(--rad101-green);
}

.rad101-card-due {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 8px;
  background: #f5f7fb;
  color: #52606d;
}

.rad101-card-due strong {
  color: #173f5f;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rad101-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.rad101-card-field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.rad101-card-field label {
  margin: 0;
  color: #343744;
  font-size: 14px;
  font-weight: 600;
}

.rad101-card-optional {
  color: #697080;
  font-weight: 400;
}

.rad101-card-form input:not([type="hidden"]),
.rad101-card-form select {
  width: 100%;
  max-width: none;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #c8ccd8;
  border-radius: 6px;
  background-color: #fff;
  color: #1f2d3d;
  font-size: 16px;
  box-shadow: none;
}

.rad101-card-form input::placeholder {
  color: #9aa1ae;
}

.rad101-card-form input:focus,
.rad101-card-form select:focus {
  border-color: var(--rad101-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(25, 76, 196, 0.15);
}

.rad101-card-form [aria-invalid="true"] {
  border-color: #d23b3b;
}

.rad101-card-form [aria-invalid="true"]:focus {
  border-color: #d23b3b;
  box-shadow: 0 0 0 3px rgba(210, 59, 59, 0.15);
}

#rad101-card-number {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.rad101-card-expiry {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 8px;
}

.rad101-card-error {
  margin: 0;
  color: #d23b3b;
  font-size: 13px;
  line-height: 1.35;
}

.rad101-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.rad101-card-actions .uk-button {
  height: 44px;
  line-height: 42px;
  padding-top: 0;
  padding-bottom: 0;
}

.com_guru #guru-component .rad101-card-actions .rad101-card-back {
  border: 1px solid #cfd6e3;
  background: #fff;
  color: #1f2d3d;
}

.com_guru #guru-component .rad101-card-actions .rad101-card-back:hover,
.com_guru #guru-component .rad101-card-actions .rad101-card-back:focus-visible {
  border-color: #1f2d3d;
  background: #f5f7fb;
  color: #1f2d3d;
}

.rad101-card-actions .rad101-card-submit {
  min-width: 160px;
}

.rad101-card-actions .rad101-card-submit:disabled {
  opacity: 0.7;
  cursor: progress;
}

@media (max-width: 575px) {
  .rad101-card-payment {
    padding: 20px 16px;
  }

  .rad101-card-row {
    grid-template-columns: 1fr;
  }

  .rad101-card-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

/* Student dashboard: Pay invoice, apart from the tabs at the far right. */
.com_guru #guru-component#guru-component .uk-navbar-nav > li.rad101-pay-invoice {
  margin-left: auto;
  margin-right: 0;
  padding: 0;
  background: none;
}

.com_guru #guru-component#guru-component .uk-navbar-nav > li.rad101-pay-invoice > a,
.com_guru #guru-component #guru_menubar_mobile .rad101-pay-invoice-button {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 10px 16px !important;
  border-radius: 4px;
  background: var(--rad101-blue);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 25.6px;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.com_guru #guru-component#guru-component .uk-navbar-nav > li.rad101-pay-invoice > a:hover,
.com_guru #guru-component#guru-component .uk-navbar-nav > li.rad101-pay-invoice > a:focus-visible,
.com_guru #guru-component#guru-component .uk-navbar-nav > li.rad101-pay-invoice > a.is-active,
.com_guru #guru-component #guru_menubar_mobile .rad101-pay-invoice-button:hover,
.com_guru #guru-component #guru_menubar_mobile .rad101-pay-invoice-button.is-active {
  background: #133a96;
  color: #fff;
}

/* Phones get the tab picker; Pay invoice sits beside it. */
.com_guru #guru-component #guru_menubar_mobile {
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.com_guru #guru-component #guru_menubar_mobile select {
  flex: 1 1 auto;
  min-width: 0;
  /* template.css fixes the picker at 34px with !important. */
  min-height: 46px !important;
  height: 46px !important;
  margin: 0;
}

@media (max-width: 767px) {
  .com_guru #guru-component #guru_menubar_mobile {
    display: flex !important;
  }
}

/* Pay an Invoice: the number (with an example invoice) and your unpaid
   invoices, beside "Don't have an invoice?" */
.rad101-payinv-start {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 24px;
  margin: 8px 0 40px;
}

.rad101-payinv-main {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.rad101-payinv-lookup-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  align-items: center;
  gap: 32px;
}

/* The top of an invoice as the PDF draws it, its number circled. */
.rad101-payinv-example {
  margin: 0;
}

.rad101-payinv-example-sheet {
  padding: 18px 18px 26px;
  border: 1px solid #e3e7ef;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(34, 43, 82, 0.12);
  transform: rotate(-1.5deg);
  font-family: Helvetica, Arial, sans-serif;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}

.rad101-payinv-example-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.rad101-payinv-example-head img {
  width: 66px;
  height: auto;
}

.rad101-payinv-example-title {
  display: block;
  color: #173f5f;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.rad101-payinv-example-number {
  position: relative;
  display: inline-block;
}

.rad101-payinv-example-circle {
  position: absolute;
  top: -9px;
  left: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 18px);
  overflow: visible;
  fill: none;
  stroke: #e0452b;
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 340;
  stroke-dashoffset: 0;
  animation: rad101-circle-draw 0.9s 0.3s ease-out both;
}

@keyframes rad101-circle-draw {
  from {
    stroke-dashoffset: 340;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rad101-payinv-example-circle {
    animation: none;
  }
}

.rad101-payinv-example-status {
  display: block;
  margin-top: 2px;
  color: #52606d;
  font-size: 11px;
}

.rad101-payinv-example-rule {
  height: 2px;
  margin: 10px 0 12px;
  background: #173f5f;
}

.rad101-payinv-example-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rad101-payinv-example-parties strong {
  display: block;
  margin-bottom: 6px;
  color: #173f5f;
  font-size: 11px;
}

.rad101-payinv-example-parties i {
  display: block;
  height: 6px;
  margin-bottom: 5px;
  border-radius: 3px;
  background: #e6eaf0;
}

.rad101-payinv-example-parties i:nth-of-type(2) {
  width: 80%;
}

.rad101-payinv-example-parties i:nth-of-type(3) {
  width: 60%;
}

/* Don't have an invoice? */
.rad101-payinv-side {
  position: sticky;
  top: 24px;
}

.rad101-payinv-buy h2 {
  margin-bottom: 14px;
  font-size: 20px;
}

.rad101-payinv-lookup-body h2 {
  margin-bottom: 18px;
}

.rad101-payinv-course {
  display: grid;
  gap: 6px;
  padding: 14px 0;
  border-top: 1px solid #eef0f5;
}

.rad101-payinv-course strong {
  color: #173f5f;
  line-height: 1.3;
}

.rad101-payinv-course-price {
  color: #173f5f;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rad101-payinv-course-price .rad101-payinv-muted {
  font-weight: 400;
}

.com_guru #guru-component .rad101-payinv-course .uk-button {
  width: 100%;
  margin-top: 6px;
}

.rad101-payinv-redeem {
  justify-self: center;
  font-size: 14px;
}


.rad101-payinv-panel,
.rad101-invoice {
  padding: 28px;
  border: 1px solid #e3e7ef;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(34, 43, 82, 0.07);
}

.rad101-payinv-panel h2,
.rad101-invoice h2 {
  margin: 0 0 6px;
  color: #173f5f;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

.rad101-payinv-lead {
  margin: 0 0 20px;
  color: #52606d;
}

.rad101-payinv-muted {
  color: #697080;
}

.rad101-payinv-lookup label {
  display: block;
  margin: 0 0 6px;
  color: #343744;
  font-size: 14px;
  font-weight: 600;
}

.rad101-payinv-lookup-row {
  display: flex;
  gap: 12px;
}

.rad101-payinv-number {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  height: 48px;
  padding: 0 0 0 14px;
  border: 1px solid #c8ccd8;
  border-radius: 6px;
  background: #fff;
}

.rad101-payinv-number:focus-within {
  border-color: var(--rad101-blue);
  box-shadow: 0 0 0 3px rgba(25, 76, 196, 0.15);
}

.rad101-payinv-number span {
  color: #697080;
  font-size: 18px;
}

.rad101-payinv-lookup .rad101-payinv-number input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 46px;
  margin: 0;
  padding: 0 12px 0 6px;
  border: 0;
  background: none;
  box-shadow: none;
  color: #1f2d3d;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  outline: none;
}

.rad101-payinv-lookup-row .uk-button {
  flex: 0 0 auto;
  height: 48px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 48px;
}

.rad101-payinv-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.rad101-payinv-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 16px;
  padding: 14px 0;
  border-top: 1px solid #eef0f5;
}

.rad101-payinv-list-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.rad101-payinv-list-main strong {
  color: #173f5f;
}

.rad101-payinv-list-main span {
  line-height: 1.4;
}

.rad101-payinv-list-amount {
  color: #173f5f;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rad101-payinv-list .uk-button {
  height: 40px;
  padding: 0 22px;
  line-height: 40px;
}

.rad101-payinv-back {
  margin: 0 0 12px;
}

.rad101-payinv-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
  margin-bottom: 40px;
}

.rad101-payinv-checkout-single {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

.rad101-payinv-checkout .rad101-card-payment {
  max-width: none;
  margin: 0;
}

.rad101-invoice-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 2px solid #173f5f;
}

.rad101-invoice-header p {
  margin: 0;
}

.rad101-invoice-status {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.rad101-invoice-status-unpaid {
  background: #fff4e0;
  color: #8a5300;
}

.rad101-invoice-status-paid {
  background: #e6f6ea;
  color: #1c7a33;
}

.rad101-invoice-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;
}

.rad101-invoice-parties h3 {
  margin: 0 0 4px;
  color: #173f5f;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.rad101-invoice-parties p {
  margin: 0;
  color: #1f2d3d;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.rad101-invoice-items {
  width: 100%;
  border-collapse: collapse;
}

.rad101-invoice-items th,
.rad101-invoice-items td {
  padding: 10px 8px;
  border-bottom: 1px solid #eef0f5;
  text-align: left;
  vertical-align: top;
}

.rad101-invoice-items th {
  background: #f5f7fb;
  color: #173f5f;
  font-size: 14px;
  font-weight: 600;
}

.rad101-invoice-items .rad101-invoice-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rad101-invoice-totals {
  display: grid;
  gap: 6px;
  width: min(100%, 280px);
  margin: 16px 0 0 auto;
}

.rad101-invoice-totals div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.rad101-invoice-totals dt {
  font-weight: 400;
  color: #52606d;
}

.rad101-invoice-totals dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.rad101-invoice-totals .rad101-invoice-total {
  padding-top: 8px;
  border-top: 1px solid #d8e0e7;
  color: #173f5f;
  font-size: 18px;
  font-weight: 600;
}

.rad101-invoice-totals .rad101-invoice-total dt {
  color: inherit;
  font-weight: 600;
}

.rad101-invoice-note {
  margin: 20px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f5f7fb;
  color: #343744;
}

@media (max-width: 1199px) {
  .rad101-payinv-lookup-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .rad101-payinv-example {
    width: min(100%, 340px);
    justify-self: center;
  }
}

@media (max-width: 959px) {
  .rad101-payinv-checkout,
  .rad101-payinv-start {
    grid-template-columns: minmax(0, 1fr);
  }

  .rad101-payinv-side {
    position: static;
  }
}

/* Phones: no example invoice; tighter cards. */
@media (max-width: 767px) {
  .rad101-payinv-example {
    display: none;
  }

  .rad101-payinv-start,
  .rad101-payinv-main {
    gap: 16px;
  }

  .rad101-payinv-checkout {
    gap: 16px;
  }

  .rad101-payinv-panel h2,
  .rad101-invoice h2 {
    font-size: 21px;
  }
}

@media (max-width: 575px) {
  .rad101-payinv-panel,
  .rad101-invoice {
    padding: 20px 16px;
  }

  .rad101-payinv-lookup-row {
    flex-direction: column;
  }

  .rad101-payinv-list li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .rad101-payinv-list-main {
    grid-column: 1 / -1;
  }

  .rad101-invoice-header {
    flex-wrap: wrap;
  }

  .rad101-invoice-parties {
    margin: 16px 0;
  }

  .rad101-invoice-parties {
    grid-template-columns: 1fr;
  }

  /* Each line as label and value instead of four squeezed columns. */
  .rad101-invoice-items thead {
    display: none;
  }

  .rad101-invoice-items,
  .rad101-invoice-items tbody,
  .rad101-invoice-items tr,
  .rad101-invoice-items td {
    display: block;
  }

  .rad101-invoice-items tr {
    padding: 6px 0;
    border-bottom: 1px solid #eef0f5;
  }

  .rad101-invoice-items td,
  .rad101-invoice-items .rad101-invoice-number {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border: 0;
    text-align: right;
    white-space: normal;
  }

  .rad101-invoice-items td::before {
    content: attr(data-label);
    color: #52606d;
    text-align: left;
  }

  .rad101-invoice-totals {
    width: 100%;
  }
}

/* Sticky footer: pin the footer (logo/contact block and copyright bar) to
   the bottom of the viewport when page content is shorter than the screen.
   Extra space fills above the footer (white content bg) instead of showing
   as empty dark html bg below. */
.t4-content-inner {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#t4-footnav,
#t4-copyright {
  margin-top: auto;
}

#t4-footnav ~ #t4-copyright {
  margin-top: 0;
}

/* Footer snippet styles */
.footer-snippet {
  color: #000;
}

.footer-snippet .footer-content {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 2rem;
  row-gap: 0.5rem;
  max-width: 880px;
  margin: 0 auto;
  padding: 1.25rem 0;
}

.footer-snippet a,
.footer-snippet a:link,
.footer-snippet a:visited {
  color: #000 !important;
  text-decoration: none;
}
.footer-snippet a:hover,
.footer-snippet a:focus {
  color: #000 !important;
  text-decoration: underline;
}

.footer-snippet .footer-logo img {
  display: block;
  height: 88px;
  width: auto;
}

.footer-snippet .footer-info {
  text-align: right;
  line-height: 1.5;
}
.footer-snippet .footer-info .name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

@media (max-width: 640px) {
  .footer-snippet .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-snippet .footer-info {
    text-align: inherit;
  }
  .footer-snippet .footer-logo img {
    height: 72px;
    margin: 0 auto;
  }
}

input[type="text"].form-control,
input[type="email"].form-control,
textarea.form-control {
  border: 1px solid black;
}

.features-list li {
  font-size: 20px !important;
}

/* Header logo: the full-color logo needs a light surface on the brand blue,
   so it sits on a raised off-white card, vertically centered in the header.
   The SVG has no intrinsic size; size it by height. */
#t4-header {
  padding-left: 48px;
  padding-right: 48px;
}
#t4-header .navbar-brand > a {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 12px;
  background-color: #f5f7fb;
  box-shadow: 0 2px 6px rgba(4, 16, 60, 0.25), 0 14px 30px -10px rgba(4, 16, 60, 0.65);
}
.navbar-brand img.logo-img {
  height: 84px;
  width: auto;
  max-height: none;
}
/* Below md the header is 80px tall, so the card must stay within that. */
@media (max-width: 767.98px) {
  #t4-header {
    padding-left: 20px;
    padding-right: 20px;
  }
  #t4-header .navbar-brand > a {
    padding: 6px 9px;
    border-radius: 8px;
  }
  .navbar-brand img.logo-img {
    height: 50px;
  }
}

/* The full nav and the Login/Buy actions show from the md breakpoint (the
   T4 navigation profile sets option_breakpoint to md), so the hamburger only
   takes over on phone-sized screens. Keep the main nav left-aligned next to
   the logo below xl; the template forces justify-content: space-between
   there, which suited the old logo + hamburger header. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  #t4-header .t4-header-wrap .t4-navbar-wrap {
    justify-content: flex-start;
  }
}

/* Tablet widths: tighten spacing so the logo, all nav links and both actions
   fit on one row before falling back to the hamburger. */
@media (min-width: 768px) and (max-width: 991.98px) {
  #t4-header {
    padding-left: 24px;
    padding-right: 24px;
  }
  #t4-header .navbar-brand {
    padding-right: 1rem;
    min-width: 0;
  }
  .navbar-brand img.logo-img {
    height: 72px;
  }
  #t4-header .t4-megamenu .navbar-nav > li > a {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  #t4-header .t4-right-header .navbar-nav > li {
    margin-left: 0.75rem;
  }
  #t4-header .t4-right-header .btn {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Homepage hero: text left, image right */
.acm-features.style-1 .acm-features-inner {
  padding-top: 2.5rem !important;
  padding-bottom: 3rem !important;
}

.acm-features.style-1 .hero-features-row {
  flex-wrap: nowrap;
  align-items: center;
}

.acm-features.style-1 .features-content-col {
  position: relative;
  z-index: 2;
  padding-right: 2rem;
}

/* Give the text a little more of the row than the image so the heading
   has room for one line. */
@media (min-width: 992px) {
  .acm-features.style-1 .features-content-col {
    flex: 0 0 56%;
    max-width: 56%;
  }
  .acm-features.style-1 .features-image-col {
    flex: 0 0 44%;
    max-width: 44%;
  }
}

.acm-features.style-1 .features-image-col {
  position: relative;
  z-index: 1;
  padding-left: 0.5rem;
  /* Room for cards that hang past the image edge. */
  overflow: visible;
}

.acm-features.style-1 .features-image {
  position: relative;
  inset: auto;
  max-height: none;
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  display: block;
  border-radius: 16px;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The hero image is a wide panorama; frame it as a balanced, retina-aware card.
   Width is driven by the grid column; aspect-ratio + cover keep the framing
   consistent across 1080p, 1440p and HiDPI displays. */
.acm-features.style-1 .features-image > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  max-height: min(520px, 70vh);
  object-fit: cover;
  object-position: center 38%;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 18px 40px -12px rgba(0, 0, 0, 0.55),
    0 40px 80px -28px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Subtle top sheen for a clean, clinical glass feel. */
.acm-features.style-1 .features-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0) 26%
  );
  mix-blend-mode: screen;
}

.acm-features.style-1 .features-image-col:hover .features-image {
  transform: translateY(-4px);
}

.acm-features.style-1 .features-image-col:hover .features-image > img {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 26px 52px -12px rgba(0, 0, 0, 0.6),
    0 54px 96px -28px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: no-preference) {
  .acm-features.style-1 .features-image {
    animation: heroImageIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes heroImageIn {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* Wide screens: light overhang once the column gap is generous. */
@media (min-width: 1400px) {
  .acm-features.style-1 .features-image-col {
    padding-left: 1rem;
    padding-right: 0.75rem;
  }
}

/* Hero heading: one line whenever the column is wide enough to keep it large,
   sized to the column (the text is about 11.1em wide at Barlow Bold).
   Narrower columns (phones) wrap it into balanced lines at a large size. */
.acm-features.style-1 .section-title-wrap {
  container-type: inline-size;
}

.acm-features.style-1 .features-content-wrap h1 {
  font-size: 2.5rem;
  line-height: 1.15;
  margin-bottom: 0.35rem;
  text-wrap: balance;
}

@container (min-width: 460px) {
  .acm-features.style-1 .features-content-wrap h1 {
    font-size: min(3.5rem, 100cqi / 11.5);
    white-space: nowrap;
  }
}

.acm-features.style-1 .features-list li {
  position: relative;
  padding-left: 1.7em;
  color: rgba(255, 255, 255, 0.88) !important;
  margin-bottom: 0.35rem;
}

.acm-features.style-1 .features-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  margin-right: 0;
}

.acm-features.style-1 .features-button {
  margin-top: 1.25rem;
}

@media (min-width: 1200px) {
  .acm-features.style-1 .acm-features-inner {
    padding-top: 3rem !important;
    padding-bottom: 3.5rem !important;
  }

  .acm-features.style-1 .features-image > img {
    aspect-ratio: 6 / 5;
    max-height: min(560px, 74vh);
  }
}

@media (max-width: 991.98px) {
  .acm-features.style-1 .hero-features-row {
    flex-wrap: wrap;
  }

  .acm-features.style-1 .features-content-col {
    padding-right: 0;
  }

  .acm-features.style-1 .acm-features-inner {
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
  }
}

.t4-footnav .container {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.t4-footnav .t4-module:last-child {
  margin-bottom: 0;
}

.t4-masthead .ja-masthead .container {
  padding-top: 0.5rem !important;
  padding-bottom: 3rem !important;
}

.t4-main-body {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.contact .plain-style .contact-form-wrap {
  margin-top: 14px !important;
}

.space-large {
  margin-bottom: 0 !important;
}

@media (max-width: 767.98px) {
  .acm-features.style-1 .features-content-wrap h3 {
    font-size: 24px !important;
  }
}

h3 {
  margin-top: 0.5rem !important;
}

.certified-icon {
  height: 1.5rem;
  width: auto;
  fill: var(--color-primary);
  vertical-align: middle;
}

.external-link-icon {
  width: 12px;
  height: 12px;
  vertical-align: top;
  margin-left: 2px;
}

.law-link {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.com_guru #guru-component .view-course-detail .course-sidebar {
  margin-top: 0 !important;
}

.com_guru #guru-component .view-course-detail .course-dashboard-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  color: var(--rad101-blue);
  background: #fff;
  border: 1px solid #e1e4ec;
  border-radius: 3px;
  box-shadow: 0 2px 7px rgba(28, 34, 48, 0.045);
  text-decoration: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.com_guru #guru-component .view-course-detail .course-dashboard-link .fas {
  font-size: 0.72rem;
  transition: transform 140ms ease;
}

.com_guru #guru-component .view-course-detail .course-dashboard-link strong {
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
}

.com_guru #guru-component .view-course-detail .course-dashboard-link:hover,
.com_guru #guru-component .view-course-detail .course-dashboard-link:focus {
  color: var(--rad101-green);
  border-color: #cbd0dc;
  box-shadow: 0 3px 9px rgba(28, 34, 48, 0.065);
  text-decoration: none;
}

.com_guru #guru-component .view-course-detail .course-dashboard-link:hover .fas,
.com_guru #guru-component .view-course-detail .course-dashboard-link:focus .fas {
  transform: translateX(-0.15rem);
}

/* Slightly define the course-page surfaces without changing the layout. */
.com_guru #guru-component .view-course-detail .course-sidebar,
.com_guru #guru-component .view-course-detail .course-progress-card,
.com_guru #guru-component .view-course-detail .guru-course-view > ul.uk-tab,
.com_guru #guru-component .view-course-detail .guru-course-view .tab-content {
  border-color: #e1e4ec !important;
  box-shadow: 0 2px 7px rgba(28, 34, 48, 0.045);
}

.ja-masthead .ja-masthead-detail {
  margin: 0 !important;
}

.com_guru
  #guru-component
  .view-course-detail
  .course-sidebar
  .uk-overlay-panel.uk-overlay-bottom
  .gru-cover-purchase-btn {
  margin-top: 0 !important;
}

div.guru-content .btn {
  height: unset !important;
}

#guru-component .guru-course-view > ul.uk-tab {
  border: 1px solid #e1e4ec !important;
  position: sticky;
  top: 0;
  background-color: var(--gru-white);
}

.com_guru
  #guru-component
  .view-course-detail
  .course-sidebar
  .uk-overlay-panel.uk-overlay-bottom
  .uk-course-info
  li
  .icon {
  margin-right: 0 !important;
}

.com_guru
  #guru-component
  .view-course-detail
  .course-sidebar
  .uk-overlay-panel.uk-overlay-bottom
  .uk-course-info
  li
  .uk-text-bold {
  font-weight: unset !important;
  opacity: 1 !important;
}

/* Course action buttons styling */
.com_guru
  #guru-component
  .view-course-detail
  .course-sidebar
  .gru-cover-purchase-btn
  .btn.mb-2 {
  margin-bottom: 0.5rem;
}

.com_guru
  #guru-component
  .view-course-detail
  .course-sidebar
  .gru-cover-purchase-btn
  .btn-warning {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #212529;
}

/* Purchased course progress card */
.com_guru #guru-component .view-course-detail .course-sidebar {
  z-index: 1;
}

.com_guru #guru-component .view-course-detail .course-progress-card {
  /* Keep positioned labels and tooltips below the sticky purchase card. */
  position: relative;
  z-index: 0;
  --progress-green: var(--rad101-green);
  margin-top: 1rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(28, 34, 48, 0.025);
}

.com_guru #guru-component .course-progress-card__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.com_guru #guru-component .course-progress-card h3 {
  margin: 0 !important;
  color: #252525;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}

.com_guru #guru-component .course-progress-card__percent {
  color: var(--rad101-blue);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

.com_guru #guru-component .course-progress-card__track {
  height: 0.45rem;
  margin-top: 1.15rem;
  overflow: hidden;
  background: #e9ebf2;
  border-radius: 999px;
}

.com_guru #guru-component .course-progress-card__track span {
  display: block;
  height: 100%;
  background: var(--progress-green);
  border-radius: inherit;
}

.com_guru #guru-component .course-progress-card p {
  margin: 0.65rem 0 0;
  color: #697080;
  font-size: 0.82rem;
  line-height: 1.4;
}

/* The final exam: the course's last step, under the module progress. Its
   button is green when the exam can be taken, grey with the reason on hover
   otherwise (the course viewer's toolbar tooltip). */
.com_guru #guru-component .course-exam-step {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eceef3;
}

.com_guru #guru-component .course-exam-step h4 {
  margin: 0 !important;
  color: #252525;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

.com_guru #guru-component .course-exam-step p {
  margin: 0.2rem 0 0;
}

.com_guru #guru-component .course-exam-button {
  position: relative;
  margin-top: 0.85rem;
  overflow: visible;
}

.com_guru #guru-component .course-exam-button[aria-disabled="true"],
.com_guru #guru-component .course-exam-button[aria-disabled="true"]:hover,
.com_guru #guru-component .course-exam-button[aria-disabled="true"]:focus {
  color: #8a909c;
  background: #eceef3;
  border-color: #eceef3;
  box-shadow: none;
  cursor: not-allowed;
}

.com_guru #guru-component .course-exam-button.guru-toolbar-tooltip::after {
  content: attr(data-tooltip);
  width: max-content;
  max-width: 16rem;
  white-space: normal;
  text-align: center;
}

.com_guru #guru-component .course-progress-card__access {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eceef3;
}

.com_guru #guru-component .course-progress-card__access span,
.com_guru #guru-component .course-progress-card__access strong {
  display: block;
}

.com_guru #guru-component .course-progress-card__access span {
  margin-bottom: 0.12rem;
  color: #697080;
  font-size: 0.72rem;
  line-height: 1.3;
}

.com_guru #guru-component .course-progress-card__access strong {
  color: #252525;
  font-size: 0.9rem;
  font-weight: 600;
}

.com_guru #guru-component .course-purchase-note {
  margin: 0.55rem 0 0.9rem;
  color: #697080;
  font-size: 0.82rem;
  line-height: 1.45;
}

.com_guru #guru-component .course-purchase-note:last-child {
  margin-bottom: 0;
}

.com_guru #guru-component .course-expiration-tooltip {
  position: relative;
  width: max-content;
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

.com_guru #guru-component .course-expiration-tooltip::before,
.com_guru #guru-component .course-expiration-tooltip::after {
  position: absolute;
  left: 0;
  z-index: 20;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
}

.com_guru #guru-component .course-expiration-tooltip::before {
  content: attr(data-tooltip);
  bottom: calc(100% + 0.55rem);
  width: max-content;
  max-width: 15rem;
  padding: 0.45rem 0.6rem;
  color: #fff;
  background: #252525;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(28, 34, 48, 0.18);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.35;
  white-space: normal;
  transform: translateY(0.2rem);
}

.com_guru #guru-component .course-expiration-tooltip::after {
  content: "";
  bottom: calc(100% + 0.25rem);
  border: 0.3rem solid transparent;
  border-top-color: #252525;
  transform: translateY(0.2rem);
}

.com_guru #guru-component .course-expiration-tooltip:hover::before,
.com_guru #guru-component .course-expiration-tooltip:hover::after,
.com_guru #guru-component .course-expiration-tooltip:focus::before,
.com_guru #guru-component .course-expiration-tooltip:focus::after {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.com_guru #guru-component .course-progress-card__access .btn {
  min-width: 5rem;
  padding: 0.4rem 0.75rem;
  border-color: var(--rad101-blue);
  color: var(--rad101-blue);
  font-size: 0.78rem;
}

.com_guru #guru-component .course-progress-card__access .btn:hover,
.com_guru #guru-component .course-progress-card__access .btn:focus {
  background: var(--rad101-blue);
  color: #fff;
}

.com_guru #guru-component .gru-tbl-list .course-expiry,
.com_guru #guru-component .rad101-my-courses .course-expiry {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

.com_guru #guru-component .gru-tbl-list .btn-view-course,
.com_guru #guru-component .rad101-my-courses .btn-view-course {
  min-width: 5rem;
}

@media (max-width: 991.98px) {
  .com_guru #guru-component .view-course-detail .course-progress-card {
    margin-bottom: 1.5rem;
  }
}

/* Image-free course catalog */
.com_guru #guru-component .rad101-course-catalog {
  --catalog-blue: var(--rad101-blue);
  --catalog-green: var(--rad101-green);
  --catalog-ink: #1c2230;
  --catalog-muted: #697080;
  --catalog-border: #e2e5ec;
}

.com_guru #guru-component .rad101-course-catalog .cat_list_wrap {
  margin-top: 0;
}

.com_guru #guru-component .rad101-course-catalog .gru-page-subtitle {
  color: var(--catalog-ink);
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.com_guru #guru-component .rad101-course-catalog .gru-page-filters {
  margin: 0 0 2rem;
}

.com_guru #guru-component .rad101-course-catalog .gru-filter-item {
  display: flex;
  max-width: 34rem;
}

.com_guru #guru-component .rad101-course-catalog .gru-filter-item input[type="text"] {
  border-color: #cfd3dd;
  border-radius: 3px 0 0 3px;
  min-width: 0;
  width: 100%;
}

.com_guru #guru-component .rad101-course-catalog .gru-filter-item .uk-button {
  border-radius: 0 3px 3px 0;
  flex: 0 0 auto;
}

.com_guru #guru-component .rad101-course-catalog .gru-list-courses {
  align-items: stretch;
}

.com_guru #guru-component .rad101-course-catalog .gru-course-item {
  margin-bottom: 1.5rem;
}

.com_guru #guru-component .rad101-course-catalog .uk-category-view {
  background: #fff;
  border: 1px solid var(--catalog-border);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(34, 43, 82, 0.07);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 18rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
  transition: none;
}

.com_guru #guru-component .rad101-course-catalog .uk-category-view::before {
  background: var(--catalog-green);
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.com_guru #guru-component .rad101-course-catalog .uk-category-view:hover {
  border-color: var(--catalog-green);
  box-shadow: 0 8px 24px rgba(34, 43, 82, 0.12);
}

/* Override the template's legacy card lift animation. */
.com_guru #guru-component .rad101-course-catalog #g_cath_detail_top .uk-category-view {
  -webkit-transition: none;
  transition: none;
}

.com_guru #guru-component .rad101-course-catalog #g_cath_detail_top .uk-category-view:hover {
  border-color: var(--catalog-green);
  box-shadow: 0 8px 24px rgba(34, 43, 82, 0.12);
  -webkit-transform: none;
  transform: none;
}

.com_guru #guru-component .rad101-course-catalog .author {
  color: var(--catalog-green);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  position: relative;
  text-transform: uppercase;
  z-index: 2;
}

.com_guru #guru-component .rad101-course-catalog .author a {
  color: inherit;
}

.com_guru #guru-component .rad101-course-catalog .uk-panel-title {
  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
  line-height: 1.25;
  margin: 0 0 1rem;
}

.com_guru #guru-component .rad101-course-catalog .uk-panel-title a {
  color: var(--catalog-blue);
  text-decoration: none;
}

.com_guru #guru-component .rad101-course-catalog .uk-panel-title a::after {
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

.com_guru #guru-component .rad101-course-catalog .uk-panel-title a:hover,
.com_guru #guru-component .rad101-course-catalog .uk-panel-title a:focus {
  color: var(--catalog-green);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.com_guru #guru-component .rad101-course-catalog .uk-panel-title a:focus-visible {
  outline: 0;
}

.com_guru #guru-component .rad101-course-catalog .uk-panel-title a:focus-visible::after {
  border-radius: 4px;
  outline: 3px solid var(--catalog-green);
  outline-offset: 3px;
}

.com_guru #guru-component .rad101-course-catalog .description_guru {
  color: var(--catalog-muted);
  flex: 1 1 auto;
  line-height: 1.65;
}

.com_guru #guru-component .rad101-course-catalog .student-info {
  color: var(--catalog-muted);
  font-size: 0.875rem;
  margin-top: 1rem;
}

.com_guru #guru-component .rad101-course-catalog .student-info .fa {
  color: var(--catalog-green);
  margin-right: 0.45rem;
}

.com_guru #guru-component .rad101-course-catalog .course-footer {
  border-top: 1px solid var(--catalog-border);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.com_guru #guru-component .rad101-course-catalog .course-footer .price {
  color: var(--catalog-ink);
  font-size: 1.05rem;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .com_guru #guru-component .rad101-course-catalog .gru-filter-item {
    max-width: none;
  }

  .com_guru #guru-component .rad101-course-catalog .uk-category-view {
    min-height: 0;
  }
}

.com_guru
  #guru-component
  .view-course-detail
  .course-sidebar
  .gru-cover-purchase-btn
  .btn-warning:hover {
  background-color: #e0a800;
  border-color: #d39e00;
  color: #212529;
}

/* Locked course contents remain readable without looking clickable. */
.lesson_name span.inactive-lesson {
  cursor: default;
}

.lesson_name .inactive-lesson .fa-lock {
  margin-right: 0.35em;
}

/* Student dashboard: a simpler course/profile UI. */
.com_guru #guru-component:has(#g_my_courses_active.uk-active) .gru-page-filters,
.com_guru #guru-component .gru-myprofile .uk-form-row:has(#fileUploader),
.com_guru #guru-component .gru-myprofile .uk-form-row:has(#authorImageSelected) {
  display: none;
}

/* Keep order columns available on narrow screens without widening the page. */
.com_guru #guru-component .rad101-orders-scroll {
  overflow-x: auto;
}

.com_guru #guru-component .guru-my-orders {
  display: table;
  width: 100%;
  min-width: 46rem;
  overflow: visible;
}

.com_guru #guru-component .guru-my-orders th,
.com_guru #guru-component .guru-my-orders td {
  vertical-align: middle;
}

.com_guru #guru-component .guru-my-orders .rad101-order-number {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.com_guru #guru-component .rad101-order-date,
.com_guru #guru-component .rad101-order-actions {
  white-space: nowrap;
}

.com_guru #guru-component .rad101-order-promo {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

/* Integrated presentation: a full-width timeline and one compact transport row. */
.guru-presentation-meta, .guru-presentation-duration,
.guru-slide-replay, .guru-slide-pause, .guru-player-icon { display: none; }
.guru-modern-viewer .guru-presentation-duration { display: inline; font-size: 13px; white-space: nowrap; }
.guru-modern-viewer #lesson-saved-timer,
.guru-modern-viewer .guru-jump-group,
.guru-modern-viewer .guru-native-label { display: none !important; }
.guru-presentation-active .guru-lesson-content { flex: 1 1 0; min-height: 0; height: auto; overflow: hidden; }
.guru-presentation-active .guru-lesson-content > iframe { display: block; }
.guru-modern-viewer .guru-lesson-header,
.guru-modern-viewer .guru-lesson-footer { flex-shrink: 0; }
.guru-modern-viewer .guru-lesson-footer {
  position: relative; display: flex; align-items: center; justify-content: flex-start;
  gap: 16px; min-height: 52px; padding: 7px 14px 4px; color: #eee; background: #111;
}
.guru-modern-viewer .guru-presentation-meta { display: contents; }
.guru-modern-viewer .guru-lesson-footer-nav { order: 0; display: flex; align-items: center; gap: 4px; }
.guru-modern-viewer .guru-slide-time { order: 1; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #ccc; }
.guru-modern-viewer .guru-slide-position { order: 2; margin-left: auto; font-size: 12px; white-space: nowrap; color: #ccc; }
.guru-modern-viewer .guru-slide-progress {
  position: absolute; inset: -8px 0 auto; appearance: none; border: 0; border-radius: 0;
  width: 100%; height: 20px; margin: 0; padding: 0; cursor: pointer;
  background: transparent; --seek-progress: 0%;
}
.guru-slide-progress::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(to right, #209e3b var(--seek-progress), #444 var(--seek-progress)); }
.guru-slide-progress::-moz-range-track { height: 4px; background: linear-gradient(to right, #209e3b var(--seek-progress), #444 var(--seek-progress)); }
.guru-slide-progress::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: #209e3b; }
.guru-slide-progress::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #209e3b; }
.guru-slide-progress:disabled { cursor: default; }
.guru-slide-progress:disabled::-webkit-slider-thumb { visibility: hidden; }
.guru-slide-progress:disabled::-moz-range-thumb { visibility: hidden; }
.guru-slide-progress:focus-visible { outline: 2px solid white; outline-offset: 1px; }
.guru-modern-viewer .guru-lesson-footer-nav button {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px;
  width: 34px; min-width: 0; height: 34px; min-height: 0; margin: 0; padding: 5px;
  border: 0; border-radius: 4px; background: transparent; color: #eee; cursor: pointer;
}
.guru-modern-viewer .guru-lesson-footer-nav button:hover { color: #fff; background: #ffffff18; }
.guru-modern-viewer .guru-lesson-footer-nav button:disabled { opacity: .35; cursor: default; background: transparent; }
.guru-modern-viewer .guru-lesson-footer-nav button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.guru-modern-viewer .guru-lesson-footer-nav svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.guru-modern-viewer .guru-lesson-footer-prev { order: 0; }
.guru-modern-viewer .guru-slide-pause { order: 1; }
.guru-modern-viewer .guru-lesson-footer-next { order: 2; }
.guru-modern-viewer .guru-slide-replay { order: 3; }
.guru-modern-viewer .guru-slide-pause .guru-icon-pause,
.guru-modern-viewer .guru-slide-pause.is-playing .guru-icon-play { display: none; }
.guru-modern-viewer .guru-slide-pause.is-playing .guru-icon-pause { display: block; }
@media (max-width: 600px) {
  .guru-modern-viewer .guru-lesson-footer { gap: 8px; padding-inline: 8px; }
  .guru-modern-viewer .guru-lesson-footer-nav { gap: 0; }
  .guru-modern-viewer .guru-lesson-header-label { font-size: 16px; line-height: 1.2; }
  .guru-modern-viewer .guru-presentation-duration { font-size: 11px; }
}

/* Full-width stage with an on-demand module picker. */
.guru-modern-viewer #lesson-saved-timer,
.guru-modern-viewer #comments-button { display: none !important; }
/* Header: site and teacher on the left, the module centred, Close on the right.
   Equal side columns keep the module title centred in the viewer. */
.guru-modern-viewer .guru-lesson-header { position: relative; display: grid; grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr); align-items: center; gap: 16px; min-height: 52px; padding: 9px 10px; background: #111; color: #eee; }
.guru-modern-viewer .guru-lesson-header-brand { min-width: 0; padding-left: 8px; overflow: hidden; color: #aaa; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.guru-modern-viewer .guru-lesson-header-l { float: none; width: auto; min-width: 0; padding: 0; text-align: center; }
/* Guru's stylesheet fixes the title at 220px; let it use the whole centre
   column and only shorten it when the column is narrower than the title. */
.guru-modern-viewer .guru-lesson-header-label { width: auto; padding: 0; overflow: hidden; font-size: 18px; line-height: 1.3; font-weight: 500; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.guru-modern-viewer .guru-lesson-header-r { position: static; justify-self: end; float: none; padding: 0; width: auto; }
@media (max-width: 767.98px) {
  .guru-modern-viewer .guru-lesson-header-brand { visibility: hidden; }
}
.guru-modern-viewer .guru-lesson-home { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; padding: 7px; border: 0; border-radius: 4px; background: transparent; color: #eee; cursor: pointer; }
.guru-modern-viewer .guru-lesson-home svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.guru-modern-viewer .guru-lesson-home:hover { background: #ffffff18; }
.guru-modern-viewer .guru-slide-position { order: 2; margin-left: auto; min-width: 0; max-width: 65%; padding: 7px 10px; border: 0; border-radius: 4px; background: transparent; color: #ddd; text-align: right; font: inherit; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.guru-modern-viewer .guru-slide-position:hover,
.guru-modern-viewer .guru-slide-position[aria-expanded="true"] { background: #ffffff18; color: #fff; }
.guru-modern-viewer button:focus-visible,
.guru-modern-viewer .guru-module-panel a:focus-visible { outline: 2px solid #eee; outline-offset: 2px; }
.guru-modern-viewer .guru-module-backdrop { position: absolute; inset: 0; z-index: 20; border: 0; padding: 0; background: transparent; cursor: default; }
.guru-modern-viewer .guru-module-panel { display: flex; flex-direction: column; position: absolute; z-index: 21; top: auto; right: 12px; bottom: 62px; width: 420px; max-width: calc(100% - 24px); max-height: calc(100% - 124px); border: 1px solid #444; border-radius: 10px; background: #202020; color: #eee; box-shadow: 0 12px 40px #0008; transition: none; }
.guru-modern-viewer .guru-module-panel[hidden],
.guru-modern-viewer .guru-module-backdrop[hidden] { display: none; }
.guru-module-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #ffffff18; }
.guru-module-panel-head h2 { margin: 0; color: #eee; font-size: 15px; font-weight: 600; }
.guru-module-close { width: 30px; height: 30px; border: 0; border-radius: 4px; background: transparent; color: #ccc; font-size: 24px; line-height: 1; cursor: pointer; }
.guru-module-close:hover { background: #ffffff18; }
.guru-modern-viewer .guru-module-panel .guru-lesson-nav-lessons { position: static; flex: 1 1 auto; min-height: 0; padding: 8px; overflow-y: auto; }
.guru-modern-viewer .guru-module-panel .guru-lesson-nav-module { display: none; }
.guru-modern-viewer .guru-module-panel ul { margin: 0; padding: 0; list-style: none; }
.guru-modern-viewer .guru-module-panel li { margin: 4px 0; padding: 0; }
.guru-modern-viewer .guru-module-panel .guru-lesson-nav-lesson { margin: 0; padding: 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #ddd; font-size: 14px; line-height: 1.4; }
.guru-modern-viewer .guru-module-panel .guru-lesson-nav-lesson:hover { background: #ffffff0d; }
.guru-modern-viewer .guru-module-panel .guru-lesson-nav-current { border-color: #3b9e55; background: #209e3b18; color: #fff; }
@media (max-width: 600px) {
  .guru-modern-viewer .guru-lesson-header-label { font-size: 15px; }
  .guru-modern-viewer .guru-slide-position { padding: 6px; flex: 1 1 auto; max-width: none; }
}
.guru-modern-viewer .guru-module-panel .guru-lesson-nav-lesson { padding-left: 40px; }
.guru-modern-viewer .guru-slide-position { display: flex; align-items: center; gap: 10px; border: 1px solid #4a4a4a; background: #2b2b2b; color: #eee; }
.guru-modern-viewer .guru-slide-position:hover,
.guru-modern-viewer .guru-slide-position[aria-expanded="true"] { background: #3a3a3a; border-color: #666; }
.guru-module-button-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guru-module-chevron { flex: 0 0 16px; width: 16px; height: 16px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; }
.guru-slide-position[aria-expanded="true"] .guru-module-chevron { transform: rotate(180deg); }

/* Volume popover stays beside the transport controls at all viewport sizes. */
.guru-volume { position: relative; order: 4; }
.guru-volume-panel { position: absolute; bottom: calc(100% + 14px); left: 0; width: 180px; padding: 14px; border: 1px solid #444; border-radius: 8px; background: #222; color: #eee; box-shadow: 0 6px 24px #0006; z-index: 2; }
.guru-volume-panel[hidden] { display: none; }
.guru-volume-panel label { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; }
.guru-volume-panel input { display: block; width: 100%; margin: 0; padding: 0; accent-color: #209e3b; cursor: pointer; }
.guru-volume-toggle.is-muted svg { opacity: .45; }
.guru-volume-panel input:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Auto-advance switch beside the volume, like YouTube's autoplay: the knob
   shows play and sits right when on, pause and left when off. */
.guru-modern-viewer .guru-lesson-footer-nav .guru-autoadvance { order: 5; flex: 0 0 48px; width: 48px; padding: 5px 6px; }
.guru-autoadvance-track { position: relative; display: block; width: 36px; height: 14px; border-radius: 7px; background: #ffffff4d; transition: background .15s; }
.guru-autoadvance-knob { position: absolute; top: 50%; left: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #bdbdbd; color: #111; box-shadow: 0 1px 3px #0008; transform: translateY(-50%); transition: left .15s, background .15s; }
.guru-autoadvance[aria-checked="true"] .guru-autoadvance-track { background: #209e3b; }
.guru-autoadvance[aria-checked="true"] .guru-autoadvance-knob { left: 16px; background: #fff; }
.guru-modern-viewer .guru-lesson-footer-nav .guru-autoadvance-knob svg { width: 12px; height: 12px; }
.guru-autoadvance[aria-checked="true"] .guru-autoadvance-off,
.guru-autoadvance[aria-checked="false"] .guru-autoadvance-on { display: none; }
.guru-autoadvance.guru-toolbar-tooltip::after { content: attr(data-tooltip); }

/* Auto-advance countdown over the slide's corner, with Cancel to stay on it. */
.guru-modern-viewer .guru-autoadvance-countdown { position: absolute; right: 16px; bottom: 16px; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border: 1px solid #ffffff26; border-radius: 10px; background: #111111e6; color: #eee; box-shadow: 0 6px 24px #0008; font-size: 14px; animation: guru-autoadvance-in .2s ease-out; }
.guru-modern-viewer .guru-autoadvance-countdown[hidden] { display: none; }
.guru-autoadvance-ring { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; }
.guru-autoadvance-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 3; transform: rotate(-90deg); }
.guru-autoadvance-ring circle { stroke: #ffffff26; }
.guru-autoadvance-ring .guru-autoadvance-ring-fill { stroke: #3dbb57; stroke-dasharray: 100.53; stroke-linecap: round; animation: guru-autoadvance-drain 10s linear forwards; }
.guru-autoadvance-seconds { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.guru-autoadvance-text { font-weight: 500; white-space: nowrap; }
.guru-modern-viewer .guru-autoadvance-hold { margin: 0; padding: 6px 12px; border: 1px solid #ffffff40; border-radius: 6px; background: transparent; color: #eee; font: inherit; font-size: 13px; font-weight: 600; line-height: normal; cursor: pointer; }
.guru-modern-viewer .guru-autoadvance-hold:hover { border-color: #fff; background: #ffffff18; color: #fff; }
@keyframes guru-autoadvance-drain { to { stroke-dashoffset: 100.53; } }
@keyframes guru-autoadvance-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .guru-modern-viewer .guru-autoadvance-countdown { animation: none; }
}

/* Quiet toolbar hints, delayed 100ms for both pointer and keyboard users. */
.guru-modern-viewer .guru-toolbar-tooltip { position: relative; overflow: visible; }
.guru-toolbar-tooltip::after {
  content: attr(aria-label); position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%); z-index: 10; padding: 5px 8px; border-radius: 4px;
  background: #303030; color: #f5f5f5; box-shadow: 0 2px 8px #0004;
  font: 500 12px/1.4 Arial, sans-serif; white-space: nowrap; text-transform: none;
  pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity 0s, visibility 0s;
}
.guru-toolbar-tooltip:not(:disabled):not(.guru-tooltip-dismissed):not([aria-expanded="true"]):is(:hover, :focus)::after {
  opacity: 1; visibility: visible; transition-delay: 100ms;
}
.guru-lesson-footer-prev.guru-toolbar-tooltip::after { left: 0; transform: none; }
.guru-slide-position.guru-toolbar-tooltip::after { left: auto; right: 0; transform: none; }
.guru-lesson-home.guru-toolbar-tooltip::after { bottom: auto; top: calc(100% + 8px); left: auto; right: 0; transform: none; }

.guru-module-locked-note { display: block; margin-top: 5px; color: #aaa; font-size: 12px; font-weight: 400; }

/* Locked Next still explains the requirement when its disabled button is hovered. */
.guru-modern-viewer .guru-lesson-footer-next[data-progression-locked="true"]:disabled { pointer-events: auto; opacity: 1; }
.guru-modern-viewer .guru-lesson-footer-next[data-progression-locked="true"]::after { width: max-content; max-width: calc(100vw - 120px); white-space: normal; text-align: left; left: 0; transform: none; }
.guru-modern-viewer .guru-lesson-footer-next[data-progression-locked="true"]:hover::after { opacity: 1; visibility: visible; transition-delay: 100ms; }

/* Viewer loading and failure pages cover the lesson area until the first
   slide is on screen, in the same colour as the slide letterbox. */
.guru-modern-viewer .guru-lesson-loading { z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #0e1512; opacity: 1; }
.guru-modern-viewer .guru-lesson-loading .guru-lesson-spinner { position: static; width: 44px; height: 44px; margin: 0; border: 3px solid #ffffff26; border-top-color: #3dbb57; }
.guru-lesson-loading-text { margin: 0; color: #c9d1cd; font-size: 15px; }
.guru-modern-viewer .guru-lesson-state { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; background: #0e1512; color: #e8ecea; text-align: center; }
.guru-modern-viewer .guru-lesson-state[hidden] { display: none; }
.guru-lesson-state-icon { width: 44px; height: 44px; margin-bottom: 18px; fill: none; stroke: #9fb0a7; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.guru-modern-viewer .guru-lesson-state-title { margin: 0 0 8px; color: #fff; font-size: 22px; font-weight: 600; line-height: 1.3; }
.guru-lesson-state-text { max-width: 440px; margin: 0 0 24px; color: #b8c2bd; font-size: 15px; line-height: 1.5; }
.guru-lesson-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.guru-lesson-state-actions .btn[hidden] { display: none; }
.guru-modern-viewer .guru-lesson-state-close { border: 1px solid #ffffff40; background: transparent; color: #e8ecea; }
.guru-modern-viewer .guru-lesson-state-close:hover,
.guru-modern-viewer .guru-lesson-state-close:focus-visible { border-color: #fff; background: #ffffff12; color: #fff; }
.guru-lesson-blocked .guru-lesson-footer > * { opacity: .35; }
/* The final exam is a page of questions: no narration or slide controls. */
.guru-exam-active .guru-lesson-footer-start, .guru-exam-active .guru-lesson-footer-center { visibility: hidden; }

/* Toolbar in three parts: playback on the left, the slide picker centred
   (with Next Module beside it once a module is finished) and the module
   picker on the right. The side columns share the remaining width. */
.guru-modern-viewer .guru-lesson-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.guru-modern-viewer .guru-lesson-footer-start { display: flex; align-items: center; gap: 16px; min-width: 0; justify-self: start; }
/* Equal side columns keep the slide picker centred when Next Module appears
   on its right: the empty left column grows to match. */
.guru-modern-viewer .guru-lesson-footer-center { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 8px; justify-self: center; }
.guru-modern-viewer .guru-lesson-footer-center .guru-slide-picker-button { grid-column: 2; }
.guru-modern-viewer .guru-lesson-footer-center .guru-lesson-finish { grid-column: 3; justify-self: start; }
.guru-modern-viewer .guru-lesson-footer-center .guru-lesson-prev-module { grid-column: 1; justify-self: end; }
.guru-modern-viewer .guru-slide-position { justify-self: end; max-width: 100%; margin-left: 0; }
.guru-modern-viewer .guru-slide-picker-button { display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 10px; border: 1px solid #4a4a4a; border-radius: 4px; background: #2b2b2b; color: #eee; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; line-height: normal; white-space: nowrap; cursor: pointer; }
.guru-modern-viewer .guru-slide-picker-button:hover,
.guru-modern-viewer .guru-slide-picker-button[aria-expanded="true"] { background: #3a3a3a; border-color: #666; }
.guru-modern-viewer .guru-slide-picker-button[hidden] { display: none; }
.guru-slide-picker-button[aria-expanded="true"] .guru-module-chevron { transform: rotate(180deg); }

/* Next Module / Close Course, to the right of the slide picker after the last slide. */
.guru-modern-viewer .guru-lesson-finish { margin: 0; padding: 6px 14px; border: 1px solid #209e3b; border-radius: 4px; background: #209e3b; color: #fff; font: inherit; font-size: 13px; font-weight: 600; line-height: normal; white-space: nowrap; cursor: pointer; }
.guru-modern-viewer .guru-lesson-finish:hover { background: #1a8531; }
.guru-modern-viewer .guru-lesson-finish[hidden] { display: none; }
/* Previous Module, to the left of the slide picker on a module's first slide. */
.guru-modern-viewer .guru-lesson-prev-module { margin: 0; padding: 6px 14px; border: 1px solid #4a4a4a; border-radius: 4px; background: #2b2b2b; color: #eee; font: inherit; font-size: 13px; font-weight: 600; line-height: normal; white-space: nowrap; cursor: pointer; }
.guru-modern-viewer .guru-lesson-prev-module:hover { background: #3a3a3a; border-color: #666; }
.guru-modern-viewer .guru-lesson-prev-module[hidden] { display: none; }

/* Slide picker: a grid of the module's slides above the centre of the toolbar. */
.guru-modern-viewer .guru-slide-panel { left: 50%; right: auto; width: 360px; transform: translateX(-50%); }
.guru-slide-panel-count { margin-left: 6px; color: #aaa; font-size: 13px; font-weight: 400; }
.guru-modern-viewer .guru-slide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; flex: 1 1 auto; min-height: 0; margin: 0; padding: 12px; overflow-y: auto; list-style: none; }
.guru-modern-viewer .guru-slide-grid li { margin: 0; padding: 0; }
.guru-modern-viewer .guru-slide-tile { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; margin: 0; padding: 0; border: 1px solid #444; border-radius: 6px; background: #2b2b2b; color: #ddd; font: inherit; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.guru-modern-viewer .guru-slide-tile:hover { border-color: #666; background: #3a3a3a; color: #fff; }
.guru-modern-viewer .guru-slide-tile.is-current { border-color: #3b9e55; background: #209e3b18; color: #fff; box-shadow: inset 0 0 0 1px #3b9e55; }
.guru-modern-viewer .guru-slide-tile:disabled { border-color: #444; background: #2b2b2b; color: #ddd; opacity: .4; cursor: default; }
.guru-slide-tile-check { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: #54b551; fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
/* Locked modules and slides: the same grey circle as an unfinished check, with a lock. */
.guru-lock-icon { fill: none; stroke: #8a8a8a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.guru-lesson-nav-locked { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.guru-lesson-nav-locked .guru-lock-icon { width: 13px; height: 13px; }
.guru-slide-tile-lock { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: #ddd; }
@media (max-width: 767.98px) {
  /* Phones: slide picker left, Next Module centre and module picker right on
     the top row; the timeline, then the playback controls centred below it. */
  .guru-modern-viewer .guru-lesson-footer { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "slide finish module" "start start start"; gap: 18px 8px; padding: 10px 10px 6px; }
  .guru-modern-viewer .guru-lesson-footer-center { display: contents; }
  .guru-modern-viewer .guru-lesson-footer-center .guru-slide-picker-button { grid-area: slide; justify-self: start; }
  .guru-modern-viewer .guru-lesson-footer-center .guru-lesson-finish { grid-area: finish; justify-self: center; }
  /* Previous Module shares that spot; a one-slide module shows Next Module there. */
  .guru-modern-viewer .guru-lesson-footer-center .guru-lesson-prev-module { grid-area: finish; justify-self: center; }
  .guru-modern-viewer .guru-lesson-footer-center:has(.guru-lesson-finish:not([hidden])) .guru-lesson-prev-module { display: none; }
  .guru-modern-viewer .guru-autoadvance-countdown { right: 10px; bottom: 10px; }
  .guru-modern-viewer .guru-slide-position { grid-area: module; justify-self: end; }
  .guru-modern-viewer .guru-lesson-footer-start { position: relative; grid-area: start; justify-self: stretch; justify-content: center; }
  .guru-modern-viewer .guru-slide-progress { inset: -19px -10px auto; width: auto; }
}

/* Checkout confirmation when a promo code is used. */
.guru-checkout-confirm { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.guru-checkout-confirm-backdrop { position: absolute; inset: 0; background: rgba(8, 18, 40, .6); }
.guru-checkout-confirm-panel { position: relative; width: min(460px, 100%); padding: 28px; border-radius: 10px; background: #fff; box-shadow: 0 24px 60px rgba(4, 16, 60, .45); }
.guru-checkout-confirm-panel h2 { margin: 0 0 16px; color: #173f5f; font-size: 22px; font-weight: 600; line-height: 1.3; }
.guru-checkout-confirm-summary { display: grid; grid-template-columns: auto 1fr; gap: 8px 0; margin: 0 0 16px; padding: 14px 16px; border-radius: 8px; background: #f5f7fb; }
.guru-checkout-confirm-summary dt { margin: 0; padding-right: 16px; color: #52606d; font-weight: 400; }
.guru-checkout-confirm-summary dd { margin: 0; color: #1f2d3d; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.guru-checkout-confirm-summary dt:last-of-type,
.guru-checkout-confirm-summary dd:last-of-type { padding-top: 8px; border-top: 1px solid #e3e7ef; color: #173f5f; font-size: 18px; }
.guru-checkout-confirm-panel p { margin: 0 0 24px; color: #3e4c59; font-size: 16px; line-height: 1.5; }
.guru-checkout-confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.guru-checkout-confirm-cancel { border: 1px solid #cfd6e3; background: #fff; color: #1f2d3d; }
.guru-checkout-confirm-cancel:hover,
.guru-checkout-confirm-cancel:focus-visible { border-color: #1f2d3d; background: #f5f7fb; color: #1f2d3d; }


/* Site notifications: Joomla system messages as toasts that overlay the top
   centre of the window (see js/toasts.js and the message layout override).
   :root outranks template.css's width and padding for course pages. */
:root #system-message-container {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 100010;
  display: block;
  width: min(460px, calc(100vw - 24px));
  max-width: none;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  pointer-events: none;
  transition: height .35s cubic-bezier(.2, .8, .2, 1);
}
#system-message-container:empty { display: none; }
/* Expanded, the whole list area keeps the hover, including the gaps. */
#system-message-container.toast-expanded { pointer-events: auto; }
/* A list taller than the window scrolls; the spacer gives the transformed
   toasts a scrollable height. */
#system-message-container.toast-scroll { overflow-y: auto; overscroll-behavior: contain; }
#system-message-container.toast-scroll::before { content: ""; display: block; height: var(--toast-list-height); }
/* Clear the document viewer's toolbar (after checkout the invoice and a toast appear together). */
html.guru-document-open #system-message-container { top: 96px; }
@media (max-width: 640px) {
  html.guru-document-open #system-message-container { top: 68px; }
}
/* Toasts share one spot; js/toasts.js stacks them with transforms (newest in
   front, older ones peeking below) and spreads them out on hover. */
#system-message-container joomla-alert {
  --toast-accent: var(--rad101-blue);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 28px;
  align-items: start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 14px 12px 14px 16px;
  overflow: hidden;
  border: 1px solid #e3e7ef;
  border-radius: 12px;
  background: #fff;
  color: #1f2d3d;
  box-shadow: 0 14px 34px -10px rgba(4, 16, 60, .35), 0 2px 6px rgba(4, 16, 60, .08);
  font-size: 15px;
  line-height: 1.45;
  pointer-events: auto;
  --jui-alert-animation-duration: .3s;
  --jui-alert-animation-timing-function: cubic-bezier(.2, .8, .2, 1);
  transform-origin: center bottom;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
}
#system-message-container joomla-alert > * { transition: opacity .25s ease; }
/* Older toasts in the collapsed stack: the front toast's height, no content. */
#system-message-container joomla-alert.toast-behind { height: var(--toast-front-height); }
#system-message-container joomla-alert.toast-behind > *,
#system-message-container joomla-alert.toast-behind.toast-timed::after { opacity: 0; }
#system-message-container joomla-alert.toast-hidden { opacity: 0; pointer-events: none; }
#system-message-container joomla-alert + * { margin-top: 0; }
#system-message-container joomla-alert[type="success"] { --toast-accent: var(--rad101-green); }
#system-message-container joomla-alert[type="warning"] { --toast-accent: #c27c0e; }
#system-message-container joomla-alert[type="danger"] { --toast-accent: #d23b3b; }

/* Icon, message, close button. */
#system-message-container joomla-alert .alert-heading {
  order: 0;
  display: block;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  background: var(--toast-accent);
  -webkit-mask: var(--toast-icon) center / contain no-repeat;
  mask: var(--toast-icon) center / contain no-repeat;
}
#system-message-container joomla-alert .alert-heading > span:not(.visually-hidden) { display: none; }
#system-message-container joomla-alert {
  --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E");
}
#system-message-container joomla-alert[type="success"] {
  --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m7.5 12.5 3 3 6-6.5'/%3E%3C/svg%3E");
}
#system-message-container joomla-alert[type="warning"] {
  --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19L12 3.5z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.01'/%3E%3C/svg%3E");
}
#system-message-container joomla-alert[type="danger"] {
  --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E");
}
#system-message-container joomla-alert .alert-wrapper {
  order: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}
#system-message-container joomla-alert .alert-message { margin: 0; padding: 0; color: #1f2d3d; }
#system-message-container joomla-alert .alert-message + .alert-message { margin-top: 6px; }
#system-message-container joomla-alert .alert-message a { color: var(--toast-accent); font-weight: 600; text-decoration: underline; }
#system-message-container joomla-alert .joomla-alert--close {
  order: 2;
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -3px 0 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #6b7785;
  font-size: 22px;
  line-height: 1;
  opacity: 1;
  cursor: pointer;
}
#system-message-container joomla-alert .joomla-alert--close > span { display: none; }
#system-message-container joomla-alert .joomla-alert--close::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m5 5 14 14M19 5 5 19'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m5 5 14 14M19 5 5 19'/%3E%3C/svg%3E") center / contain no-repeat;
}
#system-message-container joomla-alert .joomla-alert--close:hover,
#system-message-container joomla-alert .joomla-alert--close:focus-visible { background: #eef1f6; color: #1f2d3d; }

/* Time left before a toast closes itself; pauses on hover and focus. */
#system-message-container joomla-alert.toast-timed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--toast-accent);
  opacity: .55;
  transform-origin: left;
  animation: rad101-toast-timer var(--toast-duration) linear forwards;
}
#system-message-container joomla-alert.toast-paused::after { animation-play-state: paused; }
@keyframes rad101-toast-timer { to { transform: scaleX(0); } }

/* Joomla closes alerts by running these animations; slide as well as fade.
   They use translate, not transform, so they combine with the stack layout. */
@keyframes joomla-alert-fade-in { from { opacity: 0; translate: 0 -24px; } }
@keyframes joomla-alert-fade-out { to { opacity: 0; translate: 0 -16px; } }

@media (max-width: 575.98px) {
  #system-message-container { top: 12px; }
  #system-message-container joomla-alert { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #system-message-container,
  #system-message-container joomla-alert { transition: none; }
  #system-message-container joomla-alert { --jui-alert-animation-duration: 1ms; }
}

/* My Quizzes/Final Exams: past enrollments, one line each, opening to their exam attempts. */
.gru-myquizzes .gru-exam-history__title {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.gru-myquizzes .gru-exam-history__subtitle {
  margin: 1.25rem 0 0.6rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.gru-myquizzes .gru-exam-attempt__empty,
.gru-myquizzes .gru-past-enrollment__empty {
  color: #697080;
}

.gru-myquizzes .gru-past-enrollment {
  border-top: 1px solid #e1e4ec;
}

.gru-myquizzes .gru-past-enrollment:last-child {
  border-bottom: 1px solid #e1e4ec;
}

/* Rows and their attempts share one grid, so the columns line up. */
.gru-myquizzes .gru-past-enrollment {
  --past-columns: 1rem 1.2fr 1fr 1.2fr 1fr 7rem;
}

.gru-myquizzes .gru-past-enrollment summary {
  display: grid;
  grid-template-columns: var(--past-columns);
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.25rem;
  cursor: pointer;
  list-style: none;
}

.gru-myquizzes .gru-past-enrollment summary::-webkit-details-marker {
  display: none;
}

.gru-myquizzes .gru-past-enrollment summary::before {
  content: "\25B8";
  color: #697080;
  transition: transform 0.15s ease;
}

.gru-myquizzes .gru-past-enrollment[open] summary::before {
  transform: rotate(90deg);
}

.gru-myquizzes .gru-past-enrollment__date small {
  display: block;
  color: #697080;
}

.gru-myquizzes .gru-past-enrollment__status,
.gru-myquizzes .gru-past-enrollment__count {
  color: #697080;
}

.gru-myquizzes .gru-past-enrollment__status.is-certified,
.gru-myquizzes .gru-past-enrollment__attempts .is-passed {
  color: var(--rad101-green);
  font-weight: 600;
}

.gru-myquizzes .gru-past-enrollment__attempts .is-failed {
  color: #c0392b;
  font-weight: 600;
}

.gru-myquizzes .gru-past-enrollment__certificate {
  text-align: right;
}

.gru-myquizzes .gru-past-enrollment__attempts {
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.gru-myquizzes .gru-past-enrollment__attempts li {
  display: grid;
  grid-template-columns: var(--past-columns);
  gap: 0.75rem;
  padding: 0.3rem 0.25rem;
  color: #697080;
  font-size: 0.9rem;
}

/* Attempts start under the row's date, past the arrow column. */
.gru-myquizzes .gru-past-enrollment__attempts li > :first-child {
  grid-column: 2;
}

.gru-myquizzes .gru-past-enrollment__attempts li > a {
  grid-column: -2;
  text-align: right;
}

.gru-myquizzes .gru-past-enrollment__empty {
  margin: 0 0 0.75rem 1.75rem;
}

@media (max-width: 767px) {
  .gru-myquizzes .gru-past-enrollment {
    --past-columns: 1rem 1fr 1fr 1fr 6rem;
  }

  .gru-myquizzes .gru-past-enrollment__count {
    display: none;
  }
}

/* My Courses: current enrollments in the same striped table as My Quizzes/Final
   Exams, past ones as a list below. */
.com_guru #guru-component .rad101-enrollments-title {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.com_guru #guru-component .rad101-my-courses td {
  vertical-align: middle;
}

.com_guru #guru-component .rad101-my-courses__name {
  font-weight: 600;
}

.com_guru #guru-component .rad101-my-courses__progress {
  width: 35%;
}

.com_guru #guru-component .rad101-my-courses__view {
  text-align: right;
}

.com_guru #guru-component .rad101-my-courses .rad101-course-progress {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

.com_guru #guru-component .rad101-my-courses .rad101-course-progress strong {
  color: var(--rad101-green);
  font-weight: 700;
}

.com_guru #guru-component .rad101-my-courses .uk-progress {
  height: 0.5rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #e9ebf2;
  border-radius: 999px;
}

.com_guru #guru-component .rad101-my-courses .uk-progress-bar {
  height: 100%;
  background: var(--rad101-green);
  border-radius: inherit;
}

.com_guru #guru-component .rad101-my-courses .course-expiry.is-expired {
  color: #c0392b;
}

/* The striped table's link colour would otherwise darken the button text. */
.com_guru #guru-component .rad101-my-courses .btn-primary,
.com_guru #guru-component .rad101-my-courses .btn-outline-primary:hover,
.com_guru #guru-component .rad101-my-courses .btn-outline-primary:focus-visible {
  color: #fff;
}

.com_guru #guru-component .rad101-my-courses .btn-outline-primary {
  color: var(--rad101-green);
}

.com_guru #guru-component .rad101-available-courses__actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* My Quizzes/Final Exams: each enrolled course's final exam, in the My Courses table. */
.com_guru #guru-component .rad101-final-exams__status,
.com_guru #guru-component .rad101-final-exams__detail {
  display: block;
}

.com_guru #guru-component .rad101-final-exams__status {
  font-weight: 600;
}

.com_guru #guru-component .rad101-final-exams .is-ready .rad101-final-exams__status,
.com_guru #guru-component .rad101-final-exams .is-passed .rad101-final-exams__status {
  color: var(--rad101-green);
}

.com_guru #guru-component .rad101-final-exams .is-ended .rad101-final-exams__status,
.com_guru #guru-component .rad101-final-exams .is-used .rad101-final-exams__status {
  color: #c0392b;
}

.com_guru #guru-component .rad101-final-exams__detail {
  color: #697080;
  font-size: 0.85em;
}

.com_guru #guru-component .rad101-final-exams .uk-progress {
  margin-top: 0.45rem;
}

/* On phones each course stacks, with the header's labels moved into the cells. */
@media (max-width: 767px) {
  .com_guru #guru-component .rad101-my-courses,
  .com_guru #guru-component .rad101-my-courses tbody,
  .com_guru #guru-component .rad101-my-courses tr {
    display: block;
  }

  .com_guru #guru-component .rad101-my-courses tr:first-child {
    display: none;
  }

  /* Name, progress and View take the full width; Expires and Last visit share a line. */
  .com_guru #guru-component .rad101-my-courses tr:not(:first-child) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .com_guru #guru-component .rad101-my-courses td:not([data-label]) {
    grid-column: 1 / -1;
  }

  .com_guru #guru-component .rad101-my-courses td:first-child {
    text-align: center;
  }

  .com_guru #guru-component .rad101-my-courses .btn-view-course {
    display: block;
    width: 100%;
  }

  .com_guru #guru-component .rad101-available-courses__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .com_guru #guru-component .rad101-available-courses__actions .btn-primary {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .com_guru #guru-component .rad101-my-courses td {
    display: block;
    width: auto;
    padding: 0.5rem 18px;
    text-align: left;
  }

  .com_guru #guru-component .rad101-my-courses td:first-child {
    padding-top: 18px;
  }

  .com_guru #guru-component .rad101-my-courses td:last-child {
    padding-bottom: 18px;
  }

  .com_guru #guru-component .rad101-my-courses td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: #333;
    font-weight: 700;
  }
}

.com_guru #guru-component .rad101-past-enrollments ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.com_guru #guru-component .rad101-past-enrollments li {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr 7rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid #e1e4ec;
}

.com_guru #guru-component .rad101-past-enrollments li:last-child {
  border-bottom: 1px solid #e1e4ec;
}

.com_guru #guru-component .rad101-past-enrollments small {
  display: block;
  color: #697080;
}

.com_guru #guru-component .rad101-past-enrollments li > :nth-child(3),
.com_guru #guru-component .rad101-past-enrollments__status {
  color: #697080;
}

.com_guru #guru-component .rad101-past-enrollments__status.is-certified {
  color: var(--rad101-green);
  font-weight: 600;
}

.com_guru #guru-component .rad101-past-enrollments__certificate {
  text-align: right;
}

@media (max-width: 767px) {
  .com_guru #guru-component .rad101-past-enrollments li {
    grid-template-columns: 1fr 1fr 6rem;
  }

  .com_guru #guru-component .rad101-past-enrollments li > :nth-child(3) {
    display: none;
  }
}

/* Error pages (error.php): 404, access denied, server errors. */
.rad101-error {
  max-width: 40rem;
  padding: 3rem 0 4rem;
}

.rad101-error-code {
  margin-bottom: 0.75rem;
  color: var(--rad101-green);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rad101-error-heading {
  margin-bottom: 1rem;
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.rad101-error-text {
  margin-bottom: 2rem;
  font-size: 1.125rem;
}

.rad101-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.rad101-error-help {
  margin: 0;
  color: #697080;
}

.rad101-error-debug {
  margin-top: 2rem;
}

/* An error page is no menu item's page, though the menu marks the homepage current. */
.page-error #t4-header .t4-navbar .navbar-nav > li.active > a:not(:hover):not(:focus) {
  color: #fff !important;
  text-shadow: none;
}

.page-error #t4-header .t4-navbar .nav-item.active > .nav-link .menu-item-title,
.page-error .t4-offcanvas .nav-item.active > .nav-link .menu-item-title {
  text-decoration-line: none;
}

.page-error .t4-offcanvas .t4-off-canvas-body .navbar .nav-item.active > .nav-link:not(:hover):not(:focus) {
  background-color: transparent;
  color: #1d2233 !important;
}

@media (max-width: 575px) {
  .rad101-error {
    padding: 2rem 0 3rem;
  }

  .rad101-error-heading {
    font-size: 2rem;
  }
}