/*!
 * cxDialog
 * ------------------------------ */
.cxdialog{
	font-size             : var(--cxdialog-text-size);
	position              : fixed;
	z-index               : 99999;
	top                   : -100%;
	right                 : 0;
	bottom                : 100%;
	left                  : 0;
	display               : flex;
	align-content         : center;
	align-items           : center;
	flex-direction        : column;
	flex-wrap             : nowrap;
	justify-content       : center;
	color                 : var(--cxdialog-text-color);
	--cxdialog-text-color : #333333;
	--cxdialog-btn-bg     : #666666;
	--cxdialog-ok-bg      : #4a89dc;
	--cxdialog-no-bg      : #666666;
	--cxdialog-text-size  : 14px;
	--cxdialog-title-size : 16px;
}

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

.cxdialog_box{
	overflow            : auto;
	min-width           : 280px;
	max-width           : 80%;
	max-height          : 90vh;
	margin              : 0 auto;
	animation-duration  : .3s;
	border-radius       : 6px;
	background-color    : #ffffff;
	box-shadow          : 0 1px 5px rgba(0, 0, 0, .5);
	animation-fill-mode : both
}

.cxdialog_close{
	position            : absolute;
	top                 : 0;
	right               : 0;
	overflow            : hidden;
	width               : 40px;
	height              : 40px;
	cursor              : pointer;
	transition-duration : .2s;
	transition-property : opacity;
	text-decoration     : none;
}

.cxdialog_close:after,
.cxdialog_close:before{
	position         : absolute;
	top              : 50%;
	left             : 50%;
	width            : 12px;
	height           : 2px;
	margin           : -1px 0 0 -6px;
	content          : "";
	transform        : rotate(45deg);
	background-color : #da4453;
}

.cxdialog_close:after{
	transform : rotate(-45deg)
}

.cxdialog_close:hover{
	opacity : .8
}

.cxdialog_title{
	font-size        : var(--cxdialog-title-size);
	font-weight      : 700;
	line-height      : 40px;
	position         : relative;
	text-indent      : 1em;
	border-radius    : 5px 5px 0 0;
	background-color : rgba(0, 0, 0, .1);
}

.cxdialog_info{
	position   : relative;
	overflow   : auto;
	min-height : 40px;
	max-height : calc(90vh - 160px);
	padding    : 12px 1em;
	word-break : break-word
}

.cxdialog_btns{
	line-height     : 30px;
	position        : relative;
	display         : flex;
	overflow        : hidden;
	flex-wrap       : wrap;
	justify-content : flex-end;
	padding         : 12px 1em;
	row-gap         : 10px
}

.cxdialog_btns:before{
	position         : absolute;
	top              : 0;
	right            : 0;
	left             : 0;
	height           : 1px;
	content          : "";
	background-color : rgba(0, 0, 0, .1)
}

.cxdialog_btns a{
	position            : relative;
	flex                : none;
	padding             : 0 1em;
	cursor              : pointer;
	transition-duration : .2s;
	transition-property : opacity;
	text-decoration     : none;
	color               : #ffffff;
	border-radius       : 3px;
	background-color    : var(--cxdialog-btn-bg);
}

.cxdialog_btns a + a{
	margin-left : 1em
}

.cxdialog_btns a.ok{
	background-color : var(--cxdialog-ok-bg)
}

.cxdialog_btns a.no{
	background-color : var(--cxdialog-no-bg)
}

.cxdialog_btns a:hover{
	opacity : .8;
	color   : #ffffff;
}

@keyframes cxDialogIn{
	0%{
		opacity   : 0;
		transform : translate(0, 10%)
	}
	100%{
		opacity   : 1;
		transform : translate(0, 0)
	}
}

@keyframes cxDialogOut{
	0%{
		opacity   : 1;
		transform : translate(0, 0)
	}
	100%{
		opacity   : 0;
		transform : translate(0, 10%)
	}
}

.cxdialog.in{
	top    : 0;
	bottom : 0
}

.cxdialog.in .cxdialog_mask{
	background-color : rgba(0, 0, 0, .4)
}

.cxdialog.in .cxdialog_box{
	animation-name : cxDialogIn
}

.cxdialog.out{
	transition-delay    : 0.3s;
	transition-duration : 0s;
	transition-property : top, bottom;
}

