/* vim: set ts=2 sts=2 sw=2 et: */

/* Navbar wrapper */
#navbar-wrapper {
  /*background: var(--color-nav-bg);*/
  background: var(--color-footer);
  border-bottom: 1px solid var(--color-secondary);
}

  #navbar-wrapper #navbar {
    /*background: var(--color-nav-bg);*/
    background: var(--color-footer);
    border-bottom: 0 none;
  }

/* Footer wrapper */
#footer-wrapper {
  background: var(--color-footer);
  border-top: 1px solid var(--color-secondary);
}

  #footer-wrapper footer {
    background: var(--color-footer);
    border-top: 0 none;
  }

/* Navbar logo */
#navbar-wrapper #navbar .navbar-left #navbar-logo {
  padding: 0;
  min-width: 30px;
  min-height: 36px;
}

  #navbar-wrapper #navbar .navbar-left #navbar-logo img {
    filter: grayscale(100%);
  }

  #navbar-wrapper #navbar .navbar-left #navbar-logo:hover img {
    filter: none;
  }

/* Dashboard navbar */
.page-content .secondary-nav {
  padding-left: 0;
}



/* Fixed width on huge screens */
#navbar, footer, .page-footer {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto !important;
  padding-left: 0;
  padding-right: 0;
}

.page-content .secondary-nav .ui.secondary {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

  .page-content .secondary-nav .item {
    padding-left: 5px !important;
  }

/* Same fixed width on large screens */
@media (min-width: 1200px) and (max-width: 1919.98px) {
  #navbar, footer, .page-footer {
    width: 1280px;
    max-width: calc(100% - 64px);
  }

  .page-content .secondary-nav {
    width: 1280px;
    max-width: calc(100% - 64px);
  }
}

/* Fluid width on small screens */
@media (min-width: 992px) and (max-width: 1200px) {
  #navbar, footer, .page-footer {
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .page-content .secondary-nav {
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Fluid width on even smaller screens */
@media (min-width: 768px) and (max-width: 991.98px) {
  #navbar, footer, .page-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .page-content .secondary-nav {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Fluid width on tiny screens */
@media (max-width: 767.98px) {
  #navbar, footer, .page-footer {
    padding-left: 8px;
    padding-right: 8px;
  }

  .page-content .secondary-nav {
    padding-left: 8px;
    padding-right: 8px;
  }
}