.custom-navbar {
  position: relative;
  background-color: #343a40;
  overflow-x: hidden; /* Hide the scrollbar */
  white-space: nowrap; /* Prevents line breaks */
  font-size: 15px;
}

.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  background-color: #343a40;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 10;
}

.scroll-arrow.left {
  left: 0;
}

.scroll-arrow.right {
  right: 0;
}

.custom-container {
  display: flex; /* Makes the content inline and scrollable */
  padding: 10px;
  overflow-x: auto; /* Enables horizontal scrolling */
  scroll-behavior: smooth; /* Smooth scrolling effect */
  scrollbar-width: none; /* Hides scrollbar in Firefox */
}

.custom-container::-webkit-scrollbar {
  display: none; /* Hides scrollbar in WebKit browsers (Chrome, Safari) */
}

.custom-container a {
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  display: inline-block;
}

.custom-container a:hover {
  background-color: #495057;
}

.title,
.sub-title {
  width: 100%;
}

.title {
  font-size: 19px;
  font-weight: 700;
  /* margin: 10px 0px 10px 20px; */
  padding-left: 20px;
  padding-bottom: 10px;
}
.sub-title {
  display: flex;
  align-items: center; /* Center text vertically */
  padding-left: 30px;
  font-weight: 500;
  height: 34px;
  box-sizing: border-box; /* Ensure padding and border are included in the height */
  color: rgb(73, 72, 72);
}

.sub-title:hover {
  background-color: #e8e6e6;
  color: #05a081;
}

.title-col {
  width: 250px !important;
  /* display: none; */
}

.scroll-menu {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  background-color: #343a40;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 10;
  width: 40px;
  height: 100%;
}

.contentPage {
  height: calc(100vh - 60px);
}

.title-col {
  display: block; /* Initially visible */
  width: 300px; /* Adjust width as needed */
  height: calc(100vh - 60px); /* Adjust height as needed */
  overflow: auto;
  /* background-color: #f0f0f0; */
  border: 1px solid #ccc;
}

.title-col.show {
  display: block;
}

.title-col.hide {
  display: none;
}

@media (max-width: 768px) {
  .title-col {
    display: none; /* Hide on mobile screens */
  }
  .title-col.hide {
    display: none;
  }
  .title-col.show {
    display: block;
  }
}
.course-pill {
  border-radius: 20px !important;
}