.inputContainer {
    position: relative;
    padding: 1em;
    text-align: left;
    color: var(--primary10);
}

.inputLabel {
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875em;
    font-weight: 500;
    margin-left: 0.25em;
}

.inputTextfield:placeholder-shown + label {
    display: none;
}

.inputTextfield:not(:placeholder-shown) + label, .inputTextfield:focus + label, .inputTextfield:focus-visible + label {
    position: absolute;
    top: -0.5em;
    display: block;
    animation: floatingLabel .3s;
}

.inputTextfield:focus::placeholder, .inputTextfield:focus-visible::placeholder {
    opacity: 0;
}

.inputTextfield {
    min-width: max-content;
    font-family: inherit;
    width: calc(100%);
    padding: .5rem;
    border-radius: 0.5rem;
    color: var(--primary10) !important;
}

.inputTextfield[aria-invalid="true"] {
    border-color: var(--error50);
    background-image: url("../images/warningColored.svg");
    background-repeat: no-repeat;
    background-position: right 0.5em center;
    background-size: 1.5em;
}

.inputTextfield:focus, .inputTextfield:focus-visible {
    box-shadow: 0 2px 4px 2px rgb(0 0 0 / 30%);
    border-color: var(--primary10);
    outline: 0;
}

.inputTextfield:hover {
    box-shadow: 0 2px 4px 2px rgb(0 0 0 / 30%);
    border-color: var(--primary10);
}

.inputTextfield::placeholder {
    color: var(--primary10);
}

.inputMessageContainer {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    position: absolute;
    margin-right: 1em;
    width: calc(100% - 2.5em);
}

.inputMessage {
    color: var(--error50);
    font-size: 0.75em;
    margin-left: 0.875em;
    margin-top: 0.25em;
}

.inputShow {
    position: absolute;
    top: 1.5rem;
    right: 1em;
    width: 1.75em;
    height: 1.75em;
    border: none;
    background-color: inherit;
    margin-right: 1rem;
}

.inputShow:hover {
    cursor: pointer;
    filter: brightness(0) saturate(100%) invert(19%) sepia(95%) saturate(1022%) hue-rotate(169deg) brightness(91%) contrast(104%);
}

.inputShow:focus-visible {
    outline-color: var(--primary10);
}

.inputShow[aria-label="Show password"] {
    background-image: url("../images/show.svg");
    background-size: cover;
}

.inputShow[aria-label="Hide password"] {
    background-image: url("../images/hide.svg");
    background-size: cover;
}