/*
Purpose: to hanlde showing message-box
Note: It includes: MessageBox.css and MessageBox.js
*/
/*Region: Message Box control: --------------------------------------------------------------------*/
.message-box {
    border: 1px solid #444;
    outline: 1px solid #9a9a9a;
    background-color:white;
    /*min-width: 270px;*/
    width:90%;
    max-width: 420px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 91;

    /*position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);*/
    position: fixed;
    left: 0;
    right: 0;
    top: 42%;
    margin: 0 auto;
    display: none;
}
    .message-box > .content {
        background: white;
        min-height: 90px;
        position: relative;
    }

        .message-box > .content > .icon-area {
            float: left;
            width: 90px;
        }
            .message-box > .content > .icon-area span { /*message icon*/
                width: 32px;
                height: 32px;
                margin: 0 auto;
                margin-top: 20px;
                display: block;
            }

            .message-box .icon-area > span.alert-icon {
                background: url("../Images/message-box-icons.png") left top no-repeat;
            }
            .message-box .icon-area > span.info-icon {
                background: url("../Images/message-box-icons.png") -34px top no-repeat;
            }
            .message-box .icon-area > span.success-icon {
                background: url("../Images/message-box-icons.png") -69px top no-repeat;
            }
            .message-box .icon-area > span.error-icon {
                background: url("../Images/message-box-icons.png") -102px top no-repeat;
            }

        .message-box > .content > .vertical-line {
            position: absolute;
            top: 20px;
            bottom: 17px;
            left: 85px;
            background-color: darkgray;
            width: 1px;
            background: -webkit-linear-gradient(bottom, gray, white); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(bottom, gray, white); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(bottom, gray, white); /* For Firefox 3.6 to 15 */
            background: linear-gradient(to top, gray, white); /* Standard syntax */
        }

        .message-box > .content > .message-area {
            margin-left: 14px;
            padding: 15px 15px 15px 10px;
        }
            .message-box > .content > .message-area > .title {
                font-size: 18px;
            }
            .message-box > .content > .message-area > .message {
                line-height: 18px;
            }
            .message-box > .content > .message-area > .message-more {
                /*margin-top: 7px;*/
                max-height: 350px;
                overflow: auto;
                display: none;
            }

        .message-box > .content > .close-button {
            position: absolute;
            right: 8px;
            top: 5px;
            transform: scaleX(1.5);
            cursor: pointer;
            font-weight: 500;
            padding: 0 2px;
        }

    .message-box > .bottom {
        height: 32px;
        padding-top: 5px;
        padding-right: 5px;
        background: #e5e5e5;
        text-align: right;
        font-weight: bold;
        color: white;
    }
        .message-box > .bottom > .button {
            display: inline-block;
            margin-right: 5px;
            padding: 6px 20px;
            min-width: 30px;
            text-align: center;
            background-color: #180052;
            color: white;
            border: none;
            cursor: pointer;
        }

.disable-screen-outside-msg { /*disabled-screen layer outside the message-box*/
    position: fixed;
    top: 0;left: 0;right: 0;bottom: 0;
    background: rgba(99,99,99,0.2);
    z-index: 90;
}
/*EndRegion: Message Box control --------------------------------------------------------------------*/