﻿/* Global reset styles */
* {
	margin: 0; /* Reset margin for all elements */
	padding: 0; /* Reset padding for all elements */
}

/* Full height for html and body for flexbox layout */
html, body {
	height: 100%;
}

/* Body styles */
body {
	position: relative;
	overflow: hidden; /* Hide overflow */
}

/* Main app container */
#app {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Header styles */
header {
	position: relative;
	width: 100%;
	background: #fff; /* White background, overriden from previous style */
	display: flex;
	flex-shrink: 0;
	z-index: 100;
	align-items: center;
	padding: 5px;
	border-bottom: 5px solid #1a293e; /* Deep blue border */
}

	/* Header links */
	header a, header .nav-link {
		color: #1a293e; /* Dark blue text */
	}

	/* Dropdown menu styles in header */
	header .dropdown-menu a {
		color: #212529; /* Dark text */
	}

/* Right top section styles */
#right-top {
	margin-left: auto;
	margin-right: 10px;
}

	/* Dropdown menu alignment */
	#right-top .dropdown-menu {
		right: 0;
	}

	/* Dropdown toggle decoration */
	#right-top .dropdown-toggle {
		text-decoration: none;
	}

/* Main body container styles */
#body-container {
	display: flex;
	flex-direction: column;
	overflow-y: hidden;
	position: relative;
	flex: 1 1 auto;
}

/* Inner content area */
#inner-content {
	overflow-y: scroll;
	flex-grow: 1;
}

/* Footer button styles */
.footer-button {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 15px 0;
	border-top: solid 1px #ccc;
	overflow-y: scroll;
}

/* Narrow button styles */
.button-narrow {
	padding: 1px 15px 1px 15px !important;
	margin-top: 0px;
	margin-right: 3px;
}

	/* Input padding within narrow buttons */
	.button-narrow input {
		padding: 1px 15px 1px 15px !important;
	}

/* Login button styles */
.button-login {
	margin: 0;
	padding: 1px 15px 1px 15px !important;
	border-radius: 0; /* Removes border radius */
}

/* Navbar brand styles */
a.navbar-brand {
	white-space: normal;
	text-align: center;
	word-break: break-all;
}

/* Header styles */
.rs-header {
	/* Currently empty, can be used for future styling */
}

/* Container for header */
.header-container {
	padding-left: 0;
}

/* Row within the header */
.header-row {
	vertical-align: middle;
}

/* Left-aligned header items */
.header-items-left {
	/* Placeholder for future styling */
}

/* Center-aligned header items */
.header-items-center {
	text-align: center;
	padding-top: 2px;
}

/* Right-aligned header items */
.header-items-right {
	float: right;
	padding-right: 0px;
	display: inline-flex;
}

/* Link styles for sufficient contrast */
a {
	color: #1a293e; /* Dark blue text */
	text-decoration: underline
}

	/* Link hover effect */
	a:hover {
		text-decoration: none;
	}

/* Styles for primary buttons */
.btn-primary {
	color: #fff; /* White text */
	background-color: #1a293e; /* Dark blue background */
	border-color: #1861ac; /* Darker blue border */
}

/* Active link styles in nav-pills */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
	color: #fff; /* White text */
	background-color: #1b6ec2; /* Bright blue background */
	border-color: #1861ac; /* Darker blue border */
}

/* Bootstrap tags styles */
.list-group {
	margin-bottom: 0px;
}

.list-group-item {
	padding: 2px 5px;
	border: 0px solid #ddd;
}

/* Sticky footer styles */
.border-top {
	border-top: 1px solid #e5e5e5; /* Light gray top border */
}

.border-bottom {
	border-bottom: 1px solid #e5e5e5; /* Light gray bottom border */
}

.box-shadow {
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); /* Subtle box shadow */
}

/* Policy accept button font styles */
button.accept-policy {
	font-size: 1rem;
	line-height: inherit;
}

/* Styles for media left alignment */
.media-left {
	margin-right: 15px;
}

	/* Icon size in media-left */
	.media-left > i {
		font-size: 40px;
	}

/* Table styles */
.table {
	border-collapse: separate;
	border-spacing: 1px;
}

	/* Padding for table cells */
	.table > :not(caption) > * > * {
		padding: .2rem .2rem;
	}

	/* Sticky thead with dark background and white text */
	.table thead {
		position: sticky;
		top: 0;
		background: #1a293e;
		color: #fff;
		z-index: 1;
	}

		/* Styles for links and icons in table head */
		.table thead a, .table thead i {
			color: #fff;
		}

		/* Opacity for disabled buttons in table head */
		.table thead button:disabled {
			opacity: 0.5;
		}

	.table td {
		word-break: break-word;
	}

/* Center alignment for table cells */
.table-center td {
	vertical-align: middle;
}

/* Fixed width table layout */
.table-fixed-width {
	table-layout: fixed;
}

.e-rte-table th {
	background: #1a293e;
	color: #fff;
}

/* Hide legends for accessibility */
legend {
	display: none;
}

/* Inline row styles for form layout */
.inline-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

	/* Select styles in inline rows */
	.inline-row select {
		display: inline-block;
/*		width: auto;*/
		max-width: 100%;
	}

/* Styles for required field indicator */
.required {
	color: #dc3545; /* Red color for required fields */
}

.conditionally-required {
	color: #dc3545; /* Note: Do we want the default text-color as this is a conditionally-required field and is not always required? */
	margin-left: 5px;
	font-size: 1em;
	font-weight: bold;
}

