/* Add your custom CSS for the chat interface style here */
        /* For example: */
        body {
            font-family: Arial, sans-serif;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            height: 100vh;
          justify-content: center;
	overflow: hidden; /* Hide horizontal scrollbar */
	overflow-x: hidden; 
        }

a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	}
        .head {
        	width:100%;
        	position: fixed;
        	max-height:80px;
        	display: flex;
        	align-items: center;
        	top:0;
        	z-index:1;
        }
        .menu {
        padding:15px;
        display:flex;
        }
        .company {
        	margin-left:30px;
        	font-weight:520
        	}
        .chat-interface {
        	width:100%;
            padding: 10px;
            height: 90%;
            display: flex;
            flex-direction: column;
            top:0
        }
        .about_time {
        	margin-bottom:20px
        	}
        .chat-history {
            flex-grow: 1;
            max-height: 100%;
            overflow-y: auto;
            margin-top:70px
        }
        .message-container {
            display: flex;
            margin-bottom: 10px;
            justify-content: flex-end;
        }
        .user-message {
            color: black;
            border-radius: 15px;
            padding: 10px;
            max-width: 80%;
            word-wrap: break-word;
            align-self: flex-end;
            position: relative;
            margin-top: 35px;
            right: 15px;
            display: block;
        }
        .bot-message {
            color: black;
            border-radius: 15px;
            padding: 10px;
            max-width: 285px;
            word-wrap: break-word;
            align-self: flex-start;
            margin-bottom:10px;
            position: relative;
            margin-right: auto;
            left:0
        }
        .user-input-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            bottom: 15px;
            justify-content: center;
            margin:auto;
            width:100%
        }
        input[type="text"] {
            flex-grow: 1; /* Allow the input field to expand */
            padding: 10px;
            border: 1.5px solid #1a1a1a;
            border-radius: 15px 0 0 15px;
            font-weight:520
        }
        button {
            flex-grow: 0; /* Prevent the button from expanding */
            padding: 10px 20px;
            border: none;
            border-radius: 0 15px 15px 0;
            color: white;
            cursor: pointer;
            border:1.5px solid #1a1a1a;
            margin-left:-5px
        }

        /* Media queries to adjust width and height for tablets and PCs */
        @media screen and (min-width: 768px) {
            .chat-interface {
                width: 70%;
                height: 80%;
            }
        }

        /* Media queries to adjust width and height for smartphones */
        @media screen and (max-width: 767px) {
            .chat-interface {
                width: 95%;
                height: 95%;
            }
        }
        .banner {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: 150px;
	background-color: #3f3f3f;
	color: #fff;
	display: none;
	z-index: 2;
	border-radius: 35px 35px 0 0;
	}

.close-button {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	font-size: 20px;
	color:#8a8a8a;
	display: flex;
	margin:5px
	}

#closeBanner {
	padding:5px 7px;
	border-radius:45px;
	background-color:#4f4f4f;
	}

.more_time_info {
	display:flex;
	justify-content: center;
  align-items: center;
	}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.2;
	display: none;
	z-index: 1;
	}
.banner_content {
	margin:20px;
	margin-top:40px;
	}

.times {
	margin-left: auto;
	}
	.banner-container {
        position: relative;
        overflow: hidden;
        border-radius:25px;
        }
        .more {
	margin:20px;
	font-size:15px;
	color:#9f9f9f
	}

.rest_day {
	color:#8f8f8f;
	padding-bottom:30px
	}