/* core.css — scoped under #ui-shell */
body{
   font-size: 14px;
   min-width: 0px;
   text-align: left;
}
#ui-shell.ui {
  --ui-bg: #ffffff;
  --ui-surface: #ffffff;
  --ui-border: #e6e8eb;
  --ui-text: #111827;
  --ui-muted: #6b7280;
  --ui-brand-bold: #002060;
  --ui-brand-thin: #000000;
  --ui-button-primary-bg: #0e8a00;
  --ui-brand-font-family: "Trebuchet MS";

  --ui-radius: 12px;
  --ui-gap: 16px;

  --ui-header-h: 56px;
  --ui-bc-h: 44px;

  /* FIX: single source of truth for header + main + footer alignment */
  --ui-max-w: 1240px;
  --ui-pad-x: 16px;

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  color: var(--ui-text);
  background: var(--ui-bg);
}

/* Flexible fixed max width container used everywhere */
#ui-shell .ui__container {
  width: min(var(--ui-max-w), calc(100% - (var(--ui-pad-x) * 2)));
  margin: 0 auto;
}

/* HEADER: full-width bar, inner content uses ui__container */
#ui-shell .ui__header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-bg);
}
#ui-shell .ui__headerRow {
  height: var(--ui-header-h);
  display: flex;
  align-items: center;
  gap: 12px;
}

#ui-shell .ui__headerNavRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

#ui-shell .ui__userInfo{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-size:13px;
}

#ui-shell .ui__userName{
  font-weight:600;
  font-size:14px;
  white-space: nowrap;
}

#ui-shell .ui__userRole{
  color:var(--ui-muted);
  font-weight:400;
  margin-left:4px;
  font-size:13px;
  text-transform: capitalize;
}

.ui__hamburger{
  display:none;
  border:none;
  background:transparent;
  font-size:26px;
  cursor:pointer;
}

.ui__mobileOnly{
  display:none;
}

/* Brand */
#ui-shell .ui__brand {
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 18px;
}
#ui-shell .ui__brandBold { font-weight: 600; color: var(--ui-brand-bold); font-size: 24px; font-family: var(--ui-brand-font-family);}
#ui-shell .ui__brandThin { font-weight: 600; color: var(--ui-brand-thin); }

/* Header actions */
#ui-shell .ui__headerActions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
#ui-shell .ui__link { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; color: var(--ui-text); padding: 8px 10px; border-radius: 10px; }
#ui-shell .ui__link:hover { background: #f6f7f9; }
#ui-shell .ui__link--danger { color: #b91c1c; }
#ui-shell .ui__linkText { display: inline-block; }

/* TOP NAV (multi-level) */
/* #ui-shell .ui__topnav { margin-left: 14px; } */
#ui-shell .ui__topnavList { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; align-items: center; }
#ui-shell .ui__topnavLink,
#ui-shell .ui__topnavBtn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ui-text);
  font: inherit;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
#ui-shell .ui__topnavLink:hover,
#ui-shell .ui__topnavBtn:hover {
  background: #f6f7f9;
  border-color: #eef0f3;
  transform: translateY(-1px);
}

/* Dropdown menu */
#ui-shell .ui__hasSub { position: relative; }
#ui-shell .ui__menu {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px;
  min-width: 220px;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  display: none;
}
#ui-shell .ui__menu--right { left: 100%; top: 0; margin-left: 8px; }

#ui-shell .ui__menuLink,
#ui-shell .ui__menuBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--ui-text);
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
#ui-shell .ui__menuLink:hover,
#ui-shell .ui__menuBtn:hover {
  background: #f6f7f9;
  border-color: #eef0f3;
}

/* BREADCRUMB: full-width bar, inner content uses ui__container */
#ui-shell .ui__breadcrumb {
  height: var(--ui-bc-h);
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-bg);
  display: flex;
  align-items: center;
}
#ui-shell .ui__crumbs { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; align-items: center; color: var(--ui-muted); font-size: 13px; }
#ui-shell .ui__crumbLink { color: var(--ui-muted); text-decoration: none; }
#ui-shell .ui__crumb--current { color: var(--ui-text); }
#ui-shell .ui__crumbs .ui__crumbLink span{
  color: var(--ui-muted);
}
/* MAIN layout */
#ui-shell .ui__main { padding: 20px 0 36px; }
#ui-shell .ui__layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: var(--ui-gap);
  align-items: start;
}

