/**
 * Mcx Dialog Mobile v0.1.0
 * Copyright (C) 2018 mcx
 * https://github.com/code-mcx/mcx-dialog-mobile
 */
.dialog-mobile-bg { position: fixed; top: 0; left: 0; z-index: 10000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/*alert confirm*/
.dialog-mobile { position: fixed; top: 50%; left: 0; z-index: 10001; width:100%; max-width:600px; border-radius: 5px; background-color: #FFFFFF; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.dialog-mobile .dialog-content { padding: 1em 1em; text-align: center; color: #333333; border-radius: 5px 5px 0 0; position: relative; }
.dialog-mobile .dialog-content:after { content: ""; position: absolute; z-index: 10002; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #CCCCCC; -webkit-transform: scaleY(.5); transform: scaleY(.5); }
.dialog-mobile .dialog-button { height: 3em; line-height: 3em; text-align: center; border-radius: 0 0 5px 5px; color: #000000; background: #EEEEEE; cursor: pointer; }
.dialog-mobile .dialog-sure-button, .dialog-mobile .dialog-cancel-button { float: left; height: 3em; width: 50%; line-height: 3em; text-align: center; background: #EEEEEE; cursor: pointer; }
.dialog-mobile .dialog-sure-button { color: #1C86EE; border-radius: 0 0 5px 0; position: relative; }
.dialog-mobile .dialog-sure-button:after { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: #CCCCCC; -webkit-transform: scaleX(.5); transform: scaleX(.5); }
.dialog-mobile .dialog-cancel-button { color: #000000; border-radius: 0 0 0 5px; }

/*bottom dialog*/
.dialog-mobile-bottom { position: fixed; left: 0; bottom: 0; z-index: 10001; width: 100%; color: #333333; background-color: #EEEEEE; }
.dialog-mobile-bottom .bottom-btn-item { text-align: center; }
.bottom-btn-item .dialog-item-btn { background: #FFFFFF; padding: 0.5em 0; border-bottom: 1px solid #EEEEEE; }
.bottom-btn-item .dialog-item-btn:last-child { border-bottom: none; }
.dialog-mobile-bottom .dialog-cancel-btn { margin-top: 0.6em; text-align: center; background: #FFFFFF; padding: 0.5em 0; }

/*toast*/
.dialog-mobile-toast { position: fixed; bottom: 5em; }
.dialog-mobile-toast .toast-content { padding: 0.5em 1em; color: #FFFFFF; border-radius: 2px; background-color: #333333; }

/*loading*/
.mobile-loading-bg { position: fixed; top: 0; left: 0; z-index: 10000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.mobile-loading { position: fixed; top: 0; left: 0; z-index: 10001; min-width: 2em; min-height: 2em; padding: 0.8em 1.6em; text-align: center; border-radius: 2px; color: #FFFFF0; background-color: #0A0A0A; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/*animation*/
.animation-zoom-in, .animation-zoom-out, .animation-bottom-in, .animation-bottom-out, .animation-bg-fadeIn { -webkit-animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-duration: 0.3s; animation-fill-mode: both; }
.animation-fade-in, .animation-fade-out { -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-out; -webkit-animation-fill-mode: both; animation-duration: 1s; animation-timing-function: ease-out; animation-fill-mode: both; }
.animation-zoom-in { -webkit-animation-name: zoomIn; animation-name: zoomIn; }
.animation-zoom-out { -webkit-animation-name: zoomOut; animation-name: zoomOut; }
.animation-fade-in { -webkit-animation-name: fadeIn; animation-name: fadeIn; }
.animation-fade-out { -webkit-animation-name: fadeOut; animation-name: fadeOut; }
.animation-bottom-in { -webkit-animation-name: bottomIn; animation-name: bottomIn; }
.animation-bottom-out { -webkit-animation-name: bottomOut; animation-name: bottomOut; }
.animation-bg-fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }
@-webkit-keyframes zoomIn {
	from { opacity: 0; -webkit-transform: scale(0, 0); }
	to { opacity: 1; -webkit-transform: scale(1, 1); }
}
@-webkit-keyframes zoomOut {
	from { opacity: 1; -webkit-transform: scale(1, 1); }
	90% { -webkit-transform: scale(0.3, 0.3); }
	to { opacity: 0; -webkit-transform: scale(0, 0); }
}
@keyframes zoomIn {
	from { opacity: 0; transform: scale(0, 0); }
	to { opacity: 1; transform: scale(1, 1); }
}
@keyframes zoomOut {
	from { opacity: 1; transform: scale(1, 1); }
	90% { transform: scale(0.3, 0.3); }
	to { opacity: 0; transform: scale(0, 0); }
}
@-webkit-keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-webkit-keyframes fadeOut {
	from { opacity: 1; }
	30% { opacity: 0.3; }
	to { opacity: 0; }
}
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes fadeOut {
	from { opacity: 1; }
	30% { opacity: 0.3; }
	to { opacity: 0; }
}
@-webkit-keyframes bottomIn {
	from { bottom: -1000px; }
	to { bottom: 0; }
}
@-webkit-keyframes bottomOut {
	from { bottom: 0; }
	to { bottom: -1000px; }
}
@keyframes bottomIn {
	from { bottom: -1000px; }
	to { bottom: 0; }
}
@keyframes bottomOut {
	from { bottom: 0; }
	to { bottom: -1000px; }
}