.global-alert{
    position: absolute;
    top: 60px;
    right: 0;
    padding: 0 10px;
    z-index: 10001;
    max-width: 320px;
    overflow: hidden;
    .alert{
        padding: 10px 20px;
        display: flex;
        align-items: start;
        opacity: 0.8;
        transition: 0.35s all ease;
        &:before{
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            border-radius: 5px;
            width: 0%;
            background-color: #333;
            animation-name: animate-width;
            animation-duration: 15s;
            transition-timing-function: linear;
        }
        &.hide{
            opacity: 0;
            transform: translateX(110%);
        }
        &:hover{
            opacity: 1;
        }
        .btn-close{
            position: relative;
            width: auto;
            height: auto;
            padding: 5px;
            margin-left: 10px;
            margin-top: 5px;
        }
        &.alert-danger{
            &:before{
                background-color: #b02a37;
            }
        }
        &.alert-success{
            &:before{
                background-color: #198754;
            }
        }
        &.alert-info{
            &:before{
                background-color: #0dcaf0;
            }
        }
    }
    &.t5s{
        .alert{
            &:before{
                animation-duration: 5s;
            }
        }
    }
    &.t10s{
        .alert{
            &:before{
                animation-duration: 10s;
            }
        }
    }
}

@keyframes animate-width {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}