/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 5px;
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgb(255, 60, 0);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
  border-radius: 10px;
}

/* Sidebar Navigation Styling */
.sidebar-nav {
  h2 {
    color: #4154F1;
  }

  h5 {
    color: #ff2727;
  }

  a, nav a {
    color: #4154F1;
  }

  li {
    &.active > a,
    &.collapse > a {
      color: #ff2727;
    }

    > a:hover,
    &.collapse > a:hover {
      color: #000000;
      text-decoration: none;
    }

    li {
      > a:hover,
      &.collapse > a:hover {
        color: #ffffff;
        text-decoration: none;
      }

      &:hover {
        background: #4154F1;
        text-decoration: none;
      }
    }

    &:hover {
      background: inherit;
    }
  }
}

/* Footer Styling */
footer {
  padding-top: 50px;
}

.footer-buttons {
  position: relative;
  height: 2.5rem;

  .previous {
    position: absolute;
    left: 0;
    margin: auto;
    border-radius: 10px;
  }

  .next {
    position: absolute;
    right: 0;
    margin: auto;
    border-radius: 10px;
  }

  a {
    display: inline-block;
    color: #000000;
    background: #eee;
    padding: 4px 8px;
    border: 1px solid #ccc;
    font-size: 14px;
    text-decoration: none;

    &:hover {
      color: #ffffff;
      background: #4154F1;
      text-decoration: none;
    }
  }

  span {
    &::after,
    &::before {
      font-family: "Font Awesome 5 Free";
      font-weight: bold;
    }

    .previous &::before {
      margin-right: 6px;
      content: "\f359";
    }

    .next &::after {
      margin-left: 6px;
      content: "\f35a";
    }
  }
}

.footer-note {
  display: flex;
  font-size: 0.9rem;
  color: #aaa;
  height: 40px;
  border-top: 1px solid #ccc;
  align-items: center;
  justify-content: center;

  a {
    color: #88d;
  }
}

/* Content Styling */
.content {
  li {
    list-style-type: square;

    li {
      list-style-type: circle;
    }
  }
}