.alert {
    font-family: -apple-system,BlinkMacSystemFont,'Roboto','Segoe UI','Oxygen-Sans','Ubuntu','Cantarell','Helvetica Neue',sans-serif;
    min-height: 38px;
    padding: 15px 15px 15px 15px;
    margin: 5px 0px;
    border-radius: 4px;
    border-left: 4px solid;
    opacity: 1;
    transition: opacity 0.6s;
    max-width: 90%
}

.alert.warning {
    background: rgba(244, 215, 201, .37);
    color: rgb(91, 91, 91);
    border-color: #d93025;
}

.alert.info {
    background: rgba(186, 208, 228, .37);
    color: rgb(91, 91, 91);
    border-color: #00539f;
}

.alert.success {
    background: #edf7ee;
    color: #4CAF50;
    border-color: #4CAF50;
}

.alert.tip {
    background: #fff5e6;
    color: rgb(91, 91, 91);
    border-color: #ff9800;
}
.alert.invalid {
    color: rgb(91, 91, 91);
    background-color: #fce4e4;
    border: none;
}

.alert-close {
    padding-left: 15px;
    font-weight: bold;
    float: right;
    font-size: 20px;
    line-height: 18px;
    cursor: pointer;
    transition: .30s all;
}

    .alert-close:hover {
        color: #000;
    }

.alert code, .alert .mark {
    background: #fff;
    opacity: 0.9;
    padding: 3px 5px;
    border-radius: 4px;
    font-family: Consolas,Monaco,'Andale Mono',monospace;
    font-size: 89%;
    font-weight: normal;
}