.pageheader {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #003399;
	font-weight: 700;
        align: center;
}
.pageheader2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #993300;
	font-weight: 700;
        align: center;
}
.pageheader2white {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #ffffff;
	font-weight: 700;
        align: center;
}
.pageheader2black {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000000;
	font-weight: 700;
        align: center;
}
.pageheader3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #003399;
	font-weight: 700;
        align: center;
}
.pageheader3red {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #993300;
	font-weight: 700;
        align: center;
}
.smallleftmargin {
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
	font-size: 11px;
	line-height: 12px;
	color: #003399;
	font-weight: 500;
}
.smallleftmargin10 {
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
	font-size: 10px;
	line-height: 12px;
	color: #000000;
	font-weight: 500;
}
.smallheader {
	font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
	font-size: 11px;
	line-height: 14px;
	color: #000000;
	font-weight: 500;
}

.classselectedblue {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #003399;
	font-weight: 700;
        align: center;
}
.verdanared28linespace {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 28px;
	line-height: 34px;
	color: #993300;
	font-weight: 700;
        align: center;
}
.verdanared18linespace {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 24px;
	color: #993300;
	font-weight: 700;
        align: center;
}
.verdanablue16linespace {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #003399;
	font-weight: 700;
        align: center;
}
.verdanablue14linespace {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #003399;
	font-weight: 700;
        align: center;
}
classselectedred {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #993300;
	font-weight: 700;
        align: center;
}
.style10 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 12px;
	color: #000000;
	font-weight: 500;
}
.style10red {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 12px;
	color: #dd0000;
	font-weight: 500;
}
.style11 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	font-weight: 500;
}
.style11blue {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #003399;
	font-weight: 500;
}
.style12 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	font-weight: 500;
}
.style12red {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #993300;
	font-weight: 500;
}
.chngRadio {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	font-weight: 500;
}
.saveAttendance {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	font-weight: 500;
}
.style12blue {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #003399;
	font-weight: 500;
}
.style12plusspace {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	color: #000000;
	font-weight: 500;
}
.style14 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	font-weight: 500;
}
.style14plusspace {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #000000;
	font-weight: 500;
}
.style16 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000000;
	font-weight: 500;
}
.style16bold {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000000;
	font-weight: bold;
}
.style5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	font-weight: 500;
}
.Roster14 {
	font-family: Times New Roman, Times, serif;
	font-size: 14px;
	color: #000000;
	font-weight: 500;
}

.Roster12 {
	font-family: Times New Roman, Times, serif;
	font-size: 12px;
	color: #000000;
	font-weight: 500;
}

.certificate {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 32px;
	color: #000000;
	font-weight: 700;
}

.certificatedate {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #000000;
	font-weight: 700;
        align: center;
}

a.menu          {
font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	font-size:10px;color: #ffffff;

	}
a.menu:link     {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	font-weight: bold;

}
a.menu:visited  {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	font-weight: bold;

}
a.menu:hover    {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #003399;
	font-weight: bold;

}


a {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}

a:link {
	color: #003399;
}
a:visited {
	color: #003399;
}
a:hover {
	color: #003399;
}
a:active {
	color: #003399;
}
.style3 {font-family: Arial, Helvetica, sans-serif}
.style4 {font-size: 12px}



/* =========================================================
   Mobile-friendly upgrades (Phase A)
   - Responsive layout shell
   - Better typography/tap targets
   - Sidebar + table/form helpers
   ========================================================= */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #000000;
}

img {
  max-width: 100%;
  height: auto;
}

.layout-table {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border-collapse: collapse;
}



/* Wide shell used on Student Menu / Activity pages */
.layout-table-wide{ max-width: 1100px; }
.layout-left { width: 240px; vertical-align: top; }
.layout-gutter { width: 24px; }
.layout-main { vertical-align: top; }

