div#utilityPage {  
    position: relative;
    height: 100%;
    overflow: hidden;
  }

  div#utilityPage section.table-container {
    --tile-width: 88vw;
    --icon-width: calc( .0725 * var( --tile-width ) );
    --font-size: calc( .0375 * var(--tile-width) );
    --border-width: calc( .2 * var( --cubit ) );
    --border-style: solid;
    --border-color: var( --cg6 );
    --border: var( --border-width ) var(--border-style) var(--border-color);
    --min-cell-width: calc( var( --icon-width ) + calc( 4 * var( --border-width ) ) );
    height: calc( 100% - calc( 4 * var( --cubit )));
    width: 100%;
    font-size: 0;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  div#utilityPage section.table-container div.table-wrapper {
    margin: 5% auto;
    width: var( --tile-width );
    background-color: rgba( var(--cgn6 ), .4 );
  }

  div#utilityPage section.table-container h4 {
    padding: calc( .2 * var( --icon-width ) ) 0;
    text-align: center;
    color: var( --c4 );
    font-size: calc( 1.8 * var( --font-size ) );
    font-style: italic;
    font-weight: 600;
    text-shadow: 2px 2px var( --cg3 );
    border: var( --border );
  }

  div#utilityPage section.table-container table {
    width: var(--tile-width);
    border-top: none;
    border-bottom: none;
  }

  div#utilityPage section.table-container table:last-of-type,
  div#utilityPage section.table-container table:last-of-type tr:first-of-type,
  div#utilityPage section.table-container table:last-of-type tr:first-of-type td {
    border-top: none;
  }

  div#utilityPage section.table-container div.table-wrapper tr.landscape,
  div#utilityPage section.table-container div.table-wrapper tr.blank,
  div#utilityPage section.table-container div.table-wrapper tr.non-specific,
  div#utilityPage section.table-container div.table-wrapper.standard.metric tr.show-once.metric,
  div#utilityPage section.table-container div.table-wrapper.standard tr.show-once.metric {
    display: none;
  }

  div#utilityPage section.table-container div.table-wrapper table.general-info-landscape,
  div#utilityPage section.table-container div.table-wrapper:not( .metric ) table.metric,
  div#utilityPage section.table-container div.table-wrapper:not( .standard ) table.standard,
  div#utilityPage section.table-container div.table-wrapper.standard.metric tr.wind-direction.metric {
    display: none;
  }

  div#utilityPage section.table-container div.table-wrapper.standard tr.standard,
  div#utilityPage section.table-container div.table-wrapper.metric tr.metric,
  div#utilityPage section.table-container div.table-wrapper:not( .standard ):not( .metric ) tr.non-specific,
  div#utilityPage section.table-container div.table-wrapper.standard tr.show-once.standard,
  div#utilityPage section.table-container div.table-wrapper.metric tr.show-once.metric,
  div#utilityPage section.table-container div.table-wrapper:not( .standard ):not( .metric ) tr.show-once.no-measurement {
    display: table-row;
  }

  div#utilityPage table, div#utilityPage th, div#utilityPage td {
    border: var(--border);
    border-collapse: collapse;
    background: transparent;
  }

  div#utilityPage table tr:first-of-type td {
    border-top: none;
  }

  div#utilityPage td {
    padding: var(--border-width);
    min-width: var(--min-cell-width);
    height: var(--min-cell-width);
    font-size: var(--font-size);
  }

  div#utilityPage td:first-of-type {
    width: calc( 1.5 * var( --icon-width ) );
  }

  div#utilityPage td:nth-of-type(3n) {
    padding-right: .5ch;
    width: calc( 3 * var( --icon-width ) );
    text-align: right;
  }

  div#utilityPage td.word-value-wrapper {
    padding: 0;
    width: calc( calc(( 3 * var( --icon-width ) ) + .5ch ) );
    text-align: center;
  }

  div#utilityPage td:nth-of-type(2n) {
    text-indent: calc( .25 * var( --icon-width ) );
  }

  div#utilityPage td:first-of-type {
    text-align: center;
  }

  div#utilityPage tr.blank td {
    visibility: hidden;
  }

  div#utilityPage section.table-container div.table-wrapper tr td i.calendar-day {
    display: inline-block;
    margin: calc( .05 * var( --icon-width ) ) 0;
    width: calc( var(--icon-width) - calc( 2 * var(--border-width) ) );
    height: calc( var(--icon-width) - calc( 2 * var(--border-width) ) );
    bottom: calc( .1 * var(--icon-width) );
    background-image: linear-gradient( var(--c4) 0%, var(--c4) 35%, var(--cg6) 35%, var(--cg6) 100% );
    text-align: center;
    vertical-align: middle;
    border: var( --border-width ) solid var(--cg2);
    border-radius: calc(.2 * var(--icon-width));
  }

  div#utilityPage section.table-container div.table-wrapper tr td i.calendar-day span {
    position: relative;
    top: calc( .2 * var( --icon-width ) );
    color: var(--cg0);
    font-family: 'Courier New', Courier, monospace;
    font-size: calc(.5 * var(--icon-width));
    font-weight: 600;
    vertical-align: middle;
    font-style: normal;
  }

  div#utilityPage td img,
  div#utilityPage td svg {
    margin-top: calc( .05 * var( --icon-width ) );
  }

  div#utilityPage td img, div#utilityPage td svg {
    width: var(--icon-width);
    height: var(--icon-width);
  }

  div#utilityPage td span.gas-value {
    vertical-align: middle;
  }

  div#utilityPage td span.unit {
    display: inline-block;
    margin-left: calc( .075 * var( --icon-width ) );
    width: calc( .625 * var( --icon-width ) );
    text-align: left;
  }

  div#utilityPage td span.unit .mu-gram {
    display: block;
    width: calc( .75 * var(--icon-width));
    border-bottom: 2px solid black;
    text-align: center;
    padding-bottom: calc( .1 * var(--icon-width));
  }

  div#utilityPage td span.unit .denominator {
    display: inline-block;
    width: calc( .75 * var(--icon-width));
    text-align: center;
  }

  div#utilityPage td span.gas {
    display: inline-block;
    margin-left: calc( .075 * var( --icon-width ) );
    width: calc( .75 * var( --icon-width ) );
    font-size: calc( .72 * var( --font-size ) );
    text-align: left;
    vertical-align: middle;
  }

  div#utilityPage td span.subscript {
    position: relative;
    top: calc( .1 * var( --icon-width ) );
    font-size: calc( .72 * var( --font-size ) );
  }

  div#utilityPage span.switch-inset {
    position: relative;
    display: inline-block;
    height: var( --icon-width );
    width: calc( 2 * var( --icon-width ) );
    border-radius: calc( .5 * var(--icon-width) );
    background-color: var( --cg3 );
    vertical-align: middle;
    transition: 500ms;
  }
  
  div#utilityPage span.switch-inset i.switch-slider {
    position: absolute;
    display: inline-block;
    height: calc( .8 * var( --icon-width ) );
    width: calc( .8 * var( --icon-width ) );
    top: calc( .1 * var( --icon-width ) );
    bottom: calc( .1 * var( --icon-width ) );
    left: calc( .1 * var( --icon-width ) );
    border-radius: calc( .5 * var(--icon-width) );
    background-color: var( --cg6 );
    cursor: pointer;
    transition: 500ms;
  }
  
  div#utilityPage span.switch-inset.landscape,
  div#utilityPage span.switch-inset.landscape i.switch-slider {
    display:none;
  }
  
  div#utilityPage div.table-wrapper.standard span.standard.switch-inset,
  div#utilityPage div.table-wrapper.metric span.metric.switch-inset {
    background-color: var( --c4 );
  }
  
  div#utilityPage div.table-wrapper.standard span.standard.switch-inset i.switch-slider,
  div#utilityPage div.table-wrapper.metric span.metric.switch-inset i.switch-slider {
    transform: translateX( var( --icon-width )  );
  }
  
  div#utilityPage .slider.round {
    border-radius: calc( var( --icon-width ) + 8px );
  }
  
  div#utilityPage .slider.round:before {
    border-radius: 50%;
  }

  div#utilityPage div.close-nav {
    width: 100%;
    height: calc( 4 * var( --cubit ));
    font-size: calc( 2 * var( --cubit ) );
    line-height: calc( 4 * var( --cubit ));
    color: var( --c4 );
    background-color: var( --cg6 );
    text-align: center;
    cursor: pointer;
  }

  @media screen and ( orientation: landscape ) and ( min-width: 992px ) {
    div#utilityPage section.table-container {
      --tile-width: 29.334vw;
    }
    
    div#utilityPage section.table-container div.table-wrapper {
      --vert-height: calc( 50% + calc( 2 * var(--cubit) ) );
      --vert-center: calc( -1 * var(--vert-height) );
      position: absolute;
      top: 50%;
      right: 50%;
      margin: 0;
      transform: translate( 50%, var(--vert-center));
    }

    div#utilityPage section.table-container div.table-wrapper,
    div#utilityPage section.table-container div.table-wrapper {
      width: var( --tile-width );
    }
    
    div#utilityPage section.table-container div.table-wrapper.standard,
    div#utilityPage section.table-container div.table-wrapper.metric,
    div#utilityPage section.table-container.day-node div.table-wrapper:not( .standard ):not( .metric ),
    div#utilityPage section.table-container.hour-node div.table-wrapper:not( .standard ):not( .metric ) {
      width: calc( 2 * var( --tile-width ) );
    }
    
    div#utilityPage section.table-container div.table-wrapper.standard.metric {
      width: calc( 3 * var( --tile-width ) );
    }

    div#utilityPage section.table-container div.table-wrapper table,
    div#utilityPage section.table-container div.table-wrapper:not( .standard ):not( .metric ) table.general-info-landscape {
      display: inline-table;
    }

    div#utilityPage section.table-container div.table-wrapper:not( .standard ):not( .metric ) table.general-info-landscape {
      border-left: var( --border );
    }

    div#utilityPage section.table-container div.table-wrapper:not( .standard ):not( .metric ) table.general-info-landscape +
    table.general-info-landscape {
      border-left: none;
    }

    div#utilityPage section.table-container div.table-wrapper table:not( :first-of-type ),
    div#utilityPage section.table-container div.table-wrapper table:not( :first-of-type ) td:first-of-type {
      border-left: none;
    }

    div#utilityPage section.table-container div.table-wrapper:not( .standard ):not( .metric ) table.general-info-portrait,
    div#utilityPage section.table-container div.table-wrapper:not( .standard ) table.standard,
    div#utilityPage section.table-container div.table-wrapper:not( .metric ) table.metric,
    div#utilityPage section.table-container div.table-wrapper tr.portrait,
    div#utilityPage section.table-container div.table-wrapper.standard tr.portrait.standard,
    div#utilityPage section.table-container div.table-wrapper.metric tr.portrait.metric,
    div#utilityPage section.table-container div.table-wrapper tr.wind-direction.portrait,
    div#utilityPage section.table-container div.table-wrapper:not( .standard ):not( .metric ) tr.non-specific.portrait,
    div#utilityPage section.table-container div.table-wrapper.standard tr.wind-direction.portrait,
    div#utilityPage section.table-container div.table-wrapper.metric tr.wind-direction.portrait,
    div#utilityPage section.table-container div.table-wrapper.standard.metric tr.wind-direction.portrait,
    div#utilityPage section.table-container div.table-wrapper.standard.metric tr.wind-direction.portrait.metric,
    div#utilityPage section.table-container div.table-wrapper.standard.metric tr.wind-direction.portrait.metric {
      display: none;
    }

    div#utilityPage section.table-container div.table-wrapper tr.landscape,
    div#utilityPage section.table-container div.table-wrapper tr.wind-direction.landscape,
    div#utilityPage section.table-container div.table-wrapper.standard.metric tr.blank,
    div#utilityPage section.table-container div.table-wrapper:not( .standard ):not( .metric ) table.general-info-landscape tr.blank {
      display: table-row;
    }
  }