/* Layout Styles */

/* Below isthe "default" grid that comes with all web pages. It comes with classes for:

- grid_parent
- grid_header
- grid_asideleft
- grid_main
- grid_asideright
- grid_footer

* Note: In most cases you will override with NEW classes in pages in order to build custom variations of page layouts.

* Note: Try NOT to modify these styles, but override them in the styles.css when you need variations of the grid.

*/


/* Note: If you decide to map global control over the grid layout system, put your CSS Variables in ":root{}" below so they are scoped to the whole web app. */

:root {

  /* layout (not used) */
  /*--theme1-local-layout-background: rgba(var(--theme1-global-layout-background-rgbcolor-1,transparent),var(--theme1-global-layout-background-alphatransparency-1,1));*/
  /*--theme1-local-layout-transition: var(--theme1-global-layout-transition-custom-1,none);*/

  /* grid (not used) */
  /*--theme1-local-grid-background: rgba(var(--theme1-global-grid-background-rgbcolor-1,transparent),var(--theme1-global-grid-background-alphatransparency-1,1));*/
  /*--theme1-local-grid-transition: var(--theme1-global-grid-transition-custom-1,none);*/
  /*--theme1-local-grid-border: var(--theme1-global-grid-border-size-1, 0) dashed rgba(var(--theme1-global-grid-border-rgbcolor-1),var(--theme1-global-grid-border-alphatransparency-1,0));*/

  /* TO DO : integrate global scrollbar color theme into the values below */

  /* scrollbar */
  /*--theme1-local-layout-scrollbar-rgbcolor: var(--theme1-global-layout-scrollbar-rgbcolor-1,inherit);*/
  /* Scrollbar Styles (chrome/webkit browsers only) */
  /*--theme1-local-layout-scrollbar-width: 10px;*/
  /*--theme1-local-layout-scrollbar-height: 10px;*/
  /*--theme1-local-layout-scrollbar-track: rgba(var(--theme1-local-layout-scrollbar-rgbcolor),.15);*/
  /*--theme1-local-layout-scrollbar-corner: rgba(var(--theme1-local-layout-scrollbar-rgbcolor),.60);*/
  /*--theme1-local-layout-scrollbar-thumb: rgba(var(--theme1-local-layout-scrollbar-rgbcolor),.30);*/
  /*--theme1-local-layout-scrollbar-thumb-hover: rgba(var(--theme1-local-layout-scrollbar-rgbcolor),.40);*/
  /*--theme1-local-layout-scrollbar-button: rgba(var(--theme1-local-layout-scrollbar-rgbcolor),.75);*/
  /*--theme1-local-layout-scrollbar-button-hover: rgba(var(--theme1-local-layout-scrollbar-rgbcolor),.90);*/
  /*--theme1-local-layout-scrollbar-vertical: rgba(var(--theme1-local-layout-scrollbar-rgbcolor),.30);*/
  /*--theme1-local-layout-scrollbar-horizontal: rgba(var(--theme1-local-layout-scrollbar-rgbcolor),.30);*/
  /*--theme1-local-layout-resizer: rgba(var(--theme1-local-layout-scrollbar-rgbcolor),30);*/

}



