/* ===========================
   WideFlex — CLEAN + NO TOP SPACE (Corrected)
   =========================== */

:root{
  --header-bg:#255150;
  --menu-bg:#1a3837;
  --menu-txt:#ffffff;
  --body-bg:#b6caca;
  --text:#1a1a1a;
  --footer-text:#ffffff;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--body-bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.4;
  height:100%;
}

/* Sticky footer structure */
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Let main/content grow so footer can sit at bottom */
main,
.content{
  flex:1 0 auto;
}

/* Wide centered container */
.container{
  max-width:1800px;
  margin:0 auto;
  padding:0 16px;
}

/* =======================
   Page width helpers (percent-based)
   Use: <div class="wide90"> ... </div>
   ======================= */

/* Default: mobile should be full width */
.wide30,.wide35,.wide40,.wide45,.wide50,.wide55,.wide60,.wide65,.wide70,.wide75,.wide80,.wide85,.wide90,.wide95,.wide100{
  width:100%;
  max-width:100%;
  margin:0 auto;
}

/* On desktop/tablet, apply the percentages */
@media (min-width:768px){
  .wide30{ width:30%; max-width:30%; }
  .wide35{ width:35%; max-width:35%; }
  .wide40{ width:40%; max-width:40%; }
  .wide45{ width:45%; max-width:45%; }
  .wide50{ width:50%; max-width:50%; }
  .wide55{ width:55%; max-width:55%; }
  .wide60{ width:60%; max-width:60%; }
  .wide65{ width:65%; max-width:65%; }
  .wide70{ width:70%; max-width:70%; }
  .wide75{ width:75%; max-width:75%; }
  .wide80{ width:80%; max-width:80%; }
  .wide85{ width:85%; max-width:85%; }
  .wide90{ width:90%; max-width:90%; }
  .wide95{ width:95%; max-width:95%; }
  .wide100{ width:100%; max-width:100%; }
}

/* =======================
   Header / Branding
   ======================= */
.site-header{ background:var(--header-bg); color:#fff; }

.header-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:100px;
  padding:12px 16px;
}

.logo{ height:64px; width:auto; display:block; }

.title-wrap{ text-align:left; }

.site-title{
  font-family:"Permanent Marker",sans-serif;
  font-size:28px;
  line-height:1.1;
}

.site-subtitle{ font-size:16px; opacity:0.9; }

/* =======================
   Menu (dropdown)
   ======================= */
.site-nav{
  background:var(--menu-bg);
  margin:0;
  padding:0;
}

.menu{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  justify-content:center;
  width:100%;
}

.menu > li{ position:relative; }

.menu a{
  display:block;
  padding:6px 16px;
  font-size:14px;
  color:var(--menu-txt);
  text-decoration:none;
  white-space:nowrap;
}

.menu a:hover,
.menu li:focus-within > a{
  background:rgba(255,255,255,0.08);
}

/* Submenus */
.submenu{
  display:none;
  position:absolute;
  left:0;
  top:100%;
  min-width:200px;
  margin:0;
  padding:6px 0;
  list-style:none;
  background:var(--menu-bg);
  border:1px solid rgba(255,255,255,0.15);
  z-index:1000;
}

.menu li:hover > .submenu,
.menu li:focus-within > .submenu{ display:block; }

.submenu li{ position:relative; }
.submenu .submenu{ top:0; left:100%; margin-left:1px; }
.submenu a{ padding:8px 14px; }

/* Dropdown arrows (modern browsers) */
.menu > li:has(.submenu) > a::after{
  content:" ▼";
  font-size:.7em;
  margin-left:4px;
}
.submenu > li:has(.submenu) > a::after{
  content:" ▶";
  font-size:.7em;
  margin-left:6px;
}

/* Small screens: wrap top-level menu */
@media (max-width:700px){
  .menu{ flex-wrap:wrap; }
}

/* =======================
   Content & Footer
   ======================= */
.content{
  margin:0 auto;
  padding:0;
}

/* Flush first item under menu */
.content > *:first-child,
main > *:first-child{
  margin-top:0 !important;
}

.site-footer{
  flex-shrink:0;
  margin-top:auto;

  text-align:center;
  padding:12px;
  background:var(--header-bg);
  font-size:14px;
  color:var(--footer-text);

  width:100vw;
  margin-left:calc(50% - 50vw);
}

.site-footer a{
  color:inherit;
  text-decoration:underline;
}
.site-footer a:hover{ opacity:0.85; }

/* =======================
   Script Panels
   ======================= */
.script-panel{
  border:1px solid #ccc;
  background:#fff;
  padding:0 16px 16px 16px;
  min-height:120px;
  overflow:auto;
}

