.md-input-container {
	display: inline-block;
	position: relative;
	padding: 2px;
	margin: 18px 0 16px 0;
	vertical-align: middle;
}

/*
Placeholder Text Styling
This section applies custom styling to the placeholder text of input fields,
setting the color with a transparency effect.
*/
input::placeholder {
	color: #2f2b3d6b !important; /* Sets placeholder text color with transparency */
}
textarea::placeholder {
	color: #2f2b3d6b !important;
}
/*
Input Field with Adornment Styling
Ensures that when an input has an adornment (like an icon or button),
the padding is adjusted so that the text does not overlap with the adornment.
*/
.input-with-adornment input {
	padding-right: 40px; /* Adds padding to the right to prevent text from going under an adornment */
}

/*
Input Field with Focus and Value Styling
This section changes the color of text inside inputs when they are focused or have a value.
*/
.md-input-focused .bn-color-black {
	color: #000000 !important; /* Sets text color to black when input is focused */
}
.md-input-has-value .bn-color-black {
	color: #000000 !important; /* Sets text color to black when input has a value */
}

/*
Placeholder Label Styling
This section applies color styling to placeholder labels when the input field is not focused.
*/
.bn-placeholder-label {
	color: #2f2b3d6b; /* Sets the placeholder label color with transparency */
}

/*
Placeholder Label with Focus or Value Styling
This section changes the placeholder label color to black when the input is focused or has a value.
*/
.md-input-focused .bn-placeholder-label {
	color: #000000 !important; /* Changes placeholder label color to black when input is focused */
}
.md-input-has-value .bn-placeholder-label {
	color: #000000 !important; /* Changes placeholder label color to black when input has a value */
}

/*
Input Field with Placeholder Styling
Customizes the placeholder text appearance for input fields that have a value or are focused.
*/
.md-input-has-placeholder input::placeholder {
	color: #2f2b3d6b !important; /* Sets placeholder text color with transparency when input has a value */
}
.md-input-focused input::placeholder {
	color: #2f2b3d6b !important; /* Sets placeholder text color with transparency when input is focused */
}
.md-input-has-placeholder textarea::placeholder {
	color: #2f2b3d6b !important; /* Sets placeholder text color with transparency when input has a value */
}
.md-input-focused textarea::placeholder {
	color: #2f2b3d6b !important; /* Sets placeholder text color with transparency when input is focused */
}

/*
Input with Adornment Wrapper Styling
This section styles the wrapper for inputs with adornments (icons or buttons),
making sure they align properly and have a relative position.
*/
.input-with-adornment .input-wrapper {
	position: relative; /* Positions wrapper relative to the input */
	display: flex; /* Displays the wrapper as a flexible box */
	align-items: center; /* Vertically centers the content */
}

/*
Error Spacer Styling for Tight Inputs
This section reduces the minimum height of the error message spacer for inputs with tight spacing.
*/
md-input-container.bn-tight .md-errors-spacer {
	min-height: 1px; /* Minimizes the height of the error message spacer */
}

/* Media Queries for screen sizes less than 600px */
@media (max-width: 600px) {
	/* Placeholder text size adjustments */
	input::placeholder {
		font-size: 12px !important;
	}
	textarea::placeholder {
		font-size: 12px !important;
	}
}
md-input-container .md-input {
	border-width: 1px;
	border-color: #e9e8eb;
	border-style: solid;
	box-sizing: border-box;
	border-radius: 6px;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	padding-right: 8px;
}

md-input-container.md-input-focused .md-input {
	border-width: 1px;
	border-color: var(--primary-color);
	border-style: solid;
	box-sizing: border-box;
	border-radius: 6px;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	padding-right: 8px;
}
md-chips md-chips-wrap:has( md-autocomplete) {
	border-width: 1px;
	border-color: #e9e8eb;
	border-style: solid;
	box-sizing: border-box;
	border-radius: 6px;
	box-shadow: none;
}
md-chips md-chips-wrap:not(:has( md-autocomplete)) {
	box-sizing: border-box;
	border-radius: 6px;
	box-shadow: none;
}
md-chips md-chips-wrap.md-focused:has( md-autocomplete) {
	border-width: 1px;
	border-color: var(--primary-color);
	border-style: solid;
	box-sizing: border-box;
	box-shadow: none;
	border-radius: 6px;
}
md-chips md-chips-wrap.md-focused:not(:has( md-autocomplete)) {
	box-sizing: border-box;
	box-shadow: none;
	border-radius: 6px;
}
md-input-container.md-input-focused .md-input,
md-input-container .md-input.ng-invalid.ng-dirty,
md-input-container.md-input-resized .md-input {
	border-width: 1px;
	padding: 8px;
}