/* Light-Dark Mode Theme Strategies using CSS (not used yet)
    
All these new CSS strategies below require browser support and testing.

To ENFORCE dark mode in Chrome past this into the browser and choose the "Auto Dark Mode for Web Content" to "Enabled". This is dofferent
from Chromes Settings Appearance dark mode which is not enforced and applies only to settings pages, apparently:

chrome://flags/#enable-force-dark



  Color Theming is a new feature in web browsers and used to enable dark-light mode based on both a user's browser settings level that is then called by either CSS media queries and/or JavaScript calls. This has shaky support in 2024 and so does not work consistently.

  "color-scheme" is stored in the browser by the user and can be extracted if supported using JavaScript (see below)), which returns "light" or "dark" text strings. Note that this has no support in any Internet Explorer, Apple phone Safari < 2019, or Samsung phone browsers < 2020. But this has slightly better support in browsers overall than the CSS media query value.

  "prefers-color-scheme" has worse support, and is only supported by the recent major browser versions since 2019/2020 and fails in all Opera mobile browsers and Android mobile Browsers. But with evergreen browser tech we would need to see numbers in each demographic globally to confirm these strategies are worth using in 2024.

  JavaScript extraction example:

  var theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";

  CSS extraction examples:

:root {
  color-scheme: light dark; <<< "color-scheme" locks into the browser-supported taxt value setting by a user and set to "light" or "dark" when queried by JS!
}
@media screen and (prefers-color-scheme: light) {<<< "color-scheme" locks into the browser-supported taxt value setting by a user and set to "light" or "dark" when queried by JS!
  body {
    background: white;
    color: black;
  }
}
@media screen and (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
}
:root, html { <<< This is an example of default colors using CSS variables, not special browser supported variables!
  --text-color-normal: #0a244d;
  --text-color-light: #8cabd9;
}

:root, html[data-theme='dark'] { <<< this is a custom attribute you add and control, not a dark theme supported browser feature!
  --text-color-normal: hsl(210, 10%, 62%);
  --text-color-light: hsl(210, 15%, 35%);
  --text-color-richer: hsl(210, 50%, 72%);
  --text-color-highlight: hsl(25, 70%, 45%);
}
*/

/* Not sure if this triggers dark mode or overrides the OS?
:root {
  color-scheme: dark;
}
*/

/* WORKED IN MOST MOBILE BROWSERS. NOT TESTED IN LAPTOP DARKMODE BUT SHULD WORK! */
/*
@media screen and (prefers-color-scheme: dark) {
  body,header,main,footer {
    background: black !important;
    color: white !important;
  }
}
*/

/* DID NOT WORK IN SOME MOBILE BROWSERS OR DESKTOP */
/*
:root, html[data-theme='dark'] {
    background: black !important;
    color: white !important;
}
*/






/* PRINT : Hide Print Layout Features (print sheet will turn these on) */

/* This CSS system fully supports its own print system. The print header needs to be hidden below until the browser loads it naturally on print. */

#printheader {
  display: none;
}

/* Hide the WAI-ARIA Web Assessibility features used by screen readers. Below we hide these for all CSS-supporting browsers. Only screenreaders and devices for people with disabilities see these. */

#skiptocontent {
  display: block;
  clear: both;
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  left: -9999px;
  padding: 0.2rem;
  background: #fff;
}

#backtotop {
  display: block;
  clear: both;
  width: auto;
  height: auto;
  position: absolute;
  bottom: 0;
  left: -9999px;
  padding: 0.2rem;
  background: #fff;
}






/* SCROLLBARS (optional) */

/* TO DO : integrate global scrollbar color theme into the values below */
/* Below triggers the scroll bar colors below in webkit browsers (Chrome & newer Edge). */

::-webkit-scrollbar {
  width: 10px; /* these values must match the ::-webkit-scrollbar-button:single-button values below */
  height: 10px;
  /* This sets the overall background all alpha scollbars reflect. This is critical to see the scrollbar in dark mode. */
  background: #fff;

}

/* we use rgb plus alpha values to give scrollbars a simple color theme */
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
  background-color: rgba(127, 127, 127, 0.15);
}

::-webkit-scrollbar-corner {
  background-color: rgba(127, 127, 127, 0.4);
}

/* bar before scrolled box is hovered */
::-webkit-scrollbar-thumb {
  background-color: rgba(127, 127, 127, 0.35);
  cursor: pointer !important;
}

:hover::-webkit-scrollbar-thumb {
  background-color: rgba(127, 127, 127, 0.35);
}

/* top-bottom padding above-below arrows */
::-webkit-scrollbar-button {
  background-color: rgba(127, 127, 127, 0.1);
  height: 5px; /* values must be half of scrollbar dimensions */
  width: 5px;
  cursor: pointer !important;
}

:hover::-webkit-scrollbar-button {
  background-color: rgba(127, 127, 127, 0.1);
  cursor: pointer;
  height: 5px; /* values must be half of scrollbar dimensions */
  width: 5px;
}

