/* Simple dashboard grid CSS */

/* Assign grid instructions to our parent grid container */
.grid-container {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 50px 1fr 50px;
    grid-template-areas:
      "sidenav header"
      "sidenav main"
      "sidenav footer";
    height: 100vh;
  }

  /* Give every child element its grid name */
  .header {
    grid-area: header;
    background-color: #648ca6;
  }

  .sidenav {
    grid-area: sidenav;
    background-color: #394263;
  }

  .main {
    grid-area: main;
    background-color: #8fd4d9;
  }

  .footer {
    grid-area: footer;
    background-color: #648ca6;
  }

  .header, .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background-color: #648ca6;
  }
