.alert{
    border: 0;
    border-radius: 0;
    color: #FFFFFF;
    padding: 10px 15px;
    font-size: 14px;

    .container &{
        border-radius: 4px;

    }
    .navbar &{
        border-radius: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 85px;
        width: 100%;
        z-index: 3;
    }
    .navbar:not(.navbar-transparent) &{
        top: 70px;
    }

    .close{
        vertical-align: top;
        text-shadow: none;
    }
    .alert-wrapper{
        padding: 5px 0;
        position: relative;
        .close{
            top: 6px;
            position: absolute;
            right: 0px;
        }
        .message{
            padding-left: 60px;
            padding-right: 60px;
        }
    }
    .alert-icon{
        display: block;
        font-size: 30px;
        left: 15px;
        position: absolute;
        top: 50%;
        margin-top: -22px;
    }

    [class*="col-"] &{
        .container{
            width: auto;
        }
    }
}

.alert-info{
    @include alert-style($bg-info, $info-states-color);
}
.alert-success {
    @include alert-style($bg-success, $success-states-color);
}
.alert-warning {
    @include alert-style($bg-warning, $warning-states-color);
}
.alert-danger {
    @include alert-style($bg-danger, $danger-states-color);
}