/* scrollbar arrow buttons */
::-webkit-scrollbar-button:single-button {
  background-color: rgba(127, 127, 127, 0.1);
  display: block;
  border-style: solid;
  height: 10px; /* these values must match the scrollbar button values above */
  width: 10px;
}

/* up arrow */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 5px 5px 5px; /* values must be half of scrollbar dimensions */
  border-color: transparent transparent rgba(127, 127, 127, 0.5) transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent rgba(127, 127, 127, 0.9) transparent;
}

/* down arrow */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 5px 5px 0 5px; /* values must be half of scrollbar dimensions */
  border-color: rgba(127, 127, 127, 0.5) transparent transparent transparent;
}

::-webkit-scrollbar-button:single-button:vertical:increment:hover {
  border-color: rgba(127, 127, 127, 0.9) transparent transparent transparent;
}

/* left arrow */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
  border-width: 5px 5px 5px 0; /* values must be half of scrollbar dimensions */
  border-color: transparent rgba(127, 127, 127, 0.5) transparent transparent;
}

::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
  border-color: transparent rgba(127, 127, 127, 0.9) transparent transparent;
}

/* right arrow */
::-webkit-scrollbar-button:single-button:horizontal:increment {
  border-width: 5px 0 5px 5px; /* values must be half of scrollbar dimensions */
  border-color: transparent transparent transparent rgba(127, 127, 127, 0.5);
}

::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
  border-color: transparent transparent transparent rgba(127, 127, 127, 0.9);
}

/* This impacts the resizeable feature mostly seen in textarea right-corner boxes when the "resize" property is added. */
::-webkit-resizer {
  /*background-color: rgba(127,127,127,.5);*/
}



/* (optional) mobile scrollbar should be smaller */

/*
@media only screen and (max-width: 1024px) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: #fff;
  }
  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-track-piece {
    background-color: rgba(127, 127, 127, 0.15);
  }
  ::-webkit-scrollbar-corner {
    background-color: rgba(127, 127, 127, 0.4);
  }
  ::-webkit-scrollbar-thumb {
    background-color: rgba(127, 127, 127, 0.35);
  }
  :hover::-webkit-scrollbar-thumb {
    background-color: rgba(127, 127, 127, 0.35);
  }
  ::-webkit-scrollbar-button {
    position: absolute;
    top: -3px;
    background-color: rgba(127, 127, 127, 0.1);
    height: 3px;
    width: 3px;
  }
  :hover::-webkit-scrollbar-button {
    background-color: rgba(127, 127, 127, 0.1);
    cursor: pointer;
    height: 3px;
    width: 3px;
  }
  ::-webkit-scrollbar-button:single-button {
    background-color: rgba(127, 127, 127, 0.1);
    display: block;
    border-style: solid;
    height: 6px;
    width: 6px;
  }
  ::-webkit-scrollbar-button:single-button:vertical:decrement {
    border-width: 0 3px 3px 3px;
    border-color: transparent transparent rgba(127, 127, 127, 0.5) transparent;
  }
  ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    border-color: transparent transparent rgba(127, 127, 127, 0.9) transparent;
  }
  ::-webkit-scrollbar-button:single-button:vertical:increment {
    border-width: 3px 3px 0 3px;
    border-color: rgba(127, 127, 127, 0.5) transparent transparent transparent;
  }
  ::-webkit-scrollbar-button:single-button:vertical:increment:hover {
    border-color: rgba(127, 127, 127, 0.9) transparent transparent transparent;
  }
  ::-webkit-scrollbar-button:single-button:horizontal:decrement {
    border-width: 3px 3px 3px 0;
    border-color: transparent rgba(127, 127, 127, 0.5) transparent transparent;
  }
  ::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
    border-color: transparent rgba(127, 127, 127, 0.9) transparent transparent;
  }
  ::-webkit-scrollbar-button:single-button:horizontal:increment {
    border-width: 3px 0 3px 3px;
    border-color: transparent transparent transparent rgba(127, 127, 127, 0.5);
  }
  ::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
    border-color: transparent transparent transparent rgba(127, 127, 127, 0.9);
  }
}
*/



