nav#navigation {
	min-height: auto;
	z-index: 99;
}
@media screen and (max-height: 1250px) { 
/* fixing atlas */
.main-footer.bg-inverse.fg-inverse.section-pt {
  padding-top: unset;
}


.content-box__content.d-block.m-0 {
  padding-top: 40px;
}
.content-block.content-block--page-header.d-flex.align-items-center.min-height-sm.bg-inverse.fg-inverse.gradient-bottom {
  height: 330px;
  min-height: unset;
}
}


.hub table td,
.hub table tr,
.hub table tbody td,
.hub table tbody tr {
	padding: 0px 0px 0px 0px;
	border-bottom: 0px;
	border-right: 0px;
}

.hub table td.main,
.hub table tbody td.main,
.hub table td.heavyDisplay,
.hub table tbody td.heavyDisplay,
.hub table td.hiDisplay,
.hub table tbody td.hiDisplay,
.hub table td.display,
.hub table tbody td.display,
.hub table td.hiHeavyDisplay,
.hub table tbody td.hiHeavyDisplay,
.hub table td.entry,
.hub table tbody td.entry,
.hub table td.label,
.hub table tbody td.label {
	/*! vertical-align: middle; */
	/*! align-content: center; */
	/*! display: block; */
	/*! align-content: center; */
	/*! margin: 0px; */
	/*! text-align: center; */
}

.hub table td.heavyDisplay,
.hub table tbody td.heavyDisplay,
.hub table td.hiHeavyDisplay,
.hub table tbody td.hiHeavyDisplay {
	font-weight: bold;
}

.hub table td.hiHeavyDisplay,
.hub table tbody td.hiHeavyDisplay,
.hub table td.hiDisplay,
.hub table tbody td.hiDisplay {
	font-weight: bold;
}

a.textbutton:link,
a.textbutton:visited,
a.textbutton:hover
 {
	color: #ffffff;
	text-decoration: none;
	font-style: italic;
	font-weight: bold;
	font-size: 14px;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
}

.textbutton {
        background: #9f143b none repeat scroll 0 0;
        color: #ffffff;
        font-size: 16px;
        padding: 10px 15px;
        line-height: 19px;
        font-family: 'Lato', sans-serif;
        font-weight: 700;
        border:none;

	min-width: 90px;

        display: inline-block;

        font-weight: normal;
        padding-left: 30px;
        padding-right: 30px;
        text-transform: uppercase;
        margin-bottom: 10px;
        margin-left: 12px;
        margin-top: 10px;
        margin-right: 12px;


        transition: background 0.3s ease;
}

.textbutton:hover {
        background: #881133;
        color: #ffffff;
}


.textbutton2 {
        font-weight: bold;
        font-size: 13px;
        color: #001a49;
}

.textbutton2:hover {
	text-decoration: none;
        color: #a61f38;
}


.hubMainTable .textbutton {
        width: 130px;
        text-align: center;
        margin-right: 40px;
	float: right;
}


.hub table {
	margin-bottom: 0px;
	background: transparent;
	border: 0px;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

.hub table#datalistBoxFreqAddress table.buttoninnertable {
  margin: 0;
} 

.hub table#invoiceTableContainer table.buttoninnertable {
  margin: 0;
} 
.two-col-left #main-sidebar-container section#main.mainwider {
	width: 100%;
}

td.buttonbox table tr td {
	text-align: center;
}

.main {
	vertical-align: middle;
}

.hub table tbody td.largeheading,
.hub table tbody td.largeheading {
	text-align: center;
	font-weight: bold;
	font-size: 24px;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	color: #001a49;
}

.hub table tbody td.heading {
	text-align: left;
	font-weight: bold;
	font-size: 20px;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	color: #001a49;
}

.hub table.contentTable > tbody > tr > td,
.hub table.singleContentTable > tbody > tr > td {
        /*! background: #f1f2f2 none repeat scroll 0 0; */
        margin-bottom: 23px;
        /*! padding: 15px 12px 4px; */
	/*! border: 5px solid white; */
        padding-right: 5px;
        padding-left: 5px;
}