/* Fieldset styles */
fieldset {
	border: solid 1px #ddd; /* Light gray border */
	padding: 10px;
	width: 100%;
}

	/* Padding for lists in fieldsets */
	fieldset ul {
		padding-left: 1rem;
	}

	/* Font weight for labels in fieldsets */
	fieldset label {
		font-weight: normal;
		margin: 0;
	}

	/* Layout for list items in fieldsets */
	fieldset li {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

		/* Margin for inputs in list items */
		fieldset li input {
			margin-right: 5px;
		}

/* Bold font for labels */
label, .label {
	font-weight: bold;
}

/* Styles for h1 headers */
h1 {
	font-size: 160%;
	margin-top: 5px;
	margin-bottom: 1rem;
}

/* Margin for page titles */
.page-title {
	margin-bottom: 35px;
}

.expand-panel {
	display: none;
}

/* Container styles for accordion */
.container-accordion {
	margin-bottom: 20px;
}

.collapse-accordion .card-body, .collapse-accordion .collapse-panel {
	display: none;
}

.collapse-accordion .expand-panel {
	display: block;
}

/* Header styles for cards */
.card-header {
	padding: 5px 15px;
	background: silver; /* Silver background for card headers */
}

/* Title styles for cards */
.card-title {
	font-size: 120%;
	font-weight: bold;
	margin: 0;
}

	/* Remove text decoration from card titles */
	.card-title a {
		text-decoration: none;
	}

		/* Inherit color on hover for card title links */
		.card-title a:hover {
			color: inherit;
		}

/* Transition effect for icon zoom */
i.icon-zoom {
	transition: transform .2s;
}

	/* Scale effect on hover for zoom icons */
	i.icon-zoom:hover {
		transform: scale(1.5);
	}

/* Flex layout for media items */
.media {
	display: flex;
	align-items: normal;
}

	/* Margin for child elements in media */
	.media > * {
		margin-left: 15px;
	}

/* Header styles for accordion in container */
.container-accordion .accordion-header {
	display: flex;
	align-items: center;
}

/* Hide card body in accordion when not expanded */
.container-accordion .card-body-hide {
	display: none;
}

/* Right alignment utility class */
.align-right {
	margin-left: auto;
}

/* Minimum height for textareas */
textarea.form-control {
	min-height: 100px;
}

/* Right aligned text for area counter */
.text-area-counter {
	text-align: right;
}

/* Styles for editable fields */
.editable-field > span {
	cursor: pointer;
}

/* Container styles for paging */
.paging-container {
	width: 100%;
	padding-top: 0.325rem;
	padding-bottom: 0.325rem;
}

	/* White text for captions in paging container */
	.paging-container caption {
		color: #fff;
	}

/* Footer styles for tables */
tfoot .paging-container {
	margin-top: 10px;
}

/* Full width for tables in paging container */
.paging-container table {
	width: 100%;
}

	/* Non-wrapping white space for spans in paging container */
	.paging-container table span {
		white-space: nowrap;
		padding-left: 4px;
	}

/* Inline display for selects in paging container */
.paging-container select {
	display: inline-block;
	width: auto;
}

/* Center alignment for captions */
caption {
	caption-side: top;
	text-align: center;
}

/* Padding styles for date inputs */
.date-input td {
	padding-right: 10px;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	vertical-align: middle;
}

/* Center alignment utility class */
.center {
	text-align: center;
}

/* Right alignment utility class */
.right {
	text-align: right;
}

/* Maximum width for short numbers */
.short-number {
	max-width: 100px;
}

/* Border and background styles for icon buttons */
button.icon {
	border: 0;
	background: none;
}

/* No text decoration for icon links */
a.icon {
	text-decoration: none;
}

/* Overlay styles for modals */
#modal-overlay {
	position: absolute;
	background: #000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 200;
	opacity: 0.75;
}

/* Margin for form groups */
.form-group {
	margin-bottom: 1rem;
}

/* Minimum width for form check inputs */
.form-check-input {
	min-width: 1em;
}

/* Message display styles */
#result-message {
	position: fixed;
	display: none;
	bottom: 10px;
	right: 20px;
	z-index: 5000;
}

	/* Background and text color for toast body and header */
	#result-message .toast-header {
		background: #198754;
		color: #fff !important;
		font-weight: bold;
	}
	#result-message .toast-body {
		/*background: #198754;*/
		background: #FFF;
		/*color: #fff !important;*/
		/*font-weight: bold;*/
	}

	#result-message .toast hr {
		margin: 0 !important;
		background-color: #198754;
	}

.toast-success {
	border: 1px solid #198754;
}

.toast hr {
	margin: 0;
}


h3#modal-header-title {
	font-size: large;
}

/* Message display styles */
#error-message {
	z-index: 5000;
}

.modal-message .modal-title span, .modal-message i {
	display: none;
}

.modal-message i {
	font-size: 32px;
}

.modal-warning .modal-title .modal-warning-title, .modal-error .modal-title .modal-error-title, .modal-info .modal-title .modal-info-title {
	display: block;
}

.modal-warning .modal-header {
	background: #ffeb3b;
	color: #333;
}

.modal-error .modal-header {
	background: #dc3545;
	color: #fff;
}

.modal-error .modal-body {
	color: #dc3545;
}

.modal-info .modal-header {
	background: #0dcaf0;
	color: #333;
}

.modal-header .fa-triangle-exclamation {
	display: none;
}

	.modal-warning .modal-header .fa-triangle-exclamation, .modal-error .modal-header .fa-triangle-exclamation, .modal-info .modal-header .fa-circle-info {
		display: block;
	}

.modal-message .modal-body {
	font-weight: 600;
}
/* Prompt message display styles */
#prompt-message {
	display: none;
	z-index: 3000;
}


/* Flex layout for add button */
.add-button {
	text-decoration: none;
	display: flex;
	align-items: center;
}

/* Fixed position for wait overlay */
#wait {
	position: fixed;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	display: none;
	z-index: 2000;
}

	/* Background, padding, and border radius for wait message */
	#wait .message {
		background: #fff;
		padding: 15px;
		border-radius: 15px;
		text-align: center;
		z-index: 10;
	}

	/* Width for progress bar in wait overlay */
	#wait .progress {
		width: 200px;
		display: none;
	}

/* Column height and margin for card columns */
.card-columns {
	height: 100%;
	margin-bottom: 15px;
}

/* Text color for inactive elements */
.in-active {
	color: red;
}

/* Flex layout for date picker container */
.date-picker-container {
	display: inline-flex;
	gap: 10px;
	width: auto;
}

/* Block display for date picker container in table cells */
td .date-picker-container {
	display: block;
}

/* Before pseudo-element for modals */
.modal:before {
	content: " ";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.75;
}

/* Hide down chevron in collapse panel, and right caret in collapse panel all */
.collapse-panel .fa-chevron-down, .collapse-panel-all .fa-square-caret-down {
	display: none;
}

/* Margin for case info */
.case-info {
	margin-left: auto;
}

/* Width and spacing for paging count and navigation */
.paging-container .paging-count {
	width: 32%;
}

.paging-container .paging-nav {
	width: 38%;
}

/* Margin for logo */
#logo {
	margin-right: 10px;
}

/* Flex layout for inline panels */
.inline-panels {
	display: flex;
	justify-content: space-around;
	max-width: 800px;
}

/* Minimum width and margin for small panels */
.small-panels {
	min-width: 200px;
	margin-right: 10px;
}

/* Footer styles */
#footer {
	color: black;
	background: #EFF1F3;
	border-top: solid 1px #000;
	text-align: center;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}

/* Styles for public table's paging container */
.public-table .paging-container {
	color: #000;
	background-color: #fff;
}

/* Border color for autocomplete */
.autocomplete {
	border-color: rgba(50, 205, 50, 0.5) !important;
}

/* List styles for page intro, alert, and outro */
.page-intro ol li, #div-alert ol li, .page-outro ol li {
	list-style-type: decimal;
}

.page-intro ul li, #div-alert ul li, .page-outro ul li {
	list-style-type: disc;
}

/* Text color for success and danger icons */
.success-icon-color {
	color: #006b02;
}

.danger-icon-color {
	color: #bd0000;
}

/* Styles for logo */
#logo {
	background-size: contain !important;
	display: block;
	width: 200px;
	height: 100%;
}

	/* Hide logo icon */
	#logo i {
		display: none;
	}

/* Text decoration for links in breadcrumb */
#div-breadcrumb .align-right a {
	text-decoration: none;
}

/* Scroll to top button hidden */
.scroll-to-top {
	display: none;
}

#scroll {
	position: fixed;
	right: 2.3125rem;
	bottom: 0.9375rem;
	cursor: pointer;
	width: 1.875rem;
	height: 2.375rem;
	background-color: #1a293e;
	text-indent: -624.9375rem;
	display: none;
	-webkit-border-radius: 3.75rem;
	-moz-border-radius: 3.75rem;
	border-radius: .25rem;
	z-index: 1;
}

	#scroll span {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -8px;
		margin-top: -12px;
		height: 0;
		width: 0;
		border: 8px solid transparent;
		border-bottom-color: #ffffff;
		color: #FFF;
	}

	#scroll:hover {
		background-color: #6c757d;
		opacity: 1;
		filter: "alpha(opacity=100)";
		-ms-filter: "alpha";
	}