/* slider scrollbars : Use this for addig thinner scrollbars on smaller containers like menus, etc, */

.sliderscrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: #fff;
}

.sliderscrollbar::-webkit-scrollbar-track,
.sliderscrollbar::-webkit-scrollbar-track-piece {
  background-color: rgba(127, 127, 127, 0.15);
}

.sliderscrollbar::-webkit-scrollbar-corner {
  background-color: rgba(127, 127, 127, 0.4);
}

.sliderscrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(127, 127, 127, 0.35);
}

.sliderscrollbar:hover::-webkit-scrollbar-thumb {
  background-color: rgba(127, 127, 127, 0.35);
}

.sliderscrollbar::-webkit-scrollbar-button {
  position: absolute; /* fixes bug in chrome where scrollers inside divs drop the arrow to the bottom */
  top: -3px;
  background-color: rgba(127, 127, 127, 0.1);
  height: 3px;
  width: 3px;
}

.sliderscrollbar:hover::-webkit-scrollbar-button {
  background-color: rgba(127, 127, 127, 0.1);
  cursor: pointer;
  height: 3px;
  width: 3px;
}

.sliderscrollbar::-webkit-scrollbar-button:single-button {
  background-color: rgba(127, 127, 127, 0.1);
  display: block;
  border-style: solid;
  height: 6px;
  width: 6px;
}

.sliderscrollbar::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 3px 3px 3px;
  border-color: transparent transparent rgba(127, 127, 127, 0.5) transparent;
}

.sliderscrollbar::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent rgba(127, 127, 127, 0.9) transparent;
}

.sliderscrollbar::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 3px 3px 0 3px;
  border-color: rgba(127, 127, 127, 0.5) transparent transparent transparent;
}

.sliderscrollbar::-webkit-scrollbar-button:single-button:vertical:increment:hover {
  border-color: rgba(127, 127, 127, 0.9) transparent transparent transparent;
}

.sliderscrollbar::-webkit-scrollbar-button:single-button:horizontal:decrement {
  border-width: 3px 3px 3px 0;
  border-color: transparent rgba(127, 127, 127, 0.5) transparent transparent;
}

.sliderscrollbar::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
  border-color: transparent rgba(127, 127, 127, 0.9) transparent transparent;
}

.sliderscrollbar::-webkit-scrollbar-button:single-button:horizontal:increment {
  border-width: 3px 0 3px 3px;
  border-color: transparent transparent transparent rgba(127, 127, 127, 0.5);
}

.sliderscrollbar::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
  border-color: transparent transparent transparent rgba(127, 127, 127, 0.9);
}










/* ============== Begin Default Grid ============= */

/* IMPORTANT: Let "portal.css" control these tags (mostly its inheritable text properties) so we match the same admin UI designs, unless we need to override some specific feature below. */

:root,
html {

  /* UPDATE: This uses the Elements version, not Fashion theme. */

  width: 100%;/* older percet unit for older browsers */
  height: 100%;
  width: 100vw;/* new viewport width-height is better */
  height: 100vh;

}

html body {

  /* UPDATE: This uses the Elements version, not Fashion theme. Note that the "webpage_grid" is on the body tag so writes over these values below. These are fall backs if the "webpage_grid" class is lost or fails. */

  position:relative;

  display: block;
  box-sizing: border-box;

  width: auto;/* ALERT: Always set width-height to "auto" so content remains inside the body's content box! - MS */
  height: auto;
  min-width:100%;/* older percet unit for older browsers */
  min-height:100%;
  max-width:100%;
  min-width:100vw;/* new viewport width-height is better */
  min-height:100vh;
  max-width:100vw;
  max-height:none;

  border: none;
  padding: 0;
  margin: 0;

  background: #fff;

  overflow-y: hidden;
  overflow-x: hidden;

}





