.pageModules-root {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

main {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
}

/* -------------------------------------------------------------------- */
/* HEADER                                                               */

header {
    width: 300px;
    box-sizing: border-box;
    position: fixed !important;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
}

/* -------------------------------------------- */
/* LOGO                                         */

header .logo {
    flex: 0 1 auto;
    margin-bottom: 40px;
}

header .logo .container-fluid {
    padding: 0;
}

/* -------------------------------------------- */
/* NAV                                          */

header .navigation {
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
}

header .nav .container-fluid {
    padding: 0;
}

header .nav ul {
    display: block;  
}

header .nav ul li {
    flex: 1 1 auto;
}

header .nav-left ul li {
    text-align: left;
}

header .nav-center ul li {
    text-align: center;
}

header .nav-right ul li {
    text-align: right;
}

header .nav-justify ul li {
    text-align: justify;
}

/* -------------------------------------------- */
/* NAV - SCROLLBAR (WEBKIT BROWSER ONLY)        */

header nav::-webkit-scrollbar {
    width: 6px;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

header nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

header nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

/* -------------------------------------------------------------------- */
/* USER NAV                                                             */

.user-nav {
    margin-left: 300px;
}

/* -------------------------------------------------------------------- */
/* MAIN                                                                 */

main {
    margin-left: 300px;
}

main .container-fluid {
    padding: 0;
}

/* -------------------------------------------------------------------- */
/* FOOTER                                                               */

footer {
    margin-left: 300px;
}

footer .container-fluid {
    padding: 0;
}

@media only screen and (max-width: 1440px) {
  /* -------------------------------------------------------------------- */
  /* HEADER                                                               */

  header {
      width: 220px;
  }

  /* -------------------------------------------------------------------- */
  /* LOGO                                                                 */
  
  .logo {
      margin-bottom: 20px;
  }
  
  .logo img {
      width: 160px;
  }
  
  header .logo + .nav {
      margin-top: 20px;
  }
  
  header .nav + .logo {
      margin-bottom: 20px;
  }

  /* -------------------------------------------------------------------- */
  /* NAV                                                                  */

  /* -------------------------------------------------------------------- */
  /* USER NAV                                                             */

  .user-nav {
      margin-left: 220px;
  }

  /* -------------------------------------------------------------------- */
  /* MAIN                                                                 */

  main {
      margin-left: 220px;
  }

  /* -------------------------------------------------------------------- */
  /* FOOTER                                                               */

  footer {
      margin-left: 220px;
  }
}

@media only screen and (max-width: 1024px) {
  /* -------------------------------------------------------------------- */
  /* HEADER                                                               */

  header {
      width: 180px;
  }
  
  /* -------------------------------------------------------------------- */
  /* LOGO                                                                 */

  .logo {
      margin-bottom: 10px;
  }

  header .logo + .nav {
      margin-top: 10px;
  }

  header .nav + .logo {
      margin-bottom: 10px;
  }

  /* -------------------------------------------------------------------- */
  /* NAV                                                                  */
  
  /* -------------------------------------------------------------------- */
  /* USER NAV                                                             */

  .user-nav {
      margin-left: 180px;
  }

  /* -------------------------------------------------------------------- */
  /* MAIN                                                                 */

  main {
      margin-left: 180px;
  }

  /* -------------------------------------------------------------------- */
  /* FOOTER                                                               */

  footer {
      margin-left: 180px;
  }
}

@media only screen and (max-width: 768px) {
  /* -------------------------------------------------------------------- */
  /* HEADER                                                               */

  header {
      width: auto;
      position: static!important;
  }
  
  header .navigation {
      padding: 0;
  }

  /* -------------------------------------------------------------------- */
  /* NAV                                                                  */
  

  /* -------------------------------------------------------------------- */
  /* USER NAV                                                             */

  .user-nav {
      margin-left: 0;
  }

  /* -------------------------------------------------------------------- */
  /* MAIN                                                                 */

  main {
      margin-left: 0;
  }

  /* -------------------------------------------------------------------- */
  /* FOOTER                                                               */

  footer {
      margin-left: 0;
  }
}

@media only screen and (max-width: 480px) {}