/* ==========================================================================
   Toastr notices, new look - see CommonHelper::NOTIFY_V2.
   A white card like the site's dialogs: the type shows in a tinted icon and the
   timer bar, not in a full coloured box. Colours are the panel's status pills.

   "body #toast-container" so it beats toastr.min.css and the 80% opacity fix
   in auth-v2.css, whichever loads first.
   ========================================================================== */

body #toast-container.toast-top-right { top: 16px; right: 16px; }

body #toast-container > div.toast {
    width: 360px;
    margin: 0 0 10px;
    padding: 14px 40px 14px 58px;
    overflow: hidden;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    background-color: #fff;
    background-position: 16px 13px;
    background-size: 28px 28px;
    background-repeat: no-repeat;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);
    color: #1a1a1a;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    opacity: 1;
}
body #toast-container > div.toast:hover {
    box-shadow: 0 14px 36px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .08);
    opacity: 1;
}

body #toast-container > div.toast .toast-title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #1a1a1a;
}
body #toast-container > div.toast .toast-message {
    font-size: 13px;
    line-height: 1.5;
    color: #3f4550;
    word-wrap: break-word;
}
/* a message with no title sits level with the icon */
body #toast-container > div.toast .toast-message:only-child,
body #toast-container > div.toast .toast-close-button + .toast-message {
    padding-top: 4px;
    color: #1a1a1a;
}
body #toast-container > div.toast .toast-message a { color: inherit; text-decoration: underline; }

body #toast-container > div.toast .toast-close-button {
    position: absolute;
    top: 10px;
    right: 12px;
    float: none;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: #9aa1ad;
    text-shadow: none;
    opacity: 1;
}
body #toast-container > div.toast .toast-close-button:hover,
body #toast-container > div.toast .toast-close-button:focus { color: #1a1a1a; }

body #toast-container > div.toast .toast-progress { height: 3px; opacity: 1; }

/* the four types: icon on a tinted circle, timer bar in the same colour */
body #toast-container > .toast-success {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23e7f5ef'/%3E%3Cpath d='M9 14.5l3.3 3.2L19 11' fill='none' stroke='%230f7b52' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
body #toast-container > .toast-success .toast-progress { background-color: #0f7b52; }

body #toast-container > .toast-error {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23fdeceb'/%3E%3Cpath d='M10.5 10.5l7 7M17.5 10.5l-7 7' fill='none' stroke='%23b42318' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
body #toast-container > .toast-error .toast-progress { background-color: #b42318; }

body #toast-container > .toast-warning {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23fdf3e2'/%3E%3Cpath d='M14 8.5v6.5' fill='none' stroke='%23a2620a' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='19' r='1.3' fill='%23a2620a'/%3E%3C/svg%3E") !important;
}
body #toast-container > .toast-warning .toast-progress { background-color: #a2620a; }

body #toast-container > .toast-info {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23eaf0fb'/%3E%3Cpath d='M14 13v6.5' fill='none' stroke='%231c4f9c' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='9' r='1.3' fill='%231c4f9c'/%3E%3C/svg%3E") !important;
}
body #toast-container > .toast-info .toast-progress { background-color: #1c4f9c; }

/* phones: the full width less the page's 16px gutter */
@media (max-width: 480px) {
    body #toast-container.toast-top-right { top: 12px; right: 16px; left: 16px; }
    body #toast-container > div.toast { width: 100%; }
}