.alert{
    --border-color:#004085;
    --background-color:#cce5ff;
    --color:#004085;
    position:fixed;
    top:0;
    left:50%;
    
    height:auto;
    width:fit-content;
    max-width:100%;
    min-width:540px;
    z-index:99999999;
    padding: 1rem 3rem 1rem 1rem;
    color:var(--color);
    background:var(--background-color);
    border:1px solid var(--border-color);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    transform: translateX(-50%) translateY(-100%);
    animation: showTw .8s ease-in-out 0s forwards, showTwRevert .8s ease-in-out 4s forwards;
    & .closeButton{
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
        --bs-btn-close-opacity: 0.5;
        --bs-btn-close-hover-opacity: 0.75;
        --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        --bs-btn-close-focus-opacity: 1;
        --bs-btn-close-disabled-opacity: 0.25;
        --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
        box-sizing: content-box;
        width: 1em;
        height: 1em;
        padding: 1.25rem 1rem;
        color: #000;
        background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
        border: 0;
        border-radius: .375rem;
        opacity: 0.5;
        &:hover {
            text-decoration: none;
            opacity: var(--bs-btn-close-hover-opacity);
        }
    }
    .alert-container{
        display: flex;
        align-items: center;
        gap: 1rem;
    } 
    &.alert-info{
        --border-color:#004085;
        --background-color:#cce5ff;
        --color:#004085;
    }
    &.alert-success{
        --border-color:#155724;
        --background-color:#c3e6cb;;
        --color:#155724;
    }
    &.alert-error{
        --border-color:#721c24;
        --background-color:#f5c6cb;
        --color:#721c24;
    }
    &.alert-warning{
        --border-color:#856404;
        --background-color:#ffeeba;
        --color:#856404;
    }

}

@keyframes showTw {
    to{
        transform: translateX(-50%) translateY(0%);
    }
}
@keyframes showTwRevert {
    to{
        transform: translateX(-50%) translateY(-100%);
    }
}