.hub table.contentTable > tbody > tr > td {
	width: 50%;
}



.hub .autosuggestInput {
	width: 300px;
}

select {
	padding: 5px;
	background: #fff;
	border: 2px solid #efefef;
	color: #666;
}

.hub input, .hub textarea, .hub select {
	margin-top: 5px;
	margin-bottom: 5px;
}

.suburbStateEntry,
.suburbPostcodeEntry {
        padding-top: 9px;
}

.hub table td.listLeft0,
.hub table td.listLeft1,
.hub table td.listRight0,
.hub table td.listRight1,
.hub table td.listCenter0,
.hub table td.listCenter1 {
        font-size: 13px;
        padding-left: 4px;
        padding-right: 4px;

        padding-top: 4px;
        padding-bottom: 4px;

        white-space: nowrap;
}

.hub table td.listRight0 a,
.hub table td.listRight1 a {
	font-weight: bold;
        font-size: 13px;
        color: #001a49;
}

.hub table td.listRight0 a:hover,
.hub table td.listRight1 a:hover {
	text-decoration: none;
        color: #a61f38;
}

.hub table td.listHeader {
        background: #001a49;
        color: #fff;
        font-weight: bold;
        text-align: center;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 4px;
        padding-bottom: 4px;
        white-space: nowrap;
}

.dataGroupBox td.display img,
.dataGroupBox tbody td.display img {
	border: 0px;
	padding: 0px;
	background: transparent;
}

#attachmentDiv td {
  text-align: center;
}

.hub .hubMainTable {
  display: flex;
  margin: 0;
  /*! width: 50%; */
  justify-content: center;
  align-content: center;
  align-self: center;
}
 



/* some good styling thank joshua */




.login-container {
  width: 40%;
  margin: 0 auto;
}
.login-container table {
  --brand: #951637;
  --text:  #0b2149;
  --border:#e7ebf1;

  /* max-width: 820px; */
/*   max-width: 75%; */
/*     width: 75%; */
/*   margin: 48px auto; */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}


.login-container table .largeheading {
  display: none;
}

.login-container .dataGroupBox {
  max-width: 75%;
  width: 75%;
  display: inline-table;
}


.hub .contentTable {
  width: 85%;
  margin: 0px auto;

}

.login-container table .loginDataGroupBox,
.login-container table .dataGroupBox,
.login-container table .singleContentTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.login-container table .loginDataGroupBox tr {
  display: block;
  margin: 0 0 22px 0;
}

.login-container table .loginDataGroupBox td.label,
.login-container table .loginDataGroupBox td.entry {
  display: block;
  width: 100%;
  padding: 0;
}

.login-container table .loginDataGroupBox td.label {
  font-size: 20px;
  text-align: start;
  font-weight: 600;
  padding-bottom: 8px;
}
.login-container table .loginDataGroupBox tr:first-of-type td.label::after,
.login-container table .loginDataGroupBox tr:nth-of-type(2) td.label::after {
  content: " *";
  color: var(--brand);
}

.login-container table .loginDataGroupBox tr:first-of-type td.label::after,
.login-container table .loginDataGroupBox tr:nth-of-type(3) td.label::after {
  content: " *";
  color: var(--brand);
}



/* ----- inputs ----- */
.login-container table input.entryTextLeft[type="text"],
.login-container table input.entryTextLeft[type="password"] {
  width: 100% !important;     /* override size="10" */
  box-sizing: border-box;
  height: 56px;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-size: 16px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.login-container table input.entryTextLeft:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}

.login-container table tr:not(:last-child) {
  border: none;
}
.login-container table .loginDataGroupBox .main { display: none; }

.login-container .buttontable .buttonbox:last-child { display: none; }

.login-container table {
  margin-top: 26px;
  margin-bottom: 10px;
  margin-right: 0px;
  margin-left: 0px;
}