.panel-header-badge {
	background: #333; /* Dark grey */
	color: #fff; /* White text */
	padding: 0 0.3125rem;
	border-radius: 0.25rem;
}

/* Badge styles */
span.badge.badge-warning.alert-badge {
	color: #212529; /* Dark text */
	background-color: #ffc107; /* Yellow background */
	margin-left: 10px;
}

span.badge.badge-danger.alert-badge {
	color: #fff; /* White text */
	background-color: #dc3545; /* Red background */
	margin-left: 10px;
}

#span-navigation-header {
	display: none;
}

/*.dropdown-header {
	display: none;
}*/

span#span-profile-username {
	margin-left: 5px;
}

.dropdown-item.disabled {
	color: inherit;
}

/* CSS for active state of the surrounding <a> */
a.dropdown-item:active #span-my-profile-header {
	color: white;
}

#span-menu-header, #span-case-menu-header {
	display: none;
}

span#span-profile-username {
	margin-left: 5px;
}

.dropdown-item.disabled {
	color: inherit;
}

/* CSS for active state of the surrounding <a> */
a.dropdown-item:active #span-my-profile-header {
	color: white;
}

#div-breadcrumb-right li {
	padding-left: 8px;
}

.no-results {
	font-weight: bold;
	margin-top: -15px; /* Tables have 16px margin on the bottom */
}

.sub-table {
	width: 90%;
	margin: auto;
}

	.sub-table tr.column-header {
		background-color: #424242;
	}


.current-case-panel {
	background-color: black;
	padding-top: 3px;
	padding-bottom: 3px;
	color: #fff; /* White text */
}

	.current-case-panel a {
		color: #fff; /* White text for links */
		text-decoration: underline !important;
	}

		.current-case-panel a:hover {
			color: #ffc107; /* Yellow text on hover */
			text-decoration: none !important;
		}

/* Validation summary error styles */
.validation-summary-errors {
	padding: 10px 40px 10px 10px;
	margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	display: inline-block;
	width: 100%;
	color: #5F1119; /* Dark red text */
	background-color: #f8d7da; /* Light red background */
	border-color: #f5c6cb; /* Slightly darker red border */
	position: relative;
	padding: .75rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: .25rem;
}

	.validation-summary-errors a {
		color: #900B18; /* Darker red for links */
	}

.text-danger {
	color: #900B18 !important; /* Dark red text */
}

.error-title {
	color: #900B18; /* Dark red text */
	font-weight: bold;
	margin-left: -25px;
}

div.validation-summary-errors ul li:has( > .error-title) {
	list-style-type: none;
}

.banner {
	width: 100%;
	background-color: #e3e3e5; /* Green background for visibility */
	/*color: white;*/ /* White text color */
	text-align: center; /* Center the text */
	padding: 10px 0; /* Some padding to increase the height of the banner */
	position: fixed; /* Fixed positioning to stay at the top */
	top: 0; /* Align to the top of the page */
	left: 0; /* Align to the left of the page */
	z-index: 1000; /* Ensure it stays on top of other content */
	display: flex; /* Use flexbox for layout */
	justify-content: space-between; /* Space between items */
	align-items: center; /* Center items vertically */
	padding: 1%;
	border-bottom: 1px solid #2b2f32;
}

	.banner button {
		margin: 0 20px; /* Margin to the sides for spacing */
		padding: 5px 10px; /* Padding inside the buttons */
		/*background-color: #f44336;*/ /* Red background for buttons */
		/*color: white;*/ /* White text for buttons */
		border: none; /* No border */
		cursor: pointer; /* Cursor to pointer on hover */
	}

		/* Additional styles for button hover effect */
		.banner button:hover {
			background-color: #d32f2f;
		}
		

/* Media queries for responsive design */
@media screen and (max-width: 700px) {
	/* Styles specifically for screen widths of 700px or less (typically mobile devices) */
	/* Main menu hidden and positioned absolutely */
	#main-menu {
		display: none;
		position: absolute;
		top: 60px;
		background: #eee; /* Light grey background */
		z-index: 1;
	}

	/* Session timer hidden on mobile devices */
	.session-timer {
		display: none;
	}

	/* Case level menu styling and positioning */
	#case-level-menu .nav {
		display: none;
		position: absolute;
		background: #1a293e; /* Dark blue background */
		top: 40px;
		right: 5px;
		z-index: 10;
	}

	/* Navbar toggler with white background */
	#case-level-menu .navbar-toggler {
		background: #fff;
		margin-left: auto;
	}

	/* Inline rows wrap on smaller screens */
	.inline-row {
		flex-wrap: wrap;
	}

		/* Select elements in inline rows take maximum width */
		.inline-row select {
			max-width: 100%;
		}

	/* Table head is displayed as block for vertical stacking */
	.table thead {
		display: block;
		width: 100%;
	}

		/* Column headers in table head are not displayed */
		.table thead .column-header {
			display: none;
		}

	/* Table, table body, and table rows are displayed as block for responsive layout */
	.table, .table tbody, .table tr {
		display: block;
	}

		/* Bottom border for table body rows */
		.table tbody tr {
			border-bottom: solid 1px #ccc;
		}

		/* Table data cells displayed flexibly for alignment */
		.table td {
			display: flex;
			border: 0;
		}

		/* Pseudo-element for table data cells to display cell content */
		.table tbody td:before {
			content: attr(data-cell);
			font-weight: 500;
			width: 45%;
			min-width: 45%;
			display: inline-block;
			text-align: left;
		}

	/* Pseudo-element hidden in paging container table body cells */
	.paging-container table tbody td:before {
		display: none;
	}

	/* Management column in tables displayed flexibly */
	.table .gvcolumn-manage {
		display: flex;
		width: 100%;
		white-space: nowrap;
	}

		/* Icon margin in management column */
		.table .gvcolumn-manage i {
			margin-right: 10px;
		}

	/* Margin for navbar toggler */
	.navbar-toggler {
		margin-right: 10px;
	}

	/* Text alignment for various table columns */
	.table .gvcolumn-boolean {
		text-align: center;
		width: 100%;
	}

	.table .gvcolumn-textlong {
		text-align: left;
		width: 100%;
	}

	.table .gvcolumn-textshort {
		text-align: left;
		width: 100%;
	}

	.table .gvcolumn-id {
		text-align: left !important;
		white-space: normal !important;
		width: 100%;
	}

	.table .gvcolumn-casenumber {
		text-align: left;
		width: 100%;
	}

	.table .gvcolumn-fullname {
		text-align: left;
		width: 100%;
	}

	.table .gvcolumn-textlov {
		text-align: left;
		width: 100%;
	}

	.table .gvcolumn-number {
		text-align: right;
		width: 100%;
	}

	.table .gvcolumn-currency {
		text-align: right;
		width: 100%;
	}

	.table .gvcolumn-center {
		text-align: center;
		width: 100%;
	}

	.table .gvcolumn-dateshort {
		text-align: left;
		width: 100%;
	}

	.table .gvcolumn-datelong {
		text-align: left;
		width: 100%;
	}

	/* Extra rows in tables are not displayed */
	.table .extra-row {
		display: none;
		border-bottom: 1px solid black;
	}

	/* Normal white-space for table spans */
	.paging-container table span, .table span {
		white-space: normal;
		overflow-wrap: break-word;
	}

	/* Auto width for paging count and navigation in paging container */
	.paging-container .paging-count, .paging-container .paging-nav {
		width: auto;
		display: table-cell;
		padding-right: 10px;
	}

	/* Width adjustment for paging count */
	.paging-container .paging-count {
		width: 70%;
	}

	/* Paging actions and sizes not displayed */
	.paging-container .paging-action, .paging-container .paging-size {
		display: none;
	}

	/* Padding for first link in case panel navigation */
	.case-panel .nav > li:first-child > a {
		padding-left: 15px;
	}

	/* Scroll to top button hidden */
	/*.scroll-to-top {
		display: none;
	}*/

	/* Scroll to top span hidden */
	/*.scroll-to-top span {
			display: none;
		}*/

	/* Footer button positioned relatively */
	.footer-button {
		position: relative;
	}

	/* Page title padding reset */
	.page-title, .page-title-login {
		padding-left: 0 !important;
	}

	/* Extra row in table hidden and styled */
	table .extra-row {
		display: none;
		background-color: #dee2e699;
		border-bottom: 1px solid black;
	}

	/* Expanded class in table displayed inline */
	.table .expanded {
		display: inline !important;
	}

	/*#a-client-detail {
		padding-left: 7px;
	}*/

	/* Right top section styles */
	/*#right-top {*/
	/*margin-left: auto;*/
	/*margin-right: 0 !important;
	}*/

	/* Dropdown menu alignment */
	/*#right-top .dropdown-menu {
			right: 0;
		}*/

	/* Dropdown toggle decoration */
	/*#right-top .dropdown-toggle {
			text-decoration: none;
		}*/

	#right-top {
		display: flex; /* Enables flexbox layout */
		justify-content: flex-end; /* Aligns children to the right */
		align-items: center; /* Optional: Aligns items vertically in the center */
		width: 100%; /* Ensures the container spans the full width of its parent */
	}

	.inline-row {
		/*display: inline-flex;*/ /* Apply if you need the items within to be in a flex layout too */
		align-items: center; /* Align items vertically in the center */
	}

	.session-timer, .dropdown {
		margin-left: 20px; /* Optional: Adds spacing between items */
	}

	#span-navigation-header {
		display: block;
	}

	#div-registration p {
		margin-bottom: 0;
	}

	#span-navigation-header {
		display: block;
	}

	span#span-profile-username {
		display: none;
	}

	#span-menu-header, #span-case-menu-header {
		display: block;
	}

	#case-level-menu, #div-main-menus, #right-top {
		display: flex;
		justify-content: flex-end; /* Align to the right */
	}

	#div-breadcrumb {
		border-top: 5px solid #1a293e;
	}

	.case-panel {
		background-color: #1a293e;
	}

		.case-panel .container {
			position: relative;
		}

		.case-panel .nav-link {
			color: #fff;
			text-decoration: none !important;
		}

			.case-panel .nav-link:hover {
				color: #ffc107;
				text-decoration: underline !important;
			}


	.gvcolumn-select {
		width: 100%;
	}

	td.gvcolumn-manage {
		border-bottom: solid 1px #ccc; /* Adjust the border styling as needed */
	}
}

