/**
 * cxDialog
 * ------------------------------ */
.cxdialog{position:fixed;z-index:10001;top:-100%;bottom:100%;left:0;right:0;color:#333;font-size:16px;}

.cxdialog .mask{position:absolute;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,0);cursor:default;
transition-property:background-color;
transition-duration:0.3s;
}

.cxdialog .box{position:absolute;top:40%;left:50%;min-width:240px;max-width:90%;border-radius:6px;background-color:#fff;box-shadow:0 1px 5px rgba(0,0,0,0.5);
transform:translate(-50%, -50%);
}
.cxdialog .box > .close{position:absolute;top:0;right:0;overflow:hidden;width:40px;height:40px;color:#e9573f;font-weight:bold;font-size:18px;line-height:40px;text-align:center;text-decoration:none;cursor:pointer;
transition-property:opacity;
transition-duration:0.2s;
}
.cxdialog .box > .close:before{content:'+';display:block;
transform:rotate(45deg);
}
.cxdialog .box > .close:hover{opacity:0.8;}

.cxdialog .title{position:relative;border-radius:5px 5px 0 0;background-color:rgba(0,0,0,0.1);font-weight:bold;line-height:40px;text-indent:1em;}
.cxdialog .info{overflow:hidden;position:relative;min-height:3em;padding:0.7em 1em;word-break:break-word;}
.cxdialog .btns{overflow:hidden;position:relative;padding:0.7em 1em;border-top:1px solid #ddd;line-height:30px;
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
}
.cxdialog .btns a{position:relative;padding:0 1em;border:none;border-radius:3px;background-color:rgba(0,0,0,0.3);color:#fff;text-decoration:none;cursor:pointer;
flex:none;
transition-property:background-color;
transition-duration:0.2s;
}
.cxdialog .btns a + a{margin-left:1em;}
.cxdialog .btns a:hover{background-color:rgba(0,0,0,0.5);}


@keyframes cxDialogIn{
0%{top:45%;opacity:0;}
100%{top:40%;opacity:1;}
}

@keyframes cxDialogOut{
0%{top:40%;opacity:1;}
100%{top:45%;opacity:0;}
}

/* 显示 */
.cxdialog.in{top:0;bottom:0;}
.cxdialog.in .mask{background-color:rgba(0,0,0,0.4);}
.cxdialog.in .box{
animation:cxDialogIn 0.3s both;
}

/* 隐藏 */
.cxdialog.out{
transition-property:top, bottom;
transition-duration:0s;
transition-delay:0.3s;
}
.cxdialog.out .box{
animation:cxDialogOut 0.3s both;
}

body.cxdialog_lock{overflow:hidden;}

.cxdialog.not_mask .mask{background:none;}

.cxdialog.ios .cxdialog_btns a.btn_ok
/* iOS Theme */
.cxdialog.ios .box{min-width:270px;border-radius:6px;background-color:#f9f9f9;box-shadow:none;}
.cxdialog.ios .box > .close{display:none;}

.cxdialog.ios .title{padding: 16px 10px 0 10px;border-radius:0;background-color:transparent;font-size:16px;line-height:1.5;text-align:center;text-indent:0;}
.cxdialog.ios .info{min-height:inherit;padding:10px;text-align:center;}
.cxdialog.ios .title + .info{padding-top:4px;}

.cxdialog.ios .btns{padding:0;border-top:1px solid #ddd;font-size:16px;line-height:44px;text-align:center;border-radius:0 0 0 5px;}
.cxdialog.ios .btns a{margin:0;padding:0;border-radius:0;background-color:transparent;color:#007aff;cursor:pointer;
flex:0 0 100%;
}
.cxdialog.ios .btns a + a{margin:0;border-top:1px solid #ddd;}
.cxdialog.ios .btns a:last-child{border-radius:0 0 6px 6px;}
.cxdialog.ios .btns a:only-child{border-radius:0 0 6px 6px !important;}
.cxdialog.ios .btns a:hover{background-color:rgba(0,0,0,0.1);}

.cxdialog.ios .btns a.btn_ok,
.cxdialog.ios .btns a.btn_no{flex:1;border-top:none;}
/* .cxdialog.ios .btns a.btn_ok{flex: 1; border-top: none;} */
.cxdialog.ios .btns a.btn_ok{order: 2;}
.cxdialog.ios .btns a.btn_no{order: 1;}
.cxdialog.ios .btns a.btn_ok{border-radius:0 0 0 6px; font-weight: bold;}
.cxdialog.ios .btns a.btn_no{border-radius:0 0 6px 0;  font-weight: bold;}
.cxdialog.ios .btns a.btn_ok + a.btn_no:before{content:'';position:absolute;top:0;left:0;width:1px;height:100%;background-color:#ddd;}

@keyframes cxDialogIosIn{
0%{opacity:0;transform:translate(-50%, -50%) scale(1.1);}
100%{opacity:1;transform:translate(-50%, -50%) scale(1);}
}

@keyframes cxDialogIosOut{
0%{opacity:1;transform:translate(-50%, -50%) scale(1) ;}
99%{opacity:0;transform:translate(-50%, -50%) scale(0.9);}
100%{opacity:0;}
}



.cxdialog.ios.in .box{
animation:cxDialogIosIn 0.2s both;
width: 270px;
/* min-width: 270px;
max-width: 270px; */
}
.cxdialog.ios.out .box{
animation:cxDialogIosOut 0.2s both;
width: 270px;
/* min-width: 270px;
max-width: 270px; */
}

/* 深色模式 */
/* @media (prefers-color-scheme: light) {
.cxdialog{color:#eee;}
.cxdialog .btns{font-weight: bold;}
.cxdialog .box{background-color:#222;}
.cxdialog .title{background-color:rgba(255,255,255,0.1);}
.cxdialog .btns{border-top-color:#444;}
.cxdialog .btns a{background-color:rgba(255,255,255,0.2);}
.cxdialog .btns a:hover{background-color:rgba(255,255,255,0.3);}

.cxdialog.ios{color:#eee;}
.cxdialog.ios .box{background-color:#222;}
.cxdialog.ios .btns{border-top-color:#444;}
.cxdialog.ios .btns a{color:#4b8afe;}
.cxdialog.ios .btns a + a{border-top-color:#444;}
.cxdialog.ios .btns a:hover{background-color:rgba(255,255,255,0.1);}
.cxdialog.ios .btns a.btn_ok + a.btn_no:before{background-color:#444;}
} */