.container-fluid.custom-container {
    max-width: 70%; /* Adjust the maximum width as needed */
    margin: 0 auto; /* Center the container */
    margin-left: 0; /* Align the container to the left */

}

h3.fw-semibold.pt-2.pb-3 {
    text-align: left; /* Align the heading to the left side */
    margin-bottom: 20px; /* Add some space below the heading */
}

#chat {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    background-color: #f9f9f9;
    max-height: 75vh; /* Set a maximum height for the chat container */
    overflow: hidden; /* Hide overflow for the container */
    display: flex;
    flex-direction: column;
}

#chat-window {
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow-y: auto; /* Enable vertical scrolling */
    max-height: 75vh; /* Ensure the chat window respects the maximum height */
    margin-bottom: 10px;
    flex-grow: 1; /* Allow the chat window to grow and fill available space */
}

#chat-input {
    text-align: right; /* Align the buttons to the right side */
}

#chat-input button {
    margin: 0 5px;
}

.bot-message {
    text-align: left;
    margin: 10px 0;
}

.user-message {
    text-align: right;
    margin: 10px 0;
}

.bot-message p {
    background-color: rgba(234, 234, 234, 1);
    color: #333;
    display: inline-block;
    padding: 15px;
    border-radius: 0px 20px 20px 20px;
    max-width: 70%;
    word-wrap: break-word;
}

.user-message p {
    background-color: #007bff;
    color: #fff;
    display: inline-block;
    padding: 15px;
    border-radius: 20px 0px 20px 20px;
    max-width: 70%;
    word-wrap: break-word;
}


@keyframes caret {
    50% {
        border-color: transparent;
    }
}

.btn-enroll {
    background-color: rgba(234, 234, 234, 1);
    padding: 8px 30px;
}

.btn-plan {
    color: #ffffff !important;
    background-color: #273168;
    padding: 8px 30px;
}


.custom-container {
    padding: 100px 30px 10px 30px !important;
}

h4 {
    color: red;
}


/* extra js for bell icon  */

.notificationDropdownMenu {
    max-height: 350px;
    overflow-y: auto;
}

.notificationDropdownMenu li {
    border-bottom: 1px solid #f0f0f0;
    padding: 10px;
}

.notificationDropdownMenu li:last-child {
    border-bottom: none;
}

.top-text-heading {
    font-weight: 500;
    font-size: 14px;
}

.top-text-light {
    color: #888;
    font-size: 12px;
}
.dateSeparator {
  text-align: center;
  color: #777;
  margin: 10px 0;
  font-size: 0.85rem;
  font-weight: 600;
}
.dateSeparator span {
  background: #f4f4f4;
  padding: 3px 10px;
  border-radius: 20px;
}