.dashboard-content {
  padding: 30px;
  background-color: #f8fbff;
  width: calc(100% - 360px);
  overflow-y: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.QA{
  overflow-y: auto;
  padding-right: 25px;
  width: 100%;
}
.user-welcome {
  display: flex;
  gap: 20px;
}
.user-welcome img {
  width: 40px;
  height: 40px;
}
.user-welcome h1 {
  font-size: 35px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: #083a5e;
}

.dashboard-content .cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cards .cards-inner {
  display: flex;
  gap: 50px;
}
.dashboard-content .create-chatbot-card, .customize-chatbot-card {
  background: linear-gradient(180deg, #f6f6f6 0%, #e3f3ff 100%);
  border-radius: 20px;
  padding: 20px;
  width: 280px;
  height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.create-chatbot-card img,
.customize-chatbot-card img {
  height: 30px;
  width: 30px;
}
.create-chatbot-card span,
.customize-chatbot-card span {
  font-size: 20px;
  font-weight: 700;
  color: #083a5e;
  font-family: "Space Grotesk", sans-serif;
}
.card-custom:hover {
  background-color: #f5f7fa;
  color: #007bff;
}


/*chat page styles*/
.dashboard-qa-content{
  flex-direction: column;
  justify-content: space-between;
  
}
.chat-item-user{
  background: linear-gradient(90deg, #E3F3FF 0%, #F6F6F6 100%);
  border-radius: 5px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  width: 90%;
}
.chat-item-user .user-avatar{
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chat-item-user .user-avatar img{
  width: 17px;
  height: 20px;
}
.chat-item-user .user-message{
  width: fit-content;
}
.chat-item-bot{
  background: #FFFFFF;
  border: 1px solid #DBEAFE;
  border-radius: 5px;
  padding: 10px 10px;
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  width: 90%;
  float: inline-end;
}
.chat-item-bot .bot-avatar{
  width: 40px;
  height: 40px;
  background-color: #E2E8F0;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chat-item-bot .bot-avatar img{
  width: 25px;
  height: 20px;
}
.chat-item-bot .bot-message{
  width: fit-content;
}

/*customize chatbot page*/
.customize-bot-content-container{
  width: 90%;
  height: auto;
}
.customize-bot-content-container .content-container-inner{
  background: linear-gradient(180deg, #f6f6f6 0%, #e3f3ff 100%);
  border-radius: 20px;
  padding: 40px 20px;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.customize-form{
  width: 55%;
}
.customize-form form{
  display: flex;
  flex-wrap: wrap;
  gap: 20px 20px;
}
.customize-form .input-holder{
  width: 46%;
}
.customize-form input[type=text]{
  width: 100%;
  padding: 12px;
  border:none;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  font-size: 14px;
  color: #083a5e;
  font-family: "Space Grotesk", sans-serif;
}
.customize-form input::placeholder{
  color: #959595;
  
}
.customize-form label{
  font-size: 14px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: #083a5e;
}

.customize-form .submit-btn{
  background: linear-gradient(90deg, #5573b5 0%, #b7e1ff 100%);
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 8px 40px;
  font-size: 14px;
  width: fit-content;
  font-family: "Space Grotesk", sans-serif;
}
.chatbot-preview{
  width: 40%;
}
.chatbot{
  background-color: #ffffff;
  width: 100%;
  height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 10px;
}
.chatbot-header{
  background-color:#E2E8F0;
  padding: 10px 10px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
.chatbot-body{
  width: 100%;
  height: fit-content;
}
.chatbot-preview-qa{
  height: 80%;
  margin: 0 10px;
}
.your-message{
  height: 20%;
}
.chatbot-preview-chat-item-user{
  background: linear-gradient(90deg, #E3F3FF 0%, #F6F6F6 100%);
  border-radius: 5px;
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
  width: 90%;
}
.chatbot-preview-chat-item-user .user-avatar{
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chatbot-preview-chat-item-user .user-avatar img{
  width: 17px;
  height: 20px;
}
.chatbot-preview-chat-item-user .user-message{
  width: fit-content;
  font-size: 14px;
  font-weight: 400;
  color: #475569;
  font-family: "Space Grotesk", sans-serif;
}
.chatbot-preview-chat-item-bot{
  background: linear-gradient(90deg, #E3F3FF 0%, #F6F6F6 100%);
  border-radius: 5px;
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
  width: 90%;
  float: inline-end;
}
.chatbot-preview-chat-item-bot .bot-avatar{
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chatbot-preview-chat-item-bot .bot-avatar img{
  width: 25px;
  height: 20px;
}
.chatbot-preview-chat-item-bot .bot-message{
  width: fit-content;
  font-size: 14px;
  font-weight: 400;
  color: #475569;
  font-family: "Space Grotesk", sans-serif;
}

.your-message {
  position: relative;
  color: #aaa;
  font-size: 16px;
}

.your-message input {
  width: 100%;
  height: 60px;
  background: #F8FBFF;
  border:none;
  border-radius: 5px;
}

.your-message input {
  text-indent: 32px;
}

.your-message img{
  position: absolute;
  right: 15px;
  bottom: 28px;
}


.image-upload-container {
  position: relative;
  width: 140px;
  height: 130px;
  background-color: #ddeaf3;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin-bottom: 30px;
}

.image-wrapper {
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 10px;
}

#uploaded-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edit-icon {
  position: absolute;
  right: 25px;
  bottom: 10px;
  width: 20px;
  height: 20px;
}

.edit-icon img {
  width: 100%;
  height: 100%;
}

#image-upload {
  display: none;
}

.your-response{
  position: relative;
  color: #aaa;
  font-size: 16px;
  display: flex;
  justify-content: center;
  height: auto;
  width: 90%;
  margin-bottom: calc(50px - 0px);
}
.your-response input {
  text-indent: 32px;
  width: 100%;
  height: 60px;
  background: #E2E8F0;
  border: none;
  opacity: 1;
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 16px;
  top: 652px;
  left: 61px;
  border-radius: 8px;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.your-response img {
  position: relative;
  right: 35px;
  top: 20px;
  width: 15px;
  height: 15px;
}

/* edit user profile css */
.edit-user-profile{
  width: 90%;
  height: auto;
}
.edit-user-profile-inner{
  background: linear-gradient(180deg, #f6f6f6 0%, #e3f3ff 100%);
  border-radius: 20px;
  padding: 40px 40px;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.edit-user-profile-form{
  width: 100%;
}
.edit-user-profile-form form{
  display: flex;
  flex-wrap: wrap;
  gap: 20px 20px;
}
.edit-user-profile-form .input-holder{
  width: 45%;
}
.edit-user-profile-form label{
  font-size: 14px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: #083a5e;
}
.edit-user-profile-form input[type=text]{
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  font-size: 14px;
  color: #083a5e;
  font-family: "Space Grotesk", sans-serif;
}
.edit-user-profile-form .submit-btn {
  background: linear-gradient(90deg, #5573b5 0%, #b7e1ff 100%);
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 10px 40px;
  font-size: 14px;
  width:180px;
  font-family: "Space Grotesk", sans-serif;
}
.back-btn{
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background-color: #E2E8F0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.back-btn img {
  width: 12px;
  height: 12px;
}
.edit-user-profile h4{
  font-size: 20px;
  line-height: normal;
  font-weight: 600;
  color: #475569;
  font-family: "Poppins", sans-serif;
  margin-bottom: 0;
}

/* change password css */
.change-password{
  width: 90%;
  height: auto;
}
.change-password-inner{
  background: linear-gradient(180deg, #f6f6f6 0%, #e3f3ff 100%);
  border-radius: 20px;
  padding: 40px 40px;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.change-password-form{
  width: 100%;
}
.change-password-form form{
  display: flex;
  flex-wrap: wrap;
  gap: 20px 20px;
}
.change-password-form .input-holder:nth-child(1){
  width: calc(84% + 20px);
} 
.change-password-form .input-holder:nth-child(2){
  width: 42%;
}
.change-password-form .input-holder:nth-child(3){
  width: 42%;
}
.change-password-form label{
  font-size: 14px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: #083a5e;
}
.change-password-form input[type=text]{
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  font-size: 14px;
  color: #083a5e;
  font-family: "Space Grotesk", sans-serif;
}
.change-password-form .submit-btn {
  background: linear-gradient(90deg, #5573b5 0%, #b7e1ff 100%);
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 10px 40px;
  font-size: 14px;
  width:180px;
  font-family: "Space Grotesk", sans-serif;
}
.change-password h4{
  font-size: 20px;
  line-height: normal;
  font-weight: 600;
  color: #475569;
  font-family: "Poppins", sans-serif;
  margin-bottom: 0;
}

.chatbot-profile{
  position: relative;
  width: 140px;
  height: 130px;
  background-color: #ddeaf3;
  border-radius: 15px;
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.chatbot-profile img{
  width: 85px;
  height: 70px;
  border-radius: 10px;
}
.chatbot-profile .chatbot-name{
  font-size: 16px;
  line-height: normal;
  font-weight: 500;
  color: #475569;
  font-family: "Poppins", sans-serif;
  margin-bottom: 0;
}


/*bot list css*/
.edit-document{
  width: 90%;
  height: auto;
}
.edit-document-inner{
  background: linear-gradient(180deg, #f6f6f6 0%, #e3f3ff 100%);
  border-radius: 20px;
  padding: 40px 40px;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.edit-document .new-source{
  font-size: 16px;
  line-height: normal;
  font-weight: 600;
  color: #5573B5;
  font-family: "Poppins", sans-serif;
 text-decoration: underline;
}
.add-new-source{
  width: 100%;
  display: flex;
  align-items: end;
  justify-content: space-between;
}
.bot-list-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}
.bot-list-table th {
  background-color: #DBEAFE;
  color: #475569;
  padding: 10px 10px 10px 30px;
  text-align: left;
  font-weight: 700;
}
.bot-list-table td {
  padding: 10px 10px 10px 30px;
}
.bot-list-table tr:nth-child(even) {
  background-color: #E3F3FF;
}
.bot-list-table tr:nth-child(odd) {
  background-color: #fff;
}
.bot-list-table .document-icon{
  width: 14px;
  height: 19px;
  margin-right: 10px;
}
.bot-list-table .youtube-icon{
  width: 20px;
  height: 15px;
  margin-right: 6px;
}
.bot-list-table .delete-icon {
  cursor: pointer;
  width: 14px;
  height: 16px;
}
.bot-list-table span{
  font-size: 16px;
  line-height: normal;
  font-weight: 400;
  color: #475569;
  font-family: "Poppins", sans-serif;
  margin-bottom: 0;
}

.bot-list-table td a{
  font-size: 16px;
  line-height: normal;
  font-weight: 400;
  color: #5573B5;
  font-family: "Poppins", sans-serif;
  text-decoration: none;
}


.msg-box {
  width: 380px;
  height: 170px;
  display: flex;
  padding: 25px 20px;
  gap: 16px;
  background: linear-gradient(to left, #F6F6F6, #E3F3FF);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 12px;

  
}

.error-heading{
  width: 100%;
  height: auto;

}
.upgrade-plan{
  text-decoration: underline;
  color: #083A5E;
}

.exit-icon{
  margin-top: 3px;
}

.modal-content {
  padding: 40px 80px 40px 80px;
  background: linear-gradient(90deg, #e3f3ff 0%, #f6f6f6 100%);
}

.login-btn {
  background: linear-gradient(90deg, #5573b5 0%, #b7e1ff 100%);
  color: #fff;
  border: none;
  padding: 15px;
  width: 100%;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 20px;
}

.exit-icon1 {
  position: absolute;
  right: -50px;
  top: -20px;
  cursor: pointer;
}
.modal-header{
  position: relative;
  flex-direction: column;
  align-items: start !important;
  justify-content: flex-start;
}
.modal-subtitle {
margin-top: 5px; 
font-size: 14px; 
color: #666; 
}
.social-buttons button {
width: 48%;
padding: 10px;
background-color: transparent;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
color: #000000;
border: 1px solid #475569;
}
.social-login{
text-align: center;
margin-top: 20px;
}
.social-login{
display: none;
}

.signup_button{
  text-decoration: none;
  color: black;
  font-weight: 700;
}

.typing-loader {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  margin-top: 5px;
}

.typing-loader .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.3;
  animation: typingBounce 1.2s infinite ease-in-out;
}

.dot-1 {
  background-color: #5573b5;
  animation-delay: 0s;
}

.dot-2 {
  background-color: #7a9fd4;
  animation-delay: 0.15s;
}

.dot-3 {
  background-color: #b7e1ff;
  animation-delay: 0.3s;
}

@keyframes typingBounce {

  0%,
  80%,
  100% {
    transform: scale(0.8);
    opacity: 0.3;
  }

  40% {
    transform: scale(1.4);
    opacity: 1;
  }
}

.gradient-text {
  background-color: rgb(90, 186, 244);
  /* Light blue background */
  color: #000;
  /* Ensure text is visible */
  border: 1px solid rgb(248, 250, 253);
  /* Uniform border color */
  padding: 4px 8px;
  border-radius: 5px;
  display: inline-block;
  font-weight: 600;
  font-size: 1rem;
}

.text-fill-gradient {
  font-weight: 700;
  font-size: 3rem;
  background: linear-gradient(90deg, #083A5E, #1E88E5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* For Firefox */
  color: transparent;
}

.success-description {
  width: 569px;
  color: #64748B;
  font-family: Poppins;
  font-weight: 400;
  font-style: Regular;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
}

.deep-dive {
  font-family: Space Grotesk;
  font-weight: 500;
  font-style: Medium;
  font-size: 35px;
  line-height: 45px;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
}

.filename {
  font-family: Space Grotesk;
  font-weight: 700;
  font-style: Bold;
  font-size: 35px;
  line-height: 45px;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
}

.suggestion-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 80%;
  height: 143px;
  opacity: 1;
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 16px;
  top: 489px;
  left: 61px;
  border-radius: 8px;
  border-width: 1px;
  border: 1px solid #96BBC2;
}

.suggestion-box-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.suggestion-questions {
  height: 40px;
  gap: 10px;
  opacity: 1;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  top: 566.18px;
  left: 82px;
  border-radius: 24px;
  color: white;
  background: linear-gradient(90deg, #5573b5 0%, #b7e1ff 100%);
}

.tabs {
  display: flex;
  margin-bottom: 1rem;
  gap: 1rem;
  border-radius: 8px;
  background-color: #FFFFFF;
  padding: 7px;
}

.tabs button {
  flex: 1;
  border-radius: 7px;
  cursor: pointer;
  height: 27px;
  gap: 5px;
  opacity: 1;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  top: 566.18px;
  left: 82px;
}

.tabs button.active {
  width: 270px;
  height: 27px;
  gap: 5px;
  opacity: 1;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  top: 566.18px;
  left: 82px;
  color: white;
  background: linear-gradient(90deg, #5573b5 0%, #b7e1ff 100%);
}