.auth-field-error-popover {
    --auth-popover-arrow-left: 50%;
    background: #fff;
    border: 1px solid rgba(231, 74, 59, 0.45);
    border-radius: 0.5rem;
    box-shadow: 0 0.75rem 1.75rem rgba(65, 0, 153, 0.16);
    color: #3a3b45;
    display: flex;
    font-size: 0.9rem;
    gap: 0.65rem;
    line-height: 1.4;
    max-width: min(22rem, calc(100vw - 1.5rem));
    padding: 0.75rem 0.85rem;
    pointer-events: none;
    position: fixed;
    width: max-content;
    z-index: 1090;
}

.auth-field-error-popover[hidden] {
    display: none !important;
}

.auth-field-error-popover::before,
.auth-field-error-popover::after {
    border-left: 0.55rem solid transparent;
    border-right: 0.55rem solid transparent;
    content: "";
    left: var(--auth-popover-arrow-left);
    position: absolute;
    transform: translateX(-50%);
}

.auth-field-error-popover[data-placement="bottom"]::before {
    border-bottom: 0.55rem solid rgba(231, 74, 59, 0.45);
    bottom: 100%;
}

.auth-field-error-popover[data-placement="bottom"]::after {
    border-bottom: 0.48rem solid #fff;
    bottom: calc(100% - 1px);
}

.auth-field-error-popover[data-placement="top"]::before {
    border-top: 0.55rem solid rgba(231, 74, 59, 0.45);
    top: 100%;
}

.auth-field-error-popover[data-placement="top"]::after {
    border-top: 0.48rem solid #fff;
    top: calc(100% - 1px);
}

.auth-field-error-popover__icon {
    align-items: center;
    background: #fff1ef;
    border-radius: 50%;
    color: #d93a2c;
    display: inline-flex;
    flex: 0 0 1.75rem;
    height: 1.75rem;
    justify-content: center;
    margin-top: 0.05rem;
    width: 1.75rem;
}

.auth-field-error-popover__message {
    min-width: 0;
    overflow-wrap: anywhere;
}

.auth-field-invalid,
.auth-field-invalid:focus {
    background-image: none !important;
    border-color: #e74a3b !important;
}

.auth-field-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.2) !important;
}

.auth-banner {
    align-items: flex-start;
    border: 1px solid;
    border-radius: 0.55rem;
    color: #3a3b45;
    display: flex;
    font-size: 0.9rem;
    gap: 0.7rem;
    line-height: 1.45;
    margin-bottom: 1rem;
    padding: 0.8rem 0.9rem;
    width: 100%;
}

.auth-banner[hidden] {
    display: none !important;
}

.auth-banner::before {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 1.75rem;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    height: 1.75rem;
    justify-content: center;
    margin-top: 0.05rem;
    width: 1.75rem;
}

.auth-banner--error {
    background: #fff4f2;
    border-color: rgba(231, 74, 59, 0.45);
}

.auth-banner--error::before {
    background: #ffe2de;
    color: #c92f22;
    content: "\f071";
}

.auth-banner--info {
    background: #f6f1ff;
    border-color: rgba(122, 63, 229, 0.38);
}

.auth-banner--info::before {
    background: #e9ddff;
    color: #5b20c9;
    content: "\f05a";
}

.auth-banner__content {
    flex: 1 1 auto;
    min-width: 0;
}

.auth-banner__content > :last-child {
    margin-bottom: 0;
}

.auth-banner ul,
.auth-banner .errorlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.auth-banner a {
    font-weight: 600;
    text-decoration: underline;
}

.auth-validation-source-error {
    display: none !important;
}

@media (max-width: 575.98px) {
    .auth-field-error-popover {
        font-size: 0.875rem;
        padding: 0.7rem 0.75rem;
    }

    .auth-banner {
        padding: 0.75rem;
    }
}