#ui-shell .ui__layout-split {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:var(--ui-gap);
  align-items:start;
  min-height: calc(100vh - var(--ui-header-h) - var(--ui-bc-h) - 120px);
  margin-top: var(--ui-gap);
}

/* Sidebar */
#ui-shell .ui__sidenav {
  position: sticky;
  top: calc(var(--ui-header-h) + var(--ui-bc-h) + 12px);
  height: calc(100vh - var(--ui-header-h) - var(--ui-bc-h) - 28px);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  overflow: auto;
  transition: width .22s ease;
  display: flex;
  flex-direction: column;
  height: 500px;
}
#ui-shell .ui__sidenavTop { display: flex; align-items: center; gap: 10px; padding: 5px; border-bottom: 1px solid var(--ui-border); }
#ui-shell .ui__sidenavTitle { font-weight: 600; font-size: 14px; }

#ui-shell .ui__iconBtn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}
#ui-shell .ui__iconBtn:hover { background: #f6f7f9; border-color: #eef0f3; }

#ui-shell .ui__sidenavNav { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
#ui-shell .ui__sidelink {
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ui-text);
  border: 1px solid transparent;
}
#ui-shell .ui__sidelink:hover { background: #f6f7f9; border-color: #eef0f3; }
#ui-shell .ui__sidelink--active { background: #f3f4f6; border-color: #e5e7eb; }
#ui-shell .ui__sidelink i { font-size: 18px; width: 20px; text-align: center; }
#ui-shell .ui__sidelinkText { display: inline-block; }

#ui-shell .ui__sidegroup {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  color: var(--ui-text);
}
#ui-shell .ui__sidegroup:hover { background: #f6f7f9; border-color: #eef0f3; }
#ui-shell .ui__chev { margin-left: auto; transition: transform .18s ease; }
#ui-shell .ui__sidegroupPanel { padding: 6px 0 6px 34px; display: flex; flex-direction: column; gap: 6px; }

/* Content */
#ui-shell .ui__content { min-width: 0;height:700px; }
#ui-shell .ui__card { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: 16px; background: var(--ui-surface); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
#ui-shell .ui__cardTitle { font-weight: 700; margin-bottom: 8px; }
#ui-shell .ui__muted { color: var(--ui-muted); font-size: 14px; }
#ui-shell .ui__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
#ui-shell .ui__panel { padding: 12px; background: #fbfbfc; border: 1px solid var(--ui-border); border-radius: 10px; }
#ui-shell .ui__panelTitle { font-weight: 600; margin-bottom: 6px; }

#ui-shell .ui__btn { display: inline-flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #111827; color: #fff; border: 0; cursor: pointer; }
#ui-shell .ui__btn--ghost {
  background: #fff;
  color: #111827;
  border: 1px solid var(--ui-border);
}

/* Footer */
#ui-shell .ui__footer { border-top: 1px solid var(--ui-border); padding: 14px 0; background: var(--ui-bg); margin-top: 18px; }
#ui-shell .ui__footerRow { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }

/* Focus */
#ui-shell a, #ui-shell button { outline: none; }
#ui-shell a:focus-visible, #ui-shell button:focus-visible { box-shadow: 0 0 0 3px rgba(17,24,39,0.12); border-radius: 10px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { #ui-shell * { transition: none !important; } }

/* Collapsed sidebar */
#ui-shell .ui__sidenav[data-collapsed="true"] { width: 72px; min-width: 72px; max-width: 72px; overflow: visible; }
/* Hide sidebar content when collapsed */
#ui-shell .ui__sidenav[data-collapsed="true"] #uiSidenav {
    display: none;
}
#ui-shell .ui__sidenav[data-collapsed="true"] .ui__sidelinkText,
#ui-shell .ui__sidenav[data-collapsed="true"] .ui__sidenavTitle,
#ui-shell .ui__sidenav[data-collapsed="true"] .ui__sidegroupPanel,
#ui-shell .ui__sidenav[data-collapsed="true"] .ui__chev { display: none; }
#ui-shell .ui__sidenav[data-collapsed="true"] .ui__sidelink { justify-content: center; padding: 12px; }
#ui-shell .ui__layout.sidebar-collapsed { grid-template-columns: 72px 1fr; }

