/* 
  Responsive revision of foodpro_web_ina_dev.css
  -----------------------------------------------
  This file converts fixed point values to relative rem values and implements a scalable 
  base font size using media queries. The conversion assumes a baseline where 12pt ≈ 1rem.
  Adjustments and fine-tuning may be required for perfect pixel-to-rem conversion.

  Base conversion reference (approximate):
    10pt  ≈ 0.83rem
    12pt  ≈ 1rem
    14pt  ≈ 1.17rem
    17pt  ≈ 1.42rem
    18pt  ≈ 1.5rem
    22pt  ≈ 1.83rem
    24pt  ≈ 2rem
    32pt  ≈ 2.67rem
    etc.
  
  Responsive base font sizing:
    The html element’s font-size scales with the viewport using media queries,
    thereby making all rem-based sizes reactive.
*/

/* Base responsive font size */
html {
  font-size: 100%; /* baseline (1rem ≈ 12pt as per our conversion) */
}

@media screen and (min-width: 500px) {
  html { font-size: 110%; }
}

@media screen and (min-width: 800px) {
  html { font-size: 120%; }
}

@media screen and (min-width: 1000px) {
  html { font-size: 130%; }
}

@media screen and (min-width: 1300px) {
  html { font-size: 140%; }
}

/* =============================
   allergenfilter.aspx Styles
   ============================= */
div.allergenfilterheader {
  font-size: 1.5rem;           /* 18pt */
  font-family: Calibri, sans-serif;
  font-style: italic;
  color: #00008B;
  text-align: left;
}

div.allergenfilterdesc {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: left;
}

div.allergenfilterselect {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  color: #00008B;
  text-align: left;
}

div.allergenfilteroptions {
  font-size: 1rem;             /* 12pt */
  font-family: Calibri, sans-serif;
  color: #00008B;
  text-align: left;
}

div.allergentitle {
  font-size: 1rem;             /* 12pt */
  font-family: Calibri, sans-serif;
  font-weight: normal;
  color: #00008B;
  text-align: left;
}

/* =============================
   allergenfilterinc.aspx Styles
   ============================= */
span.allergenfilterinclinks {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  text-align: left;
  color: #00008B;
}

/* =============================
   Date.aspx Styles
   ============================= */
td.datebody {
  background: #13294b;
  border-radius: 0.63rem;      /* 10px approximated as 0.63rem (if 16px = 1rem) */
  overflow: hidden;
  border: 0.063rem solid #ddd; /* 1px approx */
  padding: 0.63rem;           /* 10px approx */
  display: inline-block;
  width: auto;
}

div.dateselectheader {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: white;
  text-align: left;
}

