#modalProfile {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.75);
}
	#modalProfile .modal-profile, .example-profile {
		max-width: 530px;
		margin: 5% auto;
	}
		#modalProfile .modal-profile .profile-box, .example-profile .profile-box {
			
		}		
		#modalProfile .modal-profile .profile-box > .head, .example-profile .profile-box > .head {
			background-size: cover;
			display: block;
			border-radius: 3px 3px 0 0;
			width: 100%;
			position: relative;
		}
		#modalProfile .modal-profile .profile-box > .head .close-box, .example-profile .profile-box > .head .close-box {
			position: absolute;
			top: 0;
			right: 0;
			padding: 10px;
			font-size: 1em;
			z-index: 15;
			cursor: pointer;
		}
		#modalProfile .modal-profile .profile-box > .head .close-box .close, .example-profile .profile-box > .head .close-box .close {
			display: block;
			background-image: url('/image/system_icons/cross-white.svg');
			background-size: 18px;
			background-repeat: no-repeat;
			background-position: 50%;
			width: 20px;
			height: 20px;
		}
		#modalProfile .modal-profile .profile-box > .head .content, .example-profile .profile-box > .head .content {
			display: flex;
			align-items: flex-end;
			flex-flow: column;
			justify-content: flex-end;
			height: 280px;
			padding: 10px;
			background-color: rgba(0, 0, 0, 0.4);
		}
		#modalProfile .modal-profile .profile-box > .head .content .bot, .example-profile .profile-box  >.head .content .bot {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
		}
		#modalProfile .modal-profile .profile-box > .head .content .bot .icon, .example-profile .profile-box > .head .content .bot .icon {
			width: 130px;
			height: 130px;
			background-size: 100%;
			border-radius: 3px;
		}
		#modalProfile .modal-profile .profile-box > .head .content .bot .stat, .example-profile .profile-box > .head .content .bot .stat {
			width: calc(100% - 130px);
			height: 130px;
			padding: 10px 10px 0px 10px;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
		}
		#modalProfile .modal-profile .profile-box > .head .content .bot .stat .name, .example-profile .profile-box > .head .content .bot .stat .name {
			font-size: 2em;
			font-weight: bold;
			text-shadow: 
				-0   -1px 0   #000000,
				 0   -1px 0   #000000,
				-0    1px 0   #000000,
				 0    1px 0   #000000,
				-1px -0   0   #000000,
				 1px -0   0   #000000,
				-1px  0   0   #000000,
				 1px  0   0   #000000,
				-1px -1px 0   #000000,
				 1px -1px 0   #000000,
				-1px  1px 0   #000000,
				 1px  1px 0   #000000,
				-1px -1px 0   #000000,
				 1px -1px 0   #000000,
				-1px  1px 0   #000000,
				 1px  1px 0   #000000;
		}
		#modalProfile .modal-profile .profile-box > .head .content .bot .stat .status, .example-profile .profile-box > .head .content .bot .stat .status {
			font-size: 0.9em;
			color: #d4d4d4;
			text-shadow: 
				-0   -1px 0   #000000,
				 0   -1px 0   #000000,
				-0    1px 0   #000000,
				 0    1px 0   #000000,
				-1px -0   0   #000000,
				 1px -0   0   #000000,
				-1px  0   0   #000000,
				 1px  0   0   #000000,
				-1px -1px 0   #000000,
				 1px -1px 0   #000000,
				-1px  1px 0   #000000,
				 1px  1px 0   #000000,
				-1px -1px 0   #000000,
				 1px -1px 0   #000000,
				-1px  1px 0   #000000,
				 1px  1px 0   #000000;
		}
		#modalProfile .modal-profile .profile-box .menu {
			background-color: #909090;
		}
		#modalProfile .modal-profile .profile-box .menu ul {
			display: flex;
		}
		#modalProfile .modal-profile .profile-box .menu ul li {
			padding: 10px;
			list-style: none;
			cursor: pointer;
		}
		#modalProfile .modal-profile .profile-box .menu ul li.active {
			background-color: #2f4785;
		}
		#modalProfile .modal-profile .profile-box .body .content {
			display: flex;
			flex-wrap: wrap;
			padding: 10px;
			background-color: rgba(0, 0, 0, 0.75);
		}
			#modalProfile .modal-profile .profile-box .body .content .cid-item {
				width: 100%;
			}
			#modalProfile .modal-profile .profile-box > .body .content .level-stat, .example-profile .profile-box  >.body .content .level-stat {
				display: flex;
				flex-wrap: wrap;
				flex-flow: row;
				width: 100%;
				min-height: 25px;
				background-color: rgba(0, 0, 0, 0.5);
				border-radius: 5px;
				border: 2px solid #2f4785;
				margin-bottom: 10px;
			}
				#modalProfile .modal-profile .profile-box > .body .content .level-stat .level, .example-profile .profile-box  >.body .content .level-stat .level {
					padding: 5px 0 5px 5px;
					border-radius: 5px;
					text-align: center;
				}
				#modalProfile .modal-profile .profile-box > .body .content .level-stat .bar, .example-profile .profile-box  >.body .content .level-stat .bar {
					display: flex;
					width: 100%;
					border-radius: 3px;
					height: 17px;
					align-self: center;
					margin: 0 5px;
					background-color: rgba(255, 255, 255, 0.2);
				}
					#modalProfile .modal-profile .profile-box > .body .content .level-stat .bar .exp, .example-profile .profile-box  >.body .content .level-stat .bar .exp {
						width: 0%;
						height: 17px;
						background-color: #4579ff;
						align-self: center;
						border-radius: inherit;
					}
		#modalProfile .modal-profile .profile-box .body .content p.row-info {
			padding: 4px 0;
			width: 100%;
			font-size: 1.1em;
		}
		#modalProfile .modal-profile .profile-box .body .content p.row-info b {
			color: inherit;
			font-size: inherit;
		}
