@import url("bootstrap-icons.css");
:root {
	/* MAIN */
	--main-bg: #f5f5f6;
	/* HxAutosuggest */
	--hx-autosuggest-input-close-icon-opacity: 			.25;
	--hx-autosuggest-item-highlighted-background-color: var(--bs-gray-200);
	--hx-autosuggest-dropdown-menu-height:				300px;	
	/* HxButton */
	--hx-button-space-between-text-icon:				0.25rem;
	/* HxSidebar */
	--hx-sidebar-background-color: 						transparent;
	--hx-sidebar-collapsed-width: 						72px;
	--hx-sidebar-width: 								250px;
	--hx-sidebar-toggler-border: 						1px solid var(--bs-gray-200);
	--hx-sidebar-toggler-background: 					var(--bs-white);
	--hx-sidebar-item-font-size: 						1rem;
	--hx-sidebar-item-padding: 							.75rem;
	--hx-sidebar-item-color: 							var(--bs-dark);
	--hx-sidebar-item-hover-color: 						var(--bs-primary);
	--hx-sidebar-item-hover-background-color: 			var(--bs-primary-rgb);
	--hx-sidebar-item-hover-background-opacity:			.05;
	--hx-sidebar-item-hover-icon-color:					var(--bs-primary);
	--hx-sidebar-item-icon-color: 						var(--bs-primary);
	--hx-sidebar-item-border-radius: 					.5rem;
	--hx-sidebar-item-margin: 							0 0 .25rem 0;
	--hx-sidebar-subitem-font-size: 					.875rem;
	--hx-sidebar-subitem-padding: 						.5rem;
	--hx-sidebar-subitem-margin: 						0 0 .25rem 2rem;
	--hx-sidebar-header-padding: 						1rem;
	--hx-sidebar-body-padding: 							0 1rem;
	--hx-sidebar-brand-logo-width: 						2.5rem;
	--hx-sidebar-brand-logo-height: 					2.5rem;
	--hx-sidebar-brand-shortname-width: 				2.5rem;
	--hx-sidebar-brand-shortname-height: 				2.5rem;
	--hx-sidebar-brand-shortname-background-color: 		var(--bs-primary);
	--hx-sidebar-brand-shortname-border-radius: 		.625rem;
	--hx-sidebar-brand-shortname-color: 				var(--bs-white);
	--hx-sidebar-brand-shortname-font-weight:			600;
	--hx-sidebar-brand-name-color: 						var(--bs-dark);
	--hx-sidebar-brand-name-font-weight: 				600;
	--hx-sidebar-footer-padding: 						1rem;
	--hx-sidebar-footer-item-padding: 					.75rem;
	--hx-sidebar-footer-item-margin: 					0;
	--hx-sidebar-footer-item-font-size:					1rem;
	--hx-sidebar-footer-item-color:						unset;
	--hx-sidebar-footer-item-radius:					unset;
	--hx-sidebar-footer-item-hover-background-color: 	unset;
	--hx-sidebar-footer-item-hover-background-opacity:	unset;
	--hx-sidebar-footer-item-hover-color:				unset;
	/* HxProgressOverlay */
	--hx-progress-overlay-color: var(--bs-white);
	--hx-progress-overlay-opacity: .65;
	/* HxEditForm */
	--hx-form-spacing:									1.25rem;
	/* HxChipList */
	--hx-chiplist-chip-margin:				0.75rem 0.25rem .375rem 0;
	--hx-chiplist-chip-remove-btn-margin: 	0 0 0 .25rem;
	--hx-chiplist-chip-remove-btn-opacity: 	.75;
	--hx-chiplist-chip-label-font-weight: 	400;
	--hx-chiplist-chip-label-margin: 		.25rem;
	--hx-chiplist-chip-label-opacity: 		.75;
    --hx-chiplist-gap: .25rem;
	/* HxContextMenu */
	--hx-context-menu-button-color: 			unset;
	--hx-context-menu-button-border: 			unset;
	--hx-context-menu-button-border-radius: 	.325rem;
	--hx-context-menu-button-padding: 			0 .25rem;
	--hx-context-menu-button-hover-background: 	var(--bs-gray-300);
	--hx-context-menu-item-icon-margin:	0 .5rem 0 0;
	/* HxGrid */
	--hx-grid-button-hover-background: 				var(--bs-gray-300);
	--hx-grid-button-border-radius: 				.25rem;
	--hx-grid-sorted-icon-color: 					var(--bs-primary);
	/* HxPager */
	--hx-pager-margin: 						1rem;
	/* HxInputFileDropZone */
	--hx-input-file-drop-zone-border-width: 				1px;
	--hx-input-file-drop-zone-box-shadow: 					none;
	--hx-input-file-drop-zone-hover-box-shadow: 			0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
	--hx-input-file-drop-zone-border-color: 				var(--bs-gray-400);
	--hx-input-file-drop-zone-background-color: 			transparent;
	--hx-input-file-drop-zone-hover-background-color: 		rgba(var(--bs-primary-rgb), .05);
	--hx-input-file-drop-zone-hover-border-color: 			var(--bs-primary);
	--hx-input-file-drop-zone-border-radius: 				.3rem; /* border-radius-lg */
	--hx-input-file-drop-zone-margin: 						0;
	--hx-input-file-drop-zone-padding: 						3rem;
	/* HxCalendar */
	--hx-calendar-day-hover-background: 				var(--bs-gray-200);
	--hx-calendar-day-hover-border: 					none;
	--hx-calendar-day-selected-background:				var(--bs-primary);
	--hx-calendar-day-selected-color: 					var(--bs-white);
	--hx-calendar-day-selected-border: 					none;
	--hx-calendar-day-out-color: 						var(--bs-gray-500);
	--hx-calendar-day-in-color: 						unset;
	--hx-calendar-day-disabled-opacity: 				.5;
	--hx-calendar-day-disabled-text-decoration: 		line-through;
	--hx-calendar-day-names-color: 						unset;
	--hx-calendar-day-names-font-weight: 				700;
	--hx-calendar-navigation-button-hover-background: 	var(--bs-gray-200);
	--hx-calendar-navigation-button-focus-box-shadow:	0 0 0 0.25rem rgb(0 157 224 / 25%);
	--hx-calendar-navigation-button-text-color:			var(--bs-gray-900);
	--hx-calendar-day-today-border: 					none;
	--hx-calendar-day-today-background: 				var(--bs-primary-rgb);
	--hx-calendar-day-today-background-opacity: 		.05;
	--hx-calendar-day-today-color: 						var(--bs-primary);
	--hx-calendar-day-border-radius: 					.25rem;
	--hx-calendar-day-padding: 							.375rem .5rem;
	--hx-calendar-day-width: 							2.25rem;
	--hx-calendar-day-height: 							2.25rem;
	--hx-calendar-day-spacing: 							.125rem;
	--hx-calendar-font-size: 							.875rem;
	/* Offcanvas */
	--hx-offcanvas-close-icon-font-size: 		2rem;
	--hx-offcanvas-footer-padding-y: 			1rem;
	--hx-offcanvas-footer-padding-x: 			1rem;
	--hx-offcanvas-horizontal-width-sm: 		400px;
	--hx-offcanvas-horizontal-width-lg:			600px;
	/* ListLayout */
	--hx-list-layout-table-font-size: 				.875rem;
	/* HxMultiSelect */
	--hx-multi-select-background-color: 			var(--bs-white);
	--hx-multi-select-dropdown-menu-height:			300px;
	/* TagInput */
	--hx-input-tags-tag-margin: 								0 .25rem 0 0;
	--hx-input-tags-input-width: 								3em;
	--hx-input-tags-input-placeholder-color: 					var(--bs-gray-600);
	--hx-input-tags-naked-font-size-lg: 						1.25em;
	--hx-input-tags-naked-font-size-sm: 						.875em;
	--hx-input-tags-control-focused-box-shadow: 				0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
	--hx-input-tags-control-focused-border-color: 				rgba(var(--bs-primary-rgb), .3);
	--hx-input-tags-add-button-text-margin:							0 0 0 .25rem;
	--hx-input-tags-remove-button-margin:						0 0 0 .25rem;
	--hx-input-tags-dropdown-item-highlighted-background-color: var(--bs-gray-200);
	/* TreeView */
	--hx-tree-view-item-border-radius:				.25rem;
	--hx-tree-view-item-border-width:				0;
	--hx-tree-view-item-border-style:				unset;
	--hx-tree-view-item-border-color:				unset;
	--hx-tree-view-item-color:						var(--bs-dark);
	--hx-tree-view-item-hover-color:				var(--bs-primary);
	--hx-tree-view-item-selected-color:				var(--bs-primary);
	--hx-tree-view-item-background:					var(--bs-white);
	--hx-tree-view-item-hover-background:			var(--bs-primary-rgb);
	--hx-tree-view-item-hover-background-opacity:	.1;
	--hx-tree-view-item-selected-background:		var(--bs-primary-rgb);
	--hx-tree-view-item-spacer-width: 				1rem;
	--hx-tree-view-item-icon-margin: 				0 .25rem 0 0;
	--hx-tree-view-item-font-size:					.75rem;
	--hx-tree-view-item-padding:					.25rem .5rem;
	--hx-tree-view-item-margin:						0 0 .125rem 0;
	--hx-tree-view-expander-container-width:		1rem;
	/* HxInputDate */
	--hx-input-date-dropdown-padding:				1rem;
	--hx-input-date-calendar-margin-bottom:			0;
	/* HxInputDateRange */
	--hx-input-date-range-dropdown-padding:			1rem;
	--hx-input-date-range-calendar-margin-bottom:	0;
	/* HxProgressIndicator */
	--hx-progress-indicator-background:				var(--bs-white);
	--hx-progress-indicator-spinner-color:			var(--bs-primary);
	/* HxToastContainer */
	--hx-toast-container-margin:					.5rem;
	/* HxSearchBox */
	--hx-search-box-item-icon-margin: 					0 .5rem 0 0;
	--hx-search-box-item-icon-font-size:				inherit;
	--hx-search-box-item-title-font-size:				inherit;
	--hx-search-box-item-title-color:					inherit;
	--hx-search-box-item-subtitle-color:				var(--bs-secondary);
	--hx-search-box-item-subtitle-font-size:			.75rem;
	--hx-search-box-item-highlighted-background-color:	var(--bs-gray-200);
	--hx-search-box-dropdown-menu-height:				300px;
}

form {
	display: flex;
	flex-direction: column;
	gap: var(--hx-form-spacing);
}

form > .hx-button {
	align-self: start;
}