span.datechevrons {
  font-size: 0.67rem;          /* 8pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
}

span.dateselections {
  font-size: 0.67rem;          /* 8pt */
  font-family: Calibri, sans-serif;
  color: black;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

table.datelegendcontainer {
  padding: 0;
  border-spacing: 0;
  width: 100%;
  border-style: solid;
  border-width: 0.125rem;      /* 2px */
  background-color: white;
  border-color: deepskyblue;
}

div.datelegendheader {
  font-size: 1rem;             /* 12pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
  text-align: center;
}

span.datelegendicons {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
}

span.datelegendspecialchars {
  font-size: 0.83rem;          /* 10pt */
  font-family: wingdings;
  font-weight: bold;
  color: black;
}

span.datelegendtextonly {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
}

/* =============================
   Head.aspx Styles
   ============================= */
img.headerimage {
  width: 100%;
}

td.headbody {
  background-image: url('background.gif');
}

table.headcontainer {
  padding: 0;
  border-spacing: 0;
  width: 100%;
}

div.headsysname {
  font-size: 2rem;             /* 24pt */
  font-family: "Franklin Gothic Condensed", Helvetica, Arial, "Nimbus Sans L", sans-serif;
  color: black;
  text-align: center;
}

div.headtitle {
  font-size: 1.5rem;           /* 18pt */
  font-family: "Franklin Gothic Condensed", Helvetica, Arial, "Nimbus Sans L", sans-serif;
  color: black;
  text-align: center;
}

div.headlocation {
  font-size: 1rem;             /* 12pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
  text-align: center;
}

/* =============================
   Label.aspx Styles
   ============================= */
body.labelbody {
  background: lightyellow;
}

div.nutfactsheader {
  font-size: 2.67rem;          /* 32pt */
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: black;
  text-align: left;
}

div.nutfactsservpercont {
  font-size: 1rem;             /* 12pt */
  font-family: Arial, sans-serif;
  color: black;
  text-align: left;
}

div.nutfactsservsize {
  font-size: 1.17rem;          /* 14pt */
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: black;
}

td.nutfactscalories {
  font-size: 1.42rem;          /* 17pt */
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: black;
}

td.nutfactscaloriesval {
  font-size: 2.67rem;          /* 33pt approx */
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: black;
}

span.amountperserving {
  font-size: 0.67rem;          /* 8pt */
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: black;
  text-align: left;
}

span.perdailyvalue {
  font-size: 0.67rem;          /* 8pt */
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: black;
  text-align: right;
}

span.nutfactstopnutrient {
  font-size: 1rem;             /* 12pt */
  font-family: Arial, sans-serif;
  color: black;
  text-align: left;
}

td.nutfactsdisclaimer {
  font-size: 0.67rem;          /* 8pt */
  font-family: Arial, sans-serif;
  color: black;
}

div.labelrecipe {
  font-size: 1.5rem;           /* 18pt */
  font-family: Calibri, sans-serif;
  color: #00008B;
  text-align: center;
}

div.labelnotavailable {
  font-size: 1rem;             /* 12pt */
  font-family: Calibri, sans-serif;
  font-style: italic;
  color: #0000FF;
  text-align: center;
}

div.labelnotes {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-style: italic;
  color: black;
  text-align: left;
}

div.labelfooter {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: left;
}

span.labelingredientscaption {
  font-size: 1.17rem;          /* 14pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
}

span.labelingredientsvalue {
  font-size: 1.17rem;          /* 14pt */
  font-family: Calibri, sans-serif;
  color: black;
}

span.labelallergenscaption {
  font-size: 1.17rem;          /* 14pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
}

span.labelallergensvalue {
  font-size: 1.17rem;          /* 14pt */
  font-family: Calibri, sans-serif;
  color: black;
}

span.labelprodinfocaption {
  font-size: 1.17rem;          /* 14pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
}

span.labelprodinfovalue {
  font-size: 1.17rem;          /* 14pt */
  font-family: Calibri, sans-serif;
  color: black;
}

span.labelwebcodescaption {
  font-size: 1.17rem;          /* 14pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
}

span.labelwebcodesvalue {
  font-size: 1.17rem;          /* 14pt */
  font-family: Calibri, sans-serif;
  color: black;
}

/* =============================
   Location.aspx Styles
   ============================= */
div.locationsysname {
  font-size: 1.17rem;          /* 14pt */
  font-family: "Franklin Gothic Condensed", Helvetica, Arial, "Nimbus Sans L", sans-serif;
  color: white;
  text-align: center;
}

@media screen and (min-width: 500px) {
  div.locationsysname {
    font-size: 1.17rem;        /* 14pt remains */
  }
}

@media screen and (min-width: 800px) {
  div.locationsysname {
    font-size: 1.83rem;        /* 22pt */
  }
}

@media screen and (min-width: 1000px) {
  div.locationsysname {
    font-size: 2.25rem;        /* 27pt */
  }
}

@media screen and (min-width: 1800px) {
  div.locationsysname {
    font-size: 2.92rem;        /* 35pt */
  }
}

div.locationtitle {
  font-size: 0.75rem;          /* 9pt */
  font-family: "Franklin Gothic Condensed", Helvetica, Arial, "Nimbus Sans L", sans-serif;
  color: white;
  text-align: center;
}

@media screen and (min-width: 500px) {
  div.locationtitle {
    font-size: 0.75rem;        /* remains 9pt */
  }
}

@media screen and (min-width: 800px) {
  div.locationtitle {
    font-size: 1rem;           /* 14pt */
  }
}

@media screen and (min-width: 1000px) {
  div.locationtitle {
    font-size: 1.5rem;         /* 18pt */
  }
}

@media screen and (min-width: 1300px) {
  div.locationtitle {
    font-size: 1.92rem;        /* 23pt */
  }
}

div.locationnuttiplink {
  font-size: 0.67rem;          /* 8pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: left;
}

div.locationselheader {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: #13294b;
  text-align: left;
}

@media screen and (min-width: 500px) {
  div.locationselheader {
    font-size: 0.83rem;
  }
}

@media screen and (min-width: 800px) {
  div.locationselheader {
    font-size: 1.17rem;        /* 14pt */
  }
}

@media screen and (min-width: 1000px) {
  div.locationselheader {
    font-size: 1.58rem;        /* 19pt */
  }
}

@media screen and (min-width: 1800px) {
  div.locationselheader {
    font-size: 1.92rem;        /* 23pt */
  }
}

div.mobiledisplay {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
  text-align: left;
}

div.usdatext {
  font-size: 0.5rem;           /* 6pt */
  font-family: Calibri, sans-serif;
  color: black;
  font-style: italic;
  text-align: center;
}

span.locationchoices {
  font-size: 0.67rem;          /* 8pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
}

@media screen and (min-width: 500px) {
  span.locationchoices {
    font-size: 0.67rem;
  }
}

@media screen and (min-width: 800px) {
  span.locationchoices {
    font-size: 1rem;           /* 12pt */
  }
}

