:root {
	/* ------------------
			color
		------------------ */
	/* #345EB0 rather than the brand #3B69C4, which misses WCAG AA contrast on the grey submenu (3.9:1) */
	--clr_primary: #345EB0;
	--bs-primary: #345EB0;
	--bs-primary-rgb: 52, 94, 176;
	--bs-btn-bg: #345EB0;
	--clr_primary_hover: #2F549D;
	--clr_primary_disabled: var(--clr_primary);
	--bs-link-hover-color: var(--clr_primary_hover);
	--bs-link-hover-color-rgb: 47, 84, 157;
	--bs-focus-ring-color: rgba(52, 94, 176, 0.25);
}

body.app-biexport {
	background: transparent linear-gradient(179deg, #E5F2F9 0%, #F2F8E9 100%) 0% 0% no-repeat padding-box;
}

.form-control,
.form-select,
.input-group-text {
	font-family: barlow-medium;
	font-size: var(--fs_200);
	font-weight: 400;
	line-height: 1.5;
}

.form-select {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23345EB0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.select2-selection {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23345EB0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-size: 0.75rem;
	background-position: right 1rem center;
}

.select2-container .select2-selection .select2-selection__arrow b {
	border: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	margin: 0;
	background-color: #C2D7F7;
}

/* #B3CEF5 left the chip text at 4.4:1 */
.filter-chips .btn-check:checked + .btn,
.filter-chips .btn.active,
.filter-chips .btn:first-child:active,
.filter-chips :not(.btn-check) + .btn:active,
.filter-chips .btn-chip:hover,
.filter-chips .badge.active {
	background-color: #C2D7F7;
}

/* the file input over an upload control is out of the tab order (see openbicms-biexport.js), the control carries the focus ring */
.upload:focus-visible {
	outline: 2px solid var(--bs-primary);
	outline-offset: 2px;
}

input,
select,
.input-group-text {
	border-color: var(--bs-body-color) !important;
}

	input[type="search"]:has(~.bi.bi-search ~ .input-group-text) {
		padding-right: 0;
	}

	input[type="search"] ~ .bi.bi-search ~ .input-group-text {
		padding-left: 2.3rem;
	}

		input[type="search"] ~ .bi.bi-search ~ .input-group-text .form-check-input {
			background-color: #fff;
			border: 1px solid var(--clr_text);
			cursor: pointer;
		}

			input[type="search"] ~ .bi.bi-search ~ .input-group-text .form-check-input:checked {
				background-color: var(--clr_primary);
				cursor: pointer;
			}

.input-group > input.has-icon:has(~ .input-group-text) ~ i {
	right: 6rem;
}

.btn-settings.dropdown-toggle {
	padding-inline: 1.5rem;
}

.paramButtons > *,
.workitemButtons > * {
	margin-bottom: 1rem;
}

.gui-state.bi.bi-chevron-down {
	margin-right: 0.5rem;
}