.top-divider { background: #CCCCCC; }

.home-main {
  padding: 18px 12px;
}

.home-title { text-align: center; }

.home-spacer { height: 18px; }

.home-intro { text-align: center; }

.home-actions {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.cta-button {
	font-family: Arial, Helvetica, sans-serif;
  display: inline-block;
  text-decoration: none;
  background: #003399;
  color: #ffffff !important;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  min-width: 260px;
  text-align: center;
}

.cta-button:visited { color: #ffffff !important; }
.cta-button:hover { opacity: 0.92; }

/* Sidebar (left margin) */
.leftnav {
  width: 215px;
  border: 1px solid #006699;
}

.leftnav a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
}

.leftnav a:hover { background: #eef3ff; }

/* Touch-friendly defaults */
input, select, textarea, button {
  font-size: 16px;
}

input[type="button"], input[type="submit"], button {
  min-height: 44px;
}

/* Mobile: stack sidebar + content */
@media (max-width: 768px) {

  /* Only stack the OUTER 3-column layout table.
     Use child selectors so nested data tables keep normal table layout. */
  .layout-table{
    width: 100% !important;
  }

  .layout-table > tbody,
  .layout-table > tbody > tr,
  .layout-table > tbody > tr > td {
    display: block;
    width: 100% !important;
  }
  .layout-gutter { display: none !important; }

  .layout-left { margin-bottom: 16px; }

  .leftnav {
    width: 100%;
    max-width: none;
  }

  /* override old nowrap/spacing issues */
  .leftnav td { white-space: normal !important; }

  .pageheader { font-size: 22px; }

  .home-main { padding: 14px 10px; }

  .cta-button {
    width: 100%;
    max-width: 420px;
    min-width: 0;
  }
}


/* ===== Reusable patterns for other pages (forms + tables) ===== */

/* Wrap wide tables so they scroll on mobile instead of breaking layout */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Optional: make tables behave nicely when they can shrink */
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

/* Two-column label/input form rows that stack on mobile */
.form-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 10px;
  margin-bottom: 12px;
  align-items: center;
}

/* Auto-added: horizontal scroller used by page JS (wraps overflowing tables) */
.table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll > table{
  border-collapse: collapse;
  width: max-content;
  min-width: var(--scroll-min-width, 100%);
}


.form-row label { font-weight: 700; }

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
}

@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; }
}

/* For pages with lots of action links (Edit | Delete | View), give spacing */
.action-links a {
  display: inline-block;
  padding: 8px 10px;
  margin: 2px 4px 2px 0;
  border-radius: 8px;
  background: #eef3ff;
  text-decoration: none;
}


/* ===== Header (responsive replacement for table-based header.asp) ===== */
.site-header {
  padding: 10px 12px;
}

.site-header-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.site-header-block {
  white-space: normal;
}

.site-header-logo {
  margin-left: 0;
}

.site-header-logo img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 85px;
}

@media (max-width: 768px) {
  .site-header-grid {
    flex-direction: column;
    align-items: center;
  }

  .site-header-logo {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }

  .site-header-logo img {
    max-height: none;
    width: 100%;
    height: auto;
  }

  .site-header .smallheader {
    font-size: 14px;
    line-height: 18px;
  }
}

/* ===== Left navigation: dropdown on mobile (select), normal sidebar on desktop ===== */
.sideNavMobile { display: none; border: 1px solid #006699; border-radius: 10px; overflow: hidden; background: #ffffff; }
.sideNavMobileHeader { padding: 12px 14px; background: #003399; color: #ffffff; font-weight: 700; }
.sideNavSelect { width: 100%; padding: 12px 14px; border: 0; font-size: 16px; }

@media (max-width: 768px) {
  .sideNavMobile { display: block; }
  .sideNavDesktop { display: none; }
}

@media (min-width: 769px) {
  .sideNavMobile { display: none; }
  .sideNavDesktop { display: block; }
}

/* ===== Left margin spacing tweak (tighter line spacing) ===== */
/* Reduce vertical spacing between items in the left navigation. */
.sideNavDesktop .leftnav a {
  padding: 4px 10px;
  line-height: 16px;
}

/* Override the legacy "plusspace" class inside the nav only (keeps the rest of the site unchanged). */
.sideNavDesktop .leftnav td.style12plusspace {
  line-height: 16px;
}


/* ===== Mobile hamburger + off-canvas left navigation ===== */

/* Hamburger button (small square icon) */
.menu-toggle{
  display:none;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid #CCCCCC;
  border-radius:6px;
  background:#ffffff;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.menu-toggle-bars{
  position:relative;
  display:block;
  width:18px;
  height:2px;
  background:#003399;
}
.menu-toggle-bars:before,
.menu-toggle-bars:after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:#003399;
}
.menu-toggle-bars:before{ top:-6px; }
.menu-toggle-bars:after{ top:6px; }

/* Off-canvas drawer defaults (desktop: normal sidebar) */
.side-drawer{
  position:static;
}

/* Close button inside drawer (only visible on mobile) */
.drawer-close{
  display:none;
  border:0;
  background:transparent;
  font-size:28px;
  line-height:28px;
  cursor:pointer;
  padding:6px 10px;
  margin:0 0 6px 0;
}

.side-drawer-overlay{
  display:none; /* becomes visible on mobile when [hidden] removed */
}

@media (max-width: 768px){
  /* Show hamburger in header */
  .menu-toggle{ display:inline-flex; }

  /* Let logo and hamburger sit on one line */
  .site-header-grid{
    justify-content:flex-start;
    gap:10px;
  }
  .site-header-logo{
    width:auto;
    flex:1 1 auto;
  }
  .site-header-logo img{
    max-width: 260px; /* prevents logo from forcing overflow */
    width:100%;
    height:auto;
  }

  /* Off-canvas drawer */
  .side-drawer{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:280px;
    max-width:85vw;
    background:#ffffff;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
    transform:translateX(-105%);
    transition:transform 180ms ease;
    z-index:1000;
    padding:10px 10px 16px 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  }
  .side-drawer.is-open{ transform:translateX(0); }

  .drawer-close{
    display:inline-block;
    position:sticky;
    top:0;
    background:#ffffff;
    text-align:right;
    width:100%;
  }

  .side-drawer-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.35);
    z-index:999;
  }

  .side-drawer-overlay[hidden]{ display:none !important; }

  /* Prevent background scroll when menu is open */
  .drawer-open body{
    overflow:hidden;
  }

  /* Reclaim space: collapse left column and gutter widths on small screens */
  .layout-left{ width:0 !important; }
  .layout-gutter{ width:0 !important; }

  /* Make the main content feel full-width */
  .layout-table{ width:100% !important; }
}


