.st-alert {

    position: relative;
    overflow: hidden;
    min-height: 60px;
    margin: 10px auto;
    padding: 5px 15px 5px 35px;
    border: 1px solid transparent;
    border-radius: 4px;

    .st-alert-close {

        position: absolute;
        right: 10px;
        top: 6px;

        i, span {
            
            font-size: 1.3rem;
            cursor: pointer;
        }
    }

    .st-alert-icon {

        position: absolute;
        left: 10px;
        top: 14px;
    }

    h3, p {
        
        margin: 10px;
        padding-left: 30px;
    }
}

.st-alert-success {

    padding: 0 5px;
    color: #3C763D;
    background-color: #DFF0D8;
    border-color: #D6E9C6;

    h3, p {
        color: #3C763D;
    }
}

.st-alert-info {

    padding: 0 5px;
    color: #31708F;
    background-color: #D9EDF7;
    border-color: #BCE8F1;

    h3, p {
        color: #31708F;
    }
}

.st-alert-warning {

    padding: 0 5px;
    color: #8A6D3B;
    background-color: #FCF8E3;
    border-color: #FAEBCC;

    h3, p {
        color: #8A6D3B;
    }
}

.st-alert-danger {

    padding: 0 5px;
    color: #A94442;
    background-color: #F2DEDE;
    border-color: #EBCCD1;

    h3, p {
        color: #A94442;
    }
}

.green {

    background: -webkit-gradient(linear, left top, left bottom, from(#c9f33c), to(#8ac70c));
    background: -moz-linear-gradient(#c9f33c, #8ac70c);
    background-color: #8ac70c;
    border: 1px solid #7ab205;

    i {

        color: #333;
    }

    a {

        color: #333;
        text-shadow: 0 1px 0 #e2ffa5;
    }
}

.red {

    background: -webkit-gradient(linear, left top, left bottom, from(#ff9782), to(#d83c22));
    background: -moz-linear-gradient(#ff9782, #d83c22);
    background-color: #d83c22;
    border: 1px solid #c93f27;

    i {

        color: #fbfbfb;
    }

    a {

        color: #fbfbfb;
        text-shadow: 0 1px 0 #c93f27;
    }
}