* {
	box-sizing: border-box;
}
body {
	padding: 0;
	margin: 0;
	background: #F6F6F6;
	font-family: 'Open Sans', sans-serif;
}

.wrap {

}
	.navigation {
		background: #fff;
		width: 100px;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		border-right: 1px solid #E8EAEC;
		z-index: 2;
	}
		.logo {
			text-align: center;
			padding: 20px 0;
		}
			.logo img {
				width: 90px;
			}
		.navi {
		}
			.navi ul {
				list-style: none;
				padding: 0;
				margin: 0;
			}
				.navi ul li {
					/*position: relative;*/
				}
					.division {
						width: 100%;
						height: 1px;
						background: #E8EAEC;
					}
					.navi ul li.active a {
						border-right: 3px solid #E10535;
					}
					.navi ul li a {
						padding: 28px 0;
						text-align: center;
						display: block;
						border-right: 3px solid #fff;
						transition: all ease 0.3s;
						cursor: pointer;
					}
.submenu {
	position: absolute;
	width: 300px;
	height: 100%;
	top: 0;
	left: 100px;
	background: #fff;
	display: none;
	z-index: 2;
}
	.submenu h4 {
		padding: 20px 45px;
		margin-top: 25px;
		color: #6C7D8B;
		font-size: 16px;
	}
	.submenu ul {
		margin-top: 25px;
	}
	.submenu ul li a {
		padding: 15px 45px;
		color: #6C7D8B;
		font-size: 14px;
		text-align: left;
		border-right: none;
		transition: all ease 0.3s;
	}
		.submenu ul li a:hover {
			border-right: none;
			background: #E10535;
			color: #fff;
			transition: all ease 0.3s;
			text-decoration: none;
		}
.navi ul li:hover .submenu {
	display: block;
}

.navi ul li:hover .mainmenu {
	border-right: 3px solid #E10535;
	transition: all ease 0.3s;
}
.admin {
	text-align: center;
	position: absolute;
	bottom: 20px;
	left: 20px;
}


.content {
	width: 100%;
	padding-left: 115px;
	padding-right: 15px;
	padding-top: 65px;
	padding-bottom: 15px;
}
.breadcrumb {
	background: #fff;
	margin-bottom: 0;
}
.grid {

}
	.grid h2 {
		font-size: 22px;
		padding-bottom: 0;
		font-weight: 700;
		margin-top: 20px;
	}

header {
	background: #F6F6F6;
	min-height: 10px;
	border-bottom: 1px solid #E8EAEC;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0 15px;
	display: flex;
	z-index: 1;
}
	.right {
		margin-right: auto;
	}
	.account {
		display: flex;
		align-items: center;
		padding: 12px 0;
	}
	.admin-avatar {
	    left: 0;
	    width: 40px;
	    height: 40px;
	    background: rgba(231, 30, 21, 0.1);
	    color: #E71E15;
	    vertical-align: middle;
	    border-radius: 40px;
	    margin-right: 10px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 16px;
	    font-weight: 700;
	}
	.account-label {
		font-weight: 600;
	}

.card-grid {
	margin-top: 10px;
}
	.card-panel {
		background: #fff;
		padding: 25px;
		border-radius: 12px;
		position: relative;
		padding-left: 100px;
		margin-top: 15px;
		height: 110px;
	}
		.card-panel img {
			width: 60px;
			position: absolute;
			left: 20px;
		}
			.card-panel .card-panel-info {

			}
				.card-panel .card-panel-info label {
					color: #aaa;
					font-weight: 400;
					font-size: 15px;
				}
				.card-panel .card-panel-info h3 {
					margin: 0;
					font-size: 24px;
					font-weight: 700;
					color: #333;
				}

