.btn:focus,
		.btn:active {
			outline: none;
			box-shadow: none;
		}

		/* Optional: Create a custom click effect on the icons */
		.btn i {
			transition: transform 0.1s ease, color 0.2s ease;
		}

		.btn:active i {
			transform: scale(0.9);
			/* Shrinks the icon slightly when clicked */
			color: #3498db;
			/* Change to any color on click (optional) */
		}

		.btn {
			font-size: 13px;
		}

		body {
			font-family: 'Arial', sans-serif;
			background-color: #fff;
			/* White background */
			color: #333;
			min-height: 100vh;
		}

		.modal {
			display: none;
			/* Hidden by default */
			z-index: 2000;
			/* Sit on top */
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.4);
			/* Black with opacity */
			overflow: auto;
			padding-top: 60px;
		}

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

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

		.dataframe {
			width: 99%;
			table-layout: auto;
			scroll-behavior: smooth;
			border-collapse: collapse;
			max-height: 400px;
			overflow-y: auto;

		}

		.dataframe th {
			text-align: center;
		}

		#user-input::placeholder {
			font-size: 14px;
			/* Adjust the font size as needed */
			color: #888;
			/* Customize the color if desired */
		}

		/* Sidebar Styles */
		.sidebar {
			position: fixed;
			font-size: 14px;
			top: 0;
			left: 0;
			bottom: 0;
			width: 250px;
			height: 100vh;
			background-color: #f0f8f0;
			/* Light background for sidebar */
			padding-top: 20px;
			overflow-y: auto;
			box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.1);
			/* Subtle shadow */
			border-right: 1px solid #e0e0e0;
			/* Light border */
			overflow: hidden;
			scrollbar-width: none;
			/* Firefox */
			-ms-overflow-style: none;
			/* IE 10+ */
		}

		.sidebar::-webkit-scrollbar {
			display: none;
			/* Chrome, Safari, Opera */
		}

		.sidebar a,
		.sidebar button {
			color: #333;
			/* Dark text for links */
			padding: 12px 20px;
			display: block;
			text-decoration: none;
			transition: background-color 0.2s ease, color 0.2s ease;
			border-radius: 5px;
			margin-bottom: 5px;
			border: none;
			background: none;
			text-align: left;
			width: 100%;
			cursor: pointer;
			display: flex;
			/* Use flexbox for icon and text alignment */
			align-items: center;
			/* Vertically center items */
		}

		.sidebar.hidden {
			width: 50px;
			/* Shrink the sidebar */
		}

		.sidebar a:hover,
		.sidebar button:hover {
			background-color: #e8f5e9;
			/* Light hover background */
		}

		.sidebar .active {
			background-color: #dcedc8;
			/* Light active background */
			font-weight: bold;
		}

		.sidebar i {
			background-color: #e8f5e9;
			/* Light hover background */
			margin-right: 15px;
			width: 22px;
			text-align: center;
			font-size: 1.1em;
			transition: transform 0.2s ease;
			color: #4caf50;
			/* Bright Green for icons */
		}

		/* Main Content Styles */
		.main-content {
			margin-left: 250px;
			padding: 10px;
		}

		.main-content.shifted {
			margin-left: 50px;
		}

		/* Login Form Styles */
		.login-container {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 91vh;
		}

		.login-form {
			width: 350px;
			padding: 25px;
			border-radius: 10px;
			background-color: #fff;
			/* White background for login form */
			box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
			border: 1px solid #e0e0e0;
			/* Light border */
		}

		.login-form h2 {
			text-align: center;
			margin-bottom: 25px;
			color: #4caf50;
			/* Green heading */
		}

		.login-form .form-group label {
			color: #333;
			font-weight: 500;
		}

		.login-form .form-control {
			border-radius: 5px;
			border: 1px solid #c8e6c9;
			/* Light green border */
		}

		.login-form .btn-primary {
			background-color: #4caf50;
			border-color: #4caf50;
			border-radius: 5px;
			font-weight: 500;
		}

		.login-form .btn-primary:hover {
			background-color: #388e3c;
			border-color: #388e3c;
		}

		/* Submenu styling */
		.submenu {
			margin-left: 20px;
			display: none;
			padding-left: 20px;
		}

		.submenu a {
			padding: 8px 20px;

			/* Darker text for submenu */
			font-size: 0.95em;
			border-radius: 5px;
			display: flex;
			/* Use flexbox for icon and text */
			align-items: center;
			/* Vertically center items */
		}

		.submenu a i {
			color: #66bb6a;
			/* Slightly darker green for submenu icons */
			margin-right: 15px;
		}

		.submenu a:hover {
			background-color: #f0f8f0;
			/* Light hover background for submenu */
		}

		/* Logo Styling */
		.logo-container {
			display: flex;
			align-items: center;
			padding: 15px 20px;
			background-color: #f0f8f0;
			/* Light background for logo */
			margin-bottom: 15px;
			border-radius: 5px;
		}

		.logo-container img {
			width: 30px;
			height: 30px;
			margin-right: 10px;
		}

		.logo-container h1 {
			font-size: 1.5em;
			color: #4caf50;
			/* Green for logo text */
			margin: 0;
			font-weight: bold;
		}

		/* Dropdown Arrow Styling */
		.dropdown-arrow {
			margin-left: auto;
			transition: transform 0.2s ease;
			color: #4caf50;
			/* Green for dropdown arrow */
		}

		.dropdown-arrow.rotate {
			transform: rotate(90deg);
		}

		/* Logout Button Styling (inside the sidebar) */
		.logout-button-container {
			/*position: absolute;*/
			bottom: 20px;
			left: 0;
			width: 100%;
			border: none;
			outline: none;
		}

		.logout-button-container button {
			background-color: #f0f8f0;
			/* Match sidebar background */
			border-color: #c8e6c9;
			/* Light green border */
			color: #4caf50;
			/* Bright Green for text and logout icon*/
			border-radius: 5px;
			padding: 12px 20px;
			cursor: pointer;
			width: 100%;
			text-align: left;
			display: flex;
			align-items: center;
			border: none;
			outline: none;

		}

		.logout-button-container button:hover {
			background-color: #e8f5e9;
		}

		.logout-button-container i {
			margin-right: 15px;
		}

		/* Optional: Make the modal larger */
		.modal-dialog {
			max-width: 90%;
			width: 80%;
			border-radius: 10px;
		}

		/* Chat Styles */
		.chat-btn {
			position: fixed;
			bottom: 30px;
			right: 30px;
			background-color: #4caf50;
			color: white;
			border: none;
			border-radius: 50%;
			width: 60px;
			height: 60px;
			font-size: 30px;
			cursor: pointer;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			z-index: 1000;
			display: flex;
			align-items: center;
			justify-content: center;
			outline: 0 !important;
		}

		.chat-container {
			position: fixed;
			bottom: 6em;
			right: 2.5vw;
			width: 30em;
			height: 65vh;
			background-color: #4caf50;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			display: none;
			z-index: 999;
		}

		.chat-header {
			background: linear-gradient(to right, #4CAF50, #81C784);
			display: flex;
			flex-direction: column;
			/* Stack rows vertically */
			padding-right: 1em;
			padding-left: 1em;
			padding-top: 0.5em;
			padding-bottom: 0.5em;
			color: white;
			text-align: left;
			font-size: 18px;
			font-weight: bold;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
		}

		.chat-header .d-flex {
			margin-bottom: 0;
			/* Ensure no space below the first row */
		}

		.chat-header .chat-subtitle {
			margin-top: 0;
			/* Ensure no space above the subtitle */
		}

		.chat-box div {
			font-size: 14px;
		}

		.chat-box {
			flex-grow: 1;
			overflow-y: auto;
			padding: 20px;
			display: flex;
			flex-direction: column;
			gap: 10px;
			background: linear-gradient(135deg, #e8f5e9, #e8f5e9);
			scroll-behavior: smooth
		}

		/* Thin scrollbar styling for modern look */
		#chat-box::-webkit-scrollbar {
			width: 7px;
			/* Adjust width for a thinner scrollbar */
			height: 7px;
			cursor: pointer;
		}

		/* Styling for the scrollbar track */
		#chat-box::-webkit-scrollbar-track {
			/* background: #4CAF50; /* Light background for the scrollbar track */
			border-radius: 7px;
			cursor: pointer;
		}

		/* Styling for the scrollbar thumb (the draggable part) */
		#chat-box::-webkit-scrollbar-thumb {
			background-color: #4CAF50;
			/* Darker color for the thumb */
			border-radius: 7px;
			border: 3px solid #4CAF50;
			/* Add space around the thumb */
			cursor: pointer;
		}

		/* Thin scrollbar styling for modern look */
		#chat-recommendations::-webkit-scrollbar {
			width: 7px;
			/* Adjust width for a thinner scrollbar */
			height: 7px;
			cursor: pointer;
		}

		/* Styling for the scrollbar track */
		#chat-recommendations::-webkit-scrollbar-track {
			/* background: #4CAF50; /* Light background for the scrollbar track */
			border-radius: 7px;
			cursor: pointer;
		}

		/* Styling for the scrollbar thumb (the draggable part) */
		#chat-recommendations::-webkit-scrollbar-thumb {
			background-color: #4CAF50;
			/* Darker color for the thumb */
			border-radius: 7px;
			border: 3px solid #4CAF50;
			/* Add space around the thumb */
			cursor: pointer;
		}

		/* Styling when the scrollbar thumb is hovered */
		#chat-data-frame::-webkit-scrollbar-thumb:hover {
			background-color: #4CAF50;
			/* Darken the thumb on hover */
			cursor: pointer;
		}

		/* Thin scrollbar styling for modern look */
		#chat-data-frame::-webkit-scrollbar {
			width: 7px;
			/* Adjust width for a thinner scrollbar */
			height: 7px;
			cursor: pointer;
		}

		/* Styling for the scrollbar track */
		#chat-data-frame::-webkit-scrollbar-track {
			/* background: #4CAF50; /* Light background for the scrollbar track */
			border-radius: 7px;
			cursor: pointer;
		}

		/* Styling for the scrollbar thumb (the draggable part) */
		#chat-data-frame::-webkit-scrollbar-thumb {
			background-color: #4CAF50;
			/* Darker color for the thumb */
			border-radius: 7px;
			border: 3px solid #4CAF50;
			/* Add space around the thumb */
			cursor: pointer;
		}

		/* Styling when the scrollbar thumb is hovered */
		#chat-data-frame::-webkit-scrollbar-thumb:hover {
			background-color: #4CAF50;
			/* Darken the thumb on hover */
			cursor: pointer;
		}

		.chat-input {
			display: flex;
			padding: 10px;
			background: linear-gradient(135deg, #e8f5e9, #e8f5e9);
			border-top: 1px solid #ddd;

		}

		.chat-input input {
			flex-grow: 1;
			padding: 12px 15px;
			font-size: 16px;
			border: 1px solid #ddd;
			border-radius: 15px;
			outline: none;
			margin-right: 10px;
			width: 4em;
		}

		.chat-input button {
			padding: 0 !important;
			height: 50px;
			width: 50px;
			background-color: #388e3c;
			color: white;
			border: none;
			border-radius: 50px;
			cursor: not-allowed;
			font-size: 16px;
			transition: background-color 0.3s ease;
			outline: 0 !important;
		}

		.chat-input button:hover {
			background-color: #2e7d32;
		}

		.user-message,
		.bot-message {
			max-width: 75%;
			padding: 10px;
			border-radius: 20px;
			margin-bottom: 10px;
			font-size: 16px;
			line-height: 1.5;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
			word-wrap: break-word;
		}

		.user-message {
			background-color: #e8f5e9;
			align-self: flex-end;
			border-bottom-left-radius: 0;
			animation: slide-in 0.3s ease-out;
		}

		.bot-message {
			background-color: #c8e6c9;
			align-self: flex-start;
			border-bottom-right-radius: 0;
			animation: slide-in 0.3s ease-out;
		}

		/* Typing Indicator (Ellipsis) */


		#send-btn:disabled {

			cursor: not-allowed;
		}

		#button-text {
			display: inline-block;
		}

		.chat-loading {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 5px;
		}

		.dot {
			width: 7px;
			height: 7px;
			border-radius: 50%;
			background-color: #ffffff;
			animation: bounce 0.8s infinite alternate;
		}

		.dot:nth-child(1) {
			animation-delay: 0s;
		}

		.dot:nth-child(2) {
			animation-delay: 0.2s;
		}

		.dot:nth-child(3) {
			animation-delay: 0.4s;
		}

		@keyframes bounce {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(-5px);
			}
		}

		button.enabled {
			border: 2px solid green;
			cursor: pointer;
		}

		/* Optional styling for the button when disabled */
		button:disabled {
			border: 2px solid lightgrey;
			cursor: not-allowed;
		}

		#btn-arrow.enabled {
			color: green;
		}

		#btn-arrow.disabled {
			color: lightgrey;
		}

		.zoom-icon {
			cursor: pointer;
			font-size: 20px;
			color: #007bff;
			position: absolute;
			/* Position the icon relative to the message */
			top: -10px;
			/* Place the icon at the top-right */
			right: 0;
			/* Align it to the right */
		}

		.zoom-icon:hover {
			color: #0056b3;
		}

		.modal-content {
			background-color: white;
			margin: 5% auto;
			padding: 20px;
			border: 1px solid #888;
			width: 80%;
			/* Medium sized */
			max-width: 100%;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			border-radius: 10px;
		}

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

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

		/* CSS to highlight selected message */
		.chat-message.selected {
			background-color: #96cff2;

		}

		#whatsapp-btn {
			border: none;
			/* Remove the border */
		}

		#whatsapp-btn:disabled {
			border: none;
			/* Ensure no border even when disabled */
			background: none;
			/* Optional: remove any background styling for the disabled button */
		}

		#whatsapp-btn:focus {
			outline: none;
		}

		.chat-recommendations {
			display: flex;
			flex-wrap: nowrap;
			gap: 8px;
			padding: 10px;
			position: relative;
			bottom: 0;
			background: linear-gradient(135deg, #e8f5e9, #e8f5e9);
			border-top: 1px solid #ccc;
			max-height: 100px;
			overflow-x: auto;
			overflow-y: hidden;
			z-index: 1;
			font-size: 14px;
			justify-content: flex-start;
			scroll-behavior: smooth;
			-ms-overflow-style: none;
			/* IE/Edge */
			scrollbar-width: none;
			/* Firefox */
			touch-action: pan-x;
			-webkit-overflow-scrolling: touch;
		}

		.chat-recommendations::-webkit-scrollbar {
			display: none;
		}

		.chat-recommendations button {
			border: none;
			border-radius: 20px;
			background-color: #ffffff;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			color: grey;
			cursor: pointer;
			font-size: 14px;
			padding: 8px 14px;
			white-space: nowrap;
			flex: 0 0 auto;
			transition: background-color 0.2s, transform 0.2s;
			display: inline-block;
			position: relative;
		}

		.chat-recommendations button:hover {
			background-color: #f9fcf9;
			transform: translateY(-2px);
		}

		.chat-recommendations button::after {
			content: "";
			position: absolute;
			bottom: -6px;
			left: 20px;
			width: 0;
			height: 0;
			border: 6px solid transparent;
			border-top-color: #ffffff;
		}

		@media (max-width: 600px) {
			.chat-recommendations {
				max-height: 60px;
			}
		}

		.chat-recommendations {
			touch-action: pan-x;
			-webkit-overflow-scrolling: touch;
			flex-shrink: 0;
			overflow-x: auto;
		}

		.chat-recommendations button:focus {
			outline: none;
		}

		.btn-group {
			display: flex;
			align-items: center;
		}

		.dropdown-item {
			cursor: pointer;
			background: none;
			border: none;
			text-align: left;
			width: 100%;
			font-size: 14px;
		}

		.dropdown-item:hover {
			background-color: #f0f0f0;
		}

		.share-dropdown {
			position: relative;
		}

		.share-button {
			color: white;
			font-size: 20px;
			background: none;
			border: none;
			cursor: pointer;
		}

		.share-options {
			display: none;
			position: absolute;
			top: 2.1em;
			right: 1em;
			background: white;
			color: black;
			border-radius: 4px;
			z-index: 1000;
		}


		.share-dropdown.disabled {
			pointer-events: none;
			/* disables all interactions */
			opacity: 0.5;
			/* visually indicate it's disabled */
		}

		.ts-dropdown {
			background-color: white !important;
			border: 1px solid #ccc;
			z-index: 9999;
		}

		#kpi-metric,
		.ts-control,
		.ts-dropdown,
		.ts-dropdown .option {
			font-size: 14px;
			/* Or match your input size like 1rem or 0.875rem */
		}

		.ts-wrapper .ts-control {
			background-image: url("data:image/svg+xml,%3Csvg fill='gray' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right 10px center;
			background-size: 16px 16px;
			padding-right: 2rem;
			/* leave space for arrow */
		}

		/* Ensure submenu uses relative positioning */
		.sidebar,
		#analytics-submenu,
		.submenu-item-with-flyout {
			overflow: visible;

			/* Important for absolute children */
		}

		/* Container for the flyout item */
		.submenu-item-with-flyout {
			position: relative;
		}

		/* The flyout menu itself */
		.flyout-menu {
			display: none;
			position: absolute;
			top: 0;
			left: 100%;
			/* Appear to the right of Sales item */

			background-color: #f0f8f0;
			border: 1px solid #ccc;
			min-width: 180px;
			z-index: 9999;
			box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
		}

		/* Show flyout when hovering on parent */
		.submenu-item-with-flyout:hover .flyout-menu {
			display: block;
		}

		/* Style the flyout links */
		.flyout-menu a {
			display: block;
			padding: 8px 12px;
			text-decoration: none;
			white-space: nowrap;
		}

		.toast-success {
			background-color: #28a745 !important;
			/* Bootstrap green */
			color: #fff !important;
		}

		.toast-error {
			background-color: #dc3545 !important;
			/* Bootstrap red */
			color: #fff !important;
		}

		.toast-info {
			background-color: #17a2b8 !important;
			/* Bootstrap cyan */
			color: #fff !important;
		}

		.toast-warning {
			background-color: #ffc107 !important;
			/* Bootstrap yellow */
			color: #212529 !important;
		}

		.round-border {
			border-radius: 50% !important;
		}

		/* Base styles for all text-based inputs and textarea */
		input[type="text"],
		input[type="email"],
		input[type="password"],
		input[type="number"],
		input[type="search"],
		input[type="tel"],
		input[type="url"],
		textarea {
			border: 1px solid #4CAF50;
			padding: 8px;
			border-radius: 4px;
			transition: border-color 0.3s ease;
			outline: none;
			/* Remove default focus outline */
			box-shadow: none;
			/* Remove browser-specific glow */
			font-family: inherit;
			font-size: 1rem;
			resize: vertical;
			/* Optional: allows vertical resizing only */
		}

		/* Focus styles (green border, no glow) */
		input[type="text"]:focus,
		input[type="email"]:focus,
		input[type="password"]:focus,
		input[type="number"]:focus,
		input[type="search"]:focus,
		input[type="tel"]:focus,
		input[type="url"]:focus,
		textarea:focus {
			border: 1px solid #4caf50;
			/* Green border on focus */
			outline: none;
			/* Remove focus outline */
			box-shadow: none;
			/* Remove light blue shadow */
		}

		/* Override Bootstrap for inputs and textarea with .form-control */
		.form-control:focus {
			border: 1px solid #4CAF50 !important;
			/* Force green border */
			outline: none !important;
			/* Remove default outline */
			box-shadow: none !important;
			/* Remove Bootstrap's blue glow */
		}