.hub login-container .buttontable table  {
  margin-bottom: 40px;
}
.login-container table a.textbutton {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  padding: 22px 24px;
  color: #fff !important;
  background: var(--brand);
  border-radius: 0;
  box-shadow: none;
  transition: all 250ms ease-in-out;

/*   transition: filter .15s ease, transform .02s ease-in-out; */
  border-radius: 6px;
}

.login-container table a.textbutton::before {
/*   content: ""; */
  font-weight: 700;
  margin-right: 10px;
}

.login-container table a.textbutton:hover     {
  filter: brightness(0.92);
/*   scale: 1.1 */
  transform: scale(1.035);
/*   scale: 1.015; */
/*   transform: scale(1.01); */
/*     transform (0.2s ease ) */
}
.login-container table a.textbutton:active    { transform: translateY(1px); }
.login-container table a.textbutton:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 30%, transparent);
  outline-offset: 2px;
/*   scale: 1.1; */
}

.login-container .buttontable {
  max-width: 75%;
  width: 75%;
  margin: 0px auto;
  /*! margin-bottom: 90px; */
}


.login-container table  td,
.login-container table  th { padding: 0; }

.login-container table .textbutton {
    margin: unset;

}


.login-container table a.textbutton::before {
--icon-size: 0.7em;
  content: "";
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.00004 1C2.00004 0.734784 2.1054 0.48043 2.29293 0.292893C2.48047 0.105357 2.73482 0 3.00004 0H11C11.2653 0 11.5196 0.105357 11.7071 0.292893C11.8947 0.48043 12 0.734784 12 1V9C12 9.26522 11.8947 9.51957 11.7071 9.70711C11.5196 9.89464 11.2653 10 11 10C10.7348 10 10.4805 9.89464 10.2929 9.70711C10.1054 9.51957 10 9.26522 10 9V3.414L1.70704 11.707C1.51844 11.8892 1.26584 11.99 1.00364 11.9877C0.741443 11.9854 0.490631 11.8802 0.305223 11.6948C0.119815 11.5094 0.0146453 11.2586 0.0123669 10.9964C0.0100885 10.7342 0.110883 10.4816 0.293041 10.293L8.58604 2H3.00004C2.73482 2 2.48047 1.89464 2.29293 1.70711C2.1054 1.51957 2.00004 1.26522 2.00004 1Z' fill='white'/%3E%3C/svg%3E%0A") !important;
  mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.00004 1C2.00004 0.734784 2.1054 0.48043 2.29293 0.292893C2.48047 0.105357 2.73482 0 3.00004 0H11C11.2653 0 11.5196 0.105357 11.7071 0.292893C11.8947 0.48043 12 0.734784 12 1V9C12 9.26522 11.8947 9.51957 11.7071 9.70711C11.5196 9.89464 11.2653 10 11 10C10.7348 10 10.4805 9.89464 10.2929 9.70711C10.1054 9.51957 10 9.26522 10 9V3.414L1.70704 11.707C1.51844 11.8892 1.26584 11.99 1.00364 11.9877C0.741443 11.9854 0.490631 11.8802 0.305223 11.6948C0.119815 11.5094 0.0146453 11.2586 0.0123669 10.9964C0.0100885 10.7342 0.110883 10.4816 0.293041 10.293L8.58604 2H3.00004C2.73482 2 2.48047 1.89464 2.29293 1.70711C2.1054 1.51957 2.00004 1.26522 2.00004 1Z' fill='white'/%3E%3C/svg%3E%0A") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  width: var(--icon-size);
  height: var(--icon-size);
  background-color: var(--icon-color);
display: -webkit-inline-box;
}

.hub .login-container table.contentTable > tbody > tr > td, .hub table.singleContentTable > tbody > tr > td {
	background: unset;
}

.hub .textbutton {
  margin: 8px 50px 20px 24px;
  width: 160px;
}
.login-container{
  width: min(85dvw, 560px);
  margin-inline: auto;
  padding: var(--space-3);
}

.login-container .dataGroupBox,
.login-container .buttontable{
  width: 100% !important;
  max-width: none !important;
}

