input,
textarea {
	width: 100%;
	background-color: rgb(255, 255, 255) !important;
	border: solid 1px var(--imaBorder) !important;
	border-radius: 4px !important;
	height: 40px;
	padding: 8px 12px;
	--tw-ring-color: transparent !important;
}

input:focus,
textarea:focus,
select:focus {
	border: solid 1px var(--imaBorderFocus) !important;
}

textarea:read-only,
[type="text"]:read-only {
	cursor: not-allowed;
	background-color: var(--imaReadOnly) !important;
	--tw-ring-color: transparent !important;
}

[multiple],
[type="date"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
textarea div.placeholder {
	padding-left: 8px !important;
}

input[readonly="readonly"],
input[readonly] {
	cursor: not-allowed;
	background-color: var(--imaReadOnly) !important;
}

[type="checkbox"] {
	width: 20px !important;
	min-width: 20px !important;
	height: 20px !important;
	border-radius: 4px !important;
	border: 2px solid var(--imaBorder) !important;
	--tw-ring-color: transparent !important;
}
[type="checkbox"]:checked {
	background: url(/icons/check.svg) no-repeat !important;
	background-size: 10px !important;
	background-position: center !important;
}

[type="radio"] {
	width: 20px !important;
	min-width: 20px !important;
	height: 20px !important;
	min-height: 20px !important;
	border-radius: 10px !important;
	border: 3px solid var(--imaBorder) !important;
	cursor: pointer;
	--tw-ring-color: transparent !important;
}

[type="radio"]:checked {
	background: url(/icons/ellipse.svg) no-repeat;
	background-position: center;
	background-size: 8px;
	background-color: rgb(254, 254, 254) !important;
}

input[type="radio"]:disabled {
	background-color: var(--imaReadOnly) !important;
	cursor: not-allowed;
}

[multiple]:focus,
[type="date"]:focus,
[type="dateTime"]:focus,
[type="datetime-local"]:focus,
[type="email"]:focus,
[type="month"]:focus,
[type="number"]:focus,
[type="password"]:focus,
[type="search"]:focus,
[type="tel"]:focus,
[type="text"]:focus,
[type="time"]:focus,
[type="url"]:focus,
[type="week"]:focus,
textarea:focus {
	border-color: var(--imaBorderFocus);
	--tw-ring-color: transparent !important;
}

.search-input {
	background: url(/icons/search.png) no-repeat;
	background-position: calc(100% - 16px);
	background-size: 20px;
	padding-right: 42px;
}

.date-input {
	background: url(/icons/calendar.svg) no-repeat;
	background-position: calc(100% - 10px);
	padding-right: 36px;
	background-size: 24px;
	color: black !important;
}

.field-validation-error {
	color: #f5707a;
	margin-left: 0;
	margin-top: 5px;
}

.input-with-button div {
	border: solid var(--imaBorder) 1px;
	border-radius: 4px !important;
	padding: 8px;
	height: 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.input-with-button div button {
	height: 30px;
	display: flex;
	align-items: center;
	font-size: 14px;
}

label.error {
	font-size: 16px;
	color: var(--imaRed);
}

input.error {
	background: rgb(251, 227, 228);
	border: 1px solid #fbc2c4 !important;
	color: var(--imaRed);
}

.input-required {
	border-color: var(--imaRed) !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"] {
	-moz-appearance: textfield;
}

input[data-switch="bool"]:disabled + label {
	background-color: var(--imaReadOnly) !important;
	cursor: not-allowed !important;

	&::after {
		filter: grayscale(1);
		cursor: not-allowed !important;
	}
}

.jcalendar-controls {
	display: none !important;
}

.jcalendar_warning {
	color: black !important;
}