.cxdialog.out .cxdialog_box{
	animation-name : cxDialogOut
}

.cxdialog.light_mask.in .cxdialog_mask{
	background : rgba(255, 255, 255, .4)
}

.cxdialog.ios .cxdialog_box{
	border-radius    : 6px;
	background-color : #f9f9f9;
	box-shadow       : none
}

.cxdialog.ios .cxdialog_close{
	display : none
}

.cxdialog.ios .cxdialog_title{
	line-height      : 1.5;
	padding-top      : 12px;
	text-align       : center;
	text-indent      : 0;
	border-radius    : 0;
	background-color : transparent;
}

.cxdialog.ios .cxdialog_info{
	min-height : inherit;
	max-height : 50vh;
	text-align : center
}

.cxdialog.ios .cxdialog_title + .cxdialog_info{
	padding-top : 4px
}

.cxdialog.ios .cxdialog_btns{
	font-size   : var(--cxdialog-title-size);
	line-height : 44px;
	padding     : 0;
	text-align  : center;
	row-gap     : 0
}

.cxdialog.ios .cxdialog_btns:before{
	background-color : rgba(0, 0, 0, .1)
}

.cxdialog.ios .cxdialog_btns a{
	flex                : 0 0 100%;
	padding             : 0;
	cursor              : pointer;
	transition-property : background-color;
	opacity             : 1;
	color               : #007aff;
	border-radius       : 0;
	background-color    : transparent;
}

.cxdialog.ios .cxdialog_btns a + a{
	margin     : 0;
	border-top : 1px solid rgba(0, 0, 0, .1)
}

.cxdialog.ios .cxdialog_btns a.no,
.cxdialog.ios .cxdialog_btns a.ok{
	flex       : 1;
	border-top : none
}

.cxdialog.ios .cxdialog_btns a.ok{
	border-radius : 0 0 0 6px
}

.cxdialog.ios .cxdialog_btns a.no{
	border-radius : 0 0 6px 0
}

.cxdialog.ios .cxdialog_btns a.ok + a.no:before{
	position         : absolute;
	top              : 1px;
	bottom           : 0;
	left             : 0;
	width            : 1px;
	content          : "";
	background-color : rgba(0, 0, 0, .1)
}

.cxdialog.ios .cxdialog_btns a:last-child,
.cxdialog.ios .cxdialog_btns a:only-child{
	border-radius : 0 0 6px 6px
}

.cxdialog.ios .cxdialog_btns a:hover{
	background-color : rgba(0, 0, 0, .1)
}

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

@keyframes cxDialogIosOut{
	0%{
		opacity   : 1;
		transform : scale(1)
	}
	100%{
		opacity   : 0;
		transform : scale(.9)
	}
}

.cxdialog.ios.in .cxdialog_box{
	animation : cxDialogIosIn .2s both
}

.cxdialog.ios.out .cxdialog_box{
	animation : cxDialogIosOut .2s both
}

@media (prefers-color-scheme : dark){
	.cxdialog{
		color : #eeeeee
	}

	.cxdialog_box{
		background-color : #222222
	}

	.cxdialog_title{
		background-color : rgba(255, 255, 255, .1)
	}

	.cxdialog_btns{
		border-top-color : #444444
	}

	.cxdialog_btns a{
		background-color : rgba(255, 255, 255, .2)
	}

	.cxdialog_btns a:hover{
		background-color : rgba(255, 255, 255, .3)
	}

	.cxdialog.ios{
		color : #eeeeee
	}

	.cxdialog.ios .cxdialog_box{
		background-color : #222222
	}

	.cxdialog.ios .cxdialog_btns{
		border-top-color : #444444
	}

	.cxdialog.ios .cxdialog_btns a{
		color : #4b8afe
	}

	.cxdialog.ios .cxdialog_btns a + a{
		border-top-color : #444444
	}

	.cxdialog.ios .cxdialog_btns a:hover{
		background-color : rgba(255, 255, 255, .1)
	}

	.cxdialog.ios .cxdialog_btns a.ok + a.no:before{
		background-color : #444444
	}
}

@media (min-width : 640px){
	.cxdialog.ios .cxdialog_box{
		max-width : 512px
	}
}