/* Start custom CSS *//* -------------------------------------
   Root Variables
-------------------------------------- */
:root {
	--scaling: 1;
	--space-1: calc(4px * var(--scaling));
	--space-2: calc(8px * var(--scaling));
	--space-3: calc(12px * var(--scaling));
	--space-4: calc(16px * var(--scaling));
	--space-6: calc(32px * var(--scaling));
	--font-size-2: calc(14px * var(--scaling));
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--line-height-2: calc(20px * var(--scaling));
	--letter-spacing-2: 0em;
	--default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI (Custom)", Roboto, "Helvetica Neue", "Open Sans (Custom)", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--gray-12: #202020;
	--gray-a7: #00000031;
	--color-surface: rgba(255, 255, 255, 0.85);
	--accent-a8: #0034dc72;
	--accent-a11: #002bb7c5;
	--radius-2: 4px;
	--radius-full: 0;
	--focus-a5: #c7d7ff66;
	--focus-8: #5570f1;
}

/* -------------------------------------
	 Button Styles
  -------------------------------------- */
.rt-BaseButton.rt-variant-outline {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: var(--default-font-family) !important;
	font-size: var(--font-size-2) !important;
	line-height: var(--line-height-2) !important;
	letter-spacing: var(--letter-spacing-2) !important;
	font-weight: var(--font-weight-medium) !important;
	padding: 0 var(--space-3) !important;
	border-radius: max(var(--radius-2), var(--radius-full)) !important;
	height: var(--space-6) !important;
	color: var(--accent-a11) !important;
	border: none !important;
	box-shadow: inset 0 0 0 1px var(--accent-a8) !important;
	background-color: transparent !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	text-decoration: none !important;
}

.rt-BaseButton.rt-variant-outline:hover,
.rt-BaseButton.rt-variant-outline:focus {
	background-color: rgba(0, 52, 220, 0.05) !important;
	box-shadow: inset 0 0 0 2px var(--accent-a11) !important;
}

.rt-BaseButton,
.rt-Button {
	box-sizing: border-box !important;
	text-align: center !important;
	vertical-align: middle !important;
	user-select: none !important;
	appearance: none !important;
}

.rt-BaseButton.rt-r-size-2 {
	font-size: var(--font-size-2) !important;
	gap: var(--space-2) !important;
	padding-left: var(--space-3) !important;
	padding-right: var(--space-3) !important;
}

.rt-BaseButton:hover {
	background-color: var(--accent-10) !important;
}

/* -------------------------------------
	 Dropdown (Select) Styles
  -------------------------------------- */
.rt-SelectTrigger {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-shrink: 0 !important;
	user-select: none !important;
	font-family: var(--default-font-family) !important;
	font-weight: var(--font-weight-regular) !important;
	font-style: normal !important;
	text-align: start !important;
	color: var(--gray-12) !important;
	line-height: var(--line-height-2) !important;
	font-size: var(--font-size-2) !important;
	letter-spacing: var(--letter-spacing-2) !important;
	gap: calc(var(--space-1) * 1.5) !important;
	box-sizing: border-box !important;
	background-color: var(--color-surface) !important;
	box-shadow: inset 0 0 0 1px var(--gray-a7) !important;
	border-radius: max(var(--radius-2), var(--radius-full)) !important;
	padding-left: var(--space-3) !important;
	padding-right: var(--space-3) !important;
	height: var(--space-6) !important;
	border: none !important;
	outline: none !important;
}

.rt-SelectTrigger.rt-r-size-2 {
	--select-trigger-height: var(--space-6) !important;
	height: var(--select-trigger-height) !important;
}

.rt-SelectTrigger.rt-variant-surface,
.rt-SelectTrigger:invalid {
	background-color: var(--color-surface) !important;
	box-shadow: inset 0 0 0 1px var(--gray-a7) !important;
	color: var(--gray-12) !important;
}

/* -------------------------------------
	 Text Input Styles (Scoped to .rt-Box form)
  -------------------------------------- */