@media screen and (min-width: 1000px) {
  span.locationchoices {
    font-size: 1.42rem;        /* 17pt */
  }
}

@media screen and (min-width: 1300px) {
  span.locationchoices {
    font-size: 1.75rem;        /* 21pt */
  }
}

span.locationheader {
  font-size: 0.92rem;          /* 11pt */
  font-family: Calibri, sans-serif;
  color: black;
}

td.locationchoices {
  text-align: left;
}

div.counterdisplay {
  font-size: 1rem;             /* 12pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
  text-align: center;
}

div.locationhomelink {
  font-size: 0.67rem;          /* 8pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  text-align: right;
}

@media screen and (min-width: 500px) {
  div.locationhomelink {
    font-size: 0.67rem;
  }
}

@media screen and (min-width: 800px) {
  div.locationhomelink {
    font-size: 1rem;           /* 12pt */
  }
}

@media screen and (min-width: 1000px) {
  div.locationhomelink {
    font-size: 1.42rem;        /* 17pt */
  }
}

@media screen and (min-width: 1300px) {
  div.locationhomelink {
    font-size: 1.75rem;        /* 21pt */
  }
}

span.locationtipspacer {
  font-size: 0.67rem;          /* 8pt */
}

span.locationmyplatespacer {
  font-size: 0.83rem;          /* 10pt */
}

table.locationbanner {
  border-style: none;
  width: 56.25rem;             /* 900px approximated if 16px=1rem */
  padding: 0;
  border-collapse: collapse;
}

table.contentscontainer {
  background-color: lightyellow;
  padding: 0.125rem;           /* 2px */
  border-style: solid;
  border-width: 0.063rem;      /* 1px */
  height: 12.5rem;             /* 200px */
  width: 100%;
  -moz-border-radius: 1.25rem; /* 20px approximated */
}

.rounded-top-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.63rem 0.63rem 0 0;  /* 10px rounded top */
  overflow: hidden;
}

.rounded-bottom-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0 0 0.63rem 0.63rem;  /* 10px rounded bottom */
  overflow: hidden;
}

table.searchcontainer {
  padding: 0.125rem;           /* 2px */
  border-style: none;
  border-width: 0.063rem;      /* 1px */
  width: 100%;
}

table.tipcontainer {
  background-color: lightyellow;
  padding: 0.125rem;           /* 2px */
  border-style: solid;
  border-width: 0.063rem;      /* 1px */
  width: 10.63rem;             /* 170px approx */
  height: 7.81rem;             /* 125px approx */
}

/* =============================
   shortmenu.aspx Styles
   ============================= */
body.shortmenubody {
  background-image: url('background.gif');
}

div.shortmenutitle {
  font-size: 0.92rem;          /* 14pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  background-color: #13294b;
  color: white;
  text-align: center;
  border-radius: 0.63rem;
  overflow: hidden;
  border: 0.063rem solid #ddd;
  padding: 0.63rem;
}

div.shortmenuheader {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
  text-align: center;
}

div.shortmenuinstructs {
  font-size: 1rem;             /* 12pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
  text-align: center;
}

div.shortmenumeals {
  font-size: 1.2rem;          /* 14pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: #13294b;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}

div.shortmenucats {
  font-size: 1rem;          /* 12pt */
  font-family: Calibri, sans-serif;
  font-style: italic;
  text-align: left;
  color: #1e4f92;
}

