.alert {
    position: relative;
    border-radius: 7px;
    padding: 16px 16px;
    font-size: 1rem;
    margin: 7px 0;
    color: var(--white);
    /* text-shadow: #000000 0px 0px 1px; */
	display: inline-block;
	width: 100%;
}

.alert .icon {
    width: 30px;
    text-align: center;
    font-size: 10px;
}
.alert .icon i {
    width: 20px;
    height: 20px;
    padding: 3px 0 0 0;
    border-radius: 100%;
}
.alert .description {
    width: calc(100% - 30px);
    padding: 0 15px;
}

.alert.alert-default{
    border: #74747459 solid 1px;
    color: #747474;
}

.alert.alert-default .icon i{
    background-color: #74747417;
    border: #74747459 solid 1px;
}

.alert.alert-primary{
    background-color: #007bff17;
    color: #007bff; 
}

.alert.alert-primary .icon i{
    background-color: #007bff17;
    border: #007bff59 solid 1px;
}

.alert.alert-success{
    background-color: #28a74517;
    color: #28a745;
}

.alert.alert-success .icon i{
    background-color: #28a74517;
    border: #28a74559 solid 1px;
}

.alert.alert-warning{
    background-color: #fd7e1417;
    color: #fd7e14;
}

.alert.alert-warning .icon i{
    background-color: #fd7e1417;
    border: #fd7e1459 solid 1px;
}

.alert.alert-danger{
    background-color: #dc354517;
    color: #dc3545;
}

.alert.alert-danger .icon i{
    background-color: #dc354517;
    border: #dc354559 solid 1px;
}

.alert.alert-secondary{
    background-color: #74747417;
    color: #747474;
}

.alert.alert-secondary .icon i{
    background-color: #74747417;
    border: #74747459 solid 1px;
}

@media screen and ( max-width: 768px ) {
    .alert {
        width: 100%;
    }
}