.rt-Box form .rt-TextFieldRoot {
	--text-field-selection-color: var(--focus-a5) !important;
	--text-field-focus-color: var(--focus-8) !important;
	--text-field-border-width: 1px !important;
	--text-field-padding: calc(var(--space-2) - var(--text-field-border-width)) !important;
	--text-field-border-radius: max(var(--radius-2), var(--radius-full)) !important;
	--text-field-height: var(--space-6) !important;
	--text-field-native-icon-size: var(--space-4) !important;

	display: flex !important;
	align-items: stretch !important;
	height: var(--text-field-height) !important;
	padding: var(--text-field-border-width) !important;
	border-radius: var(--text-field-border-radius) !important;
	background-clip: content-box !important;
	background-color: var(--color-surface) !important;
	box-shadow: inset 0 0 0 var(--text-field-border-width) var(--gray-a7) !important;
	font-family: var(--default-font-family) !important;
	font-style: normal !important;
	font-weight: var(--font-weight-regular) !important;
	text-align: start !important;
	color: var(--gray-12) !important;
	box-sizing: border-box !important;
}

.rt-Box form .rt-TextFieldRoot.rt-r-size-2 {
	font-size: var(--font-size-2) !important;
	letter-spacing: var(--letter-spacing-2) !important;
}

.rt-Box form .rt-TextFieldInput {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	border-radius: calc(var(--text-field-border-radius) - var(--text-field-border-width)) !important;
	text-align: inherit !important;
	text-indent: var(--text-field-padding) !important;
	font-family: var(--default-font-family) !important;
	font-size: var(--font-size-2) !important;
	font-weight: var(--font-weight-regular) !important;
	color: var(--gray-12) !important;
	background-color: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}

.rt-Box form .rt-TextFieldInput::selection,
.rt-Box form .rt-TextFieldRoot::selection {
	background-color: var(--text-field-selection-color) !important;
}

.rt-Box form textarea.rt-TextFieldInput {
	resize: vertical !important;
	min-height: 100px !important;
}

/* -------------------------------------
	 Utility Classes & Layout
  -------------------------------------- */
.fullwidth {
	width: 100% !important;
}

.rt-r-size-2 {
	font-size: var(--font-size-2) !important;
	line-height: var(--line-height-2) !important;
}

.rt-r-size-5 {
	font-size: 20px !important;
	line-height: 26px !important;
}

.rt-r-size-6 {
	font-size: 24px !important;
	line-height: 30px !important;
}

.rt-r-size-7 {
	font-size: 28px !important;
	line-height: 36px !important;
}

.rt-r-weight-regular {
	font-weight: 400 !important;
}

.chat-box-stopped {
	margin-bottom: -10px !important;
}

.rt-reset.rt-BaseCard.rt-Card.rt-r-size-1.rt-variant-surface {
	border: 0px solid #e0e0e0 !important;
	box-shadow: none !important;
	padding: 12px !important;
	color: black !important;
	display: block !important;
}

.rt-reset.rt-BaseCard.rt-Card.rt-r-size-1.rt-variant-surface:hover {
	background-color: #e0e0e0 !important;
}

/* -------------------------------------
   Headings (e.g. h3 inside rt-Box)
-------------------------------------- */
.rt-Box h3.rt-Heading.rt-r-size-2 {
	margin: 0 0 0.5rem 0 !important;
	font-size: calc(var(--font-size-2) * var(--heading-font-size-adjust)) !important;
	line-height: var(--heading-line-height-2) !important;
	letter-spacing: calc(var(--letter-spacing-2) + var(--heading-letter-spacing)) !important;
	font-family: var(--heading-font-family, var(--default-font-family)) !important;
	font-weight: var(--font-weight-bold) !important;
	font-style: var(--heading-font-style, normal) !important;
	color: var(--accent-a11) !important;
}

/* -------------------------------------
	 Horizontal Rule (remove double lines)
  -------------------------------------- */
.rt-Box form hr {
	border: none !important;
	border-top: 1px solid var(--gray-a7) !important;
	margin: 0.5rem 0 !important;
}