.hub .login-container .singleContentTable td{
  background: #fff;
/*   border: 1px solid var(--border); */
  border-radius: var(--radius);
  padding: var(--space-3) !important;
/*   box-shadow: 0 6px 16px rgba(11,33,73,.06); */
}

.login-container .singleContentTable {
  margin-top: 25px;
  margin-bottom: -40px;
}
.hub .login-container .singleContentTable td {
  border-top-width: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.login-container .singleContentTable tr td table:nth-child(1) {
  margin-top: 0px;
}
body:has(.errorText) .singleContentTable {
  margin-top: 10px;  
  margin-bottom: -40px;
}

.hub .hub:not(.login-container) .singleContentTable {
  width: 70vw;
  margin: auto;
}

.hub table:has(.dataListBox) {

  width: 45vw;
  margin: auto;

}

/* Brand tokens (same vibe as your login theme) */
.entry.hub {
  --brand:  #951637;
  --ink:    #ffffff;
  --text:   #0b2149;
  --border: #e7ebf1;
  --muted:  #eef2f7;
}

/* Target the four groups only */
.entry.hub .dataGroupJobBox,
.entry.hub .dataGroupServiceBox,
.entry.hub .dataGroupAddressBox {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(11,33,73,.06);
  overflow: hidden;        /* rounds the colored header corners */
  width: 100%;
  margin-block: 16px;
}

/* Branded header bar */
.entry.hub .dataGroupJobBox   .heading,
.entry.hub .dataGroupServiceBox .heading,
.entry.hub .dataGroupAddressBox .heading {
  border-radius: 4px;
  display: block;          /* header behaves like a block */
  background: var(--brand);
  color: var(--ink);
  font-weight: 700;
  font-size: 18px;
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 65%, transparent);
  margin: 0;
}

/* Inner layout: label above field, comfy spacing */
.entry.hub .dataGroupJobBox tr,
.entry.hub .dataGroupServiceBox tr,
.entry.hub .dataGroupAddressBox tr {
  display: block;
  padding: 10px 16px;
}

.entry.hub .dataGroupJobBox td,
.entry.hub .dataGroupServiceBox td,
.entry.hub .dataGroupAddressBox td {
  background: transparent;
  border: 0;
  padding: 0;              /* spacing handled by row */
}

.entry.hub .dataGroupJobBox td.label,
.entry.hub .dataGroupServiceBox td.label,
.entry.hub .dataGroupAddressBox td.label {
  display: block;
  text-align: left;
  font-weight: 600;
  margin: 6px 0 6px;
  color: var(--text);
}

.entry.hub .dataGroupJobBox td.entry,
.entry.hub .dataGroupServiceBox td.entry,
.entry.hub .dataGroupAddressBox td.entry,
.entry.hub .dataGroupJobBox td.heavyDisplay,
.entry.hub .dataGroupServiceBox td.heavyDisplay,
.entry.hub .dataGroupAddressBox td.heavyDisplay {
  display: block;
  margin: 0 0 8px 0;
}

