@charset "utf-8";
/*mgDialog v0.1*/

/*容器*/
.mgDialog{ display: none; color: #333; width: 320px; font-family: "Open Sans", Arial; background: #fff; border: 1px solid #bbb; border-radius: 5px; position: absolute;  font-size: 14px; _word-break:break-all;}
.mgDialogU{ display: none; position: absolute; margin: 0 !important;}

.mgDialog.mgDialog_show,
.mgDialogU.mgDialog_show{ -webkit-animation: mgDialog_open .3s; -moz-animation: mgDialog_open .3s; -ms-animation: mgDialog_open .3s; display: block;}

.mgDialog.mgDialog_aniBack,
.mgDialogU.mgDialog_aniBack{ -webkit-animation: mgDialog_close .3s;  -moz-animation: mgDialog_close .3s;  -ms-animation: mgDialog_close .3s;}

.mgDialog.mgDialog_focus,
.mgDialogU.mgDialog_focus{ box-shadow: 0 0 14px rgba(0,0,0,.2); border-color:#999;}

.mgDialog_gap{position: absolute;}
.mgDialog_hk{ width: 0; height: 0; position: fixed; top: -100px; left: -100px; border: 0; line-height: 0; padding: 0; margin: 0;}
.mgDialog_hk:focus{ outline: 0;}

/*遮罩*/
.mgDialog_mask{ position: fixed; top: 0; left: 0; width: 0; height: 0; background: #000; z-index: 1000;}
.mgDialog_mask.mgDialog_show{ width: 100%; height: 100%;  opacity: .3; filter:alpha(opacity=20);}

/*头部*/
.mgDialog_header{ border-bottom: 1px solid #e3e3e3;  padding: 10px 15px; border-radius: 5px 5px 0 0; background: #f8f8f8; position: relative;}
.mgDialog_title{ padding-right: 20px; line-height: 22px; font-weight: bold;}
.mgDialog_header.mgDialog_align_center .mgDialog_title{padding-right: 20px; padding-left: 20px; text-align: center;}
.mgDialog_header.mgDialog_align_right .mgDialog_title{padding-right: 0; padding-left: 20px; text-align: right;}
.mgDialog_header.mgDialog_align_right .mgDialog_cross{ right: auto; left: 9px;}
.mgDialog_cross{ font: bold normal 20px/20px 'Open Sans'; color: #999; position: absolute; top: 9px; right: 9px; cursor: pointer; padding: 0 4px;}
.mgDialog_cross:hover{ color: #555;}
.mgDialog_cross:active{ color: #333;}

/*内容*/
.mgDialog_content{ margin: 15px 15px; line-height: 22px; min-height: 22px;}

/*底部和按钮*/
.mgDialog_footer{ line-height: 22px; min-height: 22px; text-align: right;  width: 100%; box-sizing: border-box;}
.mgDialog_footer_fixed{position: absolute; bottom: 0; left: 0;}
.mgDialog_footer.mgDialog_align_center .mgDialog_button{ margin: 0 7px 15px 0;}
.mgDialog_footer.mgDialog_align_right .mgDialog_button{ margin: 0 15px 15px 0;}
.mgDialog_footer.mgDialog_align_left .mgDialog_button{ margin: 0 0 15px 15px;}
.mgDialog_button{ display: inline-block; opacity: .8; filter:alpha(opacity=80); line-height: 20px; font-size: 14px; padding: 4px 12px; border: 1px solid #bebebe; background: #f9f9f9; border-radius: 5px; cursor: pointer;  margin: 0 15px 15px 0; font-family: STXihei, "microsoft yahei", Arial;}
.mgDialog_button:hover{ opacity: 1; filter:alpha(opacity=100);}
.mgDialog_button:focus{ outline: 0; opacity: 1; filter:alpha(opacity=100); box-shadow: inset 0 0 4px rgba(0,0,0,.35);}
.mgDialog_button.mgDialog_button_confirm{ border: 1px solid #285e8e; background: #0778ce; color: #fff;}
.mgDialog_button.disabled{ opacity: .4; filter:alpha(opacity=40); cursor: default;}
.mgDialog_button.disabled:hover{ opacity: .4; filter:alpha(opacity=40);}
.mgDialog_button.disabled:focus{ opacity: .4; filter:alpha(opacity=40); box-shadow: none;}
.mgDialog_button.mgDialog_hidden{ display: none;}

/*自带方法prompt*/
.mgDialog_promptInput{ width: 100%; box-sizing: border-box; height: 28px; line-height: 28px; padding: 0 3px; margin-top: 10px; border:1px solid #ddd;}
.mgDialog_promptInput:focus{ outline: 0; border-color: #6fc1e3;}

/*打开对话框动画*/
@-webkit-keyframes mgDialog_open {
    from { -webkit-transform: scale(0.5); opacity: 0;}
    56%  { -webkit-transform: scale(1.1); opacity: .7;}
    to   { -webkit-transform: scale(1); opacity: 1;}
}
/*关闭对话框动画*/
@-webkit-keyframes mgDialog_close {
    from { -webkit-transform: scale(1); opacity: 1;}
    40%  { -webkit-transform: scale(1.1); opacity: 1;}
    to   { -webkit-transform: scale(0.5); opacity: 0;}
}

@-moz-keyframes mgDialog_open {
    from { -moz-transform: scale(0.5); opacity: 0;}
    56%  { -moz-transform: scale(1.1); opacity: .7;}
    to   { -moz-transform: scale(1); opacity: 1;}
}
@-moz-keyframes mgDialog_close {
    from { -moz-transform: scale(1); opacity: 1;}
    40%  { -moz-transform: scale(1.1); opacity: 1;}
    to   { -moz-transform: scale(0.5); opacity: 0;}
}

@-ms-keyframes mgDialog_open {
    from { -ms-transform: scale(0.5); opacity: 0;}
    56%  { -ms-transform: scale(1.1); opacity: .7;}
    to   { -ms-transform: scale(1); opacity: 1;}
}
@-ms-keyframes mgDialog_close {
    from { -ms-transform: scale(1); opacity: 1;}
    40%  { -ms-transform: scale(1.1); opacity: 1;}
    to   { -ms-transform: scale(0.5); opacity: 0;}
}