﻿/* PC */
div.notification-message-wrapper {
    width: 120.5%;
    position: relative;
    bottom: -32px;
    left: -42px;
}

    div.notification-message-wrapper >
    div.notification-message {
        padding: 5px 30px 0px 10px;
        font-size: 1.75rem;
    }

        div.notification-message-wrapper >
        div.notification-message >
        .message-box {
            padding: 1em 1em 1em 1em;
            background-color: #E6F2F9;
            height: auto;
            min-height: 6em;
            border-radius: 0.375rem;
            max-width: 700px;
            margin: 0 auto;
            position: relative;
            z-index: 301;
        }

            div.notification-message-wrapper >
            div.notification-message >
            .message-box >
            .message-box-header {
                color: #333333;
            }

                div.notification-message-wrapper >
                div.notification-message > .message-box >
                .message-box-header > b {
                    font-weight: bolder;
                }

            div.notification-message-wrapper >
            div.notification-message > .message-box >
            p.message-box-text {
                color: #333333;
                line-height: normal;
                font-size: 14px;
                margin: 0;
                font-weight: 400;
                margin: 15px 0px 0px 30px;
            }

            div.notification-message-wrapper >
            div.notification-message > .message-box >
            .icon {
                height: 4.4rem;
                width: 4.4rem;
                background-size: 3.2rem 3.2rem;
                background-position: center center;
                background-repeat: no-repeat;
            }

            div.notification-message-wrapper >
            div.notification-message > .message-box >
            div.icon--close {
                position: absolute;
                top: 10px;
                right: 10px;
                cursor: pointer;
                background-image: url("../../../SandBox/img/icons/icon-close.svg");
            }

/* Tablet*/
@media only screen and (min-width:768px) and (max-width: 992px) {
    div.notification-message-wrapper {
        width: 498px;
        position: relative;
    }
}

/* Mobile */
@media only screen and (max-width: 767px) {

    div.notification-message-wrapper {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 301;
        cursor: pointer;
        overflow: scroll;
    }

        div.notification-message-wrapper >
        div.notification-message {
            padding: 5rem 10px 0 10px;
            font-size: 1.75rem;
        }

            div.notification-message-wrapper >
            div.notification-message > .message-box {
                padding: 1em 1em 1em 1em;
                background-color: #e6f2f9;
                border-left: none;
                height: auto;
                min-height: 6em;
                border-radius: .25rem;
                max-width: 700px;
                margin: 0 auto;
                position: relative;
                z-index: 21;
            }
}