.floatlabel { cursor: text ; position: relative;  box-sizing: border-box; /*margin:0 auto 0 auto;*/ border:1px solid transparent; border:1px solid var(--color-gray); background:var(--color-surface); border-radius:var(--border-radius); padding:15px 20px 15px 20px; color:var(--color-on-surface); text-align:left; max-width:100% }
:host(.noborder) .floatlabel {border:none; }
.floatlabel input, .floatlabel textarea, .floatlabel select, .floatlabel .select2 {	 background:transparent; -webkit-appearance: none; box-sizing: border-box; width:100%; margin:0; padding:0; border:none !important;}
.floatlabel label { pointer-events:none; text-align:left;position: absolute; overflow:hidden; box-sizing: border-box;  top: 0;  left: 0;   width:100%;  white-space: nowrap; cursor: text; user-select:none; padding: 13px 0 0 10px;  transition: all 200ms;    color:var(--color-on-surface); opacity:0.8; transform-origin: top left; line-height:1.5rem;}

.floatlabel input:disabled + label,
.floatlabel textarea:disabled + label,
.floatlabel input:focus + label,
.floatlabel input:valid + label,
.floatlabel textarea:focus + label,
.floatlabel textarea:valid + label,
.floatlabel select:focus + label,
.floatlabel select:valid + label, 
.floatlabel .select2-container--below + label, 
.floatlabel .labelup 
{    transform: translate3d(0, -0.5rem, 0) scale(0.65); }

.floatlabel input[type=checkbox] { -webkit-appearance: radio; text-align:left; margin-right:10px;}
*:focus{outline:none}
input,button,textarea {font-size:inherit; color:inherit; font-family: inherit;}
img {max-width:100%;}

.field {position:relative;}
/*:host(.validationAPIError) .floatlabel::after{*/
.validationPlaceholder {position:relative;}
.floatlabel > .validationPlaceholder {
  display:none;
  position:absolute;
  bottom:0;
  right:1rem;
  padding: 3px 2rem 3px 3px;
  transform: translateY(50%);
  background-color: var(--color-surface);
  font-size: 0.8rem;
}
:host([validationSchema]) .floatlabel > .validationPlaceholder {display:block;}
:host([validationAPI]) .floatlabel > .validationPlaceholder {display:block;}

.validationAPIError::after, .validationAPIOK::after {
  content: '';
  position: absolute;
  top: 50%;                    /* Центрируем по вертикали */
  right: 3px;               /* Отступ справа (можно регулировать) */
  width: 1.5rem;               /* Оптимальный размер иконки */
  height: 1.5rem;
  transform: translateY(-50%); /* Точное центрирование по вертикали */
  display: block;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32"><path fill="red" d="m24.778 21.42l-5.502-5.503l5.5-5.502l-2.827-2.83l-5.503 5.502l-5.502-5.502l-2.828 2.83l5.5 5.502l-5.5 5.502l2.83 2.828l5.5-5.502l5.5 5.502z"/></svg>') no-repeat center;
  background-size: 100% 100%;  /* Иконка займёт всю область */
}
.validationAPIOK::after{
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><path fill="green" d="m173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69L432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>') no-repeat center !important;
}
.validationAPIError{  color: red; }
.validationAPIOK{  color: green; }

.dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--color-surface); border: 1px solid #ccc; max-height: 300px;
  overflow-y: auto; z-index: 1; display: none;
  box-shadow: 1px 1px 8px 0px rgba(34, 60, 80, 0.2);;
  z-index:2;
}
.dropdown > * {
  padding: 8px 15px; cursor: pointer; display: flex; justify-content: space-between; 
}
.dropdown > *.header {
  padding: 8px 8px;
  font-weight:bold;
}
.dropdown > *.disabled {
  color:var(--color-gray)
}
.dropdown > *:hover { background: var(--color-background); }

.toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  position:absolute;
  right: 5px;  
}