/* Controls inside these four sections (keeps rest unchanged) */
.entry.hub .dataGroupJobBox input[type="text"],
.entry.hub .dataGroupServiceBox input[type="text"],
.entry.hub .dataGroupAddressBox input[type="text"],
.entry.hub .dataGroupBox input[type="text"],
.entry.hub .dataGroupJobBox textarea,
.entry.hub .dataGroupServiceBox textarea,
.entry.hub .dataGroupAddressBox textarea,
.entry.hub .dataGroupBox textarea,
.entry.hub .dataGroupJobBox select,
.entry.hub .dataGroupBox select,
.entry.hub .dataGroupServiceBox select,
.entry.hub .dataGroupAddressBox select {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.entry.hub .dataGroupJobBox textarea,
.entry.hub .dataGroupServiceBox textarea,
.entry.hub .dataGroupAddressBox textarea {
  min-height: 92px;
  resize: vertical;
}
.entry.hub .dataGroupJobBox input[type="text"]:focus,
.entry.hub .dataGroupServiceBox input[type="text"]:focus,
.entry.hub .dataGroupAddressBox input[type="text"]:focus,
.entry.hub .dataGroupBox input[type="text"]:focus,
.entry.hub .dataGroupJobBox textarea:focus,
.entry.hub .dataGroupServiceBox textarea:focus,
.entry.hub .dataGroupAddressBox textarea:focus,
.entry.hub .dataGroupBox textarea:focus,
.entry.hub .dataGroupJobBox select:focus,
.entry.hub .dataGroupServiceBox select:focus,
.entry.hub .dataGroupBox select:focus,
.entry.hub .dataGroupAddressBox select:focus {
  border-color: var(--brand);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}

/* Mobile gutters so the cards don’t hit the edges */
@media (max-width: 768px) {
  .hub .contentTable {
    width: 100%;
  }
  .entry.hub form { padding-inline: 14px; }
}
/* Stack the two content columns on small screens and remove gutters */
@media (max-width: 880px) {
  /* Turn the row into a block flow */
  .entry.hub table.contentTable,
  .entry.hub table.contentTable > tbody,
  .entry.hub table.contentTable > tbody > tr {
    display: block;
  }

  /* Each column becomes full-width */
  .entry.hub table.contentTable > tbody > tr > td {
    display: block;
    width: 100%;
    padding: 0;            /* the cards handle their own padding */
    border: 0;             /* kill desktop white borders/gutters */
    background: transparent;
    box-shadow: none;
    margin: 0 0 14px 0;    /* small gap between the two columns when stacked */
  }

  /* If you added a desktop divider, drop it on mobile */
  .entry.hub table.contentTable > tbody > tr > td + td {
    border-left: none;
  }
}

/* Make the four sections fill the width cleanly */
.entry.hub .dataGroupJobBox,
.entry.hub .dataGroupServiceBox,
.entry.hub .dataGroupAddressBox {
  width: 100%;
  margin: 12px 0;
}

/* Keep the branded header style you liked */
.entry.hub {
  --brand:  #951637;
  --ink:    #ffffff;
  --text:   #0b2149;
  --border: #e7ebf1;
}
.entry.hub .dataGroupJobBox .heading,
.entry.hub .dataGroupServiceBox .heading,
.entry.hub .dataGroupAddressBox .heading {
  display: block;
  background: #001847;
  color: var(--ink);
  font-weight: 700;
  font-size: 18px;
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 65%, transparent);
  margin: 0;
}


.entry.hub .dataGroupJobBox tr:has(.heading),
.entry.hub .dataGroupServiceBox tr:has(.heading),
.entry.hub .dataGroupAddressBox tr:has(.heading) {
  padding: 0;
}
/* Nice spacing inside those cards (labels above inputs) */
.entry.hub .dataGroupJobBox tr,
.entry.hub .dataGroupServiceBox tr,
.entry.hub .dataGroupAddressBox tr {
  display: block;
  padding: 10px 16px;
}
.entry.hub .dataGroupJobBox td,
.entry.hub .dataGroupServiceBox td,
.entry.hub .dataGroupAddressBox td {
  border: 0;
  padding: 0;
  background: transparent;
}
.entry.hub .dataGroupJobBox td.label,
.entry.hub .dataGroupServiceBox td.label,
.entry.hub .dataGroupAddressBox td.label {
  display: block;
  text-align: left;
  font-weight: 600;
  color: var(--text);
  margin: 6px 0 6px;
}
.entry.hub .dataGroupJobBox td.entry,
.entry.hub .dataGroupServiceBox td.entry,
.entry.hub .dataGroupAddressBox td.entry,
.entry.hub .dataGroupJobBox td.heavyDisplay,
.entry.hub .dataGroupServiceBox td.heavyDisplay,
.entry.hub .dataGroupAddressBox td.heavyDisplay {
  display: block;
  margin: 0 0 8px 0;
}