.script-panel > :first-child{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* =======================
   Rows & Columns
   ======================= */
.wf-row{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin:16px 0;
}

.wf-row:first-child{ margin-top:0 !important; }

.wf-col{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-width:0;
}

.wf-1 .wf-col{ flex:1 1 100%; }
.wf-2 .wf-col{ flex:1 1 calc(50% - 8px); }
.wf-3 .wf-col{ flex:1 1 calc(33.333% - 11px); }

@media (max-width:1100px){
  .wf-3 .wf-col{ flex:1 1 calc(50% - 8px); }
}
@media (max-width:700px){
  .wf-2 .wf-col,
  .wf-3 .wf-col{ flex:1 1 100%; }
}

/* =======================
   Variable-split rows (2-up / 3-up)
   ======================= */
.wf-row-var2, .wf-row-var3{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin:16px 0;
}
.wf-row-var2 .wf-col,
.wf-row-var3 .wf-col{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-width:0;
}

.wf-row-var2{ --c1:50%; --c2:50%; }
.wf-row-var2 .wf-col:nth-child(1){ flex:0 0 var(--c1); max-width:var(--c1); }
.wf-row-var2 .wf-col:nth-child(2){ flex:0 0 var(--c2); max-width:var(--c2); }

.wf-row-var3{ --c1:33.333%; --c2:33.333%; --c3:33.333%; }
.wf-row-var3 .wf-col:nth-child(1){ flex:0 0 var(--c1); max-width:var(--c1); }
.wf-row-var3 .wf-col:nth-child(2){ flex:0 0 var(--c2); max-width:var(--c2); }
.wf-row-var3 .wf-col:nth-child(3){ flex:0 0 var(--c3); max-width:var(--c3); }

@media (max-width:700px){
  .wf-row-var2 .wf-col,
  .wf-row-var3 .wf-col{
    flex:0 0 100%;
    max-width:100%;
  }
}

/* =======================
   Page width presets (optional)
   ======================= */
.page-compact{ max-width:900px;  margin:0 auto; padding:0 16px; }
.page-medium{  max-width:1200px; margin:0 auto; padding:0 16px; }
.page-wide{    max-width:1400px; margin:0 auto; padding:0 16px; }
.page-full{    max-width:none;   margin:0;      padding:0 16px; }

/* =======================
   Anti-gap patch (end)
   ======================= */
.site-header, .site-nav { margin-bottom:0 !important; padding-bottom:0 !important; }
.site-nav + * { margin-top:0 !important; padding-top:0 !important; }

main, .content, .page-compact, .page-medium, .page-wide, .page-full{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* =======================
   Back to Top Button
   ======================= */
#backToTop{
  display:none;
  position:fixed;
  bottom:28px;
  right:28px;
  z-index:999;
  font-size:18px;
  background-color:var(--menu-bg);
  color:#fff;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:12px;
  padding:8px 12px;
  cursor:pointer;
  box-shadow:0 3px 6px rgba(0,0,0,0.25);
  transition:all 0.25s ease;
}
#backToTop:hover{
  background-color:var(--header-bg);
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(0,0,0,0.3);
}
#backToTop:active{
  transform:translateY(0);
  box-shadow:0 2px 5px rgba(0,0,0,0.2);
}
@media (max-width:600px){
  #backToTop{
    bottom:16px;
    right:16px;
    font-size:16px;
    padding:7px 10px;
    border-radius:10px;
    box-shadow:0 2px 5px rgba(0,0,0,0.2);
  }
}

/* =======================
   Caspio: Force search + results to align
   Goal: search is never wider than tabular
   ======================= */

/* 1) Everything in the DataPage must respect the parent width */
.cbForm,
.cbFormBlock,
.cbSearchPanel,
.cbSearchTable,
.cbResultSet,
.cbResultSetTable,
.cbResultSetContainer{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* 2) If results table is “too wide”, contain it instead of blowing out the page */
.cbResultSet,
.cbResultSetContainer{
  overflow-x:auto;
}

/* 3) Flatten odd left/right margins Caspio sometimes injects */
.cbSearchPanel,
.cbResultSet,
.cbResultSetContainer{
  margin-left:0 !important;
  margin-right:0 !important;
}
/* ===== FIX: make 95% helper work even if page uses wide950 ===== */
.wide95, .wide950{
  width:100%;
  max-width:100%;
  margin:0 auto;
}
@media (min-width:768px){
  .wide95, .wide950{
    width:95% !important;
    max-width:95% !important;
  }
}

/* ===== FIX: ensure Caspio never ignores the wrapper width ===== */
.wide95 [id^="caspio"], .wide950 [id^="caspio"],
.wide95 .cbForm,        .wide950 .cbForm,
.wide95 .cbSearchPanel, .wide950 .cbSearchPanel,
.wide95 .cbResultSet,   .wide950 .cbResultSet,
.wide95 .cbSearchTable, .wide950 .cbSearchTable,
.wide95 .cbResultSetTable, .wide950 .cbResultSetTable{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
/* ===== Caspio FULL-WIDTH INSIDE PAGE WIDTH ===== */
.cbForm,
.cbFormBlock,
.cbSearchPanel,
.cbSearchTable,
.cbResultSet,
.cbResultSetTable,
.cbResultSetContainer,
.cbResultSetHeader{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* Contain wide tables instead of shrinking the search */
.cbResultSetContainer{
  overflow-x:auto;
}
					<a class="auto-style6"
   href="#"
   onclick="window.open('https://tnsm.us/customers/contact.html',
                        'mywindow',
                        'menubar=1,resizable=1,width=600,height=700')"
   style="border-style:none;
          border-color:inherit;
          border-width:medium;
          background-color:#1a3837;
          color:white;
          padding:4px 37px;
          font-size:14px;
          font-family:Verdana, Arial, sans-serif;
          border-radius:6px;
          cursor:pointer;
          text-decoration:none;
          display:inline-block;
          white-space:nowrap;">
  Contact Us
</a>