/* Layout Elements */

.container.App { height: 100vh; }
.container.AppLD { height: 100vh; }

@media screen and (min-width: 22.5rem) {
  /* Layout Elements */

  .container.FooterR {
    padding-top: 16px;

    justify-self: flex-end;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
            align-self: stretch;
  }

  .container.FooterL {
    padding-top: 16px;

    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
            align-self: auto;
  }

  .container.sd-two-cols {
    padding-right: 0;
    padding-left: 0;

    grid-area: Footer;
  }

  .container.Header.LM {
    display: grid;
    padding-top: 8px;

    grid-template-columns: 32px auto;
    grid-template-rows: auto;
    grid-area: Login;
  }

  .container.App {
    display: grid;
    padding-top: 0;

    grid-template-columns: 4px 0 1fr 4px;
    grid-template-rows: 0 0 40px 220px 60px auto 80px;
    grid-template-areas: '. . Login .' '. . Nav .' '. . Header .' '. . Search .' '. . Toolbar .' '. . Grid .' '. . Footer .';
    grid-area: Main;
  }

  .container.Grid.LM { grid-area: Grid; }
  .container.LM.Toolbar { grid-area: Toolbar; }
  .container.LM.Search { grid-area: Search; }
  .container.LM.Nav { grid-area: Nav; }
  .container.LM.Login { visibility: collapse; grid-area: Login; }

  .container.AppLD {
    display: grid;
    padding-top: 0;

    grid-template-columns: 4px 0 1fr 4px;
    grid-template-rows: 0 0 40px auto 60px 250px 80px;
    grid-template-areas: '. . Login .' '. . Nav .' '. . Header .' '. . Main .' '. . Toolbar .' '. . Grid .' '. . Footer .';
  }

  .container.LD.Login {
    visibility: collapse;

    grid-area: Login;
  }

  .container.LD.Nav {
    grid-area: Nav;
  }

  .container.Header.LD {
    display: grid;
    padding-top: 8px;

    grid-template-columns: 32px auto;
    grid-template-rows: auto;
    grid-area: Login;
  }

  .container.LD.Main {
    grid-area: Main;
  }

  .container.LD.Toolbar {
    grid-area: Toolbar;
  }

  .container.Grid.LD {
    grid-area: Grid;
  }

  .container.L.Login {
    visibility: collapse;

    grid-area: Login;
  }

  .container.L.Navi {
    grid-area: Nav;
  }

  .container.Header.L {
    display: grid;
    padding-top: 8px;

    grid-template-columns: 32px auto;
    grid-template-rows: auto;
    grid-area: Login;
  }

  .container.L.Search {
    grid-area: Search;
  }

  .container.L.Toolbar {
    grid-area: Toolbar;
  }

  .container.Grid.L {
    grid-area: Grid;
  }

  a.glyph.font-icon-link-1 {
    padding-top: 8px;
    padding-left: 8px;
  }

  a.glyph.Menu {
    padding-top: 4px;
    padding-left: 8px;
  }
}

@media screen and (min-width: 79.875rem) {
  /* Layout Elements */

  .container.App {
    grid-template-areas: '. Login Header .' '. Login Search .' '. Nav Search .' '. Nav Toolbar .' '. Nav Grid .' '. Nav Grid .' '. Nav Footer .';
    grid-template-columns: 4px 250px 1fr 4px;
    grid-template-rows: minmax(40px, 1px) 50px 180px 60px repeat(2 , auto) 80px;
  }

  .container.Header.LM {
    grid-area: Header;
  }

  .container.LM.Login {
    visibility: visible;

    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
            align-self: auto;
    justify-self: auto;
  }

  .container.AppLD {
    grid-template-areas: '. Login Header .' '. Login Main .' '. Nav Main .' '. Nav Main .' '. Nav Toolbar .' '. Nav Grid .' '. Nav Footer .';
    grid-template-columns: 4px 250px 1fr 4px;
    grid-template-rows: 40px 50px repeat(2 , auto) 60px 250px 80px;
  }

  .container.LD.Login {
    visibility: visible;

    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
            align-self: auto;
    justify-self: auto;
  }

  .container.Header.LD {
    grid-area: Header;
  }

  .container.L.Login {
    visibility: visible;

    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
            align-self: auto;
    justify-self: auto;
  }

  .container.Header.L {
    grid-area: Header;
  }

  a.glyph.Menu {
    visibility: collapse;
    padding-top: 0;
  }
}