@font-face {font-family: "button";
	src: url('//at.alicdn.com/t/font_477635_4no400oqpd620529.eot?t=1510838711614'); /* IE9*/
	src: url('//at.alicdn.com/t/font_477635_4no400oqpd620529.eot?t=1510838711614#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAATwAAsAAAAAB0QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7khIY21hcAAAAYAAAABcAAABhpqwBr5nbHlmAAAB3AAAASUAAAEsEjWkJWhlYWQAAAMEAAAALwAAADYPhqmMaGhlYQAAAzQAAAAcAAAAJAfeA4RobXR4AAADUAAAAAwAAAAMC+kAAGxvY2EAAANcAAAACAAAAAgAdgCWbWF4cAAAA2QAAAAfAAAAIAESAF1uYW1lAAADhAAAAUUAAAJtPlT+fXBvc3QAAATMAAAAJAAAADXW8UJxeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sE4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDyLY27438AQw9zA0AAUZgTJAQAqVgzKeJzFkMENwCAMAy9AeVQdpI8O1BdzMDFrgJvSRyfAkmPFsZQowAZE8RITWMF4cMs19yO7+8kzWWoEaiu9q/9UEc2ya1DJLIOtW/3H4fWcnb5CndSJrbwkDECeDQd4nBWLO07DQBiE99/1Os5rl6zfm9ixY5IFBSzhmFAgkhQ0IAokKkoOAG0aijRIFBRcIA1C4gC0KbgC3ABBnSME7NFo9M1IgyhCf99kRTxkoh10gE7RJUKgD6HHcACxylM8BDumtmsxohIVV5JeSk7A7emWk43zgatXdA4MQhjF2VilWMFhPsHHkDkBgN+WV6LfEeQZap4KHzbn+AXsbtLhk/3N2d7UyiLTmDeE8IV4MnRKDYw1zuDWdaq0WtM3r5RLe9XdxV1o+EpeXDejtrh5zO+CvlsFWCzAbEfsbdqSrcL30jGFX9lqGp5sJtsWzH/rntkIBj+oEJRBPsgM8aIwsJxRCG4I2fgoBSzrnNeXnxowhwFdk1kJ2teynN/XxfMfnpwr8wAAAHicY2BkYGAA4oa0f5zx/DZfGbhZGEDgmvGm7Qj6/0MWBmYHIJeDgQkkCgAxyAqzAHicY2BkYGBu+N/AEMPCAAJAkpEBFTADAEcJAmwEAAAAA+kAAAQAAAAAAAAAAHYAlnicY2BkYGBgZghkYGUAASYg5gJCBob/YD4DABD3AXAAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAmZGJkZmRhYGxgj0nPzElMy+dgQEAGgcDeg==') format('woff'),
	url('//at.alicdn.com/t/font_477635_4no400oqpd620529.ttf?t=1510838711614') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
	url('//at.alicdn.com/t/font_477635_4no400oqpd620529.svg?t=1510838711614#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
	font-family:"button" !important;
	font-size:16px;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-loading {
	margin: 0 6px 0 -6px;

	&:before {
		content: "\e65e";
		display: inline-block;
		-webkit-animation: loadingCircle 1s infinite linear;
		animation: loadingCircle 1s infinite linear
	}
}

@-o-keyframes loadingCircle {
	0% {
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn)
	}
}

@-moz-keyframes loadingCircle {
	0% {
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn)
	}
}

@-ms-keyframes loadingCircle {
	0% {
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn)
	}
}

@-webkit-keyframes loadingCircle {
	0% {
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn)
	}
}

@keyframes loadingCircle {
	0% {
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn)
	}
}


$white: #fff;
$primary: #ff4d4d;
$primaryLight: #ff5f5f;
$primaryDark: #e54545;

$normalColor: #333;
$normalBorderColor: #d9d9d9;
$normalHoverColor: #ff9b9b;
$normalHoverBorderColor: $normalHoverColor;
$normalActiveColor: $primary;
$normalActiveBorderColor: $normalActiveColor;
$normalDisableColor: #ccc;
$normalDisableBorderColor: $normalBorderColor;

$primaryColor: $white;
$primaryBgColor: $primary;
$primaryBorderColor: $primary;
$primaryHoverBgColor: $primaryLight;
$primaryHoverBorderColor: $primaryLight;
$primaryActiveBgColor: $primaryDark;
$primaryActiveBorderColor: $primaryDark;
$primaryDisableColor: #f2f2f2;
$primaryDisableBgColor: #ccc;
$primaryDisableBorderColor: #ccc;

$textColor: #488ff9;
$textHoverColor: #5a9af9;
$textActiveColor: #4080df;
$textDisabledColor: #ccc;


.btn {
	position: relative;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	border: 1px solid transparent;
	white-space: nowrap;
	border-radius: 2px;
	user-select: none;
	outline: 0;

	&:disabled {
		cursor: default;
	}
}

.normal {
	color: $normalColor;
	border-color: $normalBorderColor;
	background-color: $white;

	&:hover {
		border-color: $normalHoverBorderColor;
		color: $normalHoverColor;
	}

	&.loading,
	&:active {
		border-color: $normalHoverBorderColor;
		color: $normalActiveColor;
	}

	&.in_group:hover,
	&.in_group:active {
		background: #d9d9d9;
		color: $normalColor;
		border-color: $normalBorderColor;
	}
	&.in_group:disabled,
	&:disabled {
		background-color: $white;
		border-color: $normalDisableBorderColor;
		color: $normalDisableColor;
	}
}

.primary {
	background-color: $primaryBgColor;
	border-color: $primaryBorderColor;
	color: $primaryColor;

	&:hover {
		background-color: $primaryHoverBgColor;
		border-color: $primaryHoverBorderColor;
		color: $primaryColor;
	}

	&.loading,
	&:active {
		background-color: $primaryActiveBgColor;
		border-color: $primaryActiveBorderColor;
		color: $primaryColor;
	}

	&:disabled {
		background-color: $primaryDisableBgColor;
		border-color: $primaryDisableBorderColor;
		color: $primaryDisableColor;
	}
}

.text {
	background: none;
	color: $textColor;

	&:hover {
		color: $textHoverColor;
	}

	&.loading,
	&:active {
		color: $textActiveColor;
	}

	&:disabled {
		color: $textDisabledColor
	}
}

.small {
	padding: 0 10px;
	height: 24px;
	.icon-loading {
		margin: 0 4px 0 -4px;
	}
}

.middle {
	padding: 0 16px;
	font-size: 14px;
	height: 32px;
}

.large {
	padding: 0 18px;
	font-size: 14px;
	height: 40px;
}

.loading {
	.icon-loading {
		display: none\9\0;
	}
}