div.shortmenurecipes {
  font-size: 0.92rem;          /* 11pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  text-align: left;
}

div.shortmenuprices {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  text-align: left;
}

div.shortmenuproddesc {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  text-align: left;
  font-style: italic;
  color: black;
}

div.shortmenufooter {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  color: #00008B;
  font-weight: bold;
  text-align: center;
}

span.shortmenuspecialchars {
  font-size: 0.83rem;          /* 10pt */
  font-weight: bold;
  font-family: WingDings;
}

/* =============================
   Myplate_Info.aspx Styles
   ============================= */
div.myplateinfoimage {
  text-align: center;
}

div.myplateinfotext {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: right;
}

div.myplateinfolinks {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: center;
}

div.myplatedetailtext {
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.92rem;          /* 11px approximated to rem */
  font-weight: normal;
  color: #000000;
}

/* =============================
   NutRpt.aspx Styles
   ============================= */
body.nutrptbody {
  background: lightyellow;
}

div.nutrptsysname {
  font-size: 1.83rem;          /* 22pt */
  font-family: Calibri, sans-serif;
  font-style: italic;
  font-weight: bold;
  color: #13294b;
  text-align: center;
}

div.nutrpttitle {
  font-size: 1.5rem;           /* 18pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: #13294b;
  text-align: center;
}

div.nutrptlocation {
  font-size: 1rem;             /* 12pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: #13294b;
  text-align: center;
}

div.nutrptdatetimemeal {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: #13294b;
  text-align: center;
}

div.nutrptgroup {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: #13294b;
  text-align: center;
}

div.nutrptcaloricintake {
  font-size: 1rem;             /* 12pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: #13294b;
  text-align: right;
}

div.nutrptnutheadcolumns {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: center;
}

div.nutrptunitheadcolumns {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: center;
}

div.nutrptnames {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: center;
}

div.nutrptportions {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: center;
}

div.nutrptqtys {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: center;
}

div.nutrptvalues {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: right;
}

div.nutrptpercents {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  color: #006400;
  text-align: right;
}

div.nutrpttotalheader {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
  text-align: center;
}

div.nutrpttotalvalues {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: right;
}

div.nutrpttotalpercents {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  color: #006400;
  text-align: right;
}

div.nutrptnote {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  color: black;
  font-style: italic;
  text-align: center;
}

div.nutrptfooter {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: left;
}

td.nutrptmainheadcolumns {
  text-align: center;
  background: #D3D3D3;
}

td.nutrptnutheadcolumns,
td.nutrptunitheadcolumns {
  text-align: center;
  background: #D3D3D3;
}

/* =============================
   longmenu.aspx Styles
   ============================= */
body.longmenubody {
  background-image: url('background.gif');
}

div.longmenudispheader {
  font-size: 0.67rem;          /* 8pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: #13294b;
  text-align: center;
}

div.longmenuinstructs {
  font-size: 1rem;             /* 12pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
  text-align: center;
}

div.longmenugridheader {
  font-size: 1.17rem;          /* 14pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: white;
  text-align: center;
}

div.longmenucolmenucat {
  font-size: 0.83rem;          /* 12pt */
  font-family: Calibri, sans-serif;
  color: black;
  font-style: italic;
  text-align: center;
}

div.longmenucoldispname {
  font-size: 0.83rem;          /* 12pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: left;
}

div.longmenucolallergens {
  font-size: 0.83rem;          /* 12pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: left;
}

div.longmenucolportions {
  font-size: 0.83rem;          /* 12pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: center;
}

div.longmenucolprice {
  font-size: 0.83rem;          /* 12pt */
  font-family: Calibri, sans-serif;
  text-align: center;
  color: black;
}

div.longmenufooter {
  font-size: 0.67rem;          /* 8pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  text-align: center;
  color: black;
}

span.longmenucolheaders {
  font-size: 0.83rem;          /* 12pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
}

td.longmenugridheader {
  background: #13294b;
}

td.longmenucolheaders {
  background: #D3D3D3;
  text-align: center;
}

/* =============================
   Tip.aspx Styles
   ============================= */
td.tipbody {
  background: lightyellow;
}

div.tipdisplay {
  font-size: 0.67rem;          /* 8pt */
  font-family: "Comic Sans MS", Calibri, sans-serif;
  color: black;
  text-align: left;
}

/* =============================
   Links Styles
   ============================= */
a:link,
a:visited,
a:active {
  color: #00ace9;
  text-decoration: underline;
}

img.stout {
  margin: 0.313rem;           /* 5px approx */
}

/* =============================
   Search.aspx Styles
   ============================= */
body.searchbody {
  background-image: url('background.gif');
}

div.searchgridheader {
  font-size: 1.17rem;          /* 14pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
}

div.searchtext {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  font-style: italic;
  color: #00ace9;
  text-align: left;
}

div.searchlink {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  font-style: italic;
  text-align: left;
}

div.searchprev {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  font-style: italic;
  text-align: left;
}

div.searchnext {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  font-style: italic;
  text-align: right;
}

div.searchpagenum {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  font-style: italic;
  text-align: center;
}

div.searchcoldesc {
  font-size: 1rem;             /* 12pt */
  font-family: Calibri, sans-serif;
  color: black;
  font-style: italic;
  text-align: center;
}

div.searchcoldate {
  font-size: 1rem;             /* 12pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: center;
}

div.searchcollocation {
  font-size: 1rem;             /* 12pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: center;
}

div.searchcolmeal {
  font-size: 1rem;             /* 12pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: center;
}

div.searchcollink {
  font-size: 1rem;             /* 12pt */
  font-family: Calibri, sans-serif;
  color: black;
  text-align: center;
}

div.searchdescription {
  font-size: 1rem;             /* 12pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
  text-align: center;
}

span.searchcolheaders {
  font-size: 1rem;             /* 12pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: black;
}

td.searchcolheaders {
  background: #D3D3D3;
  text-align: center;
}

td.searchgridheader {
  background: #13294b;
}

/* =============================
   Copyright & Powered By Styles
   ============================= */
div.copyrightalign {
  text-align: center;
}

span.copyrightyear {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-style: italic;
  color: #66A7CE;
}

span.copyrightAIS {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-weight: bold;
  color: #66A7CE;
}

span.copyrightreserved {
  font-size: 0.83rem;          /* 10pt */
  font-family: Calibri, sans-serif;
  font-style: italic;
  color: #66A7CE;
}

div.poweredbyfoodpro {
  font-size: 1rem;             /* 12pt */
  font-family: Calibri, sans-serif;
  font-style: italic;
  font-weight: bold;
  color: black;
}

/* =================================
   Additional Responsive Enhancements
   ================================= */

/* 
  These rules are aimed at providing more fluid typography for titles and other elements.
  If possible, add the "responsive-title" class to your title elements in the markup.
  Also, if you have container elements that form a two-column layout, add the "two-column" class.
*/

@media screen and (max-width: 600px) {
  /* Adjust titles and headers with a fluid font-size using clamp */
  .responsive-title,
  div.allergenfilterheader,
  div.headsysname,
  div.headtitle,
  div.shortmenutitle,
  div.nutfactsheader {
    /* Minimal font size: 1rem, preferred scaling via viewport and max size 1.5rem */
    font-size: clamp(1rem, 3vw, 1.5rem);
  }

  /* If any title feels too small on mobile, override separately */
  /* Example: adjust headsysname if needed */
  div.headsysname {
    font-size: clamp(1.2rem, 4vw, 2rem);
  }

  /* Force two-column layout to stack into a single column */
  .two-column {
    display: block;
    width: 100%;
  }

  /* Adjust container widths if they use fixed rem widths for desktop */
  table.locationbanner,
  table.contentscontainer {
    width: 100%;   /* Ensure they don’t exceed mobile screen width */
  }
  
  /* Optional: if you have grid layouts built with flexbox or grid, you might add: */
  .grid-two-columns {
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 1rem;
  }
}

/* For slightly larger mobile devices, you may fine-tune further */
@media screen and (min-width: 601px) and (max-width: 800px) {
  .responsive-title,
  div.allergenfilterheader,
  div.headsysname,
  div.headtitle,
  div.shortmenutitle,
  div.nutfactsheader {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  }
}

/* 
  End of responsive adjustments. All static sizes have been converted to rem 
  units and the base font-size on the html element scales with the viewport.
*/