.profile-box .list-friends {
	display: flex;
	flex-wrap: wrap;
}
.profile-box .list-friends .friend {
	margin: 2px;
	cursor: pointer;
}
.profile-box .list-friends .friend .head {
	width: 60px;
	height: 60px;
	background-size: 100%;
}
.profile-box .action-btns {
	display: flex;
	margin-bottom: 5px;
	flex-flow: column;
}
.profile-box .action-btns .row {
	width: 100%;
	margin: 0;
}
.profile-box .action-btns .left, .profile-box .action-btns .right {
	width: 50%;
}
.profile-box .action-btns .left, .profile-box .action-btns .right, .profile-box .action-btns .block {
	margin-bottom: 5px;
}
.profile-box .action-btns .left {
	padding-right: 3px;
}
.profile-box .action-btns .right {
	padding-left: 3px;
}
.profile-box .action-btns .left button, 
.profile-box .action-btns .right button, 
.profile-box .action-btns .block button,
.profile-box .action-btns .left a, 
.profile-box .action-btns .right a, 
.profile-box .action-btns .block a {
	display: flex;
	align-items: center;
	color: #fff;
	text-decoration: none;
	justify-content: center;
	cursor: pointer;
	width: 100%;
	min-height: 30px;
	background-color: rgb(47, 71, 133);
	border: 0;
	border-radius: 3px;
}
.profile-box .action-btns .left button:hover, 
.profile-box .action-btns .right button:hover, 
.profile-box .action-btns .block button:hover, 
.profile-box .action-btns .left a:hover, 
.profile-box .action-btns .right a:hover, 
.profile-box .action-btns .block a:hover {
	background-color: rgb(89, 120, 202);
}
/* modal profile achiv */
#modalAchiv {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.75);
}
	#modalAchiv .modal-achiv {
		max-width: 370px;
		margin: 5% auto;
	}
		#modalAchiv .modal-achiv .m-achiv-box {
			
		}
		#modalAchiv .modal-achiv .m-achiv-box > .head {
			background-size: cover;
			display: block;
			border-radius: 3px 3px 0 0;
			width: 100%;
			position: relative;
			background-size: 100%;
			padding-bottom: 100%;
		}
		#modalAchiv .modal-achiv .m-achiv-box > .head .close-box {
			position: absolute;
			top: 0;
			right: 0;
			padding: 10px;
			font-size: 1em;
			z-index: 15;
			cursor: pointer;
		}
		#modalAchiv .modal-achiv .m-achiv-box > .head .close-box .close {
			display: block;
			background-image: url('/image/system_icons/cross-white.svg');
			background-size: 18px;
			background-repeat: no-repeat;
			background-position: 50%;
			width: 20px;
			height: 20px;
		}
		#modalAchiv .modal-achiv .m-achiv-box > .body {
			padding: 5px;
			background-color: rgba(0, 0, 0, 0.75);
			border-radius: 0 0 3px 3px;
		}
			#modalAchiv .modal-achiv .m-achiv-box > .body .info {
				padding-top: 5px;
			}
				#modalAchiv .modal-achiv .m-achiv-box > .body .info p.label {
					font-weight: bold;
					font-size: 1.2em;
					text-align: center;
				}
				#modalAchiv .modal-achiv .m-achiv-box > .body .info p.desc {
					text-align: center;
				}
				#modalAchiv .modal-achiv .m-achiv-box > .body .info p.date_at {
					text-align: center;
					font-size: 0.9em;
					color: #ffffffbd;
					padding-top: 5px;
				}

.box-sendmoney {
	padding: 5px 10px;
	border: 2px solid #383838;
	border-radius: 3px;
	background-color: rgba(74, 74, 74, 0.5);
}
.box-sendmoney p {
	text-align: center;
}
.box-sendmoney p b {
	color: #ffdb2d;
}