header,
main,
footer {
  padding-left: 300px;
}

@media only screen and (max-width: 992px) {
  header,
  main,
  footer {
    padding-left: 0;
  }
}

.sidenav-trigger,
.sidenav-trigger:hover,
.sidenav-trigger:focus,
.sidenav-trigger:active {
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: var(--white);
}

@media only screen and (min-width: 993px) {
  .sidenav-trigger {
    display: none;
  }
}

/* SIDENAV */

.sidenav,
.sidenav.fixed,
.sidenav .collapsible-header,
.sidenav.fixed .collapsible-header,
.sidenav li > a,
.sidenav.fixed li > a,
.sidenav li.subheader,
.sidenav.fixed li.subheader {
  font-size: 16px;
}

.sidenav li.subheader,
.sidenav.fixed li.subheader {
  margin-left: 31px;
}

.sidenav .collapsible-header,
.sidenav.sidenav-fixed .collapsible-header {
  padding: 0 0 0 31px;
  width: 100%;
  font-weight: 500;
}

.sidenav .divider {
  margin: 6px 0 8px 0;
}

@media (prefers-color-scheme: light) {
  .sidenav,
  .sidenav.fixed,
  .sidenav .collapsible-header,
  .sidenav.fixed .collapsible-header,
  .sidenav li > a,
  .sidenav.fixed li > a,
  .sidenav li.subheader,
  .sidenav.fixed li.subheader {
    background-color: var(--white);
    color: var(--black);
  }

  .sidenav li > a:hover,
  .sidenav.fixed li > a:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .sidenav,
  .sidenav.fixed {
    border-right: 0px;
  }

  .divider {
    background-color: var(--dividerlight);
  }

  .dark .sidenav,
  .dark .sidenav.fixed,
  .dark .sidenav .collapsible-header,
  .dark .sidenav.fixed .collapsible-header,
  .dark .sidenav li.subheader,
  .dark .sidenav.fixed li.subheader,
  .dark .sidenav li > a,
  .dark .sidenav.fixed li > a,
  .dark .sidenav li > a:hover,
  .dark .sidenav.fixed li > a:hover {
    background-color: var(--black);
    color: var(--white);
  }

  .dark .sidenav,
  .sidenav.fixed {
    border-right: 1px solid var(--dividerdark);
  }

  .dark .divider {
    background-color: var(--dividerdark);
  }
}

@media (prefers-color-scheme: dark) {
  .sidenav,
  .sidenav.fixed,
  .sidenav .collapsible-header,
  .sidenav.fixed .collapsible-header,
  .sidenav li.subheader,
  .sidenav.fixed li.subheader,
  .sidenav li > a,
  .sidenav.fixed li > a,
  .sidenav li > a:hover,
  .sidenav.fixed li > a:hover {
    background-color: var(--black);
    color: var(--white);
  }

  .sidenav,
  .sidenav.fixed {
    border-right: 1px solid var(--dividerdark);
  }

  .divider {
    background-color: var(--dividerdark);
  }

  .light .sidenav,
  .light .sidenav.fixed,
  .light .sidenav,
  .light .sidenav.fixed,
  .light .sidenav .collapsible-header,
  .light .sidenav.fixed .collapsible-header,
  .light .sidenav li > a,
  .light .sidenav.fixed li > a,
  .light .sidenav li.subheader,
  .light .sidenav.fixed li.subheader {
    background-color: var(--white);
    color: var(--black);
  }

  .light .sidenav li > a:hover,
  .light .sidenav.fixed li > a:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .light .sidenav,
  .light .sidenav.fixed {
    border-right: 0px;
  }

  .light .divider {
    background-color: var(--dividerlight);
  }
}