/* =====================================================================
   ZABDESK zn_student.css  v20260910a
   Student-module polish: tasks 1-4 of the UI review.
   Scope-safe: every rule names a student-module selector, so no other
   module changes. Plain CSS (these pages do not load Bootstrap/Tailwind);
   works in IE10+/Edge/Chrome/Firefox/Safari and old Android - the only
   modern feature used (calc, flex) has a fallback line before it.
   Linked from header.asp, so it is available on every page.
   ===================================================================== */

.PageTitleHeaderColor_1 th,
.PageTitleHeaderColor th {
  font-size: 14px !important;
  font-weight: 600;
  padding: 6px 10px;
}

/* =====================================================================
   TASK 1 - top navigation menu: white links + clear hover state
   The bar is ul.navigation-bar (inc_menu/student_vertical.inc). Items come
   from the DB, so style by class, not text: plain <a>, a.dropbtn, a.leftmenus.
   stdstyle.css used to paint .leftmenus white-background, which made some
   items dark-on-white inside the blue bar - fixed below.
   ===================================================================== */
.navigation-bar > div > li > a,
.navigation-bar > div > li > .dropbtn,
.navigation-bar a.DegStdMenu {
  color: #FFFFFF !important;
  background: transparent;
  font-weight: 600;
  letter-spacing: .2px;
  border-bottom: 4px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
/* hover / keyboard focus: subtle fill + underline, no layout shift */
.navigation-bar > div > li > a:hover,
.navigation-bar > div > li > a:focus,
.navigation-bar > div > li > a:focus-visible,
.navigation-bar > div > li:hover > a,
.navigation-bar > div > li > .dropbtn:hover,
.navigation-bar > div > li > .dropbtn:focus {
  color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, .14) !important;
  border-bottom-color: #FFB400;
  text-decoration: underline;
  text-underline-offset: 6px;
}
/* the selected/current section stays marked */
.navigation-bar > div > li > a[aria-current="page"],
.navigation-bar > div > li > a.zn-is-current {
  background-color: rgba(255, 255, 255, .20) !important;
  border-bottom-color: #FFB400;
}
/* the "+ / -" hint and the little folder icons are decoration, not text */
.navigation-bar .dropbtn span[aria-hidden="true"] { color: #CFE3F7; }
#blinking, #tranmenu #blinking { color: #FFD98A; }
/* dropdown panel: dark text on white is correct, give it a defined width */
.dropdown-content { background: #FFFFFF; border: 1px solid #C9D8E8; border-top: 3px solid #0C54A3; box-shadow: 0 10px 24px rgba(4, 24, 48, .22); }
.dropdown-content a { color: #12304F !important; background: #FFFFFF !important; border: 0; }
.dropdown-content a:hover,
.dropdown-content a:focus { background: #EEF4FB !important; color: #0C54A3 !important; text-decoration: underline; }

/* =====================================================================
   TASK 2 - checkbox: standard 16px box, perfectly aligned with its label
   stdtheme.css has an unrestricted  input { padding:1% ; hight:70px }  rule
   (note the typo) which is what inflates the checkbox; we neutralise it for
   checkboxes and radios only.
   ===================================================================== */
input[type="checkbox"],
input[type="radio"],
.zpr-section input[type="checkbox"],
.zpr-section input[type="radio"],
#content input[type="checkbox"],
#content input[name="chkRegister"] {
  appearance: checkbox !important;
  -webkit-appearance: checkbox !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
  border: 1px solid #12304f !important;
  border-radius: 2px;
  box-sizing: border-box;
  vertical-align: middle;
  line-height: normal;
  background: #FFFFFF !important;
  accent-color: #0c54a3;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
input[type="radio"] { -webkit-appearance: radio; border-radius: 50%; }
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible { outline: 3px solid #FFB400; outline-offset: 2px; }
/* the Yes / No text that sits beside each checkbox */
input[type="checkbox"] + span,
input[type="checkbox"] + label,
input[type="radio"] + label {
  vertical-align: middle;
  display: inline-block;
  line-height: 1.2;
}
#lblMedicalCondition, #lblDisability { vertical-align: middle; font-weight: 700; margin-left: 6px !important; }
/* rows that hold a checkbox should not inherit the big table cell padding */
.zpr-section td:has(> input[type="checkbox"]) { padding-top: 6px !important; padding-bottom: 6px !important; }
@media (max-width: 480px) {
  /* keep an easy touch target on phones without growing the visible box */
  input[type="checkbox"], input[type="radio"] { height: 20px !important; width: 20px !important; }
}

/* =====================================================================
   TASK 3 - stretch the form to the full content width and spread the
   two sections evenly. The white card (.zpr-layout) already is 100%, but it
   sits inside a legacy  <table width="550"> / <table width="555">  wrapper,
   which is what leaves the huge empty band on the right.
   ===================================================================== */
table[width="550"],
table[width="555"],
td > table[width="550"],
td > table[width="555"] {
  width: 100% !important;
  max-width: 100% !important;
}
.zpr-layout { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }

/* two cards side by side, evenly distributed across the new width */
.zpr-grid {
  display: block;                 /* fallback: stack if flex is unsupported */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;                    /* 24px breathing room between the columns */
  margin: 0 0 1.5rem !important;
}
.zpr-grid > .zpr-col {
  flex: 1 1 360px;                /* grow to share the row, wrap when too narrow */
  min-width: 300px;
  max-width: 100%;
  padding: 0 !important;          /* spacing now comes from gap, not negative margins */
}
.zpr-grid > .zpr-col + .zpr-col { flex-basis: 380px; }
.zpr-section { background: #FFFFFF; border: 1px solid #D9DEE5; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(16, 40, 64, .06); }
.zpr-section + .zpr-section { margin-top: 1.25rem; }
.zpr-heading { background: #0C54A3; color: #FFFFFF; font-size: 14px; font-weight: 700; padding: 10px 14px; letter-spacing: .3px; }

/* fields fill the column they are in (size=/cols= attributes are overridden) */
.zpr-section table { width: 100% !important; max-width: 100%; }
.zpr-section th { width: 1%; white-space: nowrap; padding: 7px 10px 7px 14px !important; color: #47546D; font-weight: 600; text-align: left; background: transparent !important; }
.zpr-section td { padding: 7px 14px 7px 4px !important; }
.zpr-section input[type="text"],
.zpr-section input[type="email"],
.zpr-section input[type="tel"],
.zpr-section input[type="number"],
.zpr-section input[type="date"],
.zpr-section select,
.zpr-section textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #B9C4D0;
  border-radius: 6px;
  background: #FFFFFF;
  color: #1D1D1D;
}
.zpr-section textarea { min-height: 72px; resize: vertical; }
.zpr-section select { height: auto; }
.zpr-section input:focus,
.zpr-section select:focus,
.zpr-section textarea:focus { border-color: #0C54A3; outline: 3px solid rgba(12, 84, 163, .18); outline-offset: 1px; }
/* read-only / disabled values still need to look like data, not like a hole */
.zpr-section input[readonly], .zpr-section input[disabled] { background: #F3F6F9; color: #3A4653; }

/* graceful stacking: tablets and phones */
@media (max-width: 1024px) {
  .zpr-grid > .zpr-col { flex: 1 1 calc(50% - .75rem); }
}
@media (max-width: 860px) {
  .zpr-grid { display: block; }
  .zpr-grid > .zpr-col { width: 100%; max-width: 640px; margin: 0 auto 1.25rem; }
  .zpr-section input[type="text"], .zpr-section select, .zpr-section textarea { max-width: 100%; }
}
@media (max-width: 520px) {
  .zpr-section th, .zpr-section td { display: block; width: 100% !important; white-space: normal; padding: 4px 12px !important; }
  .zpr-section th { padding-top: 10px !important; }
  .zpr-section tr { display: block; border-bottom: 1px solid #EEF1F5; padding-bottom: 6px; }
}

/* =====================================================================
   TASK 4 - shell polish: consistent gutters + real tab active state
   ===================================================================== */
#sidebar, #content { margin-top: 0; }
#content > .post, #content > .post > .post-bgtop { padding: 0; }
#content > iframe { width: 100%; border: 0; min-height: 640px; }
.zpr-layout { padding: 4px 0 0; }

/* Google-account / profile cards on the student home line up with the form */
.std-tabs, #stdTabs { background: #EEEEEE; box-shadow: none; border: 1px solid #D9DEE5; border-radius: 8px; padding: 8px; }

/* tabs: all anchors were painted blue, so the selected one was invisible.
   Inactive = light, active = dark navy with an amber underline. */
.std-tabs .ui-tabs-nav, .ui-tabs .ui-tabs-nav {
  background: #E7EDF4 !important;
  border: 0;
  border-bottom: 2px solid #0C54A3;
  padding: 6px 6px 0;
  border-radius: 6px 6px 0 0;
}
.ui-tabs .ui-tabs-nav li { margin: 0 4px -2px 0; border: 0 !important; background: transparent !important; }
.std-tabs .ui-tabs-nav .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
  background: #F5F8FB !important;
  color: #12304F !important;
  border: 1px solid #D3DDE8;
  border-bottom: 3px solid transparent;
  border-radius: 6px 6px 0 0;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  box-shadow: none !important;
}
.std-tabs .ui-tabs-nav .ui-tabs-anchor:hover,
.ui-tabs .ui-tabs-nav .ui-tabs-anchor:hover { background: #E8F0FA !important; color: #0C54A3 !important; }
.std-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-active .ui-tabs-anchor {
  background: #0C54A3 !important;
  color: #FFFFFF !important;
  border-color: #0C54A3;
  border-bottom: 3px solid #FFB400;
}
.ui-tabs .ui-tabs-panel { padding: 14px !important; background: #FFFFFF; }
/* the Personal Information / Academic Information pill links (inline-styled) */
/* pills only inside the profile iframe / form — never the top nav dropdown */
.zpr-layout a[href*="StdChangeProfileRequest.asp"],
.zpr-layout a[href*="AcademicRecord.asp"],
.zpr-layout a[href*="AcademicSubjects.asp"],
.zpr-layout a[href*="student_academic"] {
  background-color: #0C54A3 !important;
  color: #FFFFFF !important;
  border: 1px solid #0C54A3 !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  height: auto !important;
  min-height: 40px;
  line-height: 1.35 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-align: center;
}
.zpr-layout a[href*="StdChangeProfileRequest.asp"]:hover,
.zpr-layout a[href*="AcademicRecord.asp"]:hover,
.zpr-layout a[href*="AcademicSubjects.asp"]:hover,
.zpr-layout a[href*="student_academic"]:hover {
  background-color: #073b74 !important;
  color: #FFFFFF !important;
}
.dropdown-content {
  display: none !important;
  position: absolute !important;
  z-index: 5000 !important;
  padding: 6px 0 !important;
  min-width: 240px !important;
  max-width: 320px;
  background: #ffffff !important;
  border: 1px solid #c9d8e8 !important;
  border-top: 3px solid #0c54a3 !important;
}
.dropdown:hover .dropdown-content {
  display: block !important;
}
@media (max-width: 900px) {
  .dropdown:hover .dropdown-content {
    display: none !important;
  }
  .dropdown.zn-open > .dropdown-content {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    float: none !important;
    box-shadow: none !important;
  }
}
.dropdown-content a,
.navigation-bar .dropdown-content a[href*="StdChangeProfileRequest.asp"],
.navigation-bar .dropdown-content a[href*="AcademicRecord.asp"],
.navigation-bar .dropdown-content a[href*="AcademicSubjects.asp"],
.navigation-bar .dropdown-content a[href*="student_academic"] {
  background: #ffffff !important;
  color: #12304f !important;
  display: block !important;
  text-align: left !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  white-space: nowrap;
}
.dropdown-content a:hover,
.navigation-bar .dropdown-content a:hover {
  background: #e8f0fa !important;
  color: #0c54a3 !important;
}
.dropdown-content .zn-menu-closed,
.dropdown-content span.zn-menu-closed,
.dropdown-content a.zn-menu-closed {
  display: block !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #c0392b !important;
  background: #fff !important;
  cursor: default !important;
  pointer-events: none !important;
  text-decoration: none !important;
}
.zn-otp-notice, .zn-cred-panel {
  max-width: 100% !important;
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0 14px;
  padding: 12px 16px;
  border: 1px solid #F5A623;
  background: #FFF9E6;
  border-radius: 6px;
  color: #0A2F5A;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: normal;
}
.zn-cred-panel .zn-cred-link {
  display: inline !important;
  height: auto !important;
  padding: 0 !important;
  color: #0A2F5A !important;
  font-weight: 700;
  text-decoration: underline;
}
.zn-cred-pass {
  display: inline-block;
  font-family: Consolas, Menlo, monospace;
  font-size: 13px;
  background: #fff;
  border: 1px solid #d9dee5;
  padding: 2px 8px;
  border-radius: 4px;
  color: #14304D;
  white-space: nowrap;
}
.zn-cred-hint {
  margin-top: 8px;
  color: #4b5563;
  font-size: 12.5px;
  line-height: 1.55;
}
.zn-gacc {
  border: 1px solid #c9d8e8;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  margin: 0 0 16px;
  box-shadow: 0 8px 18px rgba(10, 47, 90, .08);
}
.zn-gacc-head {
  background: #0A2F5A;
  color: #ffffff;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
}
.zn-gacc-body {
  padding: 14px 16px 16px;
  color: #1d2a3a;
  font-size: 14px;
  line-height: 1.5;
}
.zn-gacc-empty { background: #FFF9E6; color: #0A2F5A; }
.zn-gacc-row { margin: 6px 0 10px; }
.zn-gacc-lbl {
  display: inline-block;
  min-width: 92px;
  color: #5A6B7B;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.zn-gacc .zn-cred-link {
  display: inline !important;
  height: auto !important;
  padding: 0 !important;
  color: #0A2F5A !important;
  font-weight: 700;
}
/* submit / cancel buttons: one consistent rhythm */
.zpr-layout .btn, .zpr-layout input[type="submit"], .zpr-layout input[type="button"] {
  min-height: 44px;
  padding: 10px 26px !important;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
}
.zpr-layout input[type="submit"] { background: #0C54A3 !important; color: #FFFFFF !important; border: 0; }
.zpr-layout input[type="button"] { background: #FFFFFF !important; color: #12304F !important; border: 1px solid #B9C4D0 !important; }
.zpr-layout .btn:focus-visible, .zpr-layout input[type="submit"]:focus-visible { outline: 3px solid #FFB400; outline-offset: 2px; }

/* reduced motion: keep the hover transitions instant for those who ask */
@media (prefers-reduced-motion: reduce) {
  .navigation-bar a, .ui-tabs-anchor, .zpr-section input, .zpr-section select { transition: none !important; }
  #blinking { animation: none !important; }
}

/* print the request form without the shell */
@media print {
  #sidebar, .navigation-bar, .zn-topbar, .header-top-bar, #footer, .ui-tabs-nav { display: none !important; }
  #content { width: 100% !important; float: none !important; }
  .zpr-grid { display: block; }
  .zpr-section { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
}

/* =====================================================================
   TASK 5 - portal layout polish for home pages
   ===================================================================== */
/* Resource boxes on Notice/HEC pages: fluid grid instead of fixed floats */
.resource-box, .Std-resource-box {
  width: auto !important;
  max-width: 260px;
  margin: 12px;
  float: none !important;
}
#dvHECResources, #dvHECResources > .clearfix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  padding: 12px;
}
#dvHECResources .resource-box { margin: 0; }
#dvHECResources img { width: 100%; height: auto; border-radius: 6px; display: block; }
@media (max-width: 600px) {
  #dvHECResources { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
}

/* Login card on Index sidebar */
#sidebar .zn-card {
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  padding: 16px !important;
}
#sidebar .zn-card .zn-field {
  margin-top: 12px !important;
}
#sidebar .zn-card input[type="text"],
#sidebar .zn-card input[type="password"],
#sidebar .zn-card select {
  width: 100% !important;
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #B9C4D0;
  border-radius: 6px;
}
#sidebar .zn-card .zn-btn-group input[type="submit"],
#sidebar .zn-card .zn-btn-group button {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 6px;
}

/* Tabs panel spacing */
#divTabsPanel {
  background: #fff;
  border: 1px solid #D9DEE5;
  border-radius: 8px;
}
#divTabsPanel > ul { margin: 0; padding: 6px; }

/* =====================================================================
   TASK 6 - Student shell: layout, motion, mobile, old-browser fallbacks
   v20260910b  (test environment)
   ===================================================================== */
html { scroll-behavior: smooth; }
body {
  background: #eef3f8 !important;
  color: #1d2a3a;
}
#wrapper {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  min-height: 100vh;
}
#header {
  width: 100% !important;
  background: #0A2F5A !important;
}
.zn-hdr-c {
  animation: zn-fade-down .45s ease both;
}
.navigation-bar {
  background: #0c54a3 !important;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
.navigation-bar > div > li {
  display: inline-block;
  float: none !important;
  vertical-align: middle;
}
.navigation-bar > div > li > a,
.navigation-bar > div > li > .dropbtn {
  min-height: 40px;
  padding: 10px 14px !important;
  display: inline-block;
  box-sizing: border-box;
  font-size: 13px !important;
  font-weight: 600;
  color: #ffffff !important;
  transition: background-color .18s ease, transform .18s ease;
}
.dropdown-content {
  min-width: 240px !important;
  max-width: 320px;
}
.dropdown-content a {
  color: #12304f !important;
  background: #ffffff !important;
  font-size: 14px !important;
  white-space: nowrap;
}
.navigation-bar > div > li > a:hover,
.navigation-bar > div > li > .dropbtn:hover {
  transform: translateY(-1px);
}
.dropdown-content {
  animation: zn-fade-in .18s ease;
}

/* v20260913i: Nested sub-menus (e.g. "Download Request Forms" inside "Student" dropdown).
   The old GenItemMenu rendered <ul> directly inside <ul>, which is invalid HTML.
   Now renders <li class="dropdown-submenu"> with nested <ul class="dropdown-content">.
   On desktop: sub-menu expands inline (full width inside parent dropdown).
   On mobile: sub-menu shows inline (no side-flyout — keeps it simple on touch). */
.dropdown-submenu { position: relative; }
.dropdown-submenu > a.leftmenus {
  display: block;
  padding: 6px 16px;
  font-weight: 600;
  color: #0c54a3 !important;
  background: #eef4fb !important;
  border-bottom: 1px solid #d9dee5;
  cursor: pointer;
}
.dropdown-submenu > .dropdown-content {
  display: block;
  position: static;
  box-shadow: none;
  border: 0;
  border-top: 0;
  min-width: 100%;
  max-width: 100%;
}
#sidebar {
  width: 220px !important;
  float: left !important;
  box-sizing: border-box;
  padding: 16px 12px 28px !important;
  background: #f7fafc !important;
  border-right: 1px solid #d9dee5;
  text-align: center;
}
#content {
  display: block !important;
  margin: 0 0 0 220px !important;
  width: calc(100% - 220px) !important;
  max-width: none !important;
  float: none !important;
  padding: 16px 18px 28px !important;
  box-sizing: border-box;
  min-height: 0;
  animation: zn-fade-in .4s ease both;
}
#content iframe {
  width: 100% !important;
  min-height: 620px;
  height: 75vh;
  border: 0;
  border-radius: 8px;
  background: #fff;
}
.dp-full {
  border-radius: 50% !important;
  width: 148px !important;
  height: 148px !important;
  object-fit: cover;
  background: #dce6f0;
  border: 3px solid #0c54a3 !important;
  box-shadow: 0 8px 18px rgba(12, 84, 163, .18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.dp-full:hover { transform: scale(1.04); box-shadow: 0 12px 24px rgba(12, 84, 163, .28); }
a.editor2 {
  display: inline-block;
  margin-top: 8px;
  color: #0c54a3 !important;
  font-weight: 700;
  text-decoration: none;
}
.zn-dp-status {
  display: block;
  margin: 10px 8px 4px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.zn-dp-pending {
  background: #fff8e1;
  color: #7a5b00;
  border: 1px solid #e6c35c;
}
.zn-dp-reject {
  background: #fdecea;
  color: #8a1f11;
  border: 1px solid #e7a39a;
}
a.editor2:hover { text-decoration: underline; }
#sidebar a .blink,
#sidebar span.blink {
  display: block;
  margin: 12px 8px 0;
  padding: 10px 8px;
  border: 1px solid #f1c0c0;
  border-radius: 8px;
  color: #c0392b !important;
  background: #fff6f6;
  font-weight: 700;
  animation: zn-pulse 2.4s ease-in-out infinite;
}
#TableOTP {
  width: 100% !important;
  min-width: 480px;
}
.post, .std-tabs, #stdTabs {
  animation: zn-fade-in .35s ease both;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.ui-dialog {
  max-width: 92vw !important;
  box-sizing: border-box;
}
.ui-widget-overlay { background: rgba(10, 47, 90, .45) !important; }

@keyframes zn-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes zn-fade-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes zn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .25); }
  50% { box-shadow: 0 0 0 6px rgba(192, 57, 43, 0); }
}

@media (max-width: 1024px) {
  #wrapper { width: 100%; margin: 0 !important; border-radius: 0; }
}
@media (max-width: 900px) {
  #sidebar {
    width: 100% !important;
    float: none !important;
    border-right: 0;
    border-bottom: 1px solid #d9dee5;
    min-height: 0 !important;
  }
  #content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 12px !important;
  }
  .zn-hdr-c { flex-wrap: nowrap; }
  .navigation-bar { white-space: nowrap; }
  #TableOTP { display: block; overflow-x: auto; }
}
@media (max-width: 640px) {
  .dp-full { width: 112px !important; height: 112px !important; }
  .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 4px;
  }
  .ui-dialog {
    left: 4vw !important;
    right: 4vw !important;
    width: 92vw !important;
    margin: 0 !important;
    top: 8vh !important;
    -webkit-transform: none !important;
    transform: none !important;
    position: fixed !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* =====================================================================
   Contrast lock — white text must never sit on a white/light surface
   style.css used tbody tr th { color:#fff } and .ui-tabs-anchor { color:#fff }
   on every tab; Reset (.btn) inherited white text on a light control.
   ===================================================================== */
#content,
#content .post,
#content .ui-tabs-panel,
#content .ui-widget-content,
#sidebar {
  color: #1d2a3a !important;
  background-color: #ffffff;
}
#content a { color: #0c54a3 !important; }
#content a:hover { color: #073b74 !important; }
#content td,
#content p,
#content label,
#content li {
  color: #1d2a3a !important;
}
#content input[type="text"],
#content input[type="password"],
#content input[type="email"],
#content input[type="number"],
#content input[type="tel"],
#content textarea,
#content select {
  color: #1d2a3a !important;
  background-color: #ffffff !important;
  border: 1px solid #b9c4d0;
}
#content input[type="submit"],
#content input.btn[type="submit"] {
  background: #0c54a3 !important;
  color: #ffffff !important;
  border: 0 !important;
}
#content input[type="button"],
#content input[type="reset"],
#content input.btn[type="reset"],
#content input.btn[type="button"] {
  background: #eef2f6 !important;
  color: #1d2a3a !important;
  border: 1px solid #8a97a8 !important;
}
/* tabs: inactive = dark on light; active = white on navy */
.ui-tabs .ui-tabs-nav .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li a,
#stdTabs ul li a {
  background: #f5f8fb !important;
  color: #12304f !important;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-selected .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-active a,
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
#stdTabs ul li.ui-tabs-active a,
#stdTabs ul li.ui-state-active a,
#stdTabs ul li.ui-tabs-selected a {
  background: #0c54a3 !important;
  color: #ffffff !important;
}
/* true navy header cells keep white type */
#content th,
#content tbody tr th {
  color: #ffffff !important;
  background-color: #0c54a3 !important;
}
#content td {
  background-color: #ffffff;
}
#content iframe {
  background: #ffffff !important;
  width: 100% !important;
  min-height: 620px;
  height: 75vh;
}

