body { background-color: #ECFFF1; }
  H2   { color: #007D00; }
  P    { text-indent: 15px; }
/* ========================================================================== */
  UL.no-bullets 
  {
    list-style-type: none;
    margin:          0;
    padding:         18px;
  }
  .sect { margin: 0px 0px 0px 10px; }
  .rt
  {
    text-align: right;
    padding:    20px;
  }
  .right-div 
  {
    width:            fit-content;
    margin-left:      auto;
    background-color: #E6EFF7;
    padding:          7px 12px;
    border-radius:    5px;
    border:           1px green solid;
  }
  .c 
  {
    margin:           auto;
    width:            400px;
    background-color: lightblue; 
  }
  .a
  {
    color: red;
  }
  .DivEr
  {
    border:           1px outset red;
    background-color: #FFCECE;
    padding:          12px;
  }
  .err
  {
    background-color: #FF7276;
  }
  .b-submit-1 
  {
    background-color: #87F599;      /* mid-light green */
    padding:          6px 15px;
    border:           1px solid black;
    cursor:           pointer;
    font-size:        xx-large;
}  
  .b-submit-2 
  {
    background-color: #C0CAF0;      /* light off-blue */
    padding:          6px 15px;
    border:           1px solid black;
    cursor:           pointer;
    font-size:        x-large;
}  
  .pad
  {
    padding: 10px;
  }
  .bdr
  {
    border-style: solid;
    border-width: 5px;
  }
  .tbl_SU
  {
    border:  none;
    padding: 6px;
  }
  .tbl {
    border-collapse: collapse;
    width:           60%;
    margin-top:      20px;
  }
  TH
  {
    border:     1px solid #aaa;
    padding:    8px 12px;
    text-align: center;
  }
  .td1 
  {
    border:     1px solid #aaa;
    padding:    8px 12px;
    text-align: center;
  }
  TH 
  {
    background-color: #f2f2f2;
  }
  .form-group 
  {
    margin-bottom: 15px;
  }
 .entry                                                      /* used in SignUp */
  {
    border :1px;
  }
  .SU_th, .SU_td                                            /* used in SignUp */
  {
    border:  none;
    padding: 6px;
  }
.table-container                     /* used for student's session hx display */
{
  width:    600px;
  height:   300px;
  overflow: auto;
  border:   1px solid black;
}
th, td                               /* used for student's session hx display */
{
  border:     1px solid black;
  padding:    8px;
  text-align: left;
}
th                                   /* used for student's session hx display */
{
  background-color: #4CAF50;
  color:            white;
  position:         sticky;
  top:              0;
}
/* ========================================================================== */
/* ===================  Header styling:  ==================================== */
/* ========================================================================== */
  /* ---------- full-width bar with fixed height ---------------------------- */
  .HBar 
  {
    width:           100vw;                    /* stretches across the screen */
    height:          111px;                /* fixed height - change as needed */
    box-sizing:      border-box;
    display:         flex;
    flex-direction:  row;                         /* Ensure horizontal layout */
    align-items:     center;                /* vertical centering of children */
    justify-content: center;               /* center the group if extra space */
    gap:             1rem;                           /* space between columns */
    background-color:lightblue;                 /* subtle background (optional) */   /* ***** */
    color:           black;
    padding:         0 16px;
    border:          1px green solid; /*  *****  */
  }
  /* ------- left and right text columns - share remaining space ------------ */
  .HSide
  {
    flex:            1 1 0%;
    min-width:       0;                       /* allows text to truncate/wrap */
    text-align:      center;        /* center text horizontally within column */
    display:         flex;
    flex-direction:  column;
    align-items:     center;          /* vertical centering inside the column */
    justify-content: center;
    padding:         0 8px;
    font-family:     Arial;
  }
  /* ----------- center column contains the image only ---------------------- */
  .HCenter 
  {
    height:          100%;
    flex:            0 0 auto;                 /* size to content (the image) */
    display:         flex;
    align-items:     center;
    justify-content: center;
  }
  /* ----- keep the image sized to fit the bar but preserve aspect ratio ---- */
  .HCenter img 
  {
    max-height: 95%;                        /* scale relative to bar's height */
    height:     auto;
    width:      auto;
    max-width:  100%;
    display:    block;
    object-fit: contain;
  }
  /* ---------- small screens: wrap so text doesn't get squished  ----------- */
  @media (max-width: 520px) 
  {
    .HBar 
    {
      flex-direction: column;
      height:         auto;                         /* let it grow vertically */
      padding:        12px;
      gap:            12px;
    }
    .HSide { width: 100%; }
  }
/* =========  end of Header styling  ======================================== */

/* ========================================================================== */
/* ===================  Census grid styling:  =============================== */
/* ========================================================================== */
.census-grid-table 
{
  display:               grid;
  grid-template-columns: 145px  155px 76px ;
  gap:                   4px;
  background-color:      white;
}
.census-grid-table div 
{
  background-color: lightblue;
  padding:          5px;
}