/* -------------------------------------
	 Remove unwanted inner border from input
  -------------------------------------- */
.rt-Box form input.rt-TextFieldInput {
	border: none !important;
	appearance: none !important;
	background-color: transparent !important;
}

/* -------------------------------------
   Button: Submit (Solid Variant)
-------------------------------------- */
.rt-Box form .rt-BaseButton.rt-variant-solid {
	background-color: var(--accent-9) !important;
	color: var(--accent-contrast) !important;
	border: none !important;
	box-shadow: none !important;
	transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

.rt-Box form .rt-BaseButton.rt-variant-solid:hover,
.rt-Box form .rt-BaseButton.rt-variant-solid:focus {
	background-color: var(--accent-10) !important;
	box-shadow: inset 0 0 0 1px var(--accent-a8) !important;
}

/* -------------------------------------
	 Button: Back (Soft Variant)
  -------------------------------------- */
.rt-Box form .rt-BaseButton.rt-variant-soft {
	background-color: var(--accent-a3) !important;
	color: var(--accent-a11) !important;
	border: none !important;
	box-shadow: none !important;
	transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

.rt-Box form .rt-BaseButton.rt-variant-soft:hover,
.rt-Box form .rt-BaseButton.rt-variant-soft:focus {
	background-color: var(--accent-a4) !important;
	box-shadow: inset 0 0 0 1px var(--accent-a8) !important;
}

/* -------------------------------------
	 Button Base Styles (Scoped)
  -------------------------------------- */
.rt-Box form .rt-BaseButton,
.rt-Box form .rt-Button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	font-family: var(--default-font-family) !important;
	font-size: var(--font-size-2) !important;
	font-weight: var(--font-weight-medium) !important;
	font-style: normal !important;
	text-align: center !important;
	vertical-align: top !important;
	user-select: none !important;
	text-decoration: none !important;
	height: var(--space-6) !important;
	padding-left: var(--space-3) !important;
	padding-right: var(--space-3) !important;
	border-radius: max(var(--radius-2), var(--radius-full)) !important;
	gap: var(--space-2) !important;
	letter-spacing: var(--letter-spacing-2) !important;
	line-height: var(--line-height-2) !important;
}

/* -------------------------------------
   Remove default input padding (scoped to rt-Box only)
-------------------------------------- */
.rt-Box input[type="text"],
.rt-Box input[type="date"],
.rt-Box input[type="email"],
.rt-Box input[type="number"],
.rt-Box input[type="password"],
.rt-Box input[type="search"],
.rt-Box input[type="tel"],
.rt-Box input[type="url"],
.rt-Box select,
.rt-Box textarea {
	padding: 0 !important;
}

.App {
	text-align: center;
}

.App-logo {
	height: 40vmin;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.App-logo {
		animation: App-logo-spin infinite 20s linear;
	}
}

.App-header {
	background-color: #282c34;
	min-height: 70vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: calc(10px + 2vmin);
	color: white;
}

.App-link {
	color: #61dafb;
}

@keyframes App-logo-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* App.css */

.intro-container {
	min-height: 70vh;
	padding: 1rem;
}

.App-wrapper {
	padding-top: 40px;
	padding-bottom: 120px;
	width: 100%;
	min-height: 70vh;
}

.intro-box {
	max-width: 600px;
	width: 100%;
	margin: 0 auto;
}

.chat-box-scroll {
	width: 100%;
	padding: 1rem;
	margin-bottom: 1rem;
	background-color: white;
}

.chat-content {
	max-width: 600px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

.chat-heading {
	margin-bottom: 0.5rem;
}

.chat-box-input {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	/* ensure full width */
	display: flex;
	justify-content: center;
	padding: 1rem;
	background-color: white;
	box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	transition: position 0.3s ease;
}

.chat-box-stopped {
	position: absolute !important;
	bottom: 0 !important;
	box-shadow:none !important;
  }
  

.chat-input-inner {
	width: 600px;
	max-width: 90%;
}

.normalpadding{
	text-align:left !important;
}/* End custom CSS */