.table-grid {
	margin-top: 30px;
}
	.table-grid h3 {
		margin: 0;
		font-size: 20px;
		line-height: 28px;
		font-weight: 600;
		color: #333;
	}
		.table-grid h3 small a {
			color: #1877F2;
			text-transform: uppercase;
			font-size: 12px;
			margin-left: 10px;
			font-weight: 600;
		}
	.table-list {
		margin-top: 25px;
		margin-bottom: 25px;
	}
		.table-list ul {
			list-style: none;
			display: flex;
			padding: 0;
			margin: 0;
		}
			.table-list ul li {
				margin-right: 10px;
				display: inline-block;
			}
				.table-list ul li.active a {
					background: rgba(231, 30, 21, 0.1);
					color: #E71E15;
				}
				.table-list ul li a {
					font-size: 14px;
					font-weight: 600;
					color: #57627b;
					padding: 6px 16px;
					border-radius: 8px;
					transition: all ease 0.3s;
				}
					.table-list ul li a:hover {
						text-decoration: none;
						color: #E71E15;
						transition: all ease 0.3s;
					}
	.table-grid table {
		width: 100%;
	}
		.table-grid table thead tr {
			background: #EBEBEB;
		}
			.table-grid table thead tr th {
				padding: 8px 15px;
				font-size: 12px;
				text-transform: uppercase;
				color: #57627b;
			}
				.table-grid table thead tr th:first-child {
					border-top-left-radius: 8px;
					border-bottom-left-radius: 8px;
				}
				.table-grid table thead tr th:last-child {
					border-top-right-radius: 8px;
					border-bottom-right-radius: 8px;
				}
		.table-grid table tbody tr {
			border-bottom: 1px solid #e0e0e0;
			transition: all ease 0.3s;
		}
			.table-grid table tbody tr:hover {
				cursor: pointer;
				background: rgba(231, 30, 21, 0.02);
				transition: all ease 0.3s;
			}
			.table-grid table tbody tr td {
				padding: 25px 15px;
				color: #333;
				font-size: 14px;
			}
	.action {
		font-size: 12px;
		font-weight: 600;
		background: #ebebeb;
		border-radius: 4px;
		padding: 7px 10px;
	}
		.action-new {
			background: rgba(231, 30, 21, 0.1);
			color: #E71E15;
		}
		.action-replied {
			background: rgba(61, 203, 110, 0.1);
			color: #3DCB6E;
		}

.search-grid {
	margin-top: 20px;
}
	.search-grid .search-txt {
		width: 100%;
		padding: 12px 15px;
		border-radius: 8px;
		border: 1px solid #EBEBEB;
	}
		.search-grid .search-txt:focus {
			outline: none;
			border: 1px solid rgba(231, 30, 21, 0.25);
			color: #333;
		}
		.search-grid .search-txt::placeholder {
			color: #aaa;
		}
	.bt-holder {
		text-align: right;
	}
	.bt {
		padding: 12px 25px;
		border-radius: 8px;
		font-weight: 700;
	}
		.bt-primary {
			border: 1px solid #E71E15;
			background: #E71E15;
			color: #fff;
			transition: all ease 0.3s;
		}
			.bt-primary:hover {
				box-shadow: 0px 5px 10px rgba(231, 30, 21, 0.3);
				transition: all ease 0.3s;
			}
			.bt i {
				margin-right: 7px;
			}

.sub {
	margin-top: 30px;
}
	.sub h3 {
		margin: 0;
		font-size: 20px;
		line-height: 28px;
		font-weight: 600;
		color: #333;
	}

.type {
	font-size: 12px;
	font-weight: 600;
	background: #ebebeb;
	border-radius: 4px;
	padding: 7px 10px;
}
	.type-cocker {
		background: rgba(231, 30, 21, 0.1);
		color: #E71E15;
	}
	.type-breeder {
		background: rgba(24, 119, 242, 0.1);
		color: #1877F2;
	}

.replied {
	background: #1877F2;
	color: #fff;
	padding: 7px 10px;
	border-radius: 4px;
	font-size: 12px;
	transition: all ease 0.3s;
}
	.replied:hover {
		box-shadow: 0px 5px 10px rgba(24, 119, 242, 0.4);
		color: #fff;
		text-decoration: none;
		transition: all ease 0.3s;
	}
	.inq-details {
		color: #1877F2;
	}
		.inq-details:hover {
			text-decoration: none;
		}

