.input-field span.error {
    display: block;
    font-size: 14px;
    color: var(--cancel-color);
    padding: 0 20px;
    max-height: 20px;
    height: 20px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.input-field.form span.error {
    margin-top: -20px;
}

.field-valid {
    border: 1px solid var(--confirm-color) !important;
}

.field-invalid {
    border: 1px solid var(--cancel-color) !important;
}