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

/*容器  container*/ 
.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 .8s;
        -moz-animation: mgDialog_open .8s;
        display: block;
    }

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

    .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;
    }

/*遮罩  Mask*/
.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: 4px 12px;
    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: 6px;
    right: 9px;
    cursor: pointer;
    padding: 0 4px;
}

    .mgDialog_cross:hover {
        color: #555;
    }

    .mgDialog_cross:active {
        color: #333;
    }

/*内容*/
.mgDialog_content {
    margin: 10px 10px;
    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;
    }

/*打开对话框动画  Open dialog box Animation*/
@-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;
    }
}
/*关闭对话框动画  Close the dialog Animation*/
@-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;
    }
}