/*
 * Canonical application notification presentation.
 * AngularJS Toaster remains the visual reference; Bootstrap Notify and
 * contextual notification areas use the same palette, spacing, and weight.
 */

#toast-container > .toast,
[data-notify="container"].alert,
.notification-area.alert:not(:empty),
.float-approval-message[class*="alert-"]:not(:empty) {
    border: 0;
    border-radius: 3px;
    box-shadow: 0 0 12px #999;
    color: #fff;
}

#toast-container > .toast {
    min-height: 64px;
    padding: 15px 38px 15px 50px;
    opacity: .8;
}

#toast-container > .toast:hover {
    box-shadow: 0 0 12px #000;
    opacity: 1;
}

#toast-container .toast-title,
[data-notify="container"] [data-notify="title"] {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

#toast-container .toast-message,
[data-notify="container"] [data-notify="message"] {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

[data-notify="container"] .notification-title {
    color: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    padding: 0 !important;
}

[data-notify="container"] .notification-msg {
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
}

#toast-container .toast-close-button,
[data-notify="container"] [data-notify="dismiss"] {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    opacity: .8;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

[data-notify="container"].alert {
    box-sizing: border-box;
    min-height: 64px;
    padding: 15px 38px 15px 50px;
    width: 300px;
    max-width: calc(100vw - 24px);
    opacity: .8;
    z-index: 999999 !important;
}

[data-notify="container"] [data-notify="icon"] {
    font-size: 24px;
    left: 15px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

[data-notify="container"] [data-notify="dismiss"] {
    position: absolute;
    right: 10px;
    top: 7px;
}

#toast-container > .toast-error,
[data-notify="container"].alert-danger,
[data-notify="container"].alert-error,
.notification-area.alert-danger:not(:empty),
.float-approval-message.alert-danger:not(:empty) {
    background-color: #bd362f !important;
}

#toast-container > .toast-success,
[data-notify="container"].alert-success,
.notification-area.alert-success:not(:empty),
.float-approval-message.alert-success:not(:empty) {
    background-color: #51a351 !important;
}

#toast-container > .toast-info,
#toast-container > .toast-wait,
[data-notify="container"].alert-info,
.notification-area.alert-info:not(:empty),
.float-approval-message.alert-info:not(:empty) {
    background-color: #2f96b4 !important;
}

#toast-container > .toast-warning,
[data-notify="container"].alert-warning,
.notification-area.alert-warning:not(:empty),
.float-approval-message.alert-warning:not(:empty) {
    background-color: #f89406 !important;
}

.notification-area.alert:not(:empty),
.float-approval-message[class*="alert-"]:not(:empty) {
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 15px;
    padding: 12px 15px 12px 46px;
    position: relative;
}

.notification-area.alert:not(:empty)::before,
.float-approval-message[class*="alert-"]:not(:empty)::before {
    font-family: FontAwesome;
    font-size: 20px;
    left: 15px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.notification-area.alert-danger:not(:empty)::before,
.notification-area.alert-warning:not(:empty)::before,
.float-approval-message.alert-danger:not(:empty)::before,
.float-approval-message.alert-warning:not(:empty)::before {
    content: "\f071";
}

.notification-area.alert-success:not(:empty)::before,
.float-approval-message.alert-success:not(:empty)::before {
    content: "\f00c";
}

.notification-area.alert-info:not(:empty)::before,
.float-approval-message.alert-info:not(:empty)::before {
    content: "\f129";
}

@media (max-width: 480px) {
    #toast-container > .toast,
    [data-notify="container"].alert {
        max-width: calc(100vw - 24px);
        width: 300px;
    }
}