/* Responsive */
@media (max-width: 768px) {
  #ui-shell .ui__layout { grid-template-columns: 1fr; }
  #ui-shell .ui__grid2 { grid-template-columns: 1fr; }
  #ui-shell .ui__sidenav { position: relative; top: 0; min-height: 500px; }
   .ui__hamburger{
    display:block;
  }

  #ui-shell .ui__topnav{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#fff;
    border-top:1px solid var(--ui-border);
    display:none;
  }

  #ui-shell .ui__topnavList{
    flex-direction:column;
    padding:10px;
  }

  #ui-shell .ui__topnav.show{
    display:block;
  }

  #ui-shell .ui__topnavList{
    align-items: flex-start;
  }

  .ui__mobileOnly{
    display:block;
  }

  #ui-shell .ui__headerActions{
    display:none;
  }

  #ui-shell .ui__menu{
    position:static;
    width:100%;
    box-shadow:none;
    border:none;
    margin-left:15px;
  }

  #ui-shell .ui__layout-split{
    grid-template-columns:1fr;
  }

  #ui-shell .course-viewer .ui__breadcrumb{
    display: none;
  }
   
  .ui-question-row{
        flex-direction:column;
  }

  .ui-question-number{
    width:auto;
  }

  #ui-shell .viewer-toolbar .ui__prev_text, #ui-shell .viewer-toolbar .ui__next_text{
    display: none;
  }
}

/* Screen reader only */
#ui-shell .ui__srOnly {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

#ui-shell .content-box .box-header	{ background: none;}
#ui-shell .content-box .box-body		{ background: none;border:none;}
#ui-shell .content-box { border: none;}
#ui-shell .pagesize		{ width: auto; }
#ui-shell table.style1		{ border: none; }
#ui-shell table.style1	th	{ background: #eee; border-bottom: #ddd;}
#ui-shell table.style1	table th	{ color:black; background: none; border-top:1px solid #ddd; border-bottom:1px solid #ddd;padding:5px;}
#ui-shell table.style1	h2 { font-weight: bold;}
#ui-shell table.style1	table h3 { font-weight: 600;line-height: 1.25em;}
#ui-shell table.style1	table td { border-bottom:1px solid #ddd;}
#ui-shell .box-header h1 { line-height: 24px;    margin-bottom: 5px;    padding: 0px;}
#ui-shell .content-box .box-wrap    { padding: 0px; }
#ui-shell .content-box .box-header .tabs li{ font-size: 14px;}
#ui-shell .content-box .box-wrap .style1 small{ font-size: 14px;}
#ui-shell .ui__container .main-wrap .page{
  padding-bottom: 0px;
}
#ui-shell .ui__container .main-wrap .button.green{
  background-color: var(--ui-button-primary-bg);
}

#ui-shell label{
  display:block;
  text-align:left;
  font-size:14px;
  font-weight:600;
  margin-bottom:6px;
}

#ui-shell input[type="text"],input[type="password"]{
  width:100%;
  height:44px;
  padding:0 12px;
  border:1px solid #d9e0e6;
  border-radius:8px;
  font-size:14px;
  box-sizing:border-box;
}

#ui-shell .help-box { background: #e6f3ff; padding: 1rem; border-radius: 8px; }

#ui-shell .help-box ul {
  list-style: disc;
  padding-left: 20px;
  margin-top: 8px;
}
#ui-shell .help-box li{
  margin-bottom: 6px;
}

/* Form wrapper */
#ui-shell .ui__form {
  max-width: 720px;
}

/* Form row spacing */
#ui-shell .ui__formRow {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}
/* Horizontal form row (label + input in one line) */
#ui-shell .ui__formRow--inline {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

#ui-shell .adjust-width {
  grid-template-columns: 1fr 180px;
}

