html,
body {
	font-family: "Amiri", Georgia, "Times New Roman", Times, serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial,
		"Helvetica Neue", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;
	// font-weight: lighter;
	font-size: @font-size;
	height: 100%;
	// -webkit-font-smoothing: antialiased;
	color: @font-color;
	height: 100%;
}

body {
	overflow-x: hidden;
}

p {
	line-height: 1.8em;
}

a {
	color: @font-color;
	&:hover {
		color: @primary-color;
		text-decoration: none;
	}
}

// bootstrap

.navbar {
	margin: 0;
	border-radius: 0;
}

.text-primary,
.pagination > li > a,
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span,
.pagination > li > span:focus,
.pagination > li > span:hover {
	color: @primary-color;
}

.btn {
	// padding: 10px;
	font-size: 1rem;
}

// background-color
.btn-primary,
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
	background-color: @primary-color;
	border-color: @primary-color;
}

.btn-circle {
	border-radius: 100px;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover {
	background-color: darken(@primary-color, 5%);
	border-color: darken(@primary-color, 5%);
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
	outline: none;
}

.row {
	&.row-divider {
		> [class^="col-"] {
			border-right: solid 1px #ddd;
			&:last-child {
				border-right: none;
			}
		}
		.col-sm-6,
		.col-md-6,
		.col-lg-6 {
			&:nth-child(even) {
				border-right: none;
			}
		}
	}
	&.row-compact {
		margin: 0;
		> [class^="col-"] {
			padding: 0;
		}
	}
	.col-xs-24,
	.col-sm-24,
	.col-md-24,
	.col-lg-24 {
		float: left;
	}
	@media (max-width: 768px) {
		.col-xs-24 {
			width: 20%;
		}
	}
	@media (max-width: 992px) {
		.col-xs-24,
		.col-sm-24 {
			width: 20%;
		}
	}
	@media (max-width: 1200px) {
		.col-xs-24,
		.col-sm-24,
		.col-md-24 {
			width: 20%;
		}
	}
	@media (min-width: 1200px) {
		.col-sm-24,
		.col-md-24,
		.col-lg-24 {
			width: 20%;
		}
	}
}

.form {
	&.form-horizontal {
		.form-group {
			position: relative;
			padding: 0 12em;
			.control-label {
				position: absolute;
				left: 0;
				padding: 0.4em 1em;
				width: 12em;
			}
		}
	}
}

.form-group {
	&.required {
		.control-label:after {
			content: "*";
			color: #f30;
		}
	}
}

.form-control {
	&:focus,
	&:active {
		// border-color: #6c9ebc;
		// box-shadow: 0 0 0 .15rem fade(#6c9ebc, 25%);
		// border: none;
		box-shadow: none;
	}
	&.input-sm {
		padding: 7.5px 10px;
		font-size: 12px;
		line-height: 1;
		border-radius: 2px;
		height: auto;
	}
	&.input-xs {
		padding: 5px;
		font-size: 12px;
		line-height: 1.5;
		border-radius: 2px;
		height: auto;
	}
	&.input-lg {
		line-height: 1.5;
		border-radius: 2px;
		height: auto;
	}
}

.form-control-select {
	height: auto;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28' viewBox='0 0 16 28' fill='%23777'%3E%3Cpath d='M16 17q0 .406-.297.703l-7 7Q8.406 25 8 25t-.703-.297l-7-7Q0 17.406 0 17t.297-.703T1 16h14q.406 0 .703.297T16 17zm0-6q0 .406-.297.703T15 12H1q-.406 0-.703-.297T0 11t.297-.703l7-7Q7.594 3 8 3t.703.297l7 7Q16 10.594 16 11z'/%3E%3C/svg%3E");
	background-position: right 8px center;
	background-repeat: no-repeat;
	-webkit-background-size: 8px 16px;
	-moz-background-size: 8px 16px;
	background-size: 8px 16px;
	padding-right: 2em;
	option:disabled {
		color: #ccc;
	}
}

.form-control-checkbox,
.form-control-radio {
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-right: 0.5em;
	[type="checkbox"],
	[type="radio"] {
		// visibility: hidden;
		cursor: pointer;
		position: relative;
		z-index: 1;
		vertical-align: middle;
		margin-right: 6px;
		margin-top: 4px;
		&:before {
			visibility: visible;
			content: "";
			position: absolute;
			z-index: 0;
			top: -1.5px;
			left: -1.5px;
			width: 15px;
			height: 15px;
			border-radius: 3px;
			background: #ddd;
		}
		&:checked {
			&:after {
				visibility: visible;
				position: absolute;
				top: -1.5px;
				left: -1.5px;
				z-index: 1;
				content: "";
				width: 15px;
				height: 15px;
				border-radius: 3px;
				background-color: @primary-color;
				background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6Ii8+PC9zdmc+);
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 50% 50%;
			}
		}
	}
	[type="radio"] {
		&:before {
			border-radius: 100%;
		}
		&:checked {
			&:after {
				background: #fff;
				border: solid 5px @primary-color;
				border-radius: 100%;
			}
		}
	}
}

