.pf-c-form-input-label{
    font-family: 'Montserrat', sans-serif;
    top: 5px;
    font-size: var(--helper-font-size);
    font-weight: 400;
    line-height:1;
    width:max-content;
    padding: 0 4px 2px 4px;
    margin-left: 9px;
    position: relative;
    z-index: 1;
    transition: 0.2s ease;
    color: var(--default-component-label-color);
    border-radius: 4px;

    background: linear-gradient(to top,
    var(--default-component-input-field-background-color) 0px,
    var(--default-component-input-field-background-color) 4px,
    var(--default-label-background-color) 4px);

    @media (max-width: 450px) {
        margin-left: 10px;
        top:7px;
    }

}
.field-container{
    display:flex;
    flex-direction: column;
    padding:0;
    flex-grow:1;
    width:auto;
}
.field-container:has(input:not(:focus):placeholder-shown) label{
    transform: translate(1px, 21px) scale(1.07692);
}

.input-container{
    outline: none;
    color: var(--default-text-color);
    line-height: 1.4;
    font-family: Montserrat,sans-serif;
    font-size: var(--default-font-size);

}
div.input-container > input.input-container {
    border:0;
}
div.input-container{
    align-items: center;
    display: flex;
}
div:not(.input-container) > input.input-container, div.input-container{
    --input-containes-vertical-padding: 8px;
    border: 1px solid var(--input-border-color, #262628);
    border-radius: 4px;
    padding: var(--input-containes-vertical-padding) 12px;
    --default-height: 33px;
    height: var(--default-height);
    @media (max-width: 450px) {
        --input-containes-vertical-padding: 12px;
        --default-height: 41px;
    }

}
.input-helper-container{
    font-size: var(--helper-font-size);
}

.required{
    color: var(--default-negative-color);
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    -webkit-background-clip: text;
}
.field-container:has(input:not([aria-invalid="true"])) span.pf-m-error{
    visibility:hidden;
    display: none;
}
.input-container[aria-invalid="true"], .input-container:has(input.input-container[aria-invalid="true"]){
    --input-border-color: var(--default-negative-color);
}
.input-container[success], .input-container:has(input.input-container[success]){
    --input-border-color: var(--default-positive-color);
}
input[readonly]{
    border:  1px dashed var(--lumo-contrast-30pct);
}
.pf-c-input-group{
    color: var(--default-text-color);
}