.my-alert{
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    left: 50%;

    transform: translate(-50%,-30%);
    max-height: 80px;
    opacity: 1;
    position: absolute;
    transition:
            max-height 400ms ease,
            opacity 400ms ease,
            margin 400ms ease,
            padding 400ms ease;
    z-index: 5000;
}

.my-alert-success{
    background: rgba(200, 214, 237, 0.85);
    color: #202c40;
    border: 1px solid rgba(52, 71, 103, 0.3);
}

.my-alert-failure{
    background: rgba(236, 187, 187, 0.85);
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, 0.25);
}

.my-alert.is-hiding{
    opacity: 0;
    max-height: 0;
    margin: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
}