/* x0popup - v0.3.3 | http://gao-sun.github.io/x0popup */

.x0l,
.x0l .ball {
	position: absolute
}

.xi-error span::before,
.xi-info span::before,
.xi-ok span::before,
.xi-warning span::before {
	content: '';
	box-sizing: border-box
}

.x0l {
	width: 120px;
	height: 10px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}

.x0l .ball {
	width: 0;
	height: 0;
	border: 5px solid #000;
	border-radius: 30%;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}

.x0l .ball-1 {
	border-color: #555;
	-webkit-animation-name: BallFly-1;
	animation-name: BallFly-1
}

.x0l .ball-2 {
	border-color: #777;
	-webkit-animation-name: BallFly-2;
	animation-name: BallFly-2
}

.x0l .ball-3 {
	border-color: #999;
	-webkit-animation-name: BallFly-3;
	animation-name: BallFly-3
}

.x0l .ball-4 {
	border-color: #bbb;
	-webkit-animation-name: BallFly-4;
	animation-name: BallFly-4
}

@-webkit-keyframes BallFly-1 {
	88%,
	from,
	to {
		margin-left: 0
	}
	38%,
	50% {
		margin-left: 110px
	}
}

@keyframes BallFly-1 {
	88%,
	from,
	to {
		margin-left: 0
	}
	38%,
	50% {
		margin-left: 110px
	}
}

@-webkit-keyframes BallFly-2 {
	4%,
	92%,
	from,
	to {
		margin-left: 0
	}
	42%,
	54% {
		margin-left: 110px
	}
}

@keyframes BallFly-2 {
	4%,
	92%,
	from,
	to {
		margin-left: 0
	}
	42%,
	54% {
		margin-left: 110px
	}
}

@-webkit-keyframes BallFly-3 {
	8%,
	96%,
	from,
	to {
		margin-left: 0
	}
	46%,
	58% {
		margin-left: 110px
	}
}

@keyframes BallFly-3 {
	8%,
	96%,
	from,
	to {
		margin-left: 0
	}
	46%,
	58% {
		margin-left: 110px
	}
}

@-webkit-keyframes BallFly-4 {
	12%,
	from,
	to {
		margin-left: 0
	}
	50%,
	62% {
		margin-left: 110px
	}
}

@keyframes BallFly-4 {
	12%,
	from,
	to {
		margin-left: 0
	}
	50%,
	62% {
		margin-left: 110px
	}
}

.x0p-overlay {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(180, 180, 180, .8);
	z-index: 99998;
	-webkit-animation: x0pfadeIn .5s ease;
	animation: x0pfadeIn .5s ease
}

.x0p,
.xi {
	left: 50%
}

.x0p {
	position: fixed;
	top: 50%;
	font-size: 16px;
	background-color: #fff;
	-webkit-transform: translate(-50%, -60%);
	transform: translate(-50%, -60%);
	font-family: STHeiti, Helvetica;
	-webkit-animation: x0ppop .45s ease;
	animation: x0ppop .45s ease;
	z-index: 99999
}

.x0p-overlay.no-animation,
.x0p.no-animation,
.x0p.no-animation .xi>span::before {
	-webkit-animation: none;
	animation: none
}

@-webkit-keyframes x0pfadeIn {
	from {
		opacity: 0
	}
	to {
		opacity: 1
	}
}

@keyframes x0pfadeIn {
	from {
		opacity: 0
	}
	to {
		opacity: 1
	}
}

@-webkit-keyframes x0ppop {
	from {
		-webkit-transform: scale(.9) translate(-55%, -60%);
		transform: scale(.9) translate(-55%, -60%);
		opacity: .3
	}
	50% {
		-webkit-transform: scale(1.1) translate(-45%, -60%);
		transform: scale(1.1) translate(-45%, -60%);
		opacity: .7
	}
	to {
		-webkit-transform: scale(1) translate(-50%, -60%);
		transform: scale(1) translate(-50%, -60%);
		opacity: 1
	}
}

@keyframes x0ppop {
	from {
		-webkit-transform: scale(.9) translate(-55%, -60%);
		transform: scale(.9) translate(-55%, -60%);
		opacity: .3
	}
	50% {
		-webkit-transform: scale(1.1) translate(-45%, -60%);
		transform: scale(1.1) translate(-45%, -60%);
		opacity: .7
	}
	to {
		-webkit-transform: scale(1) translate(-50%, -60%);
		transform: scale(1) translate(-50%, -60%);
		opacity: 1
	}
}