/* Inputs inside those four sections — consistent theme */
.entry.hub .dataGroupJobBox input[type="text"],
.entry.hub .dataGroupServiceBox input[type="text"],
.entry.hub .dataGroupAddressBox input[type="text"],
.entry.hub .dataGroupJobBox textarea,
.entry.hub .dataGroupServiceBox textarea,
.entry.hub .dataGroupAddressBox textarea,
.entry.hub .dataGroupJobBox select,
.entry.hub .dataGroupServiceBox select,
.entry.hub .dataGroupAddressBox select {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text);
}
.entry.hub .dataGroupAddressBox textarea { min-height: 92px; }
.entry.hub .dataGroupJobBox :is(input, textarea, select):focus,
.entry.hub .dataGroupServiceBox :is(input, textarea, select):focus,
.entry.hub .dataGroupAddressBox :is(input, textarea, select):focus {
  border-color: var(--brand);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}

/* Small screen gutters so cards don’t touch edges */
@media (max-width: 880px) {
  .entry.hub form { padding-inline: 14px; }
}
/* Booking page only */
.entry.hub .buttontable {
  width: auto;                 
  margin: 16px auto;           
  border: 0;
  background: transparent;
  margin-bottom: 38px;
}

/* Lay out the three button cells with flex so they center + wrap */
.entry.hub .buttontable > tbody > tr {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;                   /* space between buttons */
}

/* Each TD behaves like a flex item, no forced width */
.entry.hub td.buttonbox {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
}

.entry.hub a.textbutton {
  display: inline-block;       
  /* width: auto; */
  min-width: 170px;
  text-align: center;
  margin: 0;                   
}

@media (max-width: 480px) {
  .entry.hub td.buttonbox { flex: 1 1 160px; }  
  .entry.hub a.textbutton { width: 100%; }




/* Booking page button group: vertical layout */
.entry.hub .buttontable > tbody > tr {
  display: flex;
  flex-direction: column;   /* stack vertically */
  align-items: stretch;     
  gap: 12px;                
}

.entry.hub td.buttonbox {
  flex: 1 1 auto;
  width: 100%;
}

/* Buttons themselves */
.entry.hub a.textbutton {
  display: block;           /* full clickable width */
  width: 100%;
  min-width: unset;         /* allow shrinking */
  text-align: center;
  margin: 0;
}
}

.hub .singleContentTable .dataGroupBox {
  width: 35vw;
  margin: auto;
}


.hub .singleContentTable .dataGroupBox tr td.entry {
  display: block;
  width: 100%;
}


.hub .singleContentTable .dataGroupBox tr td.label {
  display: block;
  width: 100%;
}

/* Mobile: keep a real table with horizontal scroll (works no matter the column order) */
@media (max-width: 768px) {

  
  /* fix the tracking page stuff */
  .hub:has(.listFullPage) {
    width: fit-content;
    padding: unset;
    margin: auto;
  }

  .listFullPage .dataListOuter {display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #datalistBoxFreqAddress {display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #invoiceTableContainer {display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* table sizing for scroll */
  .listFullPage .dataListBox {
    width: max-content;          /* size to content so it can scroll */
    min-width: 960px;            /* adjust if you want */
    border-collapse: separate;
    border-spacing: 0;
  }

  /* spacing and wrapping so long values don’t explode layout */
  .listFullPage .dataListBox td,
  .listFullPage .dataListBox .listHeader {
    padding: 10px 12px;
    white-space: nowrap;         /* keep columns compact; users can scroll */
  }
.hub table:has(.dataListBox) {

  width: 95vw;
  margin: auto;

}
.hub .singleContentTable .dataGroupBox {
  width: 85vw;
}


  /* sticky header row while scrolling vertically */
  .listFullPage .dataListBox .listHeader {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #001a49;
    color: #fff;
  }

  /* row separators (optional) */
  .listFullPage .dataListBox tr + tr td { border-top: 1px solid #f0f2f5; }

  td.label:has(> #mapview:first-child) {
    margin-bottom: 10px;
    padding-right: 0px;
  }

  #mapview {
    width: auto !important;
  }
  
  #datalistBoxFreqAddress {
  width: 95vw;
  border: blue;
  margin: auto;
}


 #invoiceTableContainer {
  width: 95vw;
  border: blue;
  /* margin: auto; */
}