@media (min-width: 701px) and (max-width: 991.98px) {
	/* Styles specifically for screen widths between 701px and 991.98px (typically tablet devices) */

	/* Scroll to top button hidden */
	/*.scroll-to-top {
		display: none;
	}*/

	/* Scroll to top span also hidden */
	/*.scroll-to-top span {
			display: none;
		}*/

	/* Main menu hidden and positioned absolutely */
	#main-menu {
		display: none;
		position: absolute;
		top: 50px;
		background: #eee; /* Light grey background */
	}

	/* Case level menu styling and positioning */
	#case-level-menu .nav {
		display: none;
		position: absolute;
		background: #1a293e; /* Dark blue background */
		top: 40px;
		right: 5px;
		z-index: 10;
	}

	/* Navbar toggler with white background */
	#case-level-menu .navbar-toggler {
		background: #fff;
		margin-left: auto;
	}

	/* Table head is displayed as block for vertical stacking */
	.table thead {
		display: block;
		width: 100%;
	}

		/* Column headers in table head are not displayed */
		.table thead .column-header {
			display: none;
		}

	/* Table, table body, and table rows are displayed as block for responsive layout */
	.table, .table tbody, .table tr {
		display: block;
	}

		/* Bottom border for table body rows */
		.table tbody tr {
			border-bottom: solid 1px #ccc;
		}

		/* Table data cells displayed flexibly for alignment */
		.table td {
			display: flex;
			border: 0;
		}

		/* Pseudo-element for table data cells to display cell content */
		.table tbody td:before {
			content: attr(data-cell);
			font-weight: 500;
			width: 45%;
			min-width: 45%;
			display: inline-block;
			text-align: left;
		}

		/* Management column in tables displayed flexibly */
		.table .gvcolumn-manage {
			display: flex;
			width: 100%;
		}

			/* Icon margin in management column */
			.table .gvcolumn-manage i {
				margin-right: 10px;
			}

		/* Text alignment for various table columns */
		.table .gvcolumn-boolean {
			text-align: center;
			width: 100%;
		}

		.table .gvcolumn-textlong {
			text-align: left;
			width: 100%;
		}

		.table .gvcolumn-textshort {
			text-align: left;
			width: 100%;
		}

		.table .gvcolumn-id {
			text-align: left !important;
			white-space: nowrap !important;
			width: 100%;
		}

		.table .gvcolumn-casenumber {
			text-align: left;
			width: 100%;
		}

		.table .gvcolumn-fullname {
			text-align: left;
			width: 100%;
		}

		.table .gvcolumn-textlov {
			text-align: left;
			width: 100%;
		}

		.table .gvcolumn-number {
			text-align: right;
			width: 100%;
		}

		.table .gvcolumn-currency {
			text-align: right;
			width: 100%;
		}

		.table .gvcolumn-center {
			text-align: center;
			width: 100%;
		}

		.table .gvcolumn-dateshort {
			text-align: left;
			width: 100%;
		}

		.table .gvcolumn-datelong {
			text-align: left;
			width: 100%;
		}

		/* Extra rows in tables are not displayed */
		.table .extra-row {
			display: none;
			border-bottom: 1px solid black;
		}

	/* 100% width for paging count and navigation in paging container */
	.paging-container .paging-count, .paging-container .paging-nav {
		width: 100% !important;
		display: table-cell;
		padding-right: 10px;
	}

	/* Paging actions and sizes are displayed */
	.paging-container .paging-action, .paging-container .paging-size {
		display: table-cell;
	}

	/* Extra row in table hidden and styled */
	.table .extra-row {
		display: none;
		background-color: #dee2e699;
	}

	/* Expanded class in table displayed inline */
	.table .expanded {
		display: inline !important;
	}

	/*#a-client-detail {
		padding-left: 7px;
	}*/

	#span-navigation-header {
		display: block;
	}

	#div-registration p {
		margin-bottom: 0;
	}

	#span-navigation-header {
		display: block;
	}

	span#span-profile-username {
		display: none;
	}

	#span-menu-header, #span-case-menu-header {
		display: block;
	}

	.gvcolumn-select {
		width: 100%;
	}

	td.gvcolumn-manage {
		border-bottom: solid 1px #ccc; /* Adjust the border styling as needed */
	}
}