/* Begin Grid - Note: Leave these defaults unchanged, for now. Do NOT CHANGE THESE CLASSES but change the Grid Overrides" styles below or create ones in your projects main style sheets if you want to change the grid layout. This allows us to preserve the base grid in case we need to bring back features or panels, later. - MS. */

.webpage_grid {

  display: grid;
  /* IE 10-11 grid support */
  display: -ms-grid;
  /* GRID CONTROLS: These control the overall grid layout. Only change these to tweak how the overall page layout needs to perform. */
  /*grid-template-rows: minmax(4rem,auto) 8fr minmax(5rem,auto);*//* <<< This version has minimum header and footer heights when might be helpful */
  grid-template-rows: auto 8fr auto;
  /*grid-template-columns: minmax(4rem,auto) 5fr minmax(4rem,auto);*/
  grid-template-columns: 1fr 5fr 1fr;/* note the left and right asides are hidden until needed but enabled in this master grid if needed later */
  /* New Grid Named Areas! Using named areas here, then calling them in each top HTML section below (grid-area: header) allows us to manage panels quickly. Also, IE 10-11 supports areas. */
  grid-template-areas: "header header header" "asideleft main asideright" "footer footer footer";
  /* Note: IE does not support gaps in grids. */
  grid-gap: 0;
  justify-content: normal;
  align-content: normal;
  /* optional: Internet Explorer 10-11 version (modify below when testing in IE as only "auto" may be supported), IE needs "auto" for the main row, otherwise its content overflows into the footer */
  /*-ms-grid-rows: minmax(auto, auto) auto minmax(auto, auto);*/
  -ms-grid-rows: minmax(1fr, auto) auto minmax(1fr, auto);
  /* 5fr can be auto in IE to avoid bleed overs? */
  /*-ms-grid-columns: auto 5fr auto;*/
  -ms-grid-columns: minmax(1fr, auto) 5fr minmax(1fr, auto);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: none;
  clear: both;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: none;
  min-width: 100vw;
  min-height: 100vh;/* "vw" viewport height, required to force grid to fill all height */
  max-width: 100vw;
  max-height: none;
  border: none;
  text-align: center;
  vertical-align: top;
  padding: 0;
  margin: 0;
  background: #fff;
  overflow-y: hidden;/* turn off scrolling in the page, or body tag which controls the grid */
  overflow-x: hidden;/* turn off scrolling in the page, or body tag which controls the grid */

}

.webpage_grid_header {
  grid-area: header;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  display: block;
  float: none;
  clear: both;
  width: auto;
  height: auto;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: none;
  box-sizing: border-box;
  border-top: 3px dashed #aaa;
  border-bottom: 3px dashed #aaa;
  border-left: 3px dashed #aaa;
  border-right: 3px dashed #aaa;
  text-align: center;
  vertical-align: top;
  padding: 0;
  margin: 0;
  background: transparent;
  overflow: hidden;
}

.webpage_grid_asideleft {
  grid-area: asideleft;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  display: block;
  float: none;
  clear: both;
  width: auto;
  height: auto;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: none;
  box-sizing: border-box;
  border-top: 0px dashed #aaa;
  border-bottom: 0px dashed #aaa;
  border-left: 3px dashed #aaa;
  border-right: 3px dashed #aaa;
  text-align: center;
  vertical-align: top;
  padding: 0;
  margin: 0;
  background: transparent;
  overflow: hidden;
}

.webpage_grid_main {
  grid-area: main;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  display: block;
  float: none;
  clear: both;
  width: auto;
  height: auto;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: none;
  box-sizing: border-box;
  border-top: 0px dashed #aaa;
  border-bottom: 0px dashed #aaa;
  border-left: 0px dashed #aaa;
  border-right: 0px dashed #aaa;
  text-align: center;
  vertical-align: top;
  padding: 0;
  margin: 0;
  background: transparent;
  /*
  overflow-x: hidden;
  overflow-y: auto;
  */
  overflow: visible; /* add if the body supports scrolling */
}