#ui-shell .ui__formRow--60 {
  grid-template-columns: 60px 1fr;
}

#ui-shell .ui__formRow--30 {
  grid-template-columns: 30px 1fr;
}

#ui-shell .ui__formRow--radio {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

/* Responsive: stack on small screens */
@media (max-width: 700px) {
  #ui-shell .ui__formRow--inline {
    grid-template-columns: 1fr;
  }
}
/* Input / select / textarea shared styling */
#ui-shell .ui__input,
#ui-shell select.ui__input,
#ui-shell textarea.ui__input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d9e0e6;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  background: #fff;
}

#ui-shell select.ui__input--75 {
  width: 75%;
}

#ui-shell .ui__hint-left {
  display: block;
  text-align: left;
}

/* Focus state (important for WCAG keyboard users) */
#ui-shell .ui__input:focus,
#ui-shell select.ui__input:focus,
#ui-shell textarea.ui__input:focus {
  outline: none;
  border-color: var(--ui-brand-bold);
  box-shadow: 0 0 0 2px rgba(0,32,96,0.15);
}

/* Buttons area */
#ui-shell .ui__formActions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

#ui-shell .ui__actionItem{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#ui-shell .ui__actionItem p{
  margin: 0 0 6px;
  font-size: 14px;
}

/* Secondary button */
#ui-shell .ui__btn--secondary {
  background: #e5e7eb;
  color: #111827;
}

/* Form message / errors */
#ui-shell .ui__alert {
  padding: 12px 14px;
  border-radius: 8px;
  background: #fde8e8;
  border: 1px solid #f5c2c2;
  color: #b91c1c;
  margin-bottom: 16px;
  font-size: 14px;
}

/* Page header layout */
#ui-shell .ui__pageHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  gap:12px;
}

/* Page actions */
#ui-shell .ui__pageActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Primary button */
#ui-shell .ui__btn--primary{
  background: var(--ui-button-primary-bg);
  color:#fff;
}


/* Hover */
#ui-shell .ui__btn--secondary:hover{
  background:#e5e7eb;
  text-decoration: none;
  font-weight: normal;
}


#ui-shell .help-box-left{
  text-align: left;
}

#ui-shell .ui__muted-left{
  text-align: left;
}

#ui-shell .required {
  color:#b00020;
  font-weight:bold;
}

#ui-shell p,h2,h1{ font-family: inherit;}

#ui-shell .form-instruction {font-size: 14px;font-weight: 600;}

#ui-shell .alert{font-size: 14px;font-weight: bold;color: #b00020;}

#ui-shell .ui__muted b{
  color: var(--ui-text);
}

#ui-shell .ui__buttonRow {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

#ui-shell .ui__fieldGroup {
  align-items: center;
}

#ui-shell .ui__input--70 {
  width: 70%;
}

#ui-shell .ui__pageTitle{
    font-size: 30px;
    font-weight: normal;
    margin-bottom: 10px;
    margin-top: 0px;
}

#ui-shell .ui__contentNarrow {
  max-width: 720px;
}

#ui-shell .ui__alert--warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
}

#ui-shell .ui__alert--info {
  background: #e6f3ff;
  border: 1px solid #b6e0fe;
  color: #0c4a6e;
}

#ui-shell .no-border{
  border:none;
}

#ui-shell .ui__srOnly {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

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

#ui-shell .login-page {
min-height:94vh;
display:flex;
align-items:center;
justify-content:center;
background:#f7f8f9;
padding:20px;
}

#ui-shell .login-wrapper {
width:100%;
max-width:380px;
text-align:center;
}

#ui-shell .login-logo {
font-size:24px;
margin-bottom:20px;
display:inline-block;
}

#ui-shell .login-card {
background:#fff;
border:1px solid var(--ui-border);
border-radius:14px;
padding:28px;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
}

#ui-shell .login-title {
margin:0 0 20px;
font-size:26px;
font-weight:700;
}

#ui-shell .login-label {
display:block;
text-align:left;
font-size:14px;
font-weight:600;
margin-bottom:6px;
margin-top:12px;
}

#ui-shell .login-input {
width:100%;
height:44px;
padding:0 12px;
border:1px solid #d9e0e6;
border-radius:8px;
font-size:14px;
box-sizing:border-box;
}