/* ===== Fixes v8: hamburger position + ensure drawer visible on mobile ===== */
@media (max-width: 768px){
  /* Keep header in one row and center the logo */
  .site-header{ position: relative; }

  /* Override earlier mobile header rules that stacked items */
  .site-header-grid{
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    padding-left: 52px !important;   /* room for hamburger */
    padding-right: 52px !important;  /* keep logo visually centered */
  }

  /* Place hamburger as a small square in the upper-left of the header */
  .menu-toggle{
    display: inline-flex;
    position: absolute;
    left: 12px;
    top: 10px;
    z-index: 1101;
  }

  /* Center the logo and keep it from overflowing */
  .site-header-logo{
    width: 100% !important;
    text-align: center !important;
    margin-left: 0 !important;
  }
  .site-header-logo img{
    width: auto !important;
    max-width: min(260px, 90vw) !important;
    height: auto !important;
    max-height: none !important;
  }

  /* IMPORTANT: earlier CSS hid .sideNavDesktop on mobile (from the old dropdown approach).
     The off-canvas drawer *is* .sideNavDesktop, so force it back on. */
  .sideNavDesktop{ display: block !important; }
  .sideNavMobile{ display: none !important; }
}


/* Ensure page background stays white */
html, body { background: #ffffff !important; }

/* Drawer close button: keep ASCII and consistent */
.drawer-close{ font-family: Arial, sans-serif; }

/* ===== Conditional line breaks (default.asp) ===== */
br.mobile-only{ display: none; }
br.desktop-only{ display: inline; }

@media (max-width: 768px){
  br.mobile-only{ display: inline; }
  br.desktop-only{ display: none; }
}

/* --- Fix CTA button overflow on mobile --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }

.home-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;        /* allows wrap if needed */
  padding: 0 12px;        /* prevents edge-to-edge overflow */
}

.home-actions .cta-button{
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  padding: 12px 16px;
  text-align: center;
  white-space: normal;    /* allows text to wrap if needed */
}

/* On phones: stack buttons and make them fit the screen */
@media (max-width: 768px){
  .home-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .home-actions .cta-button{
    width: 100%;
  }
}

/* Mobile-only space above footer */
tr.footer-mobile-space { display: none; }

@media (max-width: 768px){
  tr.footer-mobile-space { display: table-row; }
}

/* =========================
   Shared 3-column layout helpers (mobile)
   Requires: td.layout-left / td.layout-gutter / td.layout-main in page tables
   ========================= */
@media (max-width: 768px){
  td.layout-left{
    width: 0 !important;
    padding: 0 !important;
  }
  td.layout-gutter{
    display: none !important;
    width: 0 !important;
  }
  td.layout-main{
    width: 100% !important;
    padding-left: 14px !important;   /* slightly narrower on mobile */
    padding-right: 14px !important;
  }
}

/* Tighten subhead spacing on Student Menu (mobile only) */
@media (max-width: 768px){
  .student-menu .pageheader3,
  .student-menu .pageheader3red{
    line-height: 20px;     /* reduces “air” below the text */
    margin-bottom: 6px;    /* controls spacing before buttons */
  }

  /* The longer red header often wraps; slightly smaller on phones */
  .student-menu .pageheader3red{
    font-size: 16px;
  }

  /* Ensure the button stack starts immediately */
  .student-menu .home-actions{
    margin-top: 0 !important;
  }
}

