/* Overlay */
.messagebox_overlay {
    background-color    : rgba(0, 0, 0, .7);
    z-index: 99998;
}
    .messagebox_overlay *:focus {
        outline : 0;
    }

/* MessageBox */
.messagebox {
    font-family: Trebuchet MS, Verdana, Arial;
    font-size: 10pt;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    color: #303030;
    background-color: #fcfcfc;
    border: 1px solid #c8c8c8;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);
    max-height: 90%;
    max-width: 90%;
    min-width: 400px;
    border-radius: 5px;
    overflow: hidden;
    z-index: 99999;
}

/* Content */
.messagebox_content {
    z-index: 1001;
    padding: 40px;
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 0;    /* In order to preserve "padding-bottom" when the content is taller than the MessageBox and thus scrolled on the Y-axis, use the following :after pseudo-class "height" value instead of "padding-bottom" here! */
}
    .messagebox_content:after {
        content : "";
        display : block;
        flex    : 0 0 auto;
        height  : 20px;     /* Use this value as if it was #messagebox_content's "padding-bottom" to preserve it when the content overflows Y-axis and the scrollbar is shown */
    }
 
/* Label for Input */
.messagebox_content_label {
    display: block;
    width: 100%;
    margin: auto;
    margin-top: 10px;
    font-weight: 100;
}


/* Buttons */
.messagebox_buttons {
    padding: 20px;
    text-align: center;
}
    .messagebox_buttons button {
        min-width: 75px;
    }