html, body {
	font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3 {
	font-family: 'Proxima Nova', sans-serif;
	font-weight: bold; /* This will use the bold font file defined above */
}

#blazor-error-ui {
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

	#blazor-error-ui .dismiss {
		cursor: pointer;
		position: absolute;
		right: 0.75rem;
		top: 0.5rem;
	}

.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNjk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

	.blazor-error-boundary::after {
		content: "An error has occurred."
	}


body {
	display: flex;
	flex-direction: column;
	height: 100vh;
	margin: 0;
}

#app-title {
	display: flex;
	gap: .2em;
	align-items: center;
	margin: 0;
	padding: 0;
	font-size: large;
	font-weight: bold;
}

main {
	padding: 0 0 0 0;
}

.header-container {
	display: flex;
	justify-content: center;
	margin-top: 0px;
	width: 100%; /* Optional: Define a width for the container */
	height: 50px; /* Essential: Define a fixed height */
	overflow: auto; /* Enables scrollbars when content overflows */
}

.scrollable-container {
	display: flex;
	justify-content: center;
	margin-top: 0px;
	width: 100%; /* Optional: Define a width for the container */
	height: calc(100vh - 92px); /* Essential: Define a fixed height */
	overflow: auto; /* Enables scrollbars when content overflows */
}

.footer-container {
	display: flex;
	justify-content: center;
	margin-top: 0px;
	width: 100%; /* Optional: Define a width for the container */
	height: 42px; /* Essential: Define a fixed height */
	overflow: auto; /* Enables scrollbars when content overflows */
}

.lobby-content {
	width: 100%;
	border-radius: 15px;
}

.lobby-header {
	color: var(--kendo-color-primary);
	font-size: large;
	font-weight: bold;
	margin-top: 1em;
	margin-bottom: .5em;
}

.lobby-sub-header {
	color: var(--kendo-color-primary);
	font-size: larger;
	margin-top: 1em;
}

.message-block {
	margin: 20px auto;
	padding: 10px 0;
	text-align: center;
	background: #A4DBFE;
}

.order-tracking {
	padding: 20px;
	margin: 10px auto;
	background: whitesmoke;
	border-radius: 15px;
	display: flex;
	justify-content: center;
}

.contact-us {
	padding: 20px;
	margin: 10px auto;
	background: whitesmoke;
	border-radius: 15px;
	--display: flex;
	--justify-content: center;
}

.contact-us-title {
	width: 100%;
	/*height: 50px;*/
	margin: 0 auto;
	text-align: center;
	font-size: x-large;
}

.contact-us-button {
	width: 100%;
	/*height: 50px;*/
	margin: 0 auto;
	text-align: center;
}

.recent-order-button {
	font-size: x-large;
	margin-bottom: 0px;
}

.message-title {
	width: 100%;
	height: 50px;
	margin: 0 auto;
	text-align: center;
	font-size: x-large;
	--color: darkgray;
}

.mid-link {
	--border-radius: 15px;
	--width: 100%;
	display: flex;
	justify-content: center;
	--padding: 0px;
	margin: 40px 0px;
	--background: whitesmoke;
}

.mid-link-title {
	display: flex;
	justify-content: center;
	width: 340px;
	text-align: center;
	font-weight: bold;
	font-size: larger;
}

.phone-link {
	color: var(--kendo-color-primary);
}

.your-sales-person {
	align-items: center;
	border-radius: 15px;
}

.agency-card-img {
	margin: 20px;
}

.link-button {
	background: none;
	border: none;
	color: var(--kendo-color-primary);
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
	font-size: inherit;
	font-family: inherit;
}

/* Make rows in grids with the "clickable-rows" class show a finger (pointer) cursor on hover */
.clickable-rows .k-grid-content tr:hover,
.clickable-rows .k-grid-content tr:hover td {
	cursor: pointer;
}

.grid-no-scroll .k-grid-content {
	overflow-y: hidden; /* Hides the vertical scrollbar */
}

.grid-no-scroll .k-grid-header,
.grid-no-scroll .k-grid-footer {
	padding-right: 0; /* Prevents empty space where the scrollbar would be */
}

.grid-column-header-title {
	font-weight: bold;
}

.grid-column-header-right {
	text-align: right;
}

.page-wrapper {
	padding: .5em 1em 0 0;
}

.title-back {
	margin-right: 20px;
}