body section {
  display: block;
  float: none;
  clear: both;
  width: auto;
  height: auto;
  min-width: auto;
  max-width: none;
  min-height: auto;
  max-height: none;
  box-sizing: border-box;
  border: none;
  text-align: left;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  background: transparent;
  overflow: visible;
}

.webpage_grid_asideright {
  grid-area: asideright;
  -ms-grid-row: 2;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  display: block;
  float: none;
  clear: both;
  width: auto;
  height: auto;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: none;
  box-sizing: border-box;
  border-top: 0px dashed #aaa;
  border-bottom: 0px dashed #aaa;
  border-left: 3px dashed #aaa;
  border-right: 3px dashed #aaa;
  text-align: center;
  vertical-align: top;
  padding: 0;
  margin: 0;
  background: transparent;
  overflow: hidden;
}

.webpage_grid_footer {
  grid-area: footer;
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  display: block;
  float: none;
  clear: both;
  width: auto;
  height: auto;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: none;
  box-sizing: border-box;
  border-top: 3px dashed #aaa;
  border-bottom: 3px dashed #aaa;
  border-left: 3px dashed #aaa;
  border-right: 3px dashed #aaa;
  text-align: center;
  vertical-align: top;
  padding: 0;
  margin: 0;
  background: transparent;
  overflow: hidden;
}

/* =============== End Default Grid ============== */











/* ========== CUSTOM GRID DESIGN FOR ENGAGE ========== */

/*
   These "Grid Overrides" allow you to remove borders, add colors, add padding, remove panels, and modify the default grid settings above. This allows us to keep the default grid intact while customzing it below for the actual grid used. This is critical so when we later have the visual designer manipulate the grid layouts and add and remove grid panels, we start with the default grid panels this theme can support (99% of all layouts needed should be fulfilled with the default grid layout design!) Note: If you remove (delete) the customizations below, you should be able to return to the default grid layout.

   Below, apply special grid overrides if you need to keep the main grid above but need special grid needs changes to those core settings. The styles below would then apply a new default, likely needed to showcase a new design. - MS
*/

/* Hide all panels not needed in the grid, for now. */

html body .webpage_grid_header,
html body .webpage_grid_asideleft,
html body .webpage_grid_asideright,
html body .webpage_grid_footer
{
  display:none !important;
}

html body.webpage_grid {

  grid-template-areas: 'main';
  grid-template-columns: 1fr;
  /* Legacy IE-Trident Edge browser grid settings below are likely not needed */
  -ms-grid-rows: minmax(1rem, auto);
  -ms-grid-columns: minmax(1rem, auto);

    width: auto;
    height: auto;
    /* Fallback for older percent unit for older browsers that dont understand calc, vw, or vh. */
    min-width:100%;
    max-width:100%;
    min-height:100%;
    max-height:none;
    /* Note: New viewport width-height is better for newer browsers, and calc allows you to add in body borders and scrollbar width for true centering and avoid overflows. Note we compensate (-10px)  for permanent scrollbar to prevent wiggle when it appears. If you add any padding or borders below, those pixels also must be subtracted from the calc in both width and height to achive 100% true viewport wrapping. */
    /* "calc(100vw - 10px)" : Subtract SCROLLBAR WIDTH. We compensate for the permanent scrollbar space. If you set overflow-y: auto instead below, where scrollbar only appears when needed, this setting will still stop content from wiggling. - MStokely*/
    min-width:calc(100vw - 10px);
    max-width:calc(100vw - 10px);
    min-height:100vh;
    max-height:none;

  text-align: center;
  vertical-align: top;
  padding: 0;
  margin: 0;
  background: #fff;
  transition: none;
  border: none;
  z-index: 0;

  /* FORCED SCROLLBAR: Forcing a scrollbar prevents wiggling when a scroll bar appears. It allows the mobile browser to reserve space for long scrolling pages. Otherwise, we can use auto, but content shift left when it appears. */

  overflow-y: scroll;
  overflow-x: hidden;

  /*border: 5px solid blue;*/

}

