/* Start Navbar CSS */
    .gnavbar {
      position: fixed;
      top: 0px;
      width: 100%;
      max-width: 1160px;
      padding: 0px 3%;
    }
     .bg-steel { background-color: #5F788A;}
     .site-header .navbar-nav .nav-link { color: #cbd5db;}
     .site-header .navbar-nav .nav-link:hover { color: #ffffff;}
     .site-header .navbar-nav .nav-link.active { font-weight: 500;}

    /* media call for Navbar */
      @media (max-width: 768px) {
        .gnavbar {
         padding: 0px;
         z-index: 2;
        }
      }
/* End Navbar CSS*
/* Start Grid CSS */
    .gridContainer {
      height: 100vh;
      width: 100vw;
      display: grid;
      grid-template-areas:
      'gheader gheader gheader gheader'
      'gbody gbody gbody gbody'
      'gbody gbody gbody gbody';
      grid-gap: 10px 25px;
      padding: 71px 5% 0px 5%;
      max-width: 1160px;
      margin: auto;
    }
    .gheader { grid-area: gheader;}
    .gbody {
      grid-area: gbody;
      display: grid;
      grid-template-areas:
      'gToC gcontent gcontent gcontent'
      'gToC gcontent gcontent gcontent'
    }
    .gToC { grid-area: gToC;}
    .gcontent { grid-area: gcontent;}

/* media call for layout */
    @media (max-width: 600px) {
      .gbody {
        display: grid;
        grid-template-columns: 0px 1fr;
      }
      nav[data-toggle="toc"] .nav > li > a {
        text-align: center
      }
      .gToC {
        visibility: hidden;
      }
    }
/* End Grid CSS */
/* Start body CSS */
    .gheader h1 {text-align: center;}
    .gheader p {
      text-align: center;
      padding-left: 0px;
    }

    body {
      height: 100vh;
      max-width: 1160px;
      background: #222629;
      color: #333333;
      overflow-x: hidden;
      margin: auto;
    }
    img {
     max-width: 100%;
     height: auto;
     display: block;
     margin-left: auto;
     margin-right: auto;
    }
    h1, h2, h3, h4, h5, h6 {
      color: #dddea4;
    }
    .gcontent a {color: #694d95;}
    .gcontent a:hover {
      color: #4e3b6c;
      text-decoration: none;
    }
    h2, h3, h4 {
      padding-left: 20px
    }
    h5, h6 {
      padding-left: 30px;
    }
    p {
      color: #a8a8a8;
      padding-left: 20px;
    }
    h5 + p { padding-left:30px;}
    h6 + p { padding-left:30px;}

    /* media call for formatting */
    @media (max-width: 768px) {
      body { font-size: .8rem;}
      h1 { font-size: x-large;}
      h2, h3, h4, h5, h6 {font-size: medium;}
    }
/* End Body CSS */
/* Begin ToC CSS */
        nav[data-toggle='toc'] .nav .nav {display: block;}
        /* Bottom ToC Mobile */
        .outlineToC {visibility: hidden;}

        @media (max-width: 600px) {
          .outlineToC {
            visibility: visible;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1.85em;
            background-color: #343a40;
            display: block;
            z-index: 1;
            overflow: hidden;
          }
         .outlineToC:hover {
            height: 15em;
          }
          .outlineToC > ul {
            text-align: center;
            padding: 0;
          }
          .outlineToC > ul > li {
            list-style: none;
          }
          .outlineToC > ul > li > a {
            display: block;
            font-size: 12px;
            font-weight: 500;
            color: #dddea4;
          }
          .outlineToC > h6 {
            color: white;
            text-align: center;
            padding-left: 0px;
            background-color: #54436e;
            line-height: 1.5em;
          }
        }
    /* Keep ToC on Page */
        .toc {
          position: sticky;
          top: 65px;
        }
    /* offset for Fixed Navbar - This should be fixed */
    h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
        display: block;
        content: " ";
        height: 60px;
        margin-top: -60px;
        visibility: hidden;
    }
/* End ToC CSS */
/* Start Table CSS */
      .tablecenterENC {
        margin-left: auto;
        margin-right: auto;
        td{ padding: 4px;}
      }
      .tablecenter {
        margin-left: auto;
        margin-right: auto;
      }
      table, th, td {border: 1px solid black;}
      th:first-child {border-right: 1px solid white;}
      tr:nth-child(even) {background: #cccccc;}
      tr:nth-child(odd) {
        color: black;
        background: #a8a8a8;
      }
      th, td {
        padding: 8px;
        text-align: center; }
      th {
        text-align: center;
        background-color: black;
        color: white; }
      @media (max-width: 768px) {
        table, th, td {font-size: .7rem;}
      }
/* end Table CSS */
/* custom Scroll Bar */
    * {
      scrollbar-width: thin;
      scrollbar-color: #feffb8c7 #343a40;}
    /* Works on Chrome/Edge/Safari */
    *::-webkit-scrollbar {width: 10px;}
    *::-webkit-scrollbar-track {background: #343a40;}
    *::-webkit-scrollbar-thumb {
      background-color: #feffb8c7;
      border-radius: 10px;
      border: 3px solid #343a40;}
/* End Scroll Bar */