/* =====================================================================
   Fluid layout — kill legacy 968px / 73% / 550px / 945px caps
   so LED / 4K / laptop / phone all use the full viewport
   ===================================================================== */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: border-box; }
#header, #logo, #menu, #page, #page-bgtop, #page-bgbtm, #footer,
.header-top-bar, .zn-hdr-c, .navigation-bar {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}
#content {
  display: block !important;
  width: calc(100% - 220px) !important;
  max-width: none !important;
  min-height: 0;
}
#right, #left {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}
#content table,
#content .post,
#content .post-bgtop,
#content .post-bgbtm,
.std-tabs, #stdTabs, .zpr-layout, .zpr-grid, .zpr-section,
table[width="550"], table[width="555"], table[width="968"] {
  width: 100% !important;
  max-width: 100% !important;
}
.zpr-grid {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}
.zpr-grid > .zpr-col,
.zpr-col {
  flex: 1 1 calc(50% - 16px) !important;
  -webkit-flex: 1 1 calc(50% - 16px) !important;
  min-width: 280px !important;
  max-width: 100% !important;
  overflow: visible !important;
}
.zpr-section {
  overflow: visible !important;
}
.zpr-section table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: auto !important;
}
.zpr-section th,
.zpr-section td {
  padding: 6px 8px !important;
  overflow: visible;
  word-break: normal !important;
  overflow-wrap: break-word;
  hyphens: manual;
}
.zpr-section th,
.zpr-section th div {
  color: #1d2a3a !important;
  background: transparent !important;
  white-space: normal !important;
  width: auto !important;
}
.zpr-heading,
.zpr-heading * {
  color: #ffffff !important;
  background: #0c54a3 !important;
}
#content input[type="text"],
#content input[type="password"],
#content input[type="email"],
#content input[type="number"],
#content input[type="tel"],
#content input[type="date"],
#content textarea,
#content select {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 40px;
}
#content img {
  max-width: 100%;
  height: auto;
}
.dp-full, #sidebar .dp-full {
  max-width: 148px;
  width: 148px !important;
  height: 148px !important;
  object-fit: cover;
}
@media (min-width: 1600px) {
  #content { padding: 24px 40px 40px !important; margin-left: 260px !important; width: calc(100% - 260px) !important; }
  #sidebar { width: 260px !important; }
}
@media (max-width: 900px) {
  #wrapper, #header, #content, #sidebar, #footer { width: 100% !important; }
  #content { min-height: 0; margin-left: 0 !important; width: 100% !important; }
  html, body { overflow-x: hidden; }
  /* one menu only: hide the clipped desktop bar, keep hamburger */
  ul.navigation-bar { display: none !important; }
  .responsive-menu, .zab-hamburger { display: inline-block !important; }
  /* v20260913e: Show hamburger bar at 900px breakpoint (stdstyle.css only shows it
     at 768px, leaving 768-900px with NO navigation at all). */
  .responsive-bar { display: block !important; }

  /* ---- v20260916a: mobile hamburger bar was INVISIBLE --------------------
     Students on Android/iPhone saw NO menu button at all. The button was
     there, on top, and clickable - but /Images/menu-4-64.png (and
     x-mark-64.png) are WHITE glyphs drawn for the blue menu bar, and this
     bar was transparent, so the icon sat white-on-white on #wrapper.
     Measured: 1726 opaque pixels, every one rgb(255,255,255).

     Fix: paint the bar the same #0C54A3 as .navigation-bar and #menu-res
     (the white icon was always meant for a blue bar), give it a real 44px
     touch target, and bring the icon back INSIDE the bar - it used to hang
     16px into #content.

     The markup is <ul class="responsive-bar"><li><li class="responsive-menu">
     - the stray line box inside that outer <li> pushed the float 25px down,
     so the toggle is absolutely positioned against the bar instead. */
  .responsive-bar {
    background: #0C54A3 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 44px !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .responsive-bar > li { height: 0 !important; line-height: 0 !important; }
  .responsive-bar .responsive-menu {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    float: none !important;
    margin: 0 !important;
    display: block !important;
  }
  .responsive-bar .responsive-menu-open {
    display: block !important;
    width: 44px !important;   /* WCAG 2.5.5 minimum touch target */
    height: 44px !important;
    padding: 0 !important;    /* style.css adds 8px 14px, which squeezed */
    text-align: center;       /* the 24px icon down to 16px */
  }
  .responsive-bar #toggle_icon {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    margin: 10px auto !important;   /* 44 - 24 = 20, centred */
  }
  /* Mobile menu: hidden by default via .zab-menu-res in responsive.css.
     Toggled by both Student.asp jQuery and responsive.js (id="menu-res"). */
  .navigation-bar-res, #menu-res {
    /* v20260916i: was #1d1d1d (near-black).  On a 390x844 phone this drawer is
       380x720 = 97% of the width and 85% of the height, so a near-black fill
       read as "a black screen covering the text and most of the area" (the
       symptom students reported).  Use the app navy instead - same family as
       the desktop sidebar (#253342) and the topbar. */
    background: #1b2b3f !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    /* v20260914c: Internal scroll so all submenu items stay reachable on
       small phones (320×568). Without this, expanding Courses (8 sub-items)
       pushes Semester Result / Course Improvement below the fold with no
       visual cue. Container scrolls inside, page stays put. */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 116px !important;    /* below .zn-hdr-c (72px) + .responsive-bar (44px).
                                 v20260916a: was 96px, which started the panel 1px
                                 ABOVE the hamburger bar and buried the close (X)
                                 button - there was no visible way to shut the menu. */
    max-height: calc(100vh - 116px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 1000 !important;
    box-shadow: 0 10px 26px rgba(6,20,38,.42);
    border-top: 1px solid rgba(255,255,255,.10);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .navigation-bar-res > div { padding: 0 !important; }
  .navigation-bar-res li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    background: #253342 !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    margin: 0 !important;
    list-style: none !important;
  }
  /* v20260916i: was #2d2d2d - the navy/near-black alternation looked like a
     rendering fault.  Keep the zebra but stay inside the navy family. */
  .navigation-bar-res li:nth-child(2n+1) { background: #2b3c50 !important; }
  .navigation-bar-res li a {
    display: block !important;
    text-align: left !important;
    color: #fff !important;
    background: transparent !important;
    padding: 12px 16px !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }
  /* S239c (2026-10-01). When a student already holds a live registration in the
     current term, the "Final Transcript Clearance" item is rendered as a SPAN
     instead of an <a> (inc_menu/student_vertical.inc, znDegClrBlocked). The rule
     above selects `li a` only, so the span fell out of the drawer's row layout and
     collapsed to its content width - measured on TEST at 390x844 it was 284px wide
     inside a 390px drawer, against 390px for every neighbouring row. Give the
     disabled span the identical box, but keep it clearly inert: red label on white,
     no pointer events. #c0392b on #ffffff is 5.4:1, so the label still passes AA. */
  .navigation-bar-res li span.zn-menu-closed,
  .navigation-bar-res li .DegStdMenu.zn-menu-closed {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    color: #c0392b !important;
    background: #ffffff !important;
    padding: 12px 16px !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: default !important;
    pointer-events: none !important;
  }
  .navigation-bar-res li a:hover,
  .navigation-bar-res li a:focus {
    /* matches the desktop sidebar hover in responsive.css */
    background: #3a5274 !important;
    color: #fff !important;
  }
  .navigation-bar-res .dropdown-content {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    background: #1f2f42 !important;
  }
  .navigation-bar-res .dropdown-content a {
    color: #c9d6e5 !important;
    padding-left: 32px !important;
    background: transparent !important;
  }
  .zn-hdr-c {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px !important;
  }
  .zn-hdr-c .zn-spacer { flex: 1 1 auto !important; min-width: 8px !important; }
  .zn-hdr-c a.username-top {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ui-tabs .ui-tabs-nav li { display: inline-block !important; float: none !important; }
  .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    width: auto !important;
    min-width: 72px;
    white-space: nowrap !important;
    font-size: 14px !important;
  }
  .zpr-grid, .zpr-grid > .zpr-col, .zpr-col {
    display: block !important;
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .zpr-section table { table-layout: auto !important; }
  .zpr-section th, .zpr-section td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
  }
  .table-responsive-wrap, .table-responsive-wrap table { min-width: 0 !important; width: 100% !important; }
  #content iframe { height: auto; min-height: 70vh; width: 100% !important; }
}

/* =====================================================================
   COMPAT 20260911a — whole student module, old + new browsers
   Order: float/table first (IE8-9), then calc/flex (ignored if unknown).
   No CSS variables, no :has(), no gap required for layout.
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; height: auto; }
table { max-width: 100%; }
#sidebar { display: block; float: left; width: 220px; }
#content { display: block; float: right; width: 74%; }
#content { float: none; width: auto; margin-left: 220px; width: calc(100% - 220px); }
#wrapper, #header, #menu, #page, #footer { width: 100%; max-width: 100%; }
table[width="550"], table[width="555"], table[width="968"],
table[width="100%"], .entry table {
  width: 100% !important;
  max-width: 100% !important;
}
input[type="text"], input[type="password"], input[type="email"],
select, textarea {
  max-width: 100%;
  box-sizing: border-box;
}
.ui-dialog {
  max-width: 92% !important;
}
@media print {
  .navigation-bar, .responsive-menu, .zab-menu-res, #sidebar, .zn-hdr-c a.signout-icon {
    display: none !important;
  }
  #content { width: 100% !important; margin: 0 !important; float: none !important; }
}
@media (max-width: 900px) {
  #sidebar, #content {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
}