html body .webpage_grid_main {

  position: relative;/* Have all content under main for now align relative to it, rather than body. */
  grid-area: main;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;

    width: auto;
    height: auto;
    /* Fallback for older percent unit for older browsers that dont understand calc, vw, or vh. */
    min-width:100%;
    max-width:100%;
    min-height:100%;
    max-height:none;
    /* Newer browsers get the nice calculated values. Note these must match the body tag to allow full viewport dimensions to be available to the inner children, which in this design must stretch the full width like the parents. */
    min-width:calc(100vw - 10px);
    max-width:calc(100vw - 10px);
    min-height:100vh;
    max-height:none;

  border: none;
  text-align: center;/* center all containers inside main */
  vertical-align: top;
  padding: 0;
  margin: 0;
  background: transparent;
  transition: none;
  overflow-x: hidden; /* let the body parent control all content scrolling */
  overflow-y: hidden; /* let the body parent control all content scrolling */

  z-index: 1;/* Note: This allows main to raise above the body area, if we need layering over items relative to the body later for items that are under body and outside main. */

  /*border: 5px solid green;*/

}



/* TESTING ONLY : Uncomment below, to show a dashed border around this page (to verify its filling the browser window) */

/*
#body { 
  --size1: 3px;
  --style1: dashed;
  --color1: #aaa;
}
#body .webpage_grid_main {
  border-top: var(--size1) var(--style1) var(--color1) !important;
  border-bottom: var(--size1) var(--style1) var(--color1) !important;
  border-left: var(--size1) var(--style1) var(--color1) !important;
  border-right: var(--size1) var(--style1) var(--color1) !important;
}
*/

/* ============== End Theme Grid ============= */









/* ========== GRID DEMO : Uncomment below to turn on ALL PANELS with Dashed Borders ========== */
/*
html #body { 
  --size1: 3px;
  --style1: dashed;
  --color1: #aaa;
}
html #body .webpage_grid_header {
  border-top: var(--size1) var(--style1) var(--color1) !important;
  border-bottom: var(--size1) var(--style1) var(--color1) !important;
  border-left: var(--size1) var(--style1) var(--color1) !important;
  border-right: var(--size1) var(--style1) var(--color1) !important;
}
html #body .webpage_grid_asideleft {
  display:block !important;
  border-top: 0px var(--style1) var(--color1) !important;
  border-bottom: 0px var(--style1) var(--color1) !important;
  border-left: var(--size1) var(--style1) var(--color1) !important;
  border-right: 0px var(--style1) var(--color1) !important;
}
html #body .webpage_grid_main {
  border-top: 0px var(--style1) var(--color1) !important;
  border-bottom: 0px var(--style1) var(--color1) !important;
  border-left: var(--size1) var(--style1) var(--color1) !important;
  border-right: var(--size1) var(--style1) var(--color1) !important;
}
html #body .webpage_grid_asideright {
  display:block !important;
  border-top: 0px var(--style1) var(--color1) !important;
  border-bottom: 0px var(--style1) var(--color1) !important;
  border-left: 0px var(--style1) var(--color1) !important;
  border-right: var(--size1) var(--style1) var(--color1) !important;
}
html #body .webpage_grid_footer {
  border-top: var(--size1) var(--style1) var(--color1) !important;
  border-bottom: var(--size1) var(--style1) var(--color1) !important;
  border-left: var(--size1) var(--style1) var(--color1) !important;
  border-right: var(--size1) var(--style1) var(--color1) !important;
}
html #body.webpage_grid {
  grid-template-areas: 'header header header' 'asideleft main asideright' 'footer footer footer' !important;
  grid-template-columns: 1fr 5fr 1fr !important;
}

html #body .webpage_grid_header * {
  display:none !important;
}
html #body .webpage_grid_asideleft * {
  display:none !important;
}
html #body .webpage_grid_main * {
  display:none !important;
}
html #body .webpage_grid_asideright * {
  display:none !important;
}
html #body .webpage_grid_footer * {
  display:none !important;
}

html #body .webpage_grid_header,
html #body .webpage_grid_footer {
  padding: 3rem 0rem !important;
  background: transparent !important;
}
*/
/* ================================================= */