.alert{

    margin: 0.5rem 0;
    padding: 0.25rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(160, 160, 160, 0.4);
    box-shadow: 0px 0px 5px 0 rgba(223, 223, 223, 0.8);

    .alert-icon{
        font-size: 1.8rem;
        text-align: center;
        max-width: 4rem;
        padding: 0.5rem;
        filter: saturate(2);
        //filter: saturate(5);
    }

    .alert-title{
        font-size: 0.8rem;
        //text-transform: uppercase;
        font-weight: 600;
        filter: brightness(2);
        margin-bottom: -0.1rem;
    }

    .alert-text{
        font-size: 1rem;
        font-weight: 600;
        padding: 0.25rem 0;
    }

    .alert-content{
        font-size: 0.8rem;
        ul{
            padding-left:1rem;
        }
    }
}

.alert-warning, .alert-error, .alert-success, .alert-info  {
    @extend .alert;
}

.alert-error {
    background-color: #ffcbcb;
    color: rgb(78, 28, 28);
}

.alert-warning {
    background-color: rgb(255, 203, 154);
    color: rgb(75, 26, 3);
}

.alert-success {
    background-color: #b4ffd3;
    color: rgb(28, 83, 31);
}

.alert-info {
    background-color: #c1f6ff;
    color: rgb(36, 75, 99);
}

.alert-announcement {
    background-color: #ffeea3;
    color: rgb(63, 51, 29);
}




