/* Custom CSS styles */
body {
	    font-family: Arial, sans-serif;
	        margin: 0;
		    padding: 0;
		        background-color: #fff;
			    height: 100vh; /* Ensure body takes up the full height */
			        display: flex;
				    flex-direction: column;
			    }
			    #header {
				        text-align: left;
					    padding: 20px;
					        font-weight: bold;
						        background-color: #fff;
							    color: black;
						    }
						    #chat-container {
							        flex: 1; /* Make chat container take up remaining space */
								    display: flex;
								        flex-direction: column;
									    max-width: 1024px;
									        width: 100%;
										    margin: 0 auto;
										        background-color: white;
										}
										#chat-messages {
											    flex: 1; /* Make chat messages container take up remaining space */
											        overflow-y: auto;
												    padding: 10px;
												        display: flex;
													    flex-direction: column;
												    }
												    .user-message {
													        align-self: flex-end;
														    background-color: #0078ff;
														        color: white;
															    padding: 10px;
															        border-radius: 20px 20px 0 20px;
																    margin-bottom: 5px;
																        max-width: 80%;
																	    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
																    }
																    .bot-message {
																	        align-self: flex-start;
																		    background-color: #e5e5ea;
																		        color: black;
																			    padding: 10px;
																			        border-radius: 20px 20px 20px 0;
																				    margin-bottom: 5px;
																				        max-width: 80%;
																					    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
																				    }
																				    .button-container {
																					        display: flex;
																						    flex-wrap: wrap;
																						        justify-content: flex-start;
																							    margin-top: 5px;
																						    }
																						    .button {
																							        background-color: #365c88;
																								    border: none;
																								        color: white;
																									    padding: 10px 20px;
																									        text-align: center;
																										    text-decoration: none;
																										        font-size: 16px;
																											    margin: 4px 2px;
																											        cursor: pointer;
																												    border-radius: 20px;
																												        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
																												}
																												#user-input-container {
																													    display: flex;
																													        justify-content: center;
																														    padding: 10px;
																														        padding-bottom: 5%; /* Add 5% padding at the bottom */
																															    																															        background-color: #fff;
																															}
																															#user-input {
																																    width: calc(95% - 20px);
																																        padding: 15px;
																																	    border: 1px solid #ccc;
																																	        border-radius: 20px;
																																		    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
																																	    }
.centered-buttons {
display: flex;
position: relative;
top: 35%;
gap: 0.5rem;
margin: 0 auto;
height: 11%;
max-width: 1024px;
justify-content: center;
}
.overlay-button{
width: 23%;
background-color: white;
border-radius: 20px;
border: 1px solid #ccc;
cursor: pointer;
font-size: medium;
}
#logo{
position: fixed;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
}
.small-icon{
max-width:24px;
}