#S0_searchPostcode {
  display: none;
}
}


.hub table tr td.label {
  /* width: 120px;
  height: 28px;
  text-align: right;
  padding-right: 10px; */
  display: block;
  width: 100%;
  margin: 0 0 14 0;
  border-left: none;
}








/* Inner tables follow the form width */
.entry.hub .hubMainTable { width: 100%; border-collapse: separate; border-spacing: 0; }
.entry.hub .hubMainTable > tbody > tr > td { padding: 0; }

.entry.hub .hubMainTable .largeheading {
  text-align: center;
  font-weight: 800;
  font-size: 26px;  padding: 0 0 12px;
}

/* Each menu row (button + description) */


/*  */
.entry.hub .hubMainTable tr[class$="MainMenu"] td {
  padding: 12px 16px;
  vertical-align: middle;
}


/* nice divider */
.entry.hub .hubMainTable tr[class$="MainMenu"] + tr[class$="MainMenu"]  {
  border-top: 1px solid var(--border);  
}



.entry.hub .hubMainTable .textbutton {
  padding: 12px 18px;
  border-radius: 6px;
  background: var(--brand);
  font-weight: 700;
  letter-spacing: .3px;
}

.entry.hub .hubMainTable td.main {
  font-weight: 600;
}



/* Client Services Screen */
@media (max-width: 640px) {
  .entry.hub form#theForm {
    inline-size: 92vw;
    margin: 24px auto;
    padding: 16px;
    background: transparent;   /* use page bg on mobile if you prefer */
    border: 0;
    box-shadow: none;
  }

  .entry.hub .hubMainTable tr[class$="MainMenu"] td:first-child,
  .entry.hub .hubMainTable td.main {
    display: block;            /* stack button over description */
    width: auto;
    text-align: center;
  }
  .entry.hub .hubMainTable td.main { padding-top: 6px; }
  .entry.hub .hubMainTable .textbutton { width: 100%; }

}




@media (max-width: 640px) {
  .listpriority1 {
    display: none;
  }
}



@media (max-width: 840px) {

  .listpriority2 {
    display: none;
  }
}

@media (max-width: 960px) {
  .listpriority3 {
    display: none;
  }

  .listFullPage .dataListBox {
    min-width: unset;
  }

  #invoiceTableContainer,
  #datalistBoxFreqAddress,
  .hub table:has(.dataListBox) {
    width: unset;
  }
}





.entry.hub .login-container td.buttonbox {

	width: 100%;
}


.entry.hub .login-container .singleContentTable table {
}


img:is([sizes="auto" i],
[sizes^="auto," i]) {
  contain-intrinsic-size: 3000px 1500px 
}



/* Style the error container */
td[bgcolor="#ff0000"] {
  background: none !important; /* remove solid red background */
  padding: 0;
}

.errorText {
  display: inline-block;
  background: var(--brand);          
  color: white;
  border: 1px solid #f5c2c7;   
  border-radius: 6px;          
  padding: 16px 20px;
  margin: 20px auto;
  margin-top: 0px;
  margin-bottom: 0px;
  max-width: 561px;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* subtle shadow */
}

