/*orthCalcss*/

/* ==========================================================================
   DESKTOP DEFAULT LAYOUT (For screens LARGER than 768px)
   ========================================================================== */

body {
  background-color: gold; 
}

/* Ensure the main layout table is structured normally on desktop */
table#table1 {
  display: table !important; 
  width: 99% !important;
  margin: 0 auto;
}

table#table1 > tbody > tr,
table#table1 > tr {
  display: table-row !important;
}

/* CRITICAL FIX: Only target the immediate structural layout cells, 
   leaving the internal calendar script cells entirely alone */
table#table1 > tbody > tr > td,
table#table1 > tr > td {
  display: table-cell !important;
}


/* ==========================================================================
   MOBILE OPTIMIZATION (Now only kicks in at 480px and below)
   ========================================================================== */
@media screen and (max-width: 480px) {

  /* NEW RESET RULE: Strip out rogue table spacing causing the ghost column */
  table#table1, 
  table#table1 tr, 
  table#table1 td {
    margin: 0 !important;
    padding: 0 !important;
    border-collapse: collapse !important;
  }
  
  /* 1. Force ONLY the main master table to take up full width */
  table#table1 {
    display: block !important;
    width: 100% !important;
  }
  
  /* 2. Force the row to behave like a flex container and stack vertically */
  table#table1 > tbody > tr, 
  table#table1 > tr {
    display: flex !important;
    flex-direction: column-reverse !important; 
    align-items: center !important;
  }
  
  /* 3. Style the Calendar Column (Now on Top) */
  table#table1 > tbody > tr > td[width="200"],
  table#table1 > tr > td[width="200"] {
    display: block !important;
    width: 100% !important;
    max-width: 240px;             
    margin: 0 auto 20px auto !important; 
  }

  /* 4. Style the Information Text Column (Now on the Bottom) */
  table#table1 > tbody > tr > td:not([width="200"]),
  table#table1 > tr > td:not([width="200"]) {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 15px !important; 
    text-align: center !important;        
  }
}