@-webkit-keyframes x0pslideUp {
	from {
		-webkit-transform: translate(-50%, 200%);
		transform: translate(-50%, 200%);
		opacity: 0
	}
	to {
		-webkit-transform: translate(-50%, -60%);
		transform: translate(-50%, -60%);
		opacity: 1
	}
}

@keyframes x0pslideUp {
	from {
		-webkit-transform: translate(-50%, 200%);
		transform: translate(-50%, 200%);
		opacity: 0
	}
	to {
		-webkit-transform: translate(-50%, -60%);
		transform: translate(-50%, -60%);
		opacity: 1
	}
}

@-webkit-keyframes x0pslideDown {
	from {
		-webkit-transform: translate(-50%, -260%);
		transform: translate(-50%, -260%);
		opacity: 0
	}
	to {
		-webkit-transform: translate(-50%, -60%);
		transform: translate(-50%, -60%);
		opacity: 1
	}
}

@keyframes x0pslideDown {
	from {
		-webkit-transform: translate(-50%, -260%);
		transform: translate(-50%, -260%);
		opacity: 0
	}
	to {
		-webkit-transform: translate(-50%, -60%);
		transform: translate(-50%, -60%);
		opacity: 1
	}
}

.xi {
	position: absolute;
	width: 80px;
	height: 80px;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}

.xi-ok span::before {
	position: absolute;
	height: 8%;
	border-radius: 10px;
	background-color: #60BF80
}

.xi-ok-left::before {
	width: 40%;
	left: 15%;
	top: 50%;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-animation: showOKLeft .6s ease;
	animation: showOKLeft .6s ease
}

.xi-ok-right::before {
	width: 60%;
	left: 35%;
	top: 42%;
	-webkit-transform: rotate(-50deg);
	transform: rotate(-50deg);
	-webkit-animation: showOKRight .75s ease;
	animation: showOKRight .75s ease
}

@-webkit-keyframes showOKLeft {
	75%,
	from {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		width: 0;
		left: 21%;
		top: 37%
	}
	to {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		width: 40%;
		left: 15%;
		top: 50%
	}
}

@keyframes showOKLeft {
	75%,
	from {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		width: 0;
		left: 21%;
		top: 37%
	}
	to {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		width: 40%;
		left: 15%;
		top: 50%
	}
}

@-webkit-keyframes showOKRight {
	80%,
	from {
		-webkit-transform: rotate(-50deg);
		transform: rotate(-50deg);
		width: 0;
		left: 46%;
		top: 65%
	}
	to {
		-webkit-transform: rotate(-50deg);
		transform: rotate(-50deg);
		width: 60%;
		left: 35%;
		top: 42%
	}
}

@keyframes showOKRight {
	80%,
	from {
		-webkit-transform: rotate(-50deg);
		transform: rotate(-50deg);
		width: 0;
		left: 46%;
		top: 65%
	}
	to {
		-webkit-transform: rotate(-50deg);
		transform: rotate(-50deg);
		width: 60%;
		left: 35%;
		top: 42%
	}
}

.xi-info span::before {
	position: absolute;
	background-color: #5080DF
}

.xi-info-circle::before {
	width: 11%;
	height: 11%;
	border-radius: 50%;
	left: 50%;
	top: 15%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
}

.xi-info-line::before {
	width: 8%;
	height: 45%;
	border-radius: 10px;
	left: 50%;
	top: 35%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
}

.xi-warning span::before {
	position: absolute;
	background-color: #F29F3F
}

.xi-warning-circle::before {
	width: 11%;
	height: 11%;
	border-radius: 50%;
	left: 50%;
	top: 71%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
}

.xi-warning-line::before {
	width: 8%;
	height: 45%;
	border-radius: 10px;
	left: 50%;
	top: 15%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%)
}

.xi-error span::before {
	position: absolute;
	background-color: #EF6080;
	width: 8%;
	border-radius: 10px
}

.xi-error-right::before {
	height: 80%;
	top: 10%;
	left: 50%;
	-webkit-transform: translateX(-50%) rotate(45deg);
	transform: translateX(-50%) rotate(45deg);
	-webkit-animation: errorDrawRight .6s ease;
	animation: errorDrawRight .6s ease
}

.xi-error-left::before {
	height: 80%;
	top: 10%;
	left: 50%;
	-webkit-transform: translateX(-50%) rotate(-45deg);
	transform: translateX(-50%) rotate(-45deg);
	-webkit-animation: errorDrawLeft .75s ease;
	animation: errorDrawLeft .75s ease
}

@-webkit-keyframes errorDrawLeft {
	75%,
	from {
		height: 0;
		top: 22%;
		left: 23%
	}
	to {
		height: 80%;
		top: 10%;
		left: 50%
	}
}