.errorText::before {
  content: "⚠ ";
  font-size: 18px;
}
@media print {
  /* Hide non-essential UI */
  #header,
  #footer,
  #nav,
  footer,
  header,
  main,
  #main,
  .main,
  .dataGroupBox .buttontable,
  button,
  .buttontable,
  .hub #actionButtons,
  .hub #controls {
    display: none !important;
  }

  /* Page & content reset */
  body, #bookingdetailpagecontent {
    background: white !important;
    box-shadow: none !important;
    border-radius: 0;
    margin: 0;
    padding: 0;
    color: #000;
  }

  @page {
    size: A4;
    margin: 10mm 12mm;
  }

  * {
    font-size: 10pt !important;
    line-height: 1.3;
    color: #000 !important;
  }

  /* Table layout */
  .dataGroupBox {
    width: 100%;
    border-collapse: collapse !important;
    margin-bottom: 10px;
  }

  .dataGroupBox td,
  .dataGroupBox th {
    padding: 4px 6px !important;
    border: none !important;
    vertical-align: top;
  }

  .dataGroupBox .heading {
    font-weight: 700;
    font-size: 11pt !important;
    padding-top: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #aaa !important;
    text-align: left;
  }

  .dataGroupBox td.label {
    font-weight: 600;
    width: 140px;
    color: #333 !important;
    white-space: nowrap;
  }

  .dataGroupBox td.display,
  .dataGroupBox td.hiDisplay {
    text-align: left !important;
    color: #000;
  }

  /* ✅ Fix image sizing */
  #bookingdetailpagecontent img {
    display: inline-block !important;
    object-fit: contain !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
  }

  /* Specific tuning for signatures/logos */
  #bookingdetailpagecontent img[alt*="Signature"],
  #bookingdetailpagecontent img[src*="sign"],
  #bookingdetailpagecontent img[src*="logo"] {
    height: 60px !important;          /* set a readable signature height */
    max-height: 80px !important;
    width: auto !important;
  }

  /* Prevent page breaks inside sections */
  .section,
  .dataGroupBox,
  table,
  tr,
  td {
    page-break-inside: avoid !important;
  }

  .section {
    margin-bottom: 10px;
    display: block !important;
  }
}

#bookingdetailpagecontent {
  background: #fafafa;
  border-radius: 8px;
  padding: 30px 40px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  max-width: 70%;
  margin: 20px auto;
  font-family: "Inter", Arial, sans-serif;
  transition: all 0.25s ease;
}

#bookingdetailpagecontent .dataGroupBox {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

#bookingdetailpagecontent .dataGroupBox td,
#bookingdetailpagecontent .dataGroupBox th {
  padding: 6px 10px;
  vertical-align: top;
}

#bookingdetailpagecontent .heading {
  font-weight: 600;
  text-align: left;
  padding: 10px 0;
  font-size: 1.1em;
  border-bottom: 1px solid #ddd;
  margin-bottom: 8px;
}

#bookingdetailpagecontent .label {
  color: #555;
  font-weight: 500;
  width: 180px;
  white-space: nowrap;
}

#bookingdetailpagecontent .hiDisplay,
#bookingdetailpagecontent .display {
  color: #222;
  font-weight: 400;
  width: auto;
}

#bookingdetailpagecontent img {
  max-height: 160px;
  margin-top: 6px;
  float: left;
  margin-bottom: 10px;
  display: inline-block;
  transition: all 0.4s ease;
}
#bookingdetailpagecontent #mapview img {
  max-height: unset;
}
#bookingdetailpagecontent img:hover {
 scale: 1.04;
}

#bookingdetailpagecontent .section {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  flex-wrap: wrap;
  margin-top: 25px;
}

#bookingdetailpagecontent .section > div {
  flex: 1 1 48%;
  background: white;
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  min-width: 300px;
}

/* 📱 Mobile adjustments */
@media screen and (max-width: 900px) {
  #bookingdetailpagecontent {
    max-width: 95%;
    padding: 20px;
  }

  #bookingdetailpagecontent .section {
    flex-direction: column;
    gap: 15px;
  }

  #bookingdetailpagecontent .section > div {
    flex: 1 1 100%;
    min-width: 100%;
    padding: 14px 16px;
  }

  #bookingdetailpagecontent .label {
    width: 120px;
    font-size: 0.95em;
  }

  #bookingdetailpagecontent td,
  #bookingdetailpagecontent th {
    display: block;
    width: 100%;
  }

  #bookingdetailpagecontent .dataGroupBox td.label {
    font-weight: 600;
    margin-top: 6px;
  }
}

@media screen and (min-width: 1600px) {
  #bookingdetailpagecontent {
    max-width: 60%;
  }
  #bookingdetailpagecontent .label {
    width: 200px;
  }
}