@media (max-width: 768px){
  .eval-field{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* Stop form fields from changing size on focus (mobile-safe) */
@media (max-width: 768px){
  *, *::before, *::after { box-sizing: border-box; }

  input, textarea, select{
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Ensure focus doesn’t change layout */
  input:focus, textarea:focus, select:focus{
    max-width: 100% !important;
    width: 100% !important;
    border-width: 1px !important;     /* prevents “border gets thicker” overflow */
    padding: 6px !important;          /* keep consistent if your CSS changes padding on focus */
    outline: 2px solid rgba(0,0,0,.25);
    outline-offset: 0;
  }
}

/* iOS: stop zoom-on-focus by ensuring >=16px font-size in form fields */
@media (max-width: 768px){
  input, textarea, select{
    font-size: 16px !important;
  }
}

/* ===== Make the Delete button red w/ white type ===== */
input[name="submitdelete"]{
  background:#cc0000 !important;
  color:#ffffff !important;
  border:1px solid #990000 !important;
  border-radius:12px;
  padding:8px 16px;
  font-weight:700;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}

input[name="submitdelete"]:hover{
  opacity:0.92;
}

/* =========================
   Popup / Overlay formatting
   ========================= */

/* Side drawer overlay (shows when the [hidden] attribute is removed) */
.side-drawer-overlay[hidden] { display:none !important; }
.side-drawer-overlay:not([hidden]){
  display:block !important;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index: 999;
}

/* PLEASE WAIT / LOADING popups:
   They are toggled via inline style="display: none" -> "display: block"
   This CSS keeps them hidden when display:none, and makes them a centered modal when shown.
*/
.PleaseWaitDiv,
.LoadingDiv{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,0.35);
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:16px;
  box-sizing:border-box;
}

/* When inline style contains display:none, force them hidden */
.PleaseWaitDiv[style*="display: none"],
.LoadingDiv[style*="display: none"]{
  display:none !important;
}

/* Constrain the old fixed-width tables so they fit on mobile */
.PleaseWaitDiv > table,
.LoadingDiv > table{
  width: min(95vw, 720px) !important;
  max-width:95vw !important;
  box-sizing:border-box;
}

/* Prevent any cell content (long text/links) from blowing out width */
.PleaseWaitDiv td,
.LoadingDiv td{
  overflow-wrap:anywhere;
  word-break:break-word;
}


/* =========================================================
   LoadingDiv / PleaseWaitDiv popup:
   - Desktop keeps the hardcoded 300px height
   - Mobile overrides to "shrink-to-content" + top aligned
   ========================================================= */

/* MOBILE: reduce empty top/bottom space + let popup height fit content */
@media (max-width: 768px) {

  /* If your overlay uses flex centering, stop vertical centering on mobile */
  .LoadingDiv,
  .PleaseWaitDiv {
    align-items: flex-start !important;   /* top of screen */
    justify-content: center !important;   /* keep horizontally centered */
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* The popup "box" itself (covers either id) */
  #LoadingDiv,
  #PleaseWaitDiv {
    height: auto !important;              /* overrides inline height:300px */
    min-height: 0 !important;
    max-height: calc(100vh - 90px) !important; /* prevents going off-screen */
    overflow: auto !important;            /* scroll inside if needed */
  }
}







/* =========================================================
   PracticeScheduleAddEdit2: stop right-leak + center header/text/table (mobile)
   Root cause: legacy spacer.gif width attributes force a wider layout
   ========================================================= */
@media (max-width: 768px){

  /* never allow the *page* to scroll sideways */
  html, body{
    max-width: 100%;
    overflow-x: hidden !important;
  }

  /* spacer.gif width attributes are what typically force the layout wider */
  .layout-table-wide img[src*="spacer.gif"][width],
  .layout-main img[src*="spacer.gif"][width]{
    width: 1px !important;
    max-width: 1px !important;
  }

  /* keep the header/title from acting like a wide flex row */
  .page-title-row{
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .page-title-left{
    flex: 1 1 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }
  .page-title-center{
    flex: 1 1 100% !important;
    text-align: center !important;
  }
  .page-title-right{ display: none !important; }

  /* center the top headings + the �small table� under them */
  .pageheader, .pageheader2, .pageheader3{ text-align: center !important; }

  /* ensure tables can center instead of becoming left-aligned blocks */
  .layout-main table,
  .layout-main table[width],
  .layout-main table[style*="width"],
  .layout-main table[style*="WIDTH"]{
    display: table !important;
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}



.submit-actions .cta-button{
  width: 100%;
  max-width: 60%;
  min-width: 160px;
  box-sizing: border-box;
}
@media (max-width: 520px){
  .submit-actions .cta-button{ max-width: 100%; }
}