.md-dialog {
	width: 500px;
}
.md-content {
	box-shadow: none;
	border: none;
	border-radius: 8px;
}
.md-body {
	padding: 25px;
}
.mdclose {
	position: absolute;
	right: 25px;
}

	.md-content {

	}
		.md-content h4 {
			font-weight: 600;
			color: #333;
		}
		.md-grp {
			margin-top: 15px;
		}
			.md-grp label {
				display: block;
				font-size: 12px;
				color: #57627b;
				font-weight: 600;
				text-transform: uppercase;
				margin-bottom: 7px;
			}
			.md-grp span {
				display: block;
				padding: 12px 20px;
				border-radius: 8px;
				background: #f4f4f4;
			}
			.md-grp .md-text {
				width: 100%;
				padding: 12px 15px;
				border-radius: 8px;
				border: 1px solid #EBEBEB;
			}
				.md-grp .md-text:focus {
					outline: none;
					border: 1px solid rgba(231, 30, 21, 0.25);
					color: #333;
				}
				.md-grp .md-text::placeholder {
					color: #aaa;
				}
			.message {
				height: 200px;
			}
	.md-btn {
		margin-top: 20px;
		text-align: right;
	}
.mt20 {
	margin-top: 20px;
}

.graph-grid {
	min-height: 200px;
	border-radius: 8px;
	border: 1px solid #e0e0e0;
	margin-top: 20px;
}

.status {
	font-size: 12px;
	font-weight: 600;
	background: #ebebeb;
	border-radius: 4px;
	padding: 7px 10px;
}
	.status-disabled {
		background: rgba(231, 30, 21, 0.1);
		color: #E71E15;
	}
	.status-enabled {
		background: rgba(61, 203, 110, 0.1);
		color: #3DCB6E;
	}


/*login*/
#login {
	background: #fff;
}
.login-grid {
	width: 500px;
	margin: 0 auto;
	margin-top: 7%;
}
	.login-logo {
		text-align: center;
	}
		.login-logo img {
			width: 120px;
		}
		.login-logo h2 {
			font-size: 20px;
			font-weight: 700;
			color: #333333;
		}
	.login {
		padding: 50px;
	}
		.login h3 {
			font-size: 24px;
			font-weight: 700;
			margin: 0;
			margin-bottom: 30px;			
		}
			.login h3 small {
				display: block;
				font-weight: 400;
				color: #6A6A6A;
				font-size: 18px;
				margin-bottom: 10px;
			}
		.login h4 {
			font-size: 24px;
			font-weight: 700;
			margin: 0;		
		}
			.login p {
				font-weight: 400;
				color: #6A6A6A;
				font-size: 13px;
				margin-top: 20px;
				margin-bottom: 20px;
			}
			.login .login-grp {
				margin-bottom: 15px;
				position: relative;
			}
				.login .login-grp .login-text {
					width: 100%;
					display: block;
					background: #fff;
					font-size: 16px;
					border: 1px solid #EBEBEB;
					border-radius: 4px;
					padding: 12px 15px;
				}
					.login .login-grp .login-text:focus {
						outline: none;
						border: 1px solid rgba(231, 30, 21, 0.25);
						color: #333;
					}
					.login .login-grp .login-text::placeholder {
						color: #aaa;
					}
				.login-grp button {
					border-radius: 4px;
					padding: 10px 15px;
					border: none;
					background: #E71E15;
					color: #fff;
					width: 100%;
					transition: all ease 0.3s;
					font-weight: 700;
				}
					.login-grp button:hover {
						box-shadow: 0px 5px 10px rgba(231, 30, 21, 0.3);
						transition: all ease 0.3s;
					}
			.login a {
				text-align: center;
				display: block;
				margin-top: 20px;
				margin-bottom: 20px;
				font-size: 14px;
				color: #aaa;
				transition: all ease 0.3s;
			}
				.login a:hover {
					text-decoration: none;
					transition: all ease 0.3s;
					color: #E71E15;
				}
				.login a span {
					color: #E71E15;
				}
.update-success {
	text-align: center;
}
	.update-success h2 {
		font-size: 27px;
		line-height: 32px;
		width: 60%;
		margin: 0 auto;
		margin-top: 50px;
	}
	.update-success span {
		margin:  0 auto;
		margin-top: 50px;
		margin-bottom: 50px;
		display: block;
		width: 60%;
		font-size: 16px;
		line-height: 26px;
		color: #aaa;
	}
.spanel {
	background: #fff;
	margin-top: 30px;
	border-radius: 12px;
	padding: 25px;
}
	.spanel h3 {
		font-size: 17px;
		font-weight: 700;
		margin: 0;
	}
	.chart {
		margin-top: 30px;
	}
	.chart img {
		width: 100%;
	}

.card-inquiry {
	margin-top: 15px;
}