@keyframes errorDrawLeft {
	75%,
	from {
		height: 0;
		top: 22%;
		left: 23%
	}
	to {
		height: 80%;
		top: 10%;
		left: 50%
	}
}

@-webkit-keyframes errorDrawRight {
	80%,
	from {
		height: 0;
		top: 22%;
		left: 76%
	}
	to {
		height: 80%;
		top: 10%;
		left: 50%
	}
}

@keyframes errorDrawRight {
	80%,
	from {
		height: 0;
		top: 22%;
		left: 76%
	}
	to {
		height: 80%;
		top: 10%;
		left: 50%
	}
}

.noscroll {
	overflow: hidden
}

.x0p.default .button,
.x0p.default .icon-wrapper,
.x0p.default .text-pure-wrapper,
.x0p.default .text-wrapper {
	display: inline-block;
	vertical-align: top
}

.x0p.default .icon-wrapper {
	position: relative;
	width: 35%;
	height: 100%
}

.x0p.default .text-wrapper {
	position: relative;
	width: 65%;
	height: 100%;
	margin: 0 auto
}

.x0p.default .text-pure-wrapper {
	position: relative;
	width: 100%;
	height: 100%
}

.x0p.default .text-anchor {
	position: absolute;
	top: 50%;
	width: 100%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%)
}

.x0p.default .content {
	width: 100%;
	height: 80%;
	height: calc(100% - 40px)
}

.x0p.default.no-button .content {
	height: 100%
}

.x0p.default .buttons {
	width: 100%;
	height: 40px;
	position: absolute;
	bottom: 0;
	background-color: #eee
}

.x0p.default .text-wrapper .input,
.x0p.default .text-wrapper .text,
.x0p.default .text-wrapper .title {
	padding-left: 0
}

.x0p.default .title {
	padding: 0 25px;
	box-sizing: border-box;
	font-size: 28px;
	font-weight: 700;
	color: #333
}

.x0p.default .text {
	margin-top: 5%;
	padding: 0 25px;
	font-size: 18px;
	color: #777
}

.x0p.default .error {
	margin-top: 1px;
	padding: 5px 10px;
	font-size: 13px;
	background-color: #fe9999;
	color: #fcfcfc
}

.x0p.default .input {
	padding: 0 30px
}

.x0p.default input[type=text],
.x0p.default input[type=password] {
	margin-top: 7%;
	padding: 8px 10px;
	outline: 0;
	background-color: #f9f9f9;
	border-width: 0 0 1px;
	border-style: solid;
	border-color: #aaa;
	font-size: 18px;
	box-sizing: border-box;
	width: 100%;
	color: #aaa;
	-webkit-transition: all ease .3s;
	transition: all ease .3s
}

.x0p.default input[type=text]:focus,
.x0p.default input[type=password]:focus {
	border-color: #5080DF;
	color: #5080DF
}

.x0p.default .button {
	text-align: center;
	padding: 12px 0;
	font-size: 16px;
	margin-bottom: 0;
	box-sizing: border-box;
	border: 0;
	outline-width: 0;
	outline-style: solid;
	outline-offset: -1px
}

.x0p.default .button-outline:focus {
	outline-width: 1px;
	-webkit-animation: x0pButtonOutline .3s ease;
	animation: x0pButtonOutline .3s ease
}

.x0p.default .button:hover {
	cursor: pointer
}

@-webkit-keyframes x0pButtonOutline {
	from {
		outline-offset: 7px
	}
	to {
		outline-offset: -1px
	}
}

@keyframes x0pButtonOutline {
	from {
		outline-offset: 7px
	}
	to {
		outline-offset: -1px
	}
}

.x0p.default .button-ok {
	background-color: #60BF80;
	outline-color: #207F40;
	color: #fefefe
}

.x0p.default .button-ok:hover {
	background-color: #50AF70
}

.x0p.default .button-cancel {
	background-color: #eee;
	outline-color: #aaa;
	color: #666
}

.x0p.default .button-cancel:hover {
	background-color: #e3e3e3
}

.x0p.default .button-warning {
	background-color: #F29F3F;
	outline-color: #B25F00;
	color: #fefefe
}

.x0p.default .button-warning:hover {
	background-color: #E28F2F
}

.x0p.default .button-info {
	background-color: #f80002;
	outline-color: #2050AF;
	color: #fefefe
}

.x0p.default .button-info:hover {
	background-color: #5080DF
}

.x0p.default .button-error {
	background-color: #EF6080;
	outline-color: #AF2040;
	color: #fefefe
}

.x0p.default .button-error:hover {
	background-color: #DF5070
}