#alert-container
{
    position: fixed;
    top: var(--vel-menu-height);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index:4;
}
body.mobile #alert-container
{
    top:0;
}
#alert-container > .mylp-alert-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    border-radius: var(--vel-shape300-border_radius);
    box-shadow: var(--vel-elevation300-box_shadow);
    /* width: 100%; */
    /* max-width: 100%; */
    padding: 10px var(--vel-fixed-spacing-05) 10px;
    color: var(--vel-color-neutral-800);
    background: var(--vel-color-neutral-white);
    border-inline-start: var(--vel-fixed-spacing-03) solid transparent;
    gap: var(--vel-fixed-spacing-04);
    opacity: 0;
    transition: opacity ease-in .3s;
    margin: var(--vel-fixed-spacing-05);
    margin-bottom: 0;
    align-items: center;
}

#alert-container>.mylp-alert-item.shown{
    opacity:1;
}
#alert-container>.mylp-alert-item.success
{
    border-inline-start-color:var(--vel-color-semantic-success-high);
}
#alert-container>.mylp-alert-item.error
{
    border-inline-start-color:var(--vel-color-semantic-error-high);
}
#alert-container>.mylp-alert-item.warning
{
    border-inline-start-color:var(--vel-color-semantic-warning-high);
}

#alert-container>.mylp-alert-item.info
{
    border-inline-start-color:var(--vel-color-semantic-info-high);
}


#alert-container>.mylp-alert-item>.alert-image-success,
#alert-container>.mylp-alert-item>.alert-image-error,
#alert-container>.mylp-alert-item>.alert-image-info
{
    display:none;
    width:24px;
}

#alert-container>.mylp-alert-item.success>.alert-image-success
{
    color: var(--vel-color-semantic-success-high);
    display:flex;
}
#alert-container>.mylp-alert-item.error>.alert-image-error
{
    color: var(--vel-color-semantic-error-high);
    display:flex;
}
#alert-container>.mylp-alert-item.info>.alert-image-info
{
    color: var(--vel-color-semantic-info-high);
    display:flex;
}
#alert-container>.mylp-alert-item>.alert-message{
    flex:1 1 auto;
    /*display: flex;
    align-items: center;*/
}
#alert-container>.mylp-alert-item>button.alert-close
{
    border-radius: var(--vel-shape200-border_radius);
}