.form-control-table {
	margin: -3px 0;
	padding: 2px 0.5em;
	height: auto;
}

.navbar {
	.navbar-toggle {
		padding: 5px 10px;
		font-size: 16px;
	}
}

.nav-line {
	> li {
		float: left;
		> a {
			border-bottom: solid 2px #ddd;
		}
		&.active > a,
		&.active > a:focus,
		&.active > a:hover {
			border-color: @primary-color;
		}
	}
}

.nav-pills {
	li {
		a {
			display: block;
			background: fade(@primary-color, 10%);
			border-radius: 2px;
			margin: 5px;
			padding: 6px 15px;
		}
		&.active > a,
		&.active:hover > a,
		&.active:active > a,
		&.active:hover > a {
			background: @primary-color;
			color: #fff;
		}
		a:hover,
		a:active,
		a:focus {
			background: fade(@primary-color, 15%);
		}
	}
}

.dropdown-menu {
	border-color: rgba(0, 0, 0, 0);
	.row {
		margin: 0;
		[class^="col-"] {
			padding: 0;
		}
	}
	dl {
		margin: 0;
		dt,
		dd {
			padding: 0.8rem 1.5rem;
		}
		dt {
			font-size: 1.05rem;
			font-weight: normal;
			color: fade(@font-color, 50%);
		}
		dd {
			&:hover {
				background: #f5f5f5;
				a {
					text-decoration: none;
				}
			}
			a {
				color: @font-color;
				small {
					display: block;
					color: fade(@font-color, 50%);
				}
			}
		}
	}
}

.dropdown {
	.open {
		background: none;
	}
}
.dropdown-menu {
	//border-radius: 0;
	border-color: rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	&:after,
	&:before {
		border-color: transparent;
		border-style: solid;
		border-width: 8px;
		content: " ";
		height: 0;
		left: 15px;
		pointer-events: none;
		position: absolute;
		width: 0;
	}
	&:before {
		bottom: 100%;

		border: solid 8px transparent;
		border-bottom: 8px solid rgba(0, 0, 0, 0.2);
	}
	&:after {
		border-bottom-color: #fff;
		bottom: 100%;
		margin-bottom: -1px;
	}
	&.dropdown-menu-right:after,
	&.dropdown-menu-right:before {
		left: auto;
		right: 15px;
	}
	.divider {
		margin: 2px 0;
	}
}

.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
	background: @primary-color;
	color: #fff;
}

.breadcrumb {
	background: none;
	border-radius: 0;
	padding: 10px 0;
}

.paginator {
	margin: 30px 0;
}

// .modal {
// 	.modal-dialog {
// 		.modal-content {
// 			border: none;
// 			border-radius: 0;
// 			box-shadow: none;
// 			padding: 0 3rem;
// 			.modal-header {
// 				padding: 25px;
// 				.close {
// 					position: absolute;
// 					right: 2rem;
// 					top: 2rem;
// 					color: #999;
// 					opacity: 1;
// 					font-size: 28px;
// 					font-weight: normal;
// 					&:before {
// 						display: inline-block;
// 						content: "Close";
// 						font-family: "Arial";
// 						font-size: 16px;
// 						font-weight: normal;
// 						vertical-align: middle;
// 						margin-right: .5em;
// 						margin-top: -5px;
// 					}
// 				}
// 				.modal-title {
// 					text-align: center;
// 				}
// 			}
// 			.modal-body {
// 				padding: 2rem 0;
// 				.richtext {
// 					font-size: 14px;
// 				}
// 			}
// 		}
// 	}
// }