body {
  /* background: #121212; */
  background: rgb(9, 9, 9);
  color: #fff;
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  display: block;
  justify-content: center;
  align-items: center;
  min-height: 90vh;
  width: 100%;
}

#chat-container {
  width: 90%;
  margin-top: 10%;
  max-width: 600px;
  margin: 20px auto;
  /* background: #1e1e1e; */
  background: #0e0d0d;
  /* border: 1px solid #333; */
  border: 1px solid #2d2d2d;
  border-radius: 10px;
}

#chat-box {
  padding: 20px;
  overflow-y: auto;
}

.message {
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 4px;
}

.sent {
  background: #333;
  /* background: #474444; */
  text-align: center;
  font-weight: 600;
  font-family: monospace;
  /* font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif */
  /* color:#b7ecf3 ; */
  color: aqua;
  font-size: xx-large;
  border-radius: 10px;
  width: 50%;
}

.received {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px; /* Ensures the photo container is visually consistent */
}

#input-box {
  display: flex;
  gap: 10px; /* Creates space between the input and button */
  padding: 10px;
}

#gr {
  flex-grow: 1;
  padding: 10px;
  /* background: #333; */
  /* background: #171717; */
  background: #201f1f;
  border: none;
  color: white;
  border-radius: 8px;
  font-family: monospace;
  font-weight: 700;
}

#send-button {
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 8px;
  font-family: monospace;
  font-weight: 700;
  background: #dc5b0b;
  color: aliceblue;
}

/* 
#loading {
  color: #f4fc01;
} */

#loading {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  border: 5px solid #f3f3f3; /* Light grey */
  border-top: 5px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#footer {
  text-align: center;
  color: #aaa; /* Light grey color for the footer text */
  font-size: 0.8rem; /* Smaller font size for the footer */
  margin-top: 20px; /* Adds space between the chat container and the footer */
  width: 100%; /* Full width to ensure it doesn't sit inline with other elements */
  padding: 10px 0; /* Padding above and below the text */
  box-sizing: border-box; /* Makes sure padding doesn't add to the width */
}


.error-message {
  background-color: #ffdddd; /* Light red background */
  color: #d8000c; /* Dark red text color */
  margin: 10px 0;
  padding: 10px;
  border-radius: 4px;
}



.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 2; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black with opacity */
}

.modal-content {
  background-color: rgb(21 20 20);
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 50%; /* Adjust as necessary */
  border-radius: 5px; /* Optional for rounded corners */
  color: #000; /* Text color - ensure contrast against background */
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  text-decoration: none;
  cursor: pointer;
}

/* Ensure the paragraph inside the modal-content is styled correctly */
.modal-content p {
  color: white; /* Text color */
  /* Add more styling as needed */
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  /* Add any other styles for your header */
}

#logo {
  height: 70px; /* You can set the height according to your preference */
  width: auto; /* This will maintain the aspect ratio */
  margin-right: 50px; /* Adjust the margin as needed */
}


@media (max-width: 768px) {
  #logo {
    height: 100px; /* Smaller logo for mobile devices */
  }
}


/* Styles for links inside the div with ID 'df' */
#lm a:link {
  color: aqua; /* Color for unvisited links */
}

#lm a:visited {
  color: aqua; /* Color for visited links */
}

/* Styles for links inside the div with ID 'df' */
#df a:link {
  /* color: rgb(0, 255, 153); Color for unvisited links */
  color: aqua;
}

#df a:visited {
  /* color:rgb(0, 255, 153); Color for visited links */
  color: aqua;
}

a{
  text-decoration: none;
}