/* This CSS rule sets the default font size of the entire document */ html { font-size: 16px; }

/* These CSS rules sets the text direction of the paragraph (RTL or LTR) */ p, .bpw-from-bot > div, #input-message { direction: ltr; }

/* This rule changes the color of the text in the input message */ #input-message { color: #000000; }

/* Changes the color of the new message indicator */ .bpw-new-messages-indicator { background-color: #f5f5f5; color: #ffffff; }

.bpw-header-container { margin: 10px; background: linear-gradient(45deg, #600000, black, #0b111e, #0b111e, black, #600000); /* Adjust the angle and colors as needed */ border-radius: 10px; position: relative; overflow: hidden; border: 1px; border-radius: 10px; color: #ffffff; }

.bpw-header-name{ color: #ffffff; }

/* Styling for the typing bubble */ .bpw-typing-bubble { background: #000000; }

/* Styling for the chat bubble content */ .bpw-chat-bubble-content { background-color: #f5f5f5; border-radius: 3px; border: 1px transparent; }

/* Styling for the date container, header name, and header subtitle */ .bpw-date-container, .bpw-header-name, .bpw-header-subtitle { color: #ffffff; }

/* Styling for the layout of the chat bubble. Width, height, border, position and radius of the chat bubble / .bpw-layout { width: 360px !important; height: 60vh; border-radius: 10px; right: 50px; bottom: 5px; border: 2px; } / Responsive design rules for devices with width less than or equal to 767px */ @media screen and (max-device-width: 767px) { .bpw-layout { width: 80% !important; height: 60%; right: 10%; bottom: 200px; border-radius: 2; } }

/* Changes the fill color of the header icons to white */ .bpw-header-icon, .bpw-header-icon svg, .bpw-header-icon svg path { fill: #ffffff !important; }

/* Changes the color of the placeholder text in the input message */ #input-message::placeholder { color: rgba(0,0,0,.30); }

.bpw-composer textarea{ outline: none !important; border: 1px solid rgba(0,0,0,.15); } .bpw-composer textarea:focus{ outline: none !important; border: 1px solid rgba(0,0,0,.30); }

/* Styling for the keyboard single choice option */ .bpw-keyboard-single-choice { background-color: #ffffff; border: none; }

/* Styling for the buttons in the chat interface */ .bpw-button, .bpw-button-alt { background-color: #dcdcdc; color: #000000; border-radius: 10px; border: none; }

/* Styling for hover effect on the buttons in the chat interface */ .bpw-button:hover, .bpw-button-alt:hover { background-color: #f5f5f5; }

/* Styling for hyperlinks in the chat interface */ a { color: #ffffff; text-decoration: underline; }

/* Styling for the chat container, including color, scrollbar width and color, and border / .bpw-chat-container { background: linear-gradient(45deg, black, #0b111e, #0b111e, black, #600000); / Adjust colors and direction as needed */ scrollbar-width: thin; scrollbar-color: #f5f5f5 #0b111e; border: none; }

/* Styling for the chat bubble content when it's from the bot */ .bpw-from-bot .bpw-chat-bubble .bpw-chat-bubble-content { background-color: #f5f5f5; color: #000000; }

.bpw-from-user .bpw-chat-bubble .bpw-chat-bubble-content { background: linear-gradient(45deg, #600000, black, #0b111e, #0b111e, black, #600000); /* Adjust the angle and colors as needed */ color: #ffffff; }

/* Styling for the composer section of the chat interface */ .bpw-composer { background: linear-gradient(0deg, #600000, #f2f3f4, #f2f3f4, #f2f3f4, #0b111e); border-top: none; }

/* Styling for the scrollbar in the chat container */ .bpw-chat-container::-webkit-scrollbar, .bpw-chat-container::-moz-scrollbar { width: 10px; background-color: #ffffff; border: none; }

/* Styling for the avatar of the bot */ .bpw-bot-avatar img, .bpw-bot-avatar svg { background: #000000; border: 3px solid #ffffff; }

/* Styling for the general scrollbar in the web page */ ::-webkit-scrollbar { width: 0.5rem; }

/* Styling for the track of the general scrollbar and the chat container scrollbar */ ::-webkit-scrollbar-track, .bpw-chat-container::-webkit-scrollbar-track, .bpw-chat-container::-moz-scrollbar-track { background-color: transparent; }

/* Styling for the thumb of the general scrollbar and the chat container scrollbar */ ::-webkit-scrollbar-thumb, .bpw-chat-container::-webkit-scrollbar-thumb, .bpw-chat-container::-moz-scrollbar-thumb { background-color: #ffffff; border-radius: 1rem; border: 0.5rem solid transparent; }

.bpw-floating-button i svg path { fill: linear-gradient(135deg, #600000, black, #0b111e, #0b111e, black, #600000); /* Adjust the angle and colors as needed */ }

/* Styling for the 'powered by' section of the chat interface */ .bpw-powered { text-align: center; padding: 10px; color: #000000; background: #ffffff; font-size: 14px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; }

/* Styling for the hyperlinks in the 'powered by' section of the chat interface */ .bpw-powered a { color: #000000; text-decoration: underline; }

/* Styling for hover effect on the hyperlinks in the 'powered by' section of the chat interface */ .bpw-powered a:hover { text-decoration: underline; }

.bpw-send-button { background: #ff3030; border-radius: 20px; /* Adjust the value as needed for the desired roundness */ }

/* Change Bot Widget Icon */ .bpw-widget-btn { border-radius: 50%; background: #600000; }

.bpw-floating-button { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; border-radius: 50%; background-color: #0a0c10; box-shadow: 0 2px 5px rgba(0, 0, 0, 8.2); cursor: pointer; z-index: 9999; overflow: hidden; /* Necessary for hiding the icon overflow */ }

.bpw-floating-button::before { content: ""; background: url("https://github.com/getintorj/getintorj/blob/master/Black%20White%20Modern%20Handwritten%20Square%20Studio%20Logo.gif?raw=true"); background-repeat: no-repeat; background-position: center; background-size: contain; height: 50px; /* Adjust as needed / width: 50px; / Adjust as needed / position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.3s ease; / Transition added for smooth hover effect */ }

/* Hover effect / .bpw-floating-button:hover::before { transform: translate(-50%, -50%) scale(1.2); / Scale the icon on hover */ }

/* Additional hover effect for the button background */ .bpw-floating-button:hover { background-color: #600000; }

/* Animation effect */ @keyframes floatingAnimation { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }

.bpw-floating-button:hover { animation: floatingAnimation 1s ease infinite; /* Apply the animation on hover */ }

/* Remove box-shadow on hover */ .bpw-floating-button:hover { box-shadow: none !important; }