.alert-callout-subtle {
    background: #f6f6f6;
    color: #8a8a8a;
    border: 0;
    box-shadow: 0 5px 8px -6px rgba(0, 0, 0, 0.2);
}

.alert-callout-subtle.validation {
    background: #f6f6f6;
    color: #8a8a8a;
    border-left: 0.3123rem solid #8000ff;
    /*border-right: 0.3123rem solid #3adb76;*/
    margin-left: 3rem;
}

.alert-callout-subtle.success {
    background: #f6f6f6;
    color: #8a8a8a;
    border-left: 0.3123rem solid #3adb76;
    /*border-right: 0.3123rem solid #3adb76;*/
    margin-left: 3rem;
}

.alert-callout-subtle.alert {
    background: #f6f6f6;
    color: #8a8a8a;
    border-left: 0.3123rem solid #cc4b37;
    /*border-right: 0.3123rem solid #cc4b37;*/
    margin-left: 3rem;
}

.alert-callout-subtle.warning {
    background: #f6f6f6;
    color: #8a8a8a;
    border-left: 0.3123rem solid #ffae00;
    /*border-right: 0.3123rem solid #ffae00;*/
    margin-left: 3rem;
}

.alert-callout-subtle.primary {
    background: #f6f6f6;
    color: #8a8a8a;
    border-left: 0.3123rem solid #1779ba;
    /*border-right: 0.3123rem solid #1779ba;*/
    margin-left: 3rem;
}

.alert-callout-subtle.system {
    background: #f6f6f6;
    color: #8a8a8a;
    /*border-left: 0.3123rem solid #1779ba;*/
    border-right: 0.3123rem solid #1779ba;
    margin-right: 3rem;
}

.alert-callout-subtle.small {
    font-size: 80%;
}

.alert-callout-subtle.small .close-button {
    font-size: 1.3rem;
}

.alert-callout-subtle.large {
    font-size: 150%;
}

.alert-callout-subtle.large .close-button {
    font-size: 3rem;
}

.alert-callout-subtle .close-button {
    font-size: 3rem;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.alert-callout-subtle.radius {
    border-radius: 0.6rem;
}