.alert {
    border: 0;
    position: fixed;
    max-width: 500px;
    margin: 0;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
    color: @white;
    width: 100%;
    right: 20px;
    border-radius: 3px;
    padding: 17px 50px 17px 17px;
    z-index: 10010;
    .animation-duration(800ms);
    .animation-fill-mode(both);

    &:not(.progress) {
        top: 20px;

        @media(min-width: (@screen-sm-min)) {
            left: 50%;
            margin-left: -250px;
        }
    }

    &.progress {
        bottom: 20px;
        right: 20px;
    }

    &.alert-danger {
        background: @red;
    }

    &.alert-success {
        background: @green;
    }

    &.alert-info {
        background: @blue;
    }

    @media(max-width: (@screen-xs-max)) {
        left: 20px;
        width: ~"calc(100% - 40px)";
        max-width: 100%;
    }

    .progress {
        margin: 10px 10px 8px 0;
        height: 5px;
        box-shadow: none;
        border-radius: 1px;
        background-color: @blue;
        border-radius: 2px;
        overflow: hidden;
    }

    .progress-bar {
        box-shadow: none;
        background-color: @white;
        height: 100%;
    }

    .close {
        position: absolute;
        top: 15px;
    }
}