.search-title {
	color: var(--kendo-color-primary);
	font-size: larger;
}

.search-count {
	font-style: italic;
	font-size: smaller;
}

.seperator {
	color: lightgray;
	margin-left: 20px;
	margin-right: 10px;
}

.seperator-label {
	font-style: italic;
}

.k-column-title {
	color: var(--kendo-color-primary);
}

.form-Links {
	border: solid lightgray 1px;
}

.form-item-date {
	--padding: 2px 8px !important;
	height: 24px;
}

.form-label-100 {
	width: 100px !important;
}

.k-form-field > .k-form-label {
	color: var(--kendo-color-primary);
}

.k-form .k-form-fieldset {
	padding: 10px;
	margin-top: 0;
}

.k-form .k-form-legend {
	margin: 0;
	font-weight: bold;
	font-size: large !important;
	/*color: var(--kendo-color-primary);*/
}

form-item-tight,
.k-form .form-item-tight,
.k-form-field.form-item-tight,
.k-form-item.form-item-tight {
	margin-top: 2px !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.k-checkbox-wrap {
	margin-top: 5px;
}

.empty-fg, .empty-fg legend {
	border: 0;
}

.print-button {
	text-align: -webkit-right;
}

.icon-right {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 8px; /* Optional: adjust spacing */
}

td, tr {
	padding: 0;
	vertical-align: top;
}

.row {
	padding-top: 0;
	padding-bottom: 0;
}

td.col {
	border: 1px solid #dee2e6;
	padding-right: 10px;
	padding-left: 5px;
}

div.section-title {
	padding: 5px 0 0 5px;
	font-size: 14px;
	font-weight: bold;
	color: var(--kendo-color-primary);
}

div.address-section {
	margin-left: 20px;
	padding: 0;
}

#NewPassword::placeholder {
	color: lightgray;
	opacity: 1; /* Ensures full color visibility */
}

#Confirm::placeholder {
	color: lightgray;
	opacity: 1; /* Ensures full color visibility */
}

.form-layout {
	border-spacing: 0;
}

.form-label {
	vertical-align: middle;
	text-align: right;
	padding: 2px 10px 2px 5px;
	color: var(--kendo-color-primary);
}

.right-align-header {
	text-align: right;
}

.uppercase input {
	text-transform: uppercase;
}

.no-spinner .k-spin-button {
	display: none !important;
}

.agency-grid-layout {
	height: 100vh;
}

.rep-treeview {
	height: calc(100% - 76px);
}

.reg-treeview {
	height: 200px;
}

.rsm-treeview {
	height: 220px;
}

.sel-treeview {
	height: 300px;
}

.item-template {
	display: flex;
	flex-direction: column; /* Stack NoName and CityState vertically */
}

.rep-citystate {
	margin-left: 10px;
	font-size: smaller;
	color: darkgray;
}

.k-map-controls {
	display: none !important;
}

.k-appbar-primary {
	padding: 0;
}

.cart-button {
	--height: 40px;
	--width: 40px;
}

.user-title {
	margin-left: 0px;
}

.k-checkbox {
	margin-top: 7px;
	margin-right: 5px;
	margin-left: 5px;
}

.appbar-title {
	margin-left: 10px;
	margin-right: 20px;
	font-size: 18px;
}

.appbar-buttons {
	margin-left: 20px;
	margin-right: 20px;
}

.appbar-button {
	margin-left: 5px;
	margin-right: 5px;
}

.search-button {
	margin: 5px 40px;
}

.readonly-stepper {
	pointer-events: none;
	opacity: 0.9;
}

/* Keep Telerik/Kendo form items top-aligned so tall siblings don't vertically center others */
.k-form .k-form-field {
	/* form field is a flex container in Kendo; force children to start at the top */
	align-items: flex-start !important;
}

.k-form .k-form-item .k-form-label {
	align-self: flex-start !important;
	margin-top: 4px;
}

.k-form .k-form-item .k-form-field > * {
	align-self: flex-start !important;
}

/* end of k-form alignment overrides */

/* pro-list styling for FormItemLinksComponent to match other FormItems */
.pro-list {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08));
	padding: 0;
	border-radius: 2px;
	min-height: 22px;
	align-items: flex-start;
	flex: 1 1 auto; /* let it take remaining horizontal space like other inputs */
	min-width: 0; /* allow flex children to shrink and wrap properly */
}