#ui-shell .login-input:focus {
border-color:#14a800;
outline:none;
}

#ui-shell .login-button {
width:100%;
margin-top:18px;
height:44px;
background:var(--ui-button-primary-bg);
border:none;
border-radius:999px;
color:#fff;
font-weight:600;
cursor:pointer;
transition:all .2s ease;
}

#ui-shell .login-button:hover {
opacity:.95;
transform:translateY(-1px);
}

#ui-shell .login-links {
margin-top:18px;
font-size:14px;
color:var(--ui-muted);
}

#ui-shell .login-links p {
margin-bottom:12px;
}

#ui-shell .login-secondary {
margin-top:6px;
color:#0f172a;
text-decoration:none;
font-weight:500;
}

#ui-shell .login-secondary:hover {
text-decoration:underline;
}

#ui-shell .login-wrapper .notification{
  margin-top: 10px;
}

#ui-shell .login-human-check {
    margin-top:14px;
    text-align:left;
}

#ui-shell .password-field{
    position:relative;
}

#ui-shell .password-field .login-input{
    padding-right:40px; /* space for icon */
}

#ui-shell .show-password-eye{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#666;
    font-size:16px;
}

#ui-shell .signup-wrapper {
    max-width: 720px;
    text-align: center;
}

#ui-shell .login-subtitle {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
}

/* main question container */
#ui-shell .ui-question{
    padding:10px;
    margin-bottom: 20px;
    border: 1px solid var(--ui-border);
}

/* row layout */
#ui-shell .ui-question-row{
    display:flex;
    align-items:flex-start;
    gap:15px;
}

/* number column */
#ui-shell .ui-question-number{
    flex-shrink:0;
}

/* question content */
#ui-shell .ui-question-content{
    flex:1;
    min-width:0;
}

/* question text */
#ui-shell .ui-question-text{
    font-size:1.5em;
    display:block;
}

/* question type */
#ui-shell .ui-question-type{
    display:block;
    margin-bottom:6px;
}

/* options container */
#ui-shell .ui-options{
    margin-top:6px;
}

/* option layout */
#ui-shell .ui-option{
    margin-bottom:6px;
}

/* option label layout */
#ui-shell .ui-option label{
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
}

#ui-shell .counter{
    background-color: #333;
    width: 30px;
    height: 30px;
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 30px;
}

#ui-shell .quiz-layout{
    display:flex;
    flex-direction:column;
    height:100%;
}

#ui-shell .scroll-bar{
    height:500px;
    margin-top:30px;
    overflow-y:auto;
    padding-right:10px;
}

#ui-shell .quiz-footer{
    margin-top:20px;
}

#ui-shell .quiz-footer-inner{
    text-align: center;
}

#ui-shell .quiz-instruction{
    margin:0;
}

#ui-shell .ans-col{
  border: 1px solid var(--ui-border);
  padding: 10px;
  margin-top: 10px;
}

#ui-shell strong p {
  line-height: 22px;
}

#ui-shell .ans-col p{
  font-size: 18px;
}

@media (max-width: 700px){

  /* Hide header visually but keep for screen readers */
  
  /* Each row becomes a card */
  #ui-shell .box-wrap .style1 tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
  }

  #ui-shell .box-wrap .style1 thead tr {
    border: none;
  }
  /* Add labels (WCAG friendly) */
  #ui-shell .box-wrap .style1 td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    margin-bottom: 2px;
    color: #555;
  }

  /* Buttons fix */
  #ui-shell .links.left {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; 
  }

  #ui-shell table.style1 table td {
    border-bottom: none;
}

#ui-shell tr.box-slide-head.bd-top td {
    border-top: none;
}

