:root {
    --font-icon-outlined: 'Material Symbols Outlined';
}
*[data-validation="0"]:focus {
    outline: 1.5px solid red !important;
    border-color: red !important;
}
*[data-validation="1"]:focus {
    outline: 1.5px solid green !important;
    border-color: green !important;
}
div:has(>input[data-validation]) {
	position: relative;
}
div:has(>input[data-validation])>input {
	width: 100%;
}
div:has(>input[data-validation])::after {
	position: absolute;
	pointer-events: none;
	right: 7px;
	top: 50%;
	width: 20px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	font-family: var(--font-icon-outlined);
	content: 'exclamation';
	color: red;
}
div:has(>input[data-validation="1"])::after {
	content: 'check';
	color: green !important;
	font-size: 1.1rem;
}
input[data-validation="0"] {
	border-color: red !important;
	color: red!important;
}
select[data-validation="0"] {
	border-color: red!important;
}