@media (min-width: 992px) {
	/* Styles for screen widths of 992px and above (laptops and large screens) */

	/* Extra rows hidden with a specific background color */
	.extra-row {
		display: none;
		background-color: #dee2e699; /* Semi-transparent grey */
	}

	/* Expanded rows displayed as table rows with a specific background color */
	.expanded {
		display: table-row !important;
		background-color: #dee2e699; /* Semi-transparent grey */
	}

	/* Maximum width for large modals */
	.modal-lg {
		max-width: 900px;
	}

	/* Padding for the first link in the case panel navigation */
	.case-panel .nav > li:first-child > a {
		padding-left: 15px;
	}

	/* Flex layout for button spacers with space distributed between them */
	.spacer-buttons {
		display: flex;
		justify-content: space-between;
	}

	/* Horizontal spacers with varying margins */
	.spacer-horizontal {
		margin-left: 30px;
	}

	.spacer-horizontal-sm {
		margin-left: 10px;
	}

	.spacer-horizontal-lg {
		margin-left: 50px;
	}

	/* Vertical spacers with varying heights */
	.spacer-vertical {
		height: 30px;
	}

	.spacer-vertical-sm {
		height: 10px;
	}

	.spacer-vertical-lg {
		height: 50px;
	}

	/* RS Theme button styles for CRUD+ operations */
	.rs-button-crud {
		color: #fff;
		background-color: #1b6ec2; /* Bright blue */
		border-color: #1861ac; /* Darker blue border */
	}

		/* Active, hover, and focus styles for CRUD+ buttons */
		.rs-button-crud:active {
			background-color: #1b6ec2;
			border-color: #0a53be;
		}

		.rs-button-crud:hover {
			background-color: #0b5ed7;
			border-color: #0a58ca;
		}

		.rs-button-crud:focus {
			background-color: #0b5ed7;
			border-color: #0a58ca;
			box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
		}

	/* Extra button styles */
	.rs-button-extra {
		color: #fff;
		background-color: #1b6ec2; /* Bright blue */
		border-color: #1861ac; /* Darker blue border */
	}

		/* Active, hover, and focus styles for extra buttons */
		.rs-button-extra:active {
			background-color: #0a58ca;
			border-color: #0a53be;
		}

		.rs-button-extra:hover {
			background-color: #0b5ed7;
			border-color: #0a58ca;
		}

		.rs-button-extra:focus {
			background-color: #0b5ed7;
			border-color: #0a58ca;
			box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
		}

	/* /RS Theme */

	/* Breadcrumb menu styles */
	.breadcrumb-nav {
		float: right;
		width: auto;
	}

	/* Gridview styles */
	.rs-gridview {
		border-collapse: separate !important;
		border-spacing: 2px;
		table-layout: auto;
		width: 100%;
		border: none;
	}

		/* Table header styles in Gridview */
		.rs-gridview th {
			border: none;
			background-color: #1a293e; /* Dark blue background */
			color: #fff; /* White text */
			font-weight: bold;
			margin: 3px 10px;
			padding-left: 8px;
			padding-right: 8px;
			padding: 3px;
			margin: 3px;
			vertical-align: top;
		}

			/* Styles for hyperlinks in table headers */
			.rs-gridview th a {
				background-color: #1a293e; /* Dark blue background */
				color: #fff; /* White text */
				border: none;
				font-weight: bold;
				margin: 3px 0px;
			}

		/* Table data cell styles */
		.rs-gridview td {
			background-color: #d9edf7; /* Light blue background */
			color: #000; /* Black text */
			border: none;
			margin: 3px 10px;
			padding-left: 8px;
			padding-right: 8px;
			padding: 3px;
			margin: 3px;
		}

			/* Icon color in table data cells */
			.rs-gridview td a i {
				color: #000; /* Black icon color */
			}

	/* Pagination container styles */
	.paging-container {
		width: 100%;
	}

	tfoot .paging-container {
		margin-top: 10px;
	}

	.paging-container table {
		width: 100%;
	}

	.paging-container select {
		display: inline-block;
		width: auto;
	}

	/* Color for paging icons */
	.paging-container a {
		color: #000; /* Black text */
	}

	/* Pagination item group alignment */
	.paging-item-group-left { /* Placeholder for future styling */
	}

	.paging-item-group-center {
		justify-content: center;
	}

	.paging-item-group-right {
		justify-content: flex-end;
		padding-right: 7px;
	}

	/* Manage column styles */
	.gvcolumn-manage {
		text-align: center;
		width: 100px;
	}

		/* Text decoration for links in manage column */
		.gvcolumn-manage a {
			text-decoration: none;
		}

		/* Centering inline rows in manage column */
		.gvcolumn-manage .inline-row {
			justify-content: center;
		}

	/* Column styles for various data types */
	.gvcolumn-id {
		text-align: left;
		white-space: nowrap;
	}

	.gvcolumn-casenumber {
		width: 130px;
		text-align: left;
	}

	.gvcolumn-fullname {
		text-align: left;
	}

	.gvcolumn-nowrap {
		white-space: nowrap;
	}

	.gvcolumn-textlov {
		text-align: left;
	}

	.gvcolumn-number {
		text-align: right;
		width: 15%;
	}

	.gvcolumn-currency {
		text-align: right;
	}

	.gvcolumn-center {
		text-align: center;
	}

	.gvcolumn-manageicons, .gvcolumn-manageicons img {
		text-align: center;
		padding-bottom: 0;
		height: 16px;
		padding-left: 0px;
		vertical-align: top;
		width: 60px;
	}

	.gvcolumn-dateshort {
		text-align: left;
		width: 120px;
	}

	.gvcolumn-datelong {
		text-align: left;
		width: 180px;
	}

	.gvcolumn-daterange {
		text-align: left;
		width: 275px;
	}

	.gvcolumn-boolean {
		text-align: center;
		width: 120px;
	}

	.gvcolumn-textlong {
		text-align: left;
		width: 400px;
	}

	.gvcolumn-textshort {
		text-align: left;
		width: 200px;
	}

	/* Breadcrumb item link color */
	.breadcrumb-item a {
		color: #000; /* Black text */
	}

	/* Icon styles */
	.icon-addnew i {
		vertical-align: middle;
		padding-top: 5px;
		font-size: 15px;
	}

	/* Accordion styles */
	.rs-accordion {
		margin-bottom: 3%;
	}

	.rs-accordion-button:not(.collapsed) {
		color: #0c63e4; /* Bright blue */
		background-color: #e7f1ff; /* Light blue background */
	}

	.rs-accordion-body {
		background-color: #fff; /* White background */
		color: #212529; /* Dark text */
	}

	.pac-container, .pac-logo {
		z-index: 1500; /* High z-index for visibility */
	}

	.extra-row {
		display: none;
		border-bottom: 1px solid black;
	}

	td .fa-up-long {
		display: none;
	}

	.profile-image {
		display: block;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: #ccc;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 50%;
		background-image: url('/api/user/profileimage');
	}

	.schedule .busy, .schedule .free {
		height: 20px;
	}

	.schedule .busy {
		background: rgb(0, 120, 212);
	}

	.schedule .free {
		background: rgb(14, 178, 68);
	}

	datetime-picker {
		display: flex;
	}

	/* Tab styles */
	.nav {
		display: flex;
		flex-wrap: wrap;
	}

	.nav-tabs {
		border-bottom: 1px solid #dee2e6; /* Light grey bottom border */
	}

		/* Nav item styles */
		.nav-tabs .nav-item {
			margin-bottom: -1px;
			background-color: #ffc107; /* Yellow background */
			border: 1px solid white; /* White border */
			border-top-left-radius: 0.25rem;
			border-top-right-radius: 0.25rem;
		}

		.nav-tabs .nav-link {
			border: 1px solid transparent;
			border-top-left-radius: 0.25rem;
			border-top-right-radius: 0.25rem;
			color: black; /* Black text */
		}

			/* Hover and focus styles for nav links */
			.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
				border-color: #e9ecef #e9ecef #dee2e6; /* Light grey borders */
				background-color: #1a293e; /* Dark blue background */
				color: #fff; /* White text */
			}

			.nav-tabs .nav-link.active,
			.nav-tabs .nav-item.show .nav-link {
				background-color: #1a293e; /* Dark blue background */
				color: #fff; /* White text */
				border-color: transparent; /* Transparent border */
			}

	.in-dev:after {
		content: "In Dev ";
		margin-left: 15px;
		color: #212529; /* Dark text */
		background-color: #ffc107; /* Yellow background */
		padding: 3px 3px !important;
		display: inline-block;
		font-size: 75%;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		white-space: nowrap;
		vertical-align: baseline;
		border-radius: .25rem;
		transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	}

	.new:after {
		padding-right: 5px;
		content: " New";
		margin-left: 15px;
		color: #fff; /* White text */
		background-color: #dc3545; /* Red background */
		padding: 3px 3px !important;
		display: inline-block;
		font-size: 75%;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		white-space: nowrap;
		vertical-align: baseline;
		border-radius: .25rem;
		transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	}

	.table .mass-delete i {
		color: red; /* Red color for delete icons */
	}

	/* Validation summary error styles */
	.validation-summary-errors {
		padding: 10px 40px 10px 10px;
		margin-top: 10px;
		margin-left: 0px;
		margin-right: 0px;
		display: inline-block;
		width: 100%;
		color: #5F1119; /* Dark red text */
		background-color: #f8d7da; /* Light red background */
		border-color: #f5c6cb; /* Slightly darker red border */
		position: relative;
		padding: .75rem 1.25rem;
		margin-bottom: 1rem;
		border: 1px solid transparent;
		border-radius: .25rem;
	}

		.validation-summary-errors a {
			color: #900B18; /* Darker red for links */
		}

	.session-timeout {
		padding: 10px 40px 10px 10px;
		margin-top: 0 !important;
		margin-left: 0px;
		margin-right: 0px;
		display: inline-block;
		width: 100%;
		color: #5F1119; /* Dark red text */
		background-color: #f8d7da; /* Light red background */
		border-color: #f5c6cb; /* Slightly darker red border */
		position: relative;
		padding: .75rem 1.25rem;
		margin-bottom: 0 !important;
		border: 1px solid transparent;
		border-radius: .25rem;
	}

		.session-timeout a {
			color: #900B18; /* Darker red for links */
		}


	.text-danger {
		color: #900B18 !important; /* Dark red text */
	}

	.error {
		font-family: var(--bs-font-sans-serif);
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5;
		color: #900B18 !important; /* Dark red text */
	}

	.widget-layout {
		margin: 0 15px;
	}

		.widget-layout .row > div {
			border: solid 1px #ccc;
		}

	.tooltip-container {
		display: inline-block;
		position: relative;
		cursor: pointer;
	}

		.tooltip-container .help-text {
			position: absolute;
			display: none;
			left: 0;
			top: calc(100% + 10px);
			background: #fff;
			box-shadow: 0 0 5px 2px rgba(100, 100, 100, 0.6);
			border-radius: 3px;
			width: 200px;
			z-index: 10;
			padding: 8px;
			font-weight: normal;
		}

	.case-panel {
		background-color: #1a293e; /* Dark blue background */
	}

		.case-panel .container {
			position: relative;
		}

		.case-panel .nav-link {
			color: #fff; /* White text */
			text-decoration: none !important;
		}

			.case-panel .nav-link:hover {
				color: #ffc107; /* Yellow text on hover */
				text-decoration: underline !important;
			}

	.current-case-panel {
		background-color: black;
		padding-top: 3px;
		padding-bottom: 3px;
		color: #fff; /* White text */
	}

		.current-case-panel a {
			color: #fff; /* White text for links */
			text-decoration: underline !important;
		}

			.current-case-panel a:hover {
				color: #ffc107; /* Yellow text on hover */
				text-decoration: none !important;
			}

	.case-client {
		color: #fff; /* White text */
	}

		.case-client a {
			color: #c9dbee; /* Light blue text for links */
		}

			.case-client a:hover {
				color: #fff; /* White text on hover */
			}

	.page-help {
		display: none; /* Page help hidden */
	}


	.case-banner {
		color: #fff; /* White text */
		margin-left: auto;
		text-align: right;
	}

	.impersonation .fa-user-plus {
		color: red; /* Red color for user-plus icon */
		transform: scale(1.5); /* Enlarge icon */
	}

	.critical {
		color: #dc3545; /* Red color for critical text */
	}

		.critical:after {
			content: "\26A0"; /* Warning symbol */
		}

	.e-schedule .e-month-view .e-appointment {
		background-color: #005AE1; /* Bright blue background */
	}

	.e-schedule .e-schedule-toolbar .e-active-view .e-tbar-btn-text, .e-schedule .e-schedule-toolbar .e-active-view .e-icons {
		color: #004EC2 !important; /* Darker blue color */
	}

	.e-schedule .e-month-view .e-appointment:hover {
		background-color: #2C6FD5; /* Slightly lighter blue on hover */
		border: 1px solid #004EC4; /* Border color */
	}

	.critical-event {
		color: #FFFF00; /* Yellow color for critical event text */
	}

	.critical-event-icon-pre:before {
		content: "\26A0"; /* Warning symbol */
	}

	.critical-event-icon-post:after {
		content: "\26A0"; /* Warning symbol */
	}

	.spinner-border {
		width: 1rem;
		height: 1rem;
	}

	.fieldset-hidden {
		border: none !important;
		padding: 0px !important;
	}

	.fieldset-repeater legend {
		display: inline !important;
		float: none !important;
		font-size: 1em !important;
		font-weight: bold !important;
		width: auto !important;
		margin-bottom: 0 !important;
	}

	.sr-readonly {
		display: block;
		border: 0;
		background: #fff;
	}

	a > i, .a-icon {
		text-decoration: none !important;
	}

	.label-weight-normal {
		font-weight: normal !important;
	}

	.session-timer {
		cursor: pointer;
		position: relative;
	}

	.extend-session {
		position: absolute;
		display: none;
		width: 200px;
	}


	/* User Dashboard H2 tag */
	h2 {
		font-size: 150%;
	}

	.e-input-group {
		min-height: 2.6em;
		max-height: 2.8em;
	}

	.datetimepicker-fullwidth .date-picker-container {
		width: 100%;
	}

	.gvsubrow th {
		color: black; /* Black text for subrow headers */
		background-color: #f5f5f5 !important; /* Light grey background */
	}

	.gvsubrow td {
		background-color: #f5f5f5 !important; /* Light grey background */
	}

	tr.gvsubrow-lastrow th {
		border-bottom: 1px solid black; /* Black bottom border */
	}

	tr.gvsubrow-lastrow td {
		border-bottom: 1px solid black; /* Black bottom border */
	}

	tr.gvsubrow-lastrow-ignore th {
		border-bottom: 0px solid black !important; /* No bottom border */
	}

	tr.gvsubrow-lastrow-ignore td {
		border-bottom: 0px solid black !important; /* No bottom border */
	}

	/* Disabled control */
	.form-control:disabled, .form-control[readonly] {
		background-color: #e9ecef !important; /* Light grey background */
		opacity: 1;
	}

	.sub-total tr {
		background: #ccc; /* Grey background */
	}

	.sub-total td, .grand-total td {
		font-weight: bold; /* Bold text */
		text-align: right; /* Right aligned text */
	}

	.df-original-hide {
		display: none; /* Hidden by default */
	}


	.disabled input {
		background: #e9ecef !important; /* Light grey background */
	}

	.form-group-row {
		padding-bottom: 1%; /* Bottom padding */
	}

	.form-switch-no-padding {
		padding-left: 0 !important; /* No left padding */
	}

	.e-quick-popup-wrapper .e-event-popup .e-subject-wrap .e-subject {
		font-size: 20px; /* Large font size */
		font-weight: 500; /* Medium font weight */
		line-height: 1.5; /* Line height */
		max-height: 90px; /* Maximum height */
		background: rgba(13,110,253,0.3); /* Semi-transparent blue background */
		border-left: 6px solid #005AE1; /* Solid blue left border */
		border-radius: 4px; /* Rounded corners */
		padding: 8px; /* Padding */
	}

	.e-quick-popup-wrapper .e-event-popup .e-subject-wrap {
		padding: 12px 8px; /* Padding */
	}

	.e-schedule .e-month-view .e-current-date .e-date-header, .e-schedule .e-month-agenda-view .e-current-date .e-date-header {
		background-color: #005AE1; /* Bright blue background */
		border-radius: 50%; /* Circular shape */
		color: #fff; /* White text */
		width: 20px; /* Width */
	}

	/* Menu page contents */
	/*.menu-content-hidden {
        display: none;
    }*/

	.anchor-tag {
		text-decoration: none !important; /* No text decoration */
	}

		.anchor-tag:hover {
			color: inherit !important; /* Inherits color on hover */
		}

	.a-hover {
		text-decoration: underline; /* Underlined text */
	}

		.a-hover:hover {
			color: #0a58ca !important; /* Bright blue color on hover */
			text-decoration: none; /* No text decoration on hover */
		}

	.icon:hover {
		color: #0a58ca !important; /* Bright blue color on hover */
	}

	button.gv-icon {
		border: 0;
		background: none;
	}

		button.gv-icon:hover {
			color: #8C939E !important; /* Grey color on hover */
		}

	.gv-icon:hover,
	.gv-icon > i:hover {
		color: #8C939E !important; /* Grey color on hover */
	}

	button.gv-icon,
	button.gv-icon > a,
	button.gv-icon > i,
	a.gv-icon {
		border: 0;
		background: none;
	}

		button.gv-icon:hover > i,
		button.gv-icon > a:hover,
		a.gv-icon {
			color: #8C939E !important; /* Grey color on hover */
		}

	button.icon {
		border: 0;
		background: none;
	}

	.nav-link {
		display: block;
		padding: .5rem 1rem;
		color: navy; /* Navy color */
		text-decoration: none;
		transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
	}

		.nav-link:hover {
			color: #0a58ca; /* Bright blue color on hover */
			text-decoration: underline; /* Underlined on hover */
		}

	.text-align-center {
		text-align: center; /* Center aligned text */
	}

	.btn-google-signin {
		display: flex;
		align-items: center;
		justify-content: center;
	}

		.btn-google-signin:hover {
			background-color: #4285F4; /* Bright blue background on hover */
		}

	.btn-google-signin-img {
		background-color: #FFFFFF; /* White background */
		display: inline-block;
	}

	/* White background container style */
	.logo-container {
		display: flex; /* Flex layout */
		align-items: center; /* Center aligned items */
	}

		/* Margin for logo within the container */
		.logo-container img {
			margin-right: auto; /* Pushes logo to the left */
		}

	.flex-container {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: stretch;
		align-content: stretch;
	}

	/* Center text horizontally and vertically using flexbox */
	.flex-item {
		display: flex;
		justify-content: center; /* Center horizontally */
		align-items: center; /* Center vertically */
	}

	.flex-items:nth-child(1),
	.flex-items:nth-child(2) {
		display: block;
		flex-grow: 0;
		flex-shrink: 1;
		flex-basis: auto;
		align-self: auto;
		order: 0;
	}

	.left, .right {
		flex: 1; /* Flexibility */
	}

	/* Outer container style */
	.outer-container {
		display: flex; /* Flex layout */
	}

	/* Centered text in the centered div */
	.centered-div {
		flex-grow: 1; /* Grow to fill available space */
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.test-button {
		transition: background-color .218s,border-color .218s;
		-webkit-user-select: none;
		-webkit-appearance: none;
		background-color: #fff; /* White background */
		background-image: none;
		border: 1px solid #dadce0; /* Light grey border */
		color: #3c4043; /* Dark grey text */
		cursor: pointer;
		font-family: "Google Sans", arial, sans-serif;
		font-size: 14px;
		height: 40px;
		letter-spacing: 0.25px;
		outline: none;
		overflow: hidden;
		padding: 0 12px;
		position: relative;
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
		width: auto;
		-webkit-user-select: none;
		-webkit-appearance: none;
		background-color: #fff; /* White background */
		background-image: none;
		border: 1px solid #dadce0; /* Light grey border */
		color: #3c4043; /* Dark grey text */
		cursor: pointer;
		font-family: "Google Sans", arial, sans-serif;
		font-size: 14px;
		height: 40px;
		letter-spacing: 0.25px;
		outline: none;
		overflow: hidden;
		padding: 0 12px;
		position: relative;
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
	}

	.knowledge-content .list-group-item {
		position: relative;
		display: block;
		padding: 10px 15px;
		margin-bottom: -1px;
		background-color: #fff; /* White background */
	}

	.knowledge-content details summary {
		border: 1px solid #ddd; /* Light grey border */
		border-radius: 4px; /* Rounded corners */
		color: #295376; /* Dark blue text */
		padding: 5px 15px; /* Padding */
	}

	.knowledge-content details > summary {
		margin-left: -1.1em;
		margin-right: -1.1em;
	}

	.knowledge-content summary {
		display: list-item !important;
		list-style-type: none;
		list-style-type: disclosure-closed;
		visibility: visible !important;
	}

	.knowledge-content details {
		padding-left: 1.1em;
		padding-right: 1.1em;
	}

		.knowledge-content details[open] > summary {
			border: 0;
			border-bottom: 1px solid #ddd; /* Light grey bottom border */
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			list-style-type: disclosure-open;
			margin-bottom: 0.25em;
		}

		.knowledge-content details[open] {
			border: 1px solid #ddd; /* Light grey border */
			border-radius: 4px; /* Rounded corners */
		}

		.knowledge-content details[open] {
			padding-bottom: 1em; /* Bottom padding */
		}

	.wt-max-width-full {
		max-width: 100% !important;
		min-width: 0px !important;
	}

	.wt-horizontal-center {
		display: block !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.homepage-header-search {
		width: 560px; /* Width */
		margin-left: 16px; /* Left margin */
	}

	.wt-input-btn-group {
		position: relative;
		display: flex;
		border-radius: 96px; /* Rounded corners */
		box-shadow: 1px 2px 4px 0 rgba(34, 34, 34, 0.1) inset; /* Shadow effect */
		background: #FFFFFF; /* White background */
	}

	.header-search-bg {
		background-color: #ffffff; /* White background */
	}

	.wt-input-btn-group .wt-input-btn-group__input {
		padding-left: 18px; /* Left padding */
		border-top-left-radius: 96px; /* Top left rounded corner */
		border-bottom-left-radius: 96px; /* Bottom left rounded corner */
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-right: 0;
		box-shadow: none;
		background: transparent;
		flex: 1;
	}

	input[type=search] {
		-webkit-appearance: textfield;
		box-sizing: content-box;
	}

	.wt-input, .wt-textarea, .wt-input-btn-group__input {
		transition: border 200ms ease-out, background 200ms ease-out;
		-webkit-appearance: none;
		-ms-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background: #FFFFFF; /* White background */
		box-shadow: 0 1px 4px 0 rgba(34, 34, 34, 0.1) inset; /* Shadow effect */
		border-color: rgba(34, 34, 34, 0.15); /* Light grey border */
		border-style: solid;
		border-width: 1px;
		border-radius: 6px; /* Rounded corners */
		color: #222222; /* Dark grey text */
		display: block;
		font-family: inherit;
		font-size: 16px;
		line-height: 28px;
		height: 48px; /* Height */
		outline: none;
		padding-top: 9px;
		padding-bottom: 9px;
		padding-left: 12px;
		padding-right: 12px;
		width: 100%;
		min-width: 0;
	}

	.search-input {
		box-sizing: border-box !important;
		-webkit-appearance: none !important;
	}

	.wt-input-btn-group .wt-input-btn-group__btn {
		background: none;
		border: none;
		color: inherit;
		font: inherit;
		cursor: pointer;
		text-align: left;
		outline: none;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
		-webkit-appearance: none;
		font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Droid Sans", "Segoe UI", "Helvetica", Arial, sans-serif;
		position: relative;
		padding-right: 21px;
		padding-left: 15px;
		padding-top: 12px;
		padding-bottom: 12px;
		height: 48px; /* Height */
		color: #222222; /* Dark grey text */
		font-weight: bold;
		font-size: 16px;
		white-space: nowrap;
		z-index: 10;
		transition: all 200ms ease-out;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: 96px; /* Top right rounded corner */
		border-bottom-right-radius: 96px; /* Bottom right rounded corner */
		border: 1px solid rgba(34, 34, 34, 0.15); /* Light grey border */
		border-left: 0;
	}

	.wt-nudge-b-1 {
		bottom: 1px !important;
	}

	.wt-nudge-t-1, .wt-nudge-t-2, .wt-nudge-t-3, .wt-nudge-t-4, .wt-nudge-r-1, .wt-nudge-r-2, .wt-nudge-r-3, .wt-nudge-r-4, .wt-nudge-b-1, .wt-nudge-b-2, .wt-nudge-b-3, .wt-nudge-b-4, .wt-nudge-l-1, .wt-nudge-l-2, .wt-nudge-l-3, .wt-nudge-l-4 {
		position: relative;
	}

	.search-icon, .wt-icon {
		display: inline-block;
		fill: currentColor;
		height: 24px; /* Icon height */
		width: 24px; /* Icon width */
		vertical-align: middle;
	}

	.wt-text-center-xs {
		text-align: center !important; /* Center aligned text for extra small screens */
	}

	.blocks-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		list-style: none;
		padding: 0;
		margin: 0 -15px;
	}

	.categories.blocks .blocks-item {
		justify-content: flex-start;
		box-shadow: 0 1px 2px 0 rgb(52 58 67 / 8%), 0 1px 4px 0 rgb(52 58 67 / 8%), 0 0 2px 0 rgb(52 58 67 / 10%);
		transition: 0s all ease-in;
		border: 0;
		border: 1px solid transparent;
		border-radius: 15px; /* Rounded corners */
		background-color: #FFFFFF; /* White background */
		flex: 0 0 30.33%;
		margin: 0 15px 30px;
	}

	.blocks-item-title {
		margin: 0;
		font-size: 20px; /* Large font size */
		font-weight: 700; /* Bold font weight */
	}

	.blocks-item-description:not(:empty) {
		margin-top: 10px; /* Top margin */
	}

	.blocks-item-link {
		background: url($assets-Filters-svg); /* Background image */
		color: rgba(10, 14, 18, 1); /* Dark text color */
		padding: 20px 30px; /* Padding */
		justify-content: center; /* Center aligned content */
	}

	.blocks-item {
		border: 1px solid rgba(23, 213, 255, 1); /* Light blue border */
		border-radius: 16px; /* Rounded corners */
		box-sizing: border-box;
		color: rgba(23, 213, 255, 1); /* Light blue text */
		display: flex;
		flex: 1 0 340px;
		flex-direction: column;
		justify-content: center;
		margin: 0 0 30px;
		max-width: 100%;
		text-align: center;
	}

	.matrix-header {
		color: white; /* White text */
		background-color: #1a293e; /* Dark blue background */
		display: block;
		margin-top: 10px;
		padding: 3px 5px;
		font-weight: 600; /* Medium font weight */
	}

	#div-registration {
		width: 50%; /* Width */
		margin: auto; /* Centered margin */
		text-align: center; /* Center aligned text */
	}

		/*#a-client-detail {
		padding-left: 7px;
	}*/

		/*	#span-navigation-header {
		display: block;
	}*/

		#div-registration p {
			margin-bottom: 0;
		}
}

@media print {
	/* Print-specific styles */
	#logo {
		width: 100%; /* Full width for the logo */
		height: 500px; /* Set fixed height for the logo */
		box-shadow: inset 0 0 0 1000px #000; /* Dark box shadow to enhance visibility */
		display: block !important; /* Ensure the logo is displayed */
		-webkit-print-color-adjust: exact !important; /* Maintain exact color during printing */
		/* Consider adding border-radius, padding, and margin for better print layout */
	}

	* {
		-webkit-print-color-adjust: exact !important; /* Ensure exact color reproduction for all elements */
	}
}

#chat {
	position: fixed;
	right: 30px;
	bottom: 70px;
	z-index: 1000;
}

	#chat .fa-comment {
		font-size: 30px;
		cursor: pointer;
	}

	#chat .chat-window {
		display: none;
		border: solid 1px #000;
		padding: 10px;
		background: #fff;
		width: 300px;
		height: 500px;
		flex-direction: column;
	}

	#chat .chat-body {
		overflow: auto;
		flex-grow: 1;
	}

	#chat .chat-footer textarea {
		height: 50px;
		min-height: auto;
	}

	#chat .chat-body > div {
		padding: 10px;
		border: solid 1px #000;
		margin: 10px 0;
	}