#ui-shell  .actions-links{
 float:none;
}
}
@media (max-width: 700px) {

  /* Top-level rows become mobile cards */
  #ui-shell .new-class > .box-body > .box-wrap > .style1 > tbody > tr.box-slide-head {
    display: block;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
  }

 
  #ui-shell .new-class > .box-body > .box-wrap > .style1 > tbody > tr.box-slide-head > td.full h2,
  #ui-shell .new-class > .box-body > .box-wrap > .style1 > tbody > tr.box-slide-head > td.full p.description {
    margin: 0;
  }

  /* Second line: only the direct td children of top-level tr */
  #ui-shell .new-class > .box-body > .box-wrap > .style1 > tbody > tr.box-slide-head > td:not(.full) {
    display: inline-block;
    width: 45%;
  }

  /* Buttons layout */
  #ui-shell .new-class > .box-body > .box-wrap > .style1 > tbody > tr.box-slide-head > td .links.left {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Optional line break between first and second line */
  #ui-shell .new-class > .box-body > .box-wrap > .style1 > tbody > tr.box-slide-head > td.full::after {
    content: "";
    display: block;
    margin-bottom: 8px;
  }

  /* EXPLICITLY reset nested tables so they stay normal */
  #ui-shell .new-class .box-wrap .style1 td table,
  #ui-shell .new-class .box-wrap .style1 td table tr,
  #ui-shell .new-class .box-wrap .style1 td table td {
    display: table;
    width: auto;
    border: none;
    margin: 0;
    padding: 0;
    background: none;
  }

  #ui-shell img[src*="spacer.gif"] {
  display: none;
}
}

#ui-shell .viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 5px;
}
 
.viewer-toolbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
 
.viewer-toolbar__titleWrap {
  min-width: 0;
}
 
 
.viewer-toolbar__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ui-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.viewer-toolbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
 
.viewer-jump {
  display: flex;
  align-items: center;
  gap: 8px;
}
 
.viewer-jump__select {
  min-width: 260px;
  max-width: 360px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: #fff;
  color: var(--ui-text);
}

@media (max-width: 900px) {
    #ui-shell .viewer-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    #ui-shell .viewer-toolbar__left,
    #ui-shell .viewer-toolbar__right {
        width: 100%;
    }

    #ui-shell .viewer-jump {
        width: 100%;
    }

    #ui-shell .viewer-jump__select {
        width: 100%;
        min-width: 0;
    }

    #ui-shell .viewer-toolbar__right .ui__btn {
        flex: 1;
        justify-content: center;
    }
}

/* ================================================
   COURSE VIEWER - Reduced Width Only
   (Does NOT affect other pages)
   ================================================ */

#ui-shell.course-viewer {
    --ui-max-w: 1460px;        /* Reduced from 1240px */ 
}

#ui-shell.course-viewer .ui__main {
  padding: 5px 0 10px;
}

/* Mobile adjustments for Course Viewer only */
@media (max-width: 900px) {
    #ui-shell.course-viewer .ui__layout {
        grid-template-columns: 1fr;
    }
    
    #ui-shell.course-viewer .ui__breadcrumb {
        display: none;
    }
}

/* Button Styling - Clear Hierarchy */

#ui-shell .viewer-toolbar .prev-btn {
    background-color: #0e8a00;
    color: white;
    font-weight: 600;
}

#ui-shell .viewer-toolbar .prev-btn:hover {
    background-color: #0b6f00;
}

/* Next Button - Same as Primary (strong action) */
#ui-shell .viewer-toolbar .next-btn {
    background-color: #0e8a00;
    color: white;
    font-weight: 600;
}

#ui-shell .viewer-toolbar .next-btn:hover {
    background-color: #0b6f00;
}

/* Go Button - Primary */
#ui-shell .viewer-jump .ui__btn--primary {
    background-color: #0e8a00;
    color: white;
    font-weight: 600;
}

#ui-shell .viewer-jump .ui__btn--primary:hover {
    background-color: #0b6f00;
}

/* Resources - Secondary style */
#ui-shell .ui__pageActions .ui__btn--secondary {
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

#ui-shell .ui__pageActions .ui__btn--secondary:hover {
    background-color: #e5e7eb;
}

#ui-shell .no-height{
  height:auto;
}

#ui-shell #uiSidenav {
  height: 450px;
}

#ui-shell.course-viewer .ui__content{
  height: 500px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
}

#ui-shell.course-viewer .content-box { border: none;}

/* #ui-shell